[最新]
This commit is contained in:
@@ -1,68 +1,72 @@
|
||||
|
||||
/*
|
||||
* 手太欠
|
||||
* 愿这世界都如故事里一样 美好而动人~
|
||||
*/
|
||||
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
barHeight : getApp().globalData.barHeight, // 状态栏高度
|
||||
shareSee : false, // 分享弹出
|
||||
inviteText : '', // 邀请码
|
||||
inviteCode : '', // 二维码
|
||||
nickname : '', // 用户名称
|
||||
invite : '', // 邀请码
|
||||
//海报
|
||||
canvas : ''
|
||||
nameInfo: '', // 用户名
|
||||
invite : '', // 邀请码
|
||||
qrcode : '', // 二维码
|
||||
posters : [], // 海报数组
|
||||
current : 0, // 选项卡下标
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
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"))
|
||||
},
|
||||
onLoad() {
|
||||
let miniShareFun = wx.$api.user.poster({ url: 'pages/mall/index' })
|
||||
// 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
|
||||
// })
|
||||
// })
|
||||
|
||||
/**
|
||||
* 小程序码
|
||||
*/
|
||||
ShareInfo() {
|
||||
wx.$api.user.miniShare({
|
||||
url: 'pages/mall/index'
|
||||
}).then(res => {
|
||||
let { user_info, qrcode, invite } = res.data
|
||||
wx.showLoading({
|
||||
title: '加载中...',
|
||||
mask : true
|
||||
})
|
||||
|
||||
Promise.all([miniShareFun]).then(res => {
|
||||
let miniShareData = res[0].data
|
||||
this.setData({
|
||||
invite : invite,
|
||||
inviteCode: qrcode,
|
||||
nickname : user_info.nickname
|
||||
nameInfo : miniShareData.name,
|
||||
posters : miniShareData.posters,
|
||||
qrcode : miniShareData.qrcode,
|
||||
invite : miniShareData.invite,
|
||||
current : 0
|
||||
})
|
||||
}).catch(err => {})
|
||||
// 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
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 检查授权信息
|
||||
*/
|
||||
onSetting(){
|
||||
onCheckSetting(){
|
||||
wx.getSetting({
|
||||
success: res => {
|
||||
if(res.authSetting['scope.writePhotosAlbum'] || res.authSetting['scope.writePhotosAlbum'] === undefined){
|
||||
@@ -89,96 +93,102 @@ Page({
|
||||
*/
|
||||
onCanvas(){
|
||||
wx.showLoading({
|
||||
title: '生成图片中...',
|
||||
title: '加载中...',
|
||||
mask : true
|
||||
})
|
||||
const canvas = this.data.canvas
|
||||
const ctx = canvas.getContext('2d')
|
||||
const codeImgEl = canvas.createImage()
|
||||
const backBackEl = canvas.createImage()
|
||||
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].qrcode.y
|
||||
let posterX = this.data.posters[this.data.current].qrcode.x
|
||||
let qrcodeSize = this.data.posters[this.data.current].qrcode.size
|
||||
let qrcodeSrc = this.data.qrcode
|
||||
let nameY = this.data.posters[this.data.current].font.font_y
|
||||
let nameColor = this.data.posters[this.data.current].font.font_color
|
||||
|
||||
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);
|
||||
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
|
||||
|
||||
// 绘制[二维码-白色背景黑框]
|
||||
ctx.strokeStyle = "#da2b54";
|
||||
ctx.lineWidth = 2
|
||||
ctx.strokeRect(140, 570, 132, 132);
|
||||
// 设置画布
|
||||
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 = () => {
|
||||
var x = (posterX - 0 + 60);
|
||||
var y = (nameY - 0 + 20);
|
||||
|
||||
// 绘制[二维码]
|
||||
ctx.drawImage(codeImgEl, 150, 580, 110, 110)
|
||||
//绘制字体
|
||||
ctx.font = '22px "微软雅黑"';
|
||||
ctx.fillStyle = nameColor;
|
||||
ctx.textAlign = "center";
|
||||
ctx.fillText(this.data.nameInfo, x, y);
|
||||
// ctx.arc( posterX + qrcodeSize/2, posterY + qrcodeSize/2, qrcodeSize/2 + 5, 0, 2 * Math.PI, false);
|
||||
ctx.arc(Number(posterX) + qrcodeSize/2, Number(posterY) + Number(qrcodeSize/2), Number(qrcodeSize/2 + 5), 0, 2 * Math.PI,true);
|
||||
ctx.fillStyle = "#ffffff";
|
||||
ctx.fill();
|
||||
ctx.drawImage(code, posterX, posterY, qrcodeSize, qrcodeSize)
|
||||
|
||||
// 文字
|
||||
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'
|
||||
// 保存海报
|
||||
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()
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
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()
|
||||
},
|
||||
|
||||
/**
|
||||
* 微信分享
|
||||
*/
|
||||
@@ -187,9 +197,8 @@ Page({
|
||||
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"
|
||||
title : '绚火健康品牌主张',
|
||||
path : "/pages/mall/index?invite=" + this.data.invite
|
||||
}
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user