193 lines
5.7 KiB
JavaScript
193 lines
5.7 KiB
JavaScript
// pages/report/share/share.js
|
||
Page({
|
||
|
||
/**
|
||
* 页面的初始数据
|
||
*/
|
||
data: {
|
||
barHeight : getApp().globalData.barHeight, // 状态栏高度
|
||
userData : '', // 用户信息
|
||
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();
|
||
|
||
// 获取用户信息
|
||
this.userInfo();
|
||
},
|
||
|
||
/**
|
||
* 小程序码
|
||
*/
|
||
ShareInfo() {
|
||
wx.$api.user.miniShare({
|
||
url: '/pages/index/index'
|
||
}).then(res => {
|
||
this.setData({
|
||
inviteCode: res.data.qrcode
|
||
})
|
||
}).catch(err => {})
|
||
},
|
||
|
||
/**
|
||
* 用户信息
|
||
*/
|
||
userInfo() {
|
||
wx.$api.user.userIndex().then(res => {
|
||
this.setData({
|
||
userData : res.data
|
||
})
|
||
}).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 //二维码
|
||
backBackEl.src = 'https://cdn.shuiganying.com/images/2023/04/04/1b1781214a4b34bb37948d2adb86f142.png' //背景素材
|
||
|
||
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.drawImage(codeImgEl, 260, 650, 80, 80)
|
||
|
||
// 文字
|
||
ctx.font = "bold 20px Arial"; //字体大小
|
||
ctx.fillStyle = "#3b7cff"; //字体颜色
|
||
ctx.textAlign = "center"
|
||
ctx.fillText('水感应 | AI测肤', 190, 510);
|
||
|
||
// 文字
|
||
ctx.font = "15px Arial"; //字体大小
|
||
ctx.fillStyle = "#000000"; //字体颜色
|
||
ctx.textAlign = "center"
|
||
ctx.fillText('基于强大人脸算法，深度图像学习能力', 190, 543);
|
||
|
||
// 文字
|
||
ctx.font = "15px Arial"; //字体大小
|
||
ctx.fillStyle = "#000000"; //字体颜色
|
||
ctx.textAlign = "center"
|
||
ctx.fillText('准确分析皮肤状态，针对性发现皮肤问题', 188, 565);
|
||
|
||
// 文字
|
||
ctx.font = "14px Arial"; //字体大小
|
||
ctx.fillStyle = "#666666"; //字体颜色
|
||
ctx.textAlign = "center"
|
||
ctx.fillText('肤质、肤色、肤龄、皱纹、毛孔、黑头等~', 188, 595);
|
||
|
||
// 文字
|
||
ctx.font = "15px Arial"; //字体大小
|
||
ctx.fillStyle = "#000000"; //字体颜色
|
||
ctx.fillText('参与测试成为VIP立享VIP权益！', 145, 682);
|
||
|
||
// 文字
|
||
ctx.font = "15px Arial"; //字体大小
|
||
ctx.fillStyle = "#000000"; //字体颜色
|
||
ctx.fillText('活动火爆，先到先得哦~', 120, 713);
|
||
|
||
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'
|
||
})
|
||
})
|
||
},
|
||
|
||
/**
|
||
* 返回上一页
|
||
*/
|
||
returnGo() {
|
||
wx.navigateBack({
|
||
delta: 1
|
||
})
|
||
},
|
||
|
||
/**
|
||
* 微信分享
|
||
*/
|
||
onShareAppMessage(){
|
||
return {
|
||
title : this.data.userData.nickname + '：' + '邀请您一起AI测肤',
|
||
path : "/pages/index/index?invite=" + wx.getStorageSync("invite"),
|
||
imageUrl: "https://cdn.shuiganying.com/images/2023/04/04/382850bdd565b1a687e4547c5c4de0f7.png"
|
||
}
|
||
}
|
||
}) |