// component/authorize/authorize.js
|
import utils from '../../utils/util.js'
|
const app = getApp();
|
let imgDownloadObj = {};
|
Component({
|
/**
|
* 组件的属性列表
|
*/
|
options: {
|
multipleSlots: true // 在组件定义时的选项中启用多slot支持
|
},
|
properties: {
|
qrCode:{
|
type: String,
|
value: '',
|
},
|
goodsItemImg:{
|
type: String,
|
value: '',
|
},
|
goodsItemName:{
|
type: String,
|
value: '',
|
},
|
goodsItemPrice:{
|
type: Number,
|
value: 0,
|
},
|
goodsItemSign:{
|
type: String,
|
value: '￥',
|
},
|
posterDes:{
|
type: String,
|
value: '我看上了这款商品',
|
},
|
posterDes2:{
|
type: String,
|
value: '帮我看看咋样啊~~',
|
}
|
},
|
|
/**
|
* 组件的初始数据
|
*/
|
data: {
|
maskHidden:true
|
// isAuthorize: true,
|
},
|
lifetimes: {
|
// 生命周期函数，可以为函数，或一个在methods段中定义的方法名
|
attached() {
|
imgDownloadObj = {
|
isComplete:false
|
};
|
},
|
// moved() { },
|
detached() {
|
imgDownloadObj = {
|
isComplete:false
|
};
|
},
|
// ready() {
|
|
// }
|
},
|
|
pageLifetimes: {
|
// 组件所在页面的生命周期函数
|
// show() {
|
// utils.isAuthorize(this);
|
// },
|
// hide() {
|
// },
|
// onUnload(){
|
// imgDownloadObj = {
|
// isComplete:false
|
// };
|
// },
|
},
|
|
/**
|
* 组件的方法列表
|
*/
|
methods: {
|
createCanvas(e){
|
|
wx.showToast({
|
title: '生成中...',
|
icon: 'loading',
|
mask:true,
|
duration: 10000
|
});
|
|
if (imgDownloadObj.isComplete) {
|
// wx.hideToast()
|
// let posterCreate = this.selectComponent('#posterCreate');
|
// posterCreate.formSubmit(e);
|
this.sendCommand(e);
|
} else {
|
// 下载图片到本地
|
this.downloadFile();
|
// utils.watchObj(imgDownloadObj,(prop,val)=>{
|
// console.log(JSON.stringify(imgDownloadObj)+prop+'值变化!!!','新值为'+val)
|
utils.watchObj(imgDownloadObj,'isComplete',(val)=>{
|
console.log(JSON.stringify(imgDownloadObj)+'isComplete值变化!!!','新值为'+val)
|
if (imgDownloadObj.isComplete) {
|
this.sendCommand(e);
|
}
|
// wx.hideToast()
|
// let posterCreate = this.selectComponent('#posterCreate');
|
// posterCreate.formSubmit(e);
|
|
})
|
|
}
|
|
},
|
|
sendCommand(e){
|
wx.hideToast()
|
let posterCreate = this.selectComponent('#posterCreate');
|
posterCreate.formSubmit(e);
|
},
|
compressImg(img){
|
// let img = this.data.goodsItemImg;
|
let lastIndex = img.lastIndexOf('.');
|
let ext = img.substring(lastIndex);
|
let noext = img.slice(0,lastIndex);
|
return noext.split('_')[0]+'_360x360'+ext
|
},
|
downloadFile(){
|
console.log(app.globalData.cardUserData)
|
console.log('头像',app.globalData.cardUserData.Avatar)
|
console.log('二维码',this.data.qrCode)
|
console.log('商品',this.data.goodsItemImg,this.compressImg(this.data.goodsItemImg))
|
let avatarUrl = wx.pro.downloadFile({
|
url: app.globalData.cardUserData.Avatar
|
}).then((res)=>{
|
if (res.statusCode === 200) {
|
// imgDownloadSum++;
|
console.log('......头像',res.tempFilePath)
|
this.setData({
|
avatarUrl: res.tempFilePath
|
})
|
}
|
})
|
let goodsImg = wx.pro.downloadFile({
|
url: this.compressImg(this.data.goodsItemImg)
|
}).then((res)=>{
|
if (res.statusCode === 200) {
|
// imgDownloadSum++;
|
console.log('......商品',res.tempFilePath)
|
this.setData({
|
goodsImg: res.tempFilePath
|
})
|
}
|
})
|
let qrCodeImg = wx.pro.downloadFile({
|
url: this.data.qrCode
|
}).then((res)=>{
|
if (res.statusCode === 200) {
|
console.log('......二维码',res.tempFilePath)
|
// imgDownloadSum++;
|
this.setData({
|
qrCodeImg: res.tempFilePath
|
})
|
}
|
})
|
|
Promise.all([avatarUrl,goodsImg,qrCodeImg]).then((res)=>{
|
|
imgDownloadObj.isComplete = true;
|
|
// imgDownloadObj.isComplete = true;
|
}).catch((err)=>{
|
// this.getPosterQrCode();
|
console.log('请检查名片头像、公司logo等图片是否已经配置',err)
|
// \n 点击确定重试，点击取消关闭弹窗。
|
wx.hideToast();
|
wx.showModal({
|
title:'提示',
|
content:`${err.errMsg}`,
|
showCancel:false,
|
success:(res)=>{
|
// if (res.confirm) {
|
// console.log('用户点击确定')
|
// wx.showLoading()
|
// this.downloadFile()
|
// } else if (res.cancel) {
|
// console.log('用户点击取消')
|
// }
|
|
}
|
})
|
|
})
|
|
},
|
|
createNewImg (e) {
|
console.log('createNewImg',e)
|
let posterCreate = this.selectComponent('#posterCreate');
|
let goodsItemName = this.data.goodsItemName;
|
let context = e.detail.context;
|
// let childComp = e.detail.childComp;
|
// let context = wx.createCanvasContext('mycanvas');
|
context.clearRect(0, 0, 375, 667);
|
context.setFillStyle("#fff");
|
context.fillRect(0, 0, 375, 667)
|
// let path = "../../imgs/gobg.png";
|
// //不知道是什么原因，手机环境能正常显示
|
// context.drawImage(path, 0, 0, 375, 183);
|
let avatarImg = this.data.avatarUrl;
|
console.log(avatarImg,"avatarImg")
|
// let path2 = "../../imgs/chengzhong.png";
|
let goodsImg = this.data.goodsImg;
|
let qrCodeImg = this.data.qrCodeImg;
|
console.log('将生成好的图片保存到本地',avatarImg,goodsImg,qrCodeImg)
|
// let path5 = "../../imgs/computer.png";
|
// context.drawImage(path2, 126, 186, 120, 120);
|
// context.save(); // 保存当前context的状态
|
|
//绘制文字
|
context.beginPath()
|
context.setFontSize(16);
|
context.setFillStyle('#333333');
|
context.setTextAlign('left');
|
context.fillText(this.data.posterDes, 140, 50);
|
context.stroke();
|
context.setFontSize(16);
|
context.setFillStyle('#333333');
|
context.setTextAlign('left');
|
context.fillText(this.data.posterDes2, 140, 85);
|
context.stroke();
|
context.closePath();
|
//绘制商品
|
context.drawImage(goodsImg, 48, 125, 280, 280);
|
// 商品文字
|
context.beginPath();
|
if (goodsItemName) {
|
context.setFontSize(16);
|
context.setFillStyle('#333333');
|
context.setTextAlign('left');
|
var result = posterCreate.breakLinesForCanvas(context,
|
goodsItemName.slice(0,40),
|
220, 14);
|
var lineHeight = 25;
|
result.forEach(function(line, index) {
|
context.fillText(line, 50, lineHeight * index + 435);
|
// context.fillText("商品描述", 50, 445);
|
});
|
}
|
|
|
if (this.data.goodsItemPrice) {
|
context.stroke();
|
context.setFontSize(32);
|
context.setFillStyle('#f23232');
|
context.setTextAlign('left');
|
context.fillText(this.data.goodsItemSign+this.data.goodsItemPrice, 45, 495);
|
context.stroke();
|
}
|
|
|
context.closePath();
|
|
// 绘制分割线
|
context.beginPath()
|
context.strokeStyle='#ddd'
|
context.moveTo(10, 520)
|
context.lineTo(365, 520)
|
context.stroke()
|
context.closePath();
|
//绘制code码
|
// context.setFontSize(40);
|
// context.setFillStyle('#ffe200');
|
// context.setTextAlign('center');
|
// context.fillText(that.data.code, 185, 435);
|
// context.stroke();
|
//绘制左下角二维码
|
context.drawImage(qrCodeImg, 20, 530, 120, 120);
|
|
//绘制右下角扫码提示语
|
// context.drawImage(path5, 248, 578, 90, 25);
|
context.setFontSize(16);
|
context.setFillStyle('#333');
|
context.setTextAlign('left');
|
context.fillText("长按识别小程序码 即可查看~",150, 600);
|
context.stroke();
|
//绘制头像
|
context.arc(80, 60, 40, 0, 2 * Math.PI) //画出圆
|
context.strokeStyle = "#ffe200";
|
context.clip(); //裁剪上面的圆形
|
context.drawImage(avatarImg, 40, 20, 80, 80); // 在刚刚裁剪的园上画图
|
context.draw();
|
//将生成好的图片保存到本地，需要延迟一会，绘制期间耗时
|
setTimeout(()=> {
|
posterCreate.createPoster();
|
// console.log('将生成好的图片保存到本地',avatarImg,goodsImg,qrCodeImg)
|
}, 300);
|
},
|
|
}
|
})
|
