/* * 手太欠 * 愿这世界都如故事里一样 美好而动人~ */ Page({ /** * 页面的初始数据 */ data: { barHeight : getApp().globalData.barHeight, // 状态栏高度 shareSee : false, //分享弹出 inviteText : '', //邀请码 inviteCode : '', //二维码 //海报 canvas : '' }, /** * 生命周期函数--监听页面加载 */ onLoad(options) { // 初始化画布 wx.createSelectorQuery().select('#coverCanvas').fields({node: true, size: true}).exec(canvasNode => { const canvas = canvasNode[0].node canvas.width = 375 canvas.height = 800 this.setData({ canvas }) }) }, /** * 生命周期函数--监听页面显示 */ onShow() { // 小程序码 this.ShareInfo(); }, /** * 小程序码 */ ShareInfo() { wx.$api.user.miniShare({ url: 'pages/mall/index' }).then(res => { this.setData({ inviteCode: res.data.qrcode }) }).catch(err => {}) }, /** * 生成海报 */ onCanvas(){ wx.showLoading({ title: '生成图片中...', mask : true }) const canvas = this.data.canvas const ctx = canvas.getContext('2d') const codeImgEl = canvas.createImage() const backBackEl = canvas.createImage() // codeImgEl.src = this.data.inviteCode //二维码 codeImgEl.src = '/static/imgs/userHead.png' //二维码 backBackEl.src = 'https://cdn.douhuofalv.com/images/2023/08/11/cd8093d6ab1a248e5154be48b0ddcaac.jpg' //背景素材 const codeImgLoding = new Promise((resolve, reason) => { codeImgEl.onload = () => { resolve() } }) const backBackLoding = new Promise((resolve, reason) => { backBackEl.onload = () => { resolve() } }) Promise.all([codeImgLoding, backBackLoding]).then(() => { ctx.drawImage(backBackEl, 0, 0, 375, 800) // 绘制[二维码-白色背景] ctx.fillStyle = "#ffffff"; ctx.fillRect(140, 610, 130, 130); // 绘制[二维码-白色背景黑框] ctx.strokeStyle = "#da2b54"; ctx.lineWidth = 2 ctx.strokeRect(140, 610, 132, 132); // 绘制[二维码] ctx.drawImage(codeImgEl, 150, 620, 110, 110) // 文字 ctx.font = "bold 14px Arial"; //字体大小 ctx.fillStyle = "#ffffff"; //字体颜色 ctx.textAlign = "center" ctx.fillText('保存并分享二维码', 208, 770); wx.hideLoading() wx.canvasToTempFilePath({ canvas: this.data.canvas, success : res => { wx.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success: saveRes => { wx.showToast({ title: '海报已保存至您的相册', icon : 'none' }) this.setData({ shareSee: false }) }, fail: () => { wx.hideLoading() wx.showModal({ title: '提示', content: '暂未授权小程序写入您的相册,无法存储海报', confirmColor: '#e50d01', confirmText: '去设置', success: res => { if (res.confirm) { wx.openSetting() } } }) } }) }, }) }).catch(err => { wx.showToast({ title: '图片加载失败', icon : 'none' }) }) }, /** * 分享弹出 */ shareTap() { this.setData({ shareSee: !this.data.shareSee }) }, // 返回上一页 returnGo() { wx.navigateBack() }, /** * 微信分享 */ onShareAppMessage(){ this.setData({ shareSee: false }) return { title : '水感应修复、紧致、舒缓喷雾', path : "/pages/index/index?invite=" + wx.getStorageSync("invite"), imageUrl: "https://cdn.shuiganying.com/images/2023/04/04/9cd9968136e7efd85028fba69e4c587a.jpg" } } })