二期海报

pages/bill/bill.vue

@@ -1,20 +1,23 @@
 <template>
 	<view>
-
 		<button class='zfbtn m_l' @tap='formSubmit()'>
 			分享
 		</button>
+		<image :src="info.avatar" mode="aspectFill"></image>
+		
+		<tki-qrcode v-if="info.avatar" ref="qrcode" @result="qrR" :val="checkArea" :size="115" unit="px" background="#fff"
+			foreground="#000" pdground="#000" :onval="true" :loadMake="true" :icon="info.avatar" />
 
-		<tki-qrcode ref="qrcode" @result="qrR" :val="checkArea" :size="115" unit="px" background="#fff"
-			foreground="#000" pdground="#000" :onval="true" :loadMake="true" />
+		<tki-qrcode v-else ref="qrcode" @result="qrR" :val="checkArea" :size="115" unit="px" background="#fff"
+			foreground="#000" pdground="#000" :onval="true" :loadMake="true" :icon="require('@/static/images/system/payfail.png')" />
 
 		<view class="canvas-box">
 			<canvas style="width: 375px;height: 667px;position:fixed;top:9999px" canvas-id="mycanvas" />
 		</view>
 
-		<view class='imagePathBox' v-if="maskHidden == true">
-		      <image :src="imagePath" class='shengcheng'></image>
-		      <button class='baocun'@click="baocun()">保存相册，分享到朋友圈</button>
+		<view class='imagePathBox' v-if="maskHidden == true && imagePath" @click="maskHidden = false ">
+			<image :src="imagePath" class='shengcheng' mode="aspectFill"></image>
+			<button class='baocun' @click.stop="baocun()">保存相册，分享到朋友圈</button>
 		</view>
 	</view>
 </template>
@@ -28,19 +31,11 @@
 		},
 		data() {
 			return {
-				base64Img: '', //
-				checkArea: '0',
-
-
-				img: "../../static/images/empty.png",
-				wechat: "../../static/images/tabbar/home.png",
-				quan: "../../static/images/tabbar/my.png",
-				touxiang: "../../static/images/system/payfail.png",
+				base64Img: '',
+				checkArea: 'Cannot find module',
 				inputValue: "",
 				maskHidden: false,
 				name: "kk",
-				code: "E7A93C",
-
 				info: {
 					avatar: '',
 					nickname: '',
@@ -48,12 +43,16 @@
 					tel: '',
 					tags: []
 				},
-				showLogin: true
+				showLogin: true,
+				imagePath: '',
+				
+				userToken: ''
 			}
 		},
 		methods: {
 			qrR(data) {
 				this.base64Img = data;
+				console.log('base64',this.base64Img)
 			},
 
 
@@ -73,16 +72,15 @@
 			},
 			getData() {	
 				let userinfo = uni.getStorageSync('userinfo') || {};
-				if(userinfo) {
+				if (userinfo) {
 					this.info = userinfo
-				}else {
+					console.log('用户数据缓存',this.info)
+				} else {
 					this.$http(this.API.API_USER_CENTER).then(res => {
 						this.info = res.data;
-						console.log(this.info)
+						console.log('用户数据接口',this.info)
 					})
 				}
-				
-				
 			},
 
 
@@ -91,29 +89,28 @@
 				var context = wx.createCanvasContext('mycanvas');
 				var path = "../../static/images/poster-1.jpg";
 				context.drawImage(path, 0, 0, 375, 667);
-
-				var name = that.info.nickname;
+				//绘制二维码
+				context.drawImage(that.base64Img, 24, 530,120, 120);
 				//绘制名字
-				context.setFontSize(24);
-				context.setFillStyle('#fff');
-				context.setTextAlign('center');
-				context.fillText(name, 34, 620);
+				// context.setFontSize(24);
+				// context.setFillStyle('#fff');
+				// context.setTextAlign('center');
+				// context.fillText(name, 34, 620);
 				context.stroke();
-				//绘制二维码
-				
-			
 				context.draw();
 				//将生成好的图片保存到本地，需要延迟一会，绘制期间耗时
 				setTimeout(function() {
 					wx.canvasToTempFilePath({
 						canvasId: 'mycanvas',
 						success: function(res) {
-							var tempFilePath1 = res.tempFilePath;
-							that.imagePath = tempFilePath1
+							that.imagePath = res.tempFilePath;
+							if(that.imagePath) {
 								that.canvasHidden = true
+								that.maskHidden = true
+							}
 							console.log('海报生成成功')
 							console.log(res)
-							console.log('图片链接',that.imagePath)
+							console.log('图片链接', that.imagePath)
 						},
 						fail: function(res) {
 							console.log(res);
@@ -152,8 +149,10 @@
 					duration: 1000
 				});
 				wx.hideToast()
-				that.createNewImg();
-				that.maskHidden = true
+				that.createNewImg()
+				// if(that.imagePath) {
+				// 	that.maskHidden = true
+				// }
 			}
 		},
 		onLoad(options) {