187 lines
5.5 KiB
JavaScript
187 lines
5.5 KiB
JavaScript
// pages/report/share/share.js
|
||
Page({
|
||
|
||
/**
|
||
* 页面的初始数据
|
||
*/
|
||
data: {
|
||
barHeight : getApp().globalData.statusBarHeight, // 状态栏高度
|
||
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.home().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://api.siyuankunlun.com/storage/images/2023/11/17/1d57a567ca458f3cc162655cf9201bda.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, 530);
|
||
|
||
// 文字
|
||
ctx.font = "15px Arial"; //字体大小
|
||
ctx.fillStyle = "#000000"; //字体颜色
|
||
ctx.textAlign = "center"
|
||
ctx.fillText('上传舌照 快速检测 专业分析', 190, 573);
|
||
|
||
// 文字
|
||
ctx.font = "14px Arial"; //字体大小
|
||
ctx.fillStyle = "#666666"; //字体颜色
|
||
ctx.textAlign = "center"
|
||
ctx.fillText('舌形、舌色、苔质、苔色、微量元素等~', 188, 605);
|
||
|
||
// 文字
|
||
ctx.font = "15px Arial"; //字体大小
|
||
ctx.fillStyle = "#000000"; //字体颜色
|
||
ctx.fillText('锶源昆仑，舌诊评估检测', 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=" + this.data.userData.invite,
|
||
imageUrl: "https://api.siyuankunlun.com/storage/images/2023/11/13/e6c4ba347287a6234864adcb88e04e1e.png"
|
||
}
|
||
}
|
||
}) |