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(); } })
微信小程序 分享海报
猜你喜欢
转载自www.cnblogs.com/zhenga/p/10460299.html
今日推荐
周排行