189 lines
6.9 KiB
JavaScript
189 lines
6.9 KiB
JavaScript
|
|
/*
|
|
* 手太欠
|
|
* 愿这世界都如故事里一样 美好而动人~
|
|
*/
|
|
|
|
Page({
|
|
/**
|
|
* 页面的初始数据
|
|
*/
|
|
data: {
|
|
nameInfo: '', // 用户名
|
|
invite : '', // 邀请码
|
|
qrcode : '', // 二维码
|
|
posters : [], // 海报数组
|
|
current : 0, // 选项卡下标
|
|
},
|
|
/**
|
|
* 生命周期函数--监听页面显示
|
|
*/
|
|
onLoad() {
|
|
let miniShareFun = wx.$api.user.poster({ type: '2' })
|
|
// wx.$api.user.poster({ url: 'pages/mall/index' }).then(res => {
|
|
// console.log(res.data)
|
|
// this.setData({
|
|
// nameInfo : res.data.name,
|
|
// posters : res.data.posters,
|
|
// qrcode : res.data.qrcode
|
|
// })
|
|
// })
|
|
|
|
wx.showLoading({
|
|
title: '加载中...',
|
|
mask : true
|
|
})
|
|
|
|
Promise.all([miniShareFun]).then(res => {
|
|
let miniShareData = res[0].data
|
|
this.setData({
|
|
posters : miniShareData.posters,
|
|
qrcode : miniShareData.qrcode,
|
|
invite : miniShareData.invite,
|
|
current : 0
|
|
})
|
|
// wx.getImageInfo({
|
|
// src : miniShareData.qrcode,
|
|
// success : qrcodePath => {
|
|
// this.setData({
|
|
// qrcode : qrcodePath.path,
|
|
// posters : miniShareData.posters,
|
|
// nameName : miniShareData.name,
|
|
// current: 0
|
|
// })
|
|
// }
|
|
// })
|
|
wx.hideLoading()
|
|
})
|
|
},
|
|
swiperChange(e) {
|
|
let index = e.detail.current
|
|
this.setData({
|
|
current: index
|
|
})
|
|
},
|
|
/**
|
|
* 检查授权信息
|
|
*/
|
|
onCheckSetting(){
|
|
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
|
|
})
|
|
wx.getImageInfo({
|
|
src: this.data.posters[this.data.current].cover,
|
|
success: imgInfo => {
|
|
wx.hideLoading()
|
|
wx.showLoading({
|
|
title : '生成海报中...',
|
|
mask : true
|
|
})
|
|
let posterSrc = imgInfo.path
|
|
let posterW = this.data.posters[this.data.current].width
|
|
let posterH = this.data.posters[this.data.current].height
|
|
let posterY = this.data.posters[this.data.current].position.y
|
|
let posterX = this.data.posters[this.data.current].position.x
|
|
let qrcodeSize = this.data.posters[this.data.current].position.size
|
|
let qrcodeSrc = this.data.qrcode
|
|
|
|
wx.createSelectorQuery().select('#canvas').fields({ node: true, size: true }).exec(res => {
|
|
const canvas = res[0].node;
|
|
const ctx = canvas.getContext("2d");
|
|
const img = canvas.createImage()
|
|
const code = canvas.createImage()
|
|
const dpr = wx.getSystemInfoSync().pixelRatio
|
|
|
|
// 设置画布
|
|
canvas.width = posterW * dpr
|
|
canvas.height = posterH * dpr
|
|
ctx.scale(dpr, dpr)
|
|
// 清理画布
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height)
|
|
// 绘制背景
|
|
img.src = posterSrc
|
|
img.onload = () => {
|
|
ctx.drawImage(img, 0, 0, posterW, posterH)
|
|
|
|
// 绘制图片二维码
|
|
code.src = qrcodeSrc
|
|
code.onload = () => {
|
|
ctx.arc( posterX + qrcodeSize/2, posterY + qrcodeSize/2, qrcodeSize/2 + 5, 0, 2 * Math.PI );
|
|
ctx.fillStyle = "#ffffff";
|
|
ctx.fill();
|
|
ctx.drawImage(code, posterX, posterY, qrcodeSize, qrcodeSize)
|
|
|
|
// 保存海报
|
|
wx.canvasToTempFilePath({
|
|
canvas : canvas,
|
|
width : canvas.width,
|
|
height : canvas.height,
|
|
destWidth : canvas.width,
|
|
destHeight : canvas.height,
|
|
quality : 1,
|
|
success : paths => {
|
|
wx.saveImageToPhotosAlbum({
|
|
filePath: paths.tempFilePath,
|
|
success: res => {
|
|
wx.showToast({
|
|
title : '海报已保存',
|
|
})
|
|
}
|
|
})
|
|
},
|
|
fail: () => {
|
|
wx.hideLoading()
|
|
wx.showModal({
|
|
title: '提示',
|
|
content: '暂未授权小程序写入您的相册，无法存储海报',
|
|
confirmColor: '#e50d01',
|
|
confirmText: '去设置',
|
|
success: res => {
|
|
if (res.confirm) {
|
|
wx.openSetting()
|
|
}
|
|
}
|
|
})
|
|
}
|
|
})
|
|
}
|
|
}
|
|
})
|
|
}
|
|
})
|
|
},
|
|
|
|
/**
|
|
* 微信分享
|
|
*/
|
|
onShareAppMessage(){
|
|
return {
|
|
title : '水感应修复、紧致、舒缓喷雾',
|
|
path : "/pages/index/index?invite=" + this.data.invite
|
|
}
|
|
}
|
|
}) |