// mycomponent/temp/qrcode/qrcode.js var posterBehavior = require("../../../poster/poster.js"); var app = getApp(); Component({ behaviors: [posterBehavior], /** * 组件的属性列表 */ properties: { goodsId: { type: Number, }, // 拼团后端生成海报 ispt: { type: null, }, activityid: { type: null } }, /** * 组件的初始数据 */ data: { listData: [] }, ready() { // this.getPosterPic(); }, observers: { isshow: function (isshow) { if (isshow && !this.data.listData[this.data.goodsId] && this.data.getFlag) { this.data.getFlag = false; this.setData({ poster: "", loading: 0 }); this.getPosterPic(); } else if (this.data.listData[this.data.goodsId] != "") { this.setData({ poster: this.data.listData[this.data.goodsId], }); } }, }, /** * 组件的方法列表 */ methods: { ptPoster() { if(this.data.ispt == 'group_goods' || this.data.ispt == "zhpGroup" || this.data.ispt == "groupwork"){ let that = this; let urlStr; if(this.data.ispt == 'group_goods'){ urlStr = app.getNetAddresss("plugin.fight-groups.frontend.controllers.group-poster.generate-goods-poster"); }else if(this.data.ispt == "zhpGroup"){ urlStr = app.getNetAddresss("plugin.zhp-group-lottery.frontend.activity-poster.generate-goods-poster"); }else if(this.data.ispt == "groupwork"){ urlStr = app.getNetAddresss("plugin.group-work.frontend.controllers.group-poster.generate-goods-poster"); } urlStr += "&id=" + this.data.activityid; app._getNetWork({ url: urlStr, success: (resdata) => { var res = resdata.data; if (res.result == 1) { that.setData({ poster:res.data.image_url }); } wx.hideLoading(); }, }); setTimeout(function () { wx.hideLoading(); }, 5000); }else{ let that = this; let urlStr = app.getNetAddresss("plugin.snatch-regiment.api.GoodsPoster.generateGoodsPoster"); urlStr += "&id=" + this.data.goodsId; app._getNetWork({ url: urlStr, success: (resdata) => { var res = resdata.data; if (res.result == 1) { that.setData({ poster:res.data.image_url }); } wx.hideLoading(); }, }); setTimeout(function () { wx.hideLoading(); }, 5000); } }, async getPosterPic() { if (this.data.ispt) { this.ptPoster(); return; } let posterSize = await this.getMyCanvasMessage(640, 1008); this.setData({ canvasWidth: posterSize.width, canvasHeight: posterSize.height, }); //this.startDrawCanvas(posterSize); var urlStr = app.getNetAddresss("goods.goods-poster.new-goods-poster"); //this.startDrawCanvas(posterSize,{}); app._getNetWork({ showToastIn: false, url: urlStr, data: { id: this.data.goodsId, }, success: (resdata) => { let res = resdata.data; //this.startDrawCanvas(posterSize); if (res.result != 1) { wx.showToast({ title: res.msg, }); return; } if (res.data.new && res.data.new == true) { this.startDrawCanvas(posterSize, res.data); } else { this.startOldDrawCanvas(posterSize, res.data); } }, complete: () => { this.data.getFlag = true; }, }); }, async startDrawCanvas(posterSize, posterData) { let getMarketPrice = "原价"; let getPrice = "现价"; try { wx.getStorage({ key: "yz_basic_info", success: function (res) { if (res.data.lang.goods.market_price != "") { getMarketPrice = res.data.lang.goods.market_price; } if (res.data.lang.goods.price != "") { getPrice = res.data.lang.goods.price; } }, }); } catch (e) { console.log(e); } 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); //console.log(posterData.background) //绘制背景 if (posterData.background.type == "background") { // let bgImg = await this.readDownPicInfo(posterData.background.src); let bgImg = await this.downImage({src:posterData.background.src}); //绘制背景图片 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, }); } else if (posterData.background.type == "color") { this.drawCanvasFillRect(ctx, { width: posterSize.width / this.data.step, color: posterData.background.src, height: posterSize.height / this.data.step, top: 0, left: 0, }); } this.setData({ loading: 10 }); //ctx.restore(); for (let i = 0; i < posterData.poster_data.length; i++) { let item = posterData.poster_data[i]; if (item.type == "logo" || item.type == "img" || item.type == "other_img" || item.type == "head" || item.type == "qr") { if (item.src) { let file = await this.downImage(item); item.img = file.img; this.drawCanvasImage(ctx, item); } } else if (item.type == "title" || item.type == "nickname") { let line = Math.floor(item.height / (item.size + 10)) || 1; item.line = line; this.drawCanvasLineText(ctx, item); } else if (item.type == "invite" || item.type == "text" || item.type == "mid") { this.drawCanvasText(ctx, item); } else if (item.type == "price") { item.src = getPrice + ":¥" + item.src; this.drawCanvasText(ctx, item); } else if (item.type == "member_price") { item.src = "会员价:¥" + item.src; this.drawCanvasText(ctx, item); } else if (item.type == "market_price" && item.src != 0 && item.src != "0.00") { item.src = getMarketPrice + ":¥" + item.src; this.drawCanvasText(ctx, item); } let loading = parseInt((75 / posterData.poster_data.length) * (i + 1)); this.setData({ loading: loading + 10 }); } let loadingTime = setInterval(() => { let loading = this.data.loading + 2; loading = loading >= 100 ? 100 : loading; this.setData({ loading }); if (loading >= 100) clearInterval(loadingTime); }, 2000); ctx.draw( false, setTimeout(async () => { let img = await this.toimage("myCanvas", posterSize); clearInterval(loadingTime); let target = "listData[" + this.data.goodsId + "]"; this.setData({ loading: 100, poster: img, [target]: img, }); this.removeUnsafeList(); }, 300) ); }, //开始绘制-兼容旧海报 async startOldDrawCanvas(posterSize, posterData) { let getMarketPrice = "原价"; try { wx.getStorage({ key: "yz_basic_info", success: function (res) { if (res.data.lang.goods.market_price != "") { getMarketPrice = res.data.lang.goods.market_price; } }, }); } catch (e) { console.log(e); } 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(); //ctx.restore(); //下载背景 // let bgImg = await this.readDownPicInfo(posterData.backgroundImg); let bgImg = await this.downImage({src:posterData.backgroundImg}); //绘制背景图片 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 actualObj = { actualWidth: 0, actualText: "" }; if (posterData.shopName) { actualObj = this.measureTextWidth(ctx, { width: 350, size: 30, text: posterData.shopName, }); this.setData({ loading: 18 }); //绘制商城名称 this.drawCanvasLineText(ctx, { top: 45, left: 145 + (480 - actualObj.actualWidth) / 2, src: actualObj.actualText, size: 30, color: "#333333", width: 350, line: 1, }); this.setData({ loading: 30 }); } //绘制Logo if (posterData.logo) { let file1 = await this.downImage({ src: posterData.logo, width: 70, height: 70 }); this.drawCanvasCircular(ctx, { img: file1.img, top: 25, left: 55 + (480 - actualObj.actualWidth) / 2, width: 70, height: 70, }); } this.setData({ loading: 40 }); //绘制中间大图 if (posterData.thumb) { let file2 = await this.downImage({ src: posterData.thumb, width: 520, height: 500 }); this.drawCanvasImage(ctx, { img: file2.img, top: 120, left: 60, width: 520, height: 500, }); } this.setData({ loading: 50 }); //绘制当前价格 let actualPriceObj = { actualWidth: 0, actualText: "" }; if (posterData.price) { actualPriceObj = this.measureTextWidth(ctx, { width: 400, size: 30, text: "¥" + posterData.price, }); this.drawCanvasLineText(ctx, { top: 640, left: 70, src: "¥" + posterData.price, size: 30, color: "#f15353", width: 400, line: 1, }); } this.setData({ loading: 55 }); //绘制原价格 if (posterData.market_price && posterData.market_price != 0 && posterData.market_price != "0.00") { this.drawCanvasLineText(ctx, { top: 645, left: 100 + actualPriceObj.actualWidth, src: getMarketPrice + ":¥" + posterData.market_price, size: 22, color: "#666666", width: 200, line: 1, }); let actualObj = this.measureTextWidth(ctx, { width: 200, size: 22, text: getMarketPrice + ":¥" + posterData.market_price, }); this.drawCanvasFillRect(ctx, { width: actualObj.actualWidth, color: "#999999", height: 3, top: 656, left: 100 + actualPriceObj.actualWidth, }); } this.setData({ loading: 60 }); //绘制商品标题 if (posterData.shareTitle) { this.drawCanvasLineText(ctx, { top: 690, left: 70, src: posterData.shareTitle, size: 26, color: "#333333", width: 400, line: 2, }); } this.setData({ loading: 65 }); //绘制太阳码 if (posterData.qrcode) { let file3 = await this.downImage({ src: posterData.qrcode, height: 170, width: 170 }); this.drawCanvasImage(ctx, { img: file3.img, top: 800, left: 400, width: 170, height: 170, }); } this.setData({ loading: 75 }); let loadingTime = setInterval(() => { let loading = this.data.loading + 2; loading = loading >= 100 ? 100 : loading; this.setData({ loading }); if (loading >= 100) clearInterval(loadingTime); }, 2000); ctx.draw( false, setTimeout(async () => { let img = await this.toimage("myCanvas", posterSize); clearInterval(loadingTime); let target = "listData[" + this.data.goodsId + "]"; this.setData({ loading: 100, poster: img, [target]: img, }); this.removeUnsafeList(); }, 300) ); }, }, });