二期海报修改

pages/bill/bill.vue

@@ -1,17 +1,21 @@
 <template>
 	<view>
-		<view @click="baocun()">保存相册</view>
 
 		<button class='zfbtn m_l' @tap='formSubmit()'>
-			<image src="../../static/center/collect-active.png" class='img'></image>
+			分享
 		</button>
-		
-		<tki-qrcode ref="qrcode" @result="qrR" :val="checkArea" :size="115" unit="px" background="#fff" foreground="#000"
-		 pdground="#000" :onval="true" :loadMake="true" />
+
+		<tki-qrcode ref="qrcode" @result="qrR" :val="checkArea" :size="115" unit="px" background="#fff"
+			foreground="#000" pdground="#000" :onval="true" :loadMake="true" />
 
 		<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>
 	</view>
 </template>
 
@@ -24,7 +28,7 @@
 		},
 		data() {
 			return {
-				base64Img: '',	//
+				base64Img: '', //
 				checkArea: '0',
 
 
@@ -35,7 +39,16 @@
 				inputValue: "",
 				maskHidden: false,
 				name: "kk",
-				code: "E7A93C"
+				code: "E7A93C",
+
+				info: {
+					avatar: '',
+					nickname: '',
+					id: '',
+					tel: '',
+					tags: []
+				},
+				showLogin: true
 			}
 		},
 		methods: {
@@ -44,18 +57,47 @@
 			},
 
 
+			verifyUserInfo() {
+				let userInfo = uni.getStorageSync('userinfo') || {};
+				if (!userInfo.id || !userInfo.nickname || !userInfo.avatar) {
+					if (this.showLogin) {
+						this.showLogin = false;
+						this.$url('/pages/login/index?type=userinfo');
+					} else {
+						this.showLogin = true;
+						this.$url('/pages/index/index', {
+							type: 'switch'
+						});
+					}
+				}
+			},
+			getData() {
+				let userinfo = uni.getStorageSync('userinfo') || {};
+				if(userinfo) {
+					this.info = userinfo
+				}else {
+					this.$http(this.API.API_USER_CENTER).then(res => {
+						this.info = res.data;
+						console.log(this.info)
+					})
+				}
+				
+				
+			},
+
+
 			createNewImg() {
 				var that = this;
 				var context = wx.createCanvasContext('mycanvas');
 				context.setFillStyle("#ffe200")
 				context.fillRect(0, 0, 375, 667)
 				var path = "../../static/images/empty.png";
-				//将模板图片绘制到canvas,在开发工具中drawImage()函数有问题，不显示图片
-				//不知道是什么原因，手机环境能正常显示
 				context.drawImage(path, 0, 0, 375, 183);
-				var path1 = that.touxiang;
+				
+				that.info.avatar = "../../static/images/system/payfail.png"
+				var path1 = that.info.avatar;
 				console.log(path1, "path1")
-				//将模板图片绘制到canvas,在开发工具中drawImage()函数有问题，不显示图片
+				//定义图片
 				var path2 = "../../static/images/system/payfail.png";
 				var path3 = "../../static/images/system/paysuccess.png";
 				var path4 = "../../static/images/system/paysuccess.png";
@@ -64,7 +106,7 @@
 				//不知道是什么原因，手机环境能正常显示
 				// context.save(); // 保存当前context的状态
 
-				var name = that.name;
+				var name = that.info.nickname;
 				//绘制名字
 				context.setFontSize(24);
 				context.setFillStyle('#333333');
@@ -118,8 +160,9 @@
 							var tempFilePath = res.tempFilePath;
 							that.imagePath = tempFilePath
 							that.canvasHidden = true
-							console.log('成功')
+							console.log('海报生成成功')
 							console.log(res)
+							console.log(that.imagePath)
 						},
 						fail: function(res) {
 							console.log(res);
@@ -140,10 +183,11 @@
 							success: function(res) {
 								if (res.confirm) {
 									console.log('用户点击确定');
+									that.maskHidden = false
 								}
 							},
 							fail: function(res) {
-								console.log(11111)
+								that.maskHidden = false
 							}
 						})
 					}
@@ -152,18 +196,23 @@
 			formSubmit() {
 				var that = this;
 				wx.showToast({
-					title: '装逼中...',
+					title: '生成海报中...',
 					icon: 'loading',
 					duration: 1000
 				});
 				setTimeout(function() {
 					wx.hideToast()
 					that.createNewImg();
+					
+					that.maskHidden = true
 				}, 1000)
 			}
 		},
 		onLoad(options) {
 			this.qrcode = 'dadaa'
+
+			this.verifyUserInfo();
+			this.getData();
 		}
 
 	}