钱包优化 商品海报

pages/center/index.vue

@@ -22,7 +22,7 @@
 				</view>
 				<view class="flex">
 					<view class="lf-font-14 text-gray lf-m-r-10">
-						{{info.income}}
+						{{info.income || 0}}
 					</view>
 					<text class="lf-iconfont lf-icon-xiangyou-copy lf-color-gray lf-font-32"></text>
 				</view>

pages/goodsDetail/index.vue

@@ -10,7 +10,7 @@
 							@click="lookImg(index)"></image>
 					</swiper-item>
 				</swiper>
-				<view class="bill-position" @tap='formSubmit()'>
+				<view class="bill-position" @tap='formSubmit()' v-if="isShowButtonCount == 2">
 					<button class="cu-btn1 margin-left-sm lf-font-28 lf-m-20">
 						分享海报
 					</button>
@@ -141,7 +141,8 @@
 				afterDone: '',
 				backgroundImg: '',
 				goodShare: '',
-				s_id: ''
+				s_id: '',
+				isShowButtonCount: 0
 			}
 		},
 		computed: {
@@ -157,7 +158,7 @@
 			this.s_id = options.share_id || ''
 			this.getGoodsDetail();
 			this.getWxCode()
-			// this.getBackground()
+			this.getBackground()
 		},
 		methods: {
 			getBackground() {
@@ -170,7 +171,8 @@
 						wx.getImageInfo({
 							src: img,
 							success: function(sres) {
-								_this.backgroundImg = sres.path
+								_this.backgroundImg = sres.path;
+								_this.isShowButtonCount++;
 							}
 						})
 					}
@@ -241,7 +243,8 @@
 					data: imgSrc,
 					encoding: 'base64',
 					success: res => {
-						this.onceCode = wx.env.USER_DATA_PATH + '/pic' + number + '.jpg'
+						this.onceCode = wx.env.USER_DATA_PATH + '/pic' + number + '.jpg';
+						this.isShowButtonCount++;
 						console.log('二维码临时路径',this.onceCode)
 					},
 					fail: err => {
@@ -256,30 +259,51 @@
 				let title = goods.name;
 				let price = '￥'+goods.specs[0].selling_price;
 				//背景图
-				// var path = that.backgroundImg;
-				context.setFillStyle("#fff")
-				context.fillRect(0, 0, 375, 600)
+				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, 500);
 				
 				context.drawImage(goodsBackground, 10, 10, 355, 300);
 				
 				//绘制二维码
 				let wxcode = that.onceCode
-				context.drawImage(wxcode, 238, 440, 120, 120);
+				context.drawImage(wxcode, 238, 324, 120, 120);
 				let message = '长按识别小程序码'
 				context.setFontSize(16);
 				context.setFillStyle('#999');
 				context.setTextAlign('center');
-				context.fillText(message,300,580);
+				context.fillText(message,300,470);
 				//绘制价格
-				context.setFontSize(30);
+				context.setFontSize(40);
 				context.setFillStyle('#FF0000');
 				context.setTextAlign('center');
-				context.fillText(price,50, 450);
+				context.fillText(price,65, 366);
 				
+				if(title.length <= 11){
+					context.setFontSize(20);
+					context.setFillStyle('#222');
+					context.setTextAlign('left');
+					context.fillText(title, 10, 470);
+				}else{
+					let str = title;
+					if(str.length > 22){
+						str = str.substr(0, 21) + '...';
+					}
+					let before = str.substr(0, 11);
+					let last = str.substr(11, str.length);
+					context.setFontSize(20);
+					context.setFillStyle('#222');
+					context.setTextAlign('left');
+					context.fillText(before, 10, 448);
+					context.fillText(last, 10, 472);
+				}
+				
+				
+				/*
 				console.log('标题长度',title.length)
 				if(title.length < 18 ) {
 					context.fillText(title, 10, 350);
@@ -307,6 +331,7 @@
 					context.fillText(last, 10, 374);
 					// context.fillText(last1, 10, 398);
 				}
+				*/
 				context.stroke();
 				context.draw();
 				//将生成好的图片保存到本地，需要延迟一会，绘制期间耗时
@@ -363,14 +388,13 @@
 					});
 					console.log(that.onceCode)
 					console.log(that.backgroundImg)
-					if(that.onceCode) {
+					if(that.onceCode && that.backgroundImg) {
 						that.createNewImg()
 					}else if(!that.onceCode){
 						this.$msg('小程序码生成失败!')
+					}else if(!that.backgroundImg){
+						this.$msg('海报背景图生成失败!')
 					}
-					// else if(!that.backgroundImg){
-					// 	this.$msg('海报背景图生成失败!')
-					// }
 				}, 500);
 			},
 			//海报结束