diff --git a/pages/goodsDetail/index.vue b/pages/goodsDetail/index.vue index 697822c..c2b3d1b 100644 --- a/pages/goodsDetail/index.vue +++ b/pages/goodsDetail/index.vue @@ -157,7 +157,7 @@ this.s_id = options.share_id || '' this.getGoodsDetail(); this.getWxCode() - this.getBackground() + // this.getBackground() }, methods: { getBackground() { @@ -176,6 +176,20 @@ } }) }, + //获取商品分享图 + getGoodsBackground() { + let _this = this + let goods = _this.goods_detail; + let imageUrl = goods.share_cover || goods.cover; + wx.getImageInfo({ + src: imageUrl, + success: function(sres) { + _this.goodShare = sres.path + console.log('商品分享图',_this.goodShare) + } + }) + console.log('商品分享图',_this.goodShare) + }, //商品绑定 bindGoods() { var _this = this; @@ -240,20 +254,59 @@ var context = wx.createCanvasContext('mycanvas'); let goods = that.goods_detail; let title = goods.name; - let imageUrl = goods.share_cover || goods.cover; - var path = that.backgroundImg; + let price = '¥'+goods.specs[0].selling_price; + //背景图 + // var path = that.backgroundImg; + context.setFillStyle("#fff") + context.fillRect(0, 0, 375, 600) + + let goodsBackground = that.goodShare - context.drawImage(path, 0, 0, 375, 667); + // context.drawImage(path, 0, 0, 375, 667); + + context.drawImage(goodsBackground, 10, 10, 355, 300); //绘制二维码 let wxcode = that.onceCode - context.drawImage(wxcode, 18, 530, 120, 120); - //绘制名字 - // context.setFontSize(24); - // context.setFillStyle('#fff'); - // context.setTextAlign('center'); - // context.fillText(title, 34, 620); + context.drawImage(wxcode, 238, 440, 120, 120); + let message = '长按识别小程序码' + context.setFontSize(16); + context.setFillStyle('#999'); + context.setTextAlign('center'); + context.fillText(message,300,580); + //绘制价格 + context.setFontSize(30); + context.setFillStyle('#FF0000'); + context.setTextAlign('center'); + context.fillText(price,50, 450); + console.log('长度',title.length) + if(title.length < 18 ) { + context.fillText(title, 10, 350); + }else if(18