195 lines
5.6 KiB
JavaScript
195 lines
5.6 KiB
JavaScript
/*
|
|
* 手太欠
|
|
* 愿这世界都如故事里一样 美好而动人~
|
|
*/
|
|
|
|
Page({
|
|
|
|
/**
|
|
* 页面的初始数据
|
|
*/
|
|
data: {
|
|
barHeight : getApp().globalData.barHeight, // 状态栏高度
|
|
shareSee : false, // 分享弹出
|
|
inviteText : '', // 邀请码
|
|
inviteCode : '', // 二维码
|
|
nickname : '', // 用户名称
|
|
invite : '', // 邀请码
|
|
//海报
|
|
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();
|
|
console.log(wx.getStorageSync("invite"))
|
|
},
|
|
|
|
/**
|
|
* 小程序码
|
|
*/
|
|
ShareInfo() {
|
|
wx.$api.user.miniShare({
|
|
url: 'pages/mall/index'
|
|
}).then(res => {
|
|
let { user_info, qrcode, invite } = res.data
|
|
this.setData({
|
|
invite : invite,
|
|
inviteCode: qrcode,
|
|
nickname : user_info.nickname
|
|
})
|
|
}).catch(err => {})
|
|
},
|
|
|
|
/**
|
|
* 检查授权信息
|
|
*/
|
|
onSetting(){
|
|
wx.getSetting({
|
|
success: res => {
|
|
if(res.authSetting['scope.writePhotosAlbum'] || res.authSetting['scope.writePhotosAlbum'] === undefined){
|
|
this.onCanvas()
|
|
return
|
|
}
|
|
wx.showModal({
|
|
title : '提示',
|
|
content : '暂未授权小程序写入您的相册，无法存储海报',
|
|
confirmColor: '#144592',
|
|
confirmText : '去设置',
|
|
success: res => {
|
|
if (res.confirm) {
|
|
wx.openSetting()
|
|
}
|
|
}
|
|
})
|
|
}
|
|
})
|
|
},
|
|
|
|
/**
|
|
* 生成海报
|
|
*/
|
|
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 //二维码
|
|
backBackEl.src = 'https://douhuo-storage.oss-cn-beijing.aliyuncs.com/images/2023/08/31/555d989b496e6d68ee8405bcae16555e.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, 570, 130, 130);
|
|
|
|
// 绘制[二维码-白色背景黑框]
|
|
ctx.strokeStyle = "#da2b54";
|
|
ctx.lineWidth = 2
|
|
ctx.strokeRect(140, 570, 132, 132);
|
|
|
|
// 绘制[二维码]
|
|
ctx.drawImage(codeImgEl, 150, 580, 110, 110)
|
|
|
|
// 文字
|
|
ctx.font = "bold 14px Arial"; //字体大小
|
|
ctx.fillStyle = "#ffffff"; //字体颜色
|
|
ctx.textAlign = "center"
|
|
ctx.fillText('保存并分享二维码', 208, 740);
|
|
|
|
// 用户昵称
|
|
ctx.font = "bold 14px Arial"; //字体大小
|
|
ctx.fillStyle = "#ffffff"; //字体颜色
|
|
ctx.textAlign = "center"
|
|
ctx.fillText(this.data.nickname, 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()
|
|
}
|
|
})
|
|
},
|
|
})
|
|
}).catch(err => {
|
|
wx.hideLoading()
|
|
wx.showToast({
|
|
title: '图片加载失败',
|
|
icon : 'none'
|
|
})
|
|
})
|
|
},
|
|
|
|
/**
|
|
* 分享弹出
|
|
*/
|
|
shareTap() {
|
|
this.setData({
|
|
shareSee: !this.data.shareSee
|
|
})
|
|
},
|
|
|
|
// 返回上一页
|
|
returnGo() {
|
|
wx.navigateBack()
|
|
},
|
|
|
|
/**
|
|
* 微信分享
|
|
*/
|
|
onShareAppMessage(){
|
|
this.setData({
|
|
shareSee: false
|
|
})
|
|
return {
|
|
title : '绚火健康，生命可以如此精彩~',
|
|
path : "/pages/mall/index?invite=" + this.data.invite,
|
|
imageUrl: "https://douhuo-storage.oss-cn-beijing.aliyuncs.com/images/2023/08/31/555d989b496e6d68ee8405bcae16555e.jpg"
|
|
}
|
|
}
|
|
}) |