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 36) { + console.log('22222') + console.log(title.substr(18,41)) + let before = title.substr(0,18) + let last = title.substr(18,28) + let last1 = title.substr(36,title.length) + //绘制标题 + context.setFontSize(20); + context.setFillStyle('#222'); + context.setTextAlign('left'); + context.fillText(before, 10, 350); + context.fillText(last, 10, 374); + context.fillText(last1, 10, 398); + } context.stroke(); context.draw(); //将生成好的图片保存到本地,需要延迟一会,绘制期间耗时 @@ -309,13 +362,14 @@ wx.hideToast() console.log(that.onceCode) console.log(that.backgroundImg) - if(that.onceCode&&that.backgroundImg) { + if(that.onceCode) { that.createNewImg() }else if(!that.onceCode){ this.$msg('小程序码生成失败!') - }else if(!that.backgroundImg){ - this.$msg('海报背景图生成失败!') } + // else if(!that.backgroundImg){ + // this.$msg('海报背景图生成失败!') + // } }, //海报结束 getGoodsDetail() { @@ -327,6 +381,7 @@ this.goods_detail = res.data; if(this.goods_detail) { + this.getGoodsBackground() if(this.pt == 2) { this.bindGoods() }