const app = getApp();
const template = require('../../template/templates.js');
Page({
/**
* 页面的初始数据
*/
data: {
hidden: true,
dataList: {
img_bg: '../../img/share_picture/shareListPicbg1.jpg',
title: '',
img: '',
qrCodeUrl: '',
plusPrice: null, //PLUS价格
faceValue: null, //代金券面值
},
referrerVOid: null,
saveImgBtnHidden: false,
openSettingBtnHidden: true,
referrerVOidShow: ""
},
getVouchersId: function(vouchersId) {
wx.request({
url: app.data.urls + 'vouchers/detail/id',
data: vouchersId,
method: "POST",
header: {
'content-type': 'application/json' // 默认值
},
success: (res) => {
console.log(res)
let dataList = this.data.dataList,
data = {
status: 1,
customerId: app.data.customerId,
type: 1
}
dataList.name = res.data.data.restaurant.name;
if (dataList.name.length > 10) {
dataList.name = `${dataList.name.substr(0, 9)}...`;
}
let payMoney = res.data.data.deductionPrice / 100,
useDiscountPrice = res.data.data.useDiscountPrice / 100;
//plus价格
let price = res.data.data.vipcardPrice / 100;
//地址 和电话
let address = res.data.data.restaurant.address;
let moblie = `电话:${res.data.data.restaurant.moblie}`;
dataList.address = address
dataList.moblie = moblie
dataList.content = `立省${payMoney - price}元`;
dataList.originalCost = `原价:${payMoney}元`;
dataList.realPrice = `${price}元`;
dataList.useDiscountPrice = `( 消费满${useDiscountPrice}元可用 )`;
dataList.deductionPriceShow = `${payMoney}元代金券`;
template.getDistributorMsg(data, res => {
console.log(res)
this.setData({
plusPrice: price,
faceValue: payMoney,
referrerVOidShow: res.data.data.referrerVO.id,
// referrerVOid: res.data.data.referrerVO.id
})
this.referrerGenQRCode(vouchersId, res.data.data.referrerVO.id, res => {
// 获取店铺或者二维码
console.log(res)
let qrCodeUrl = `https://www.yooeepoint.com.cn${res.data.localQrCodeUrl}`; // 小程序二维码
let img = `https://www.yooeepoint.com.cn${res.data.localTitleImageUrl}` // 店铺图片
//背景图片
let vouchers_background = 'https://www.yooeepoint.com.cn/images/vouchers_background.png'
this.downLoadImage(qrCodeUrl, res => { // 网络图片下载本地(canvas限制图片使用本地路径)
dataList.qrCodeUrl = res.tempFilePath;
this.downLoadImage(img, res => {
dataList.img = res.tempFilePath;
this.downLoadImage(vouchers_background, res => {
dataList.vouchers_background = res.tempFilePath; //背景图片
this.getSystemInfo(res => {
dataList.windowWidth = res.windowWidth
dataList.windowHeight = res.windowHeight
this.creatCanvas(dataList);
})
})
})
})
})
})
}
})
},
// 绘制分享图片
creatCanvas: function(data) {
const ctx = wx.createCanvasContext('shareImg');
//背景图
// ctx.setFillStyle('#fff')
// ctx.fillRect(0, 0, data.windowWidth, data.windowHeight * 0.78)
ctx.drawImage(data.vouchers_background, 0, 0, data.windowWidth, data.windowHeight);
//banner图
//banner图
ctx.drawImage(data.img, 0, 10, data.windowWidth, data.windowHeight * 0.315);
//店铺名称
ctx.setFontSize(data.windowWidth / (750 / 35));
ctx.setTextAlign('center');
ctx.setFillStyle('#000000');
ctx.fillText(data.name, data.windowWidth / 2, data.windowHeight * 0.39 + 6);
//多少元代金券
ctx.setFontSize(data.windowWidth / (750 / 30));
ctx.setTextAlign('center');
ctx.setFillStyle('#000000');
ctx.fillText(data.deductionPriceShow, data.windowWidth / 2, data.windowHeight * 0.39 + 30);
// 满减条件
ctx.setFillStyle('#000000');
ctx.setFontSize(data.windowWidth / (750 / 25));
ctx.fillText(data.useDiscountPrice, data.windowWidth / 2, data.windowHeight * 0.39 + 45);
//原价
ctx.setFontSize(data.windowWidth / (750 / 22));
ctx.setFillStyle('#666666');
ctx.fillText(data.originalCost, data.windowWidth / 2 + 120, data.windowHeight * 0.50);
// 立省
ctx.setFillStyle('#f10c0c');
ctx.setFontSize(data.windowWidth / (750 / 22));
ctx.fillText(data.content, data.windowWidth / 2 + 120, data.windowHeight * 0.50+ 15);
// plus价
ctx.setFontSize(data.windowWidth / (750 / 55));
ctx.setFillStyle('#f10c0c');
ctx.fillText(data.realPrice, data.windowWidth / 2, data.windowHeight * 0.60-15 );
// 地址和电话
ctx.setFontSize(data.windowWidth / (750 / 25));
ctx.setFillStyle('#323232');
ctx.fillText(data.address, data.windowWidth / 2, data.windowHeight *0.60+15);
ctx.setFontSize(data.windowWidth / (750 / 20));
ctx.setFillStyle('#323232');
ctx.fillText(data.moblie, data.windowWidth / 2, data.windowHeight *0.60+35);
// 二维码图
ctx.drawImage(data.qrCodeUrl, data.windowWidth * 0.38-2, data.windowHeight * 0.73, data.windowWidth * 0.25, data.windowWidth * 0.25);
// tip
ctx.setTextAlign('center');
ctx.setFillStyle('#fff');
ctx.setFontSize(data.windowWidth / (750 / 22));
ctx.fillText("长按识别图中小程序码购买", data.windowWidth / 2, data.windowHeight * 0.95);
// tip
ctx.setTextAlign('center');
ctx.setFillStyle('#fff');
ctx.setFontSize(data.windowWidth / (750 / 18));
ctx.fillText("想要吃点喝点,首选搜城天下", data.windowWidth / 2, data.windowHeight * 0.97);
//
// ctx.setTextAlign('right');
// ctx.setFillStyle('#282828');
// ctx.setFontSize(data.windowWidth / (750 / 22));
// ctx.fillText("长按识别二维码", data.windowWidth * 0.89, data.windowHeight * 0.60 + 35);
//结束绘制/展示
ctx.stroke();
ctx.draw(false, () => {
this.toShare();
});
},
// 获取二维码/店铺图片
referrerGenQRCode: function(vouchersId, referrerId, successCallBack) {
let data = {
referrerId: referrerId,
serviceType: 3,
vouchersId: vouchersId
}
wx.request({
url: app.data.urls + `html5/toShareImagePage`,
data: data,
method: 'POST',
success: (res) => {
successCallBack(res)
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
wx.showLoading({
title: '加载中',
mask: true
});
console.log(options)
this.getVouchersId(options.vouchersId)
console.log(options.referrerId)
this.setData({
vouchersId: options.vouchersId,
referrerVOid: options.referrerId,
partnersId: options.partnersId,
isFreeObtain: options.isFreeObtain,
restaurantId: options.restaurantId
})
console.log(this.data.referrerVOid)
// 初始化数据
},
// 动态设置画布宽高
getSystemInfo: function(successCallBack) {
wx.getSystemInfo({
success: (res) => {
successCallBack(res)
}
})
},
// 网络图片下载本地(canvas限制图片使用本地路径)
downLoadImage: function(data, successCallBack) {
wx.downloadFile({
url: data,
success: function(res) {
successCallBack(res)
}
})
},
// 分享图片生成后展示
toShare: function() {
wx.canvasToTempFilePath({
x: 0,
y: 0,
canvasId: 'shareImg',
success: (res) => {
console.log(res)
wx.hideLoading();
this.setData({
prurl: res.tempFilePath,
hidden: false
})
}
})
},
// 分享图片保存到相册
savePic: function() {
let that = this
wx.getSetting({
success: res => {
if (!res.authSetting['scope.writePhotosAlbum']) { //用户同意授权
wx.authorize({
scope: 'scope.writePhotosAlbum',
success: () => {
this.saveImageToPhotosAlbum();
},
fail: () => { //这里是用户拒绝授权后的回调
that.setData({
saveImgBtnHidden: true,
openSettingBtnHidden: false
})
}
})
} else { //用户已经授权过
this.saveImageToPhotosAlbum();
}
}
})
},
saveImageToPhotosAlbum: function() {
wx.saveImageToPhotosAlbum({
filePath: this.data.prurl,
success(res) {
this.onShareAppMessage()
}
})
},
handleSetting: function(e) {
let that = this;
// 对用户的设置进行判断,如果没有授权,即使用户返回到保存页面,显示的也是“去授权”按钮;同意授权之后才显示保存按钮
if (!e.detail.authSetting['scope.writePhotosAlbum']) {
wx.showModal({
title: '提示',
content: '若不打开授权,则无法将图片保存在相册中!',
showCancel: false
})
that.setData({
saveImgBtnHidden: true,
openSettingBtnHidden: false
})
} else {
wx.showModal({
title: '提示',
content: '您已授权,赶紧将图片保存在相册中吧!',
showCancel: false
})
that.setData({
saveImgBtnHidden: false,
openSettingBtnHidden: true
})
}
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
// return {
// title: '【搜城天下】' + this.data.dataList.name,
// path: '/pages/goinSharePic/goinSharePic?vouchersId=' + this.data.vouchersId + "&referrerVOid=" + this.data.referrerVOid,
// imageUrl: this.data.prurl
// }
console.log("kankan" + this.data.referrerVOidShow)
return {
title: '【' + this.data.plusPrice + '元抢购】' + this.data.faceValue + '元代金券',
path: '/pages/vouchersDetails/vouchersDetails?vouchersId=' + this.data.vouchersId + "&referrerId=" + this.data.referrerVOidShow + '&restaurantId=' + this.data.restaurantId + '&isFreeObtain=' + this.data.isFreeObtain + '&partnersId=' + this.data.partnersId,
imageUrl: this.data.prurl
}
},
onReady: function() {
wx.hideLoading();
}
})