2

pages/coffee/index.vue

@@ -75,9 +75,9 @@
 		</view>
 
 		<u-popup v-model="isShowQrcode" mode="center" @close="closeQrcode">
-			<view style="margin: 60rpx;" class="qrcodeBox">
-				<Qrcode ref="qrcode" :modal="modal_qr" :url="qrData" @hideQrcode="hideQrcode" :width="300" :height="300"
-					themeColor="#000000" is_themeImg :h_w_img="80" :themeImg="headImg" />
+			<view class="qrcodeBox">
+				<Qrcode ref="qrcode" :modal="modal_qr" :url="qrData" @hideQrcode="hideQrcode" 
+					themeColor="#000000" is_themeImg  :themeImg="headImg" />
 			</view>
 		</u-popup>
 		<u-popup v-model="isShowSuccess" :maskCloseAble="false" mode="center" @close="closePopup">
@@ -147,13 +147,13 @@
 				}
 				return res
 			},
-			async showPopup() {
+			showPopup() {
 				this.timestamp = new Date().getTime()
 				this.qrData = encodeURIComponent(JSON.stringify({
 					UserId: this.UserId,
 					timestamp: this.timestamp
 				}))
-				await this.showQrcode() //生成二维码
+				this.showQrcode() //生成二维码
 				this.isShowQrcode = true
 				setTimeout(() => {
 					this.flag=true
@@ -166,12 +166,11 @@
 			// 展示二维码
 			showQrcode() {
 				let _this = this;
+				setTimeout(async ()=> {
 					this.modal_qr = true;
-				setTimeout(function() {
-					_this.$refs.qrcode.crtQrCode()
+					await _this.$refs.qrcode.crtQrCode()
 				}, 50)
 			},
-
 			//传入组件的方法
 			hideQrcode() {
 				this.modal_qr = false;
@@ -216,6 +215,7 @@
 				this.isShowSuccess = false
 			},
 			closeQrcode(){
+				this.modal_qr=false
 				this.flag=false
 				clearTimeout(this.timer)
 			}
@@ -454,10 +454,16 @@
 		justify-content: center;
 	}
 	.qrcodeBox{
-		height: 320px;
+		width: 220px;
+		height: 220px;
 		border:1px solid #000000;
 		border-radius: 10px;
 		padding: 10px;
 		background-color: #fff;
+		position: fixed;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%,-50%);
+		z-index: 5;
 	}
 </style>
\ No newline at end of file