From 75dfb1593df598ecce8619ab9cd33a68dd7fab37 Mon Sep 17 00:00:00 2001
From: Enzo <1284707383@qq.com>
Date: Fri, 16 Jul 2021 12:53:45 +0800
Subject: [PATCH] =?UTF-8?q?=E5=95=86=E5=93=81=E6=B5=B7=E6=8A=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/goodsDetail/index.vue | 81 +++++++++++++++++++++++++++++++------
 1 file changed, 68 insertions(+), 13 deletions(-)

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<title.length && title.length<36) {
+					console.log('1111')
+					let before = title.substr(0,18)
+					let last = title.substr(18,title.length)
+					//绘制标题
+					context.setFontSize(20);
+					context.setFillStyle('#222');
+					context.setTextAlign('left');
+					context.fillText(before, 10, 350);
+					context.fillText(last, 10, 374);
+				}else if(title.length > 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()
 						}