// mycomponent/temp/qrcode/qrcode.js var app = getApp(); var posterBehavior = require('../../../poster/poster.js'); Component({ behaviors: [posterBehavior], /** * 组件的属性列表 */ properties: { store_alone_temp: { // 门店独立判断 type: null, } }, /** * 组件的初始数据 */ data: { poster_id: 0, step: 1, is_new: 0 }, ready() { // this.getPosterPic(); }, /** * 组件的方法列表 */ methods: { async getPosterPic() { let posterSize = await this.getMyCanvasMessage(640, 1008); this.setData({ canvasWidth: posterSize.width, canvasHeight: posterSize.height }); let urlStr = app.getNetAddresss("member.qrcode.get-poster"); if (this.data.store_alone_temp == 1) { urlStr = app.getNetAddresss("plugin.store-alone-temp.frontend.qrcode.get-poster"); } if(this.data.poster_id) { urlStr = urlStr+'&poster_id='+this.data.poster_id; } app._getNetWork({ showToastIn: false, url: urlStr, success: (resdata) => { let res = resdata.data; if (res.result != 1) { return; } if (res.data.center_show == 0) { this.setData({ loading: 100, poster: res.data.image_url, }); } else if (res.data.center_show == 1) { this.data.poster_id = res.data.id; if (res.data.new && res.data.new == true) { this.data.is_new = 1; this.startDrawCanvas(posterSize, res.data); } else { this.startOldDrawCanvas(posterSize, res.data); } } else if (res.data.center_show == 2) { this.getPosterTp2(); } } }); }, getPosterTp2() { let that = this; let urlStr = app.getNetAddresss("member.poster"); app._getNetWork({ url: urlStr, success: (resdata) => { var res = resdata.data; if (res.result == 1) { if (res.data.image_url == "" || res.data.image_url == null) { wx.showToast({ title: '请稍等' + res.data.image_url, icon: 'none', duration: 2000 }); setTimeout(() => { this.getPosterTp2(); }, 500); } else if (res.data.image_url != "") { setTimeout(() => { that.setData({ poster: res.data.image_url, }); }, 2000); } } else { wx.showToast({ title: res.msg, icon: 'none', duration: 1500 }); } }, fail: function (res) { if (this.data.timer) { clearInterval(this.data.timer); } wx.hideLoading({}); } }); }, async startDrawCanvas(posterSize, posterData) { const ctx = wx.createCanvasContext('myCanvas', this); ctx.save(); this.drawRoundRectPath(ctx, posterSize.width, posterSize.height, 30); ctx.setFillStyle('#fff'); ctx.fillRect(0, 0, posterSize.width, posterSize.height); //ctx.draw(); //下载背景 let bgImg = await this.downImage({src:posterData.background}); //let bgImg = await this.readDownPicInfo(posterData.background); //绘制背景图片 this.setProportion(posterSize, bgImg); this.drawCanvasImage(ctx, { left: 0, top: 0, width: bgImg.width / this.data.step, height: bgImg.height / this.data.step, img: bgImg.img }); this.setData({ loading: 10 }); //绘制其他内容 let otherData = posterData.style_data; for (let i = 0; i < otherData.length; i++) { let item = otherData[i]; //绘制昵称 if (item.type == "nickname" || item.type == "invite" || item.type == "text" || item.type == "mid") { this.drawCanvasText(ctx, item); } else if (item.type == "img" || item.type == "head" || item.type == "qr" || item.type == "shopqr") { // 代表后台有图片 // //下载和读取图片 if (item.src) { let file = await this.downImage(item); item.img = file.img; this.drawCanvasImage(ctx, item); } } let loading = parseInt((80 / otherData.length) * (i + 1)); this.setData({ loading: loading + 10 }); } ctx.draw(false, setTimeout(async () => { let img = await this.toimage('myCanvas', posterSize); this.setData({ loading: 100, poster: img, }); this.upQrcodeImg(img); }, 1000)); }, //工具 //开始绘制,兼容旧版本 async startOldDrawCanvas(posterSize, posterData) { const ctx = wx.createCanvasContext('myCanvas', this); ctx.save(); this.drawRoundRectPath(ctx, posterSize.width, posterSize.height, 30); ctx.setFillStyle('#fff'); ctx.fillRect(0, 0, posterSize.width, posterSize.height); //ctx.draw(); //下载背景 let bgImg = await this.downImage({src:posterData.background}); // let bgImg = await this.readDownPicInfo(posterData.background); //绘制背景图片 this.setProportion(posterSize, bgImg); this.drawCanvasImage(ctx, { left: 0, top: 0, width: bgImg.width / this.data.step, height: bgImg.height / this.data.step, img: bgImg.img }); this.setData({ loading: 10 }); //绘制其他内容 let otherData = posterData.style_data; for (let i = 0; i < otherData.length; i++) { let item = otherData[i]; //绘制昵称 if (item.type == "nickname") { this.drawCanvasText(ctx, item); } else if (item.type == "img" || item.type == "head") { // 代表后台有图片 // //下载和读取图片 if (item.src) { let file = await this.downImage(item); item.img = file.img; this.drawCanvasImage(ctx, item); } } else if (item.type == "qr_shop" || item.type == "qr_app_share") { //需要自己将链接生成二维码 let img = await this.getQRCodeUrl(item); item.img = img; this.drawCanvasImage(ctx, item); } let loading = parseInt((80 / otherData.length) * (i + 1)); this.setData({ loading: loading + 10 }); } ctx.draw(false, setTimeout(async () => { let img = await this.toimage('myCanvas', posterSize); this.setData({ loading: 100, poster: img, }); this.upQrcodeImg(img); }, 1000)); }, upQrcodeImg(imgFile) { let wx_token = wx.getStorageSync('wx_token'); let session = wx.getStorageSync('session'); let urlStr = app.getNetAddresss('member.qrcode.uploadLocal'); urlStr += '&poster_id=' + this.data.poster_id + '&is_new=' + this.data.is_new; urlStr += '&3rd_session=' + session; wx.uploadFile({ url: urlStr, filePath: imgFile, name: 'file', formData: { // 和服务器约定的token, 一般也可以放在header中 '_wx_token': wx.getStorageSync('wx_token'), 'ingress': 0 }, header: { "Content-Type": "multipart/form-data", Cookie: "PHPSESSID=" + wx_token, }, success: (res) => { let data = JSON.parse(res.data); if (data.result == 1) { //data.data.img_url this.addPosterRecord(data.data.img_url); } }, fail: function (e) { } }); }, addPosterRecord(img_url) { var urlStr = app.getNetAddresss("member.qrcode.poster-record"); app._getNetWork({ showToastIn: false, url: urlStr, data: { image: img_url, poster_id: this.data.poster_id, is_new: this.data.is_new }, success: (resdata) => { } }); } } });