From 2f9754b2a52f4e45dc9a6faa509c17ca84325eee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=A6=E4=B9=A0=E5=BE=88=E5=B7=AE=E5=95=A6?=
 <17633066053@163.com>
Date: Wed, 21 Sep 2022 11:07:21 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96pc=E4=BA=8C=E7=BB=B4=E7=A0=81?=
 =?UTF-8?q?=E5=88=B7=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 buyer/src/pages/Login.vue | 33 ++++++++++++++++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/buyer/src/pages/Login.vue b/buyer/src/pages/Login.vue
index 9c2b5238..d7b807e2 100644
--- a/buyer/src/pages/Login.vue
+++ b/buyer/src/pages/Login.vue
@@ -30,6 +30,12 @@
         <!--扫码登录-->
         <div v-show="scannerCodeLoginFLag">
           <div class="qr-container">
+            <div class='qr-shadow flex' v-show="qrCodeStatus == 'fail'">
+              <span>
+                二维码已失效
+              </span>
+              <Button size='small' @click="createPCLoginSession">刷新二维码</Button>
+            </div>
             <vue-qr
               :text="qrCode"
               :margin="0"
@@ -165,6 +171,7 @@ export default {
   },
   data() {
     return {
+      qrCodeStatus:"success", //
       qrCode: '',
       qrSessionToken:'',
       //是否是二维码登录
@@ -349,6 +356,7 @@ export default {
       getSCLoginCode({}).then(response=>{
         this.clearQRLoginInfo();
         if (response.code == 200) {
+          this.qrCodeStatus = 'success'
           let session = response.result;
           this.qrSessionToken = session.token;
           if (session.status === 0) {
@@ -364,7 +372,8 @@ export default {
     async refreshQrCode() {
       if (!this.qrCodeTimer) {
         this.qrCodeTimer = setInterval(() => {
-          this.createPCLoginSession();
+
+          this.qrCodeStatus = 'fail' // 如果过期将二维码转为失效状态
         }, 21 * 1000);
       }
     },
@@ -458,6 +467,27 @@ export default {
 .qr-container{
   text-align: center;
   margin: 20px 0;
+  position: relative;
+  >.qr-shadow{
+    background: rgba(0, 0, 0, 0.45);
+    position: absolute;
+    left: 50%;
+    margin-left: -75px;
+    top: 0;
+    z-index: 99;
+    width: 150px;
+    height: 150px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    color: #fff;
+    >span{
+      margin-bottom: 20px;
+      font-size: 13px;
+      letter-spacing: 2px;
+    }
+  }
 }
 .top-content {
   width: 100%;
@@ -618,4 +648,5 @@ export default {
 .icon-hover {
   cursor: pointer;
 }
+
 </style>