From b6c7f74a90e632402c6d4cd09f081ae63447465e Mon Sep 17 00:00:00 2001
From: rd <1344903914@qq.com>
Date: Fri, 4 Jul 2025 18:24:52 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A4=84=E7=90=86=E4=BA=8C=E7=BB=B4?=
 =?UTF-8?q?=E7=A0=81=E7=94=9F=E6=88=90=E5=A4=B1=E8=B4=A5=E7=8A=B6=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../authorized-account-modal/index.vue        | 27 +++++++++++++------
 .../reauthorize-account-modal/index.vue       | 26 ++++++++++++------
 2 files changed, 37 insertions(+), 16 deletions(-)

diff --git a/src/views/property-marketing/media-account/account-manage/components/authorized-account-modal/index.vue b/src/views/property-marketing/media-account/account-manage/components/authorized-account-modal/index.vue
index 72f2e82..33de039 100644
--- a/src/views/property-marketing/media-account/account-manage/components/authorized-account-modal/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/authorized-account-modal/index.vue
@@ -32,12 +32,15 @@
         </template>
         <template v-else>
           <div class="img-box">
-            <template v-if="qrCodeLoading">
+            <template v-if="qrCodeLoading || isFailLoadQrCode">
               <div class="relative w-160px h-160px">
                 <a-image :src="icon1" width="160" height="160" />
                 <div class="absolute top-0 left-0 z-2 w-full h-full flex flex-col items-center justify-center">
-                  <icon-loading size="24" class="color-#6D4CFE mb-13px" />
-                  <span class="s2 !color-#6D4CFE">二维码生成中...</span>
+                  <img v-if="isFailLoadQrCode" :src="icon4" width="24" height="24" class="mb-13px" />
+                  <icon-loading v-else size="24" class="color-#6D4CFE mb-13px" />
+                  <span :class="isFailLoadQrCode ? '!color-#F64B31' : '!color-#6D4CFE'" class="s2">{{
+                    isFailLoadQrCode ? '二维码生成失败' : '二维码生成中...'
+                  }}</span>
                 </div>
                 <div
                   class="absolute top-0 left-0 w-full h-full flex items-center justify-center opacity-80 bg-#fff"
@@ -70,6 +73,7 @@ import { getAuthorizedImage, getMediaAccountsAuthorizedStatus } from '@/api/all/
 import icon1 from '@/assets/img/media-account/icon-default-qrcode.png';
 import icon2 from '@/assets/img/media-account/icon-feedback-success.png';
 import icon3 from '@/assets/img/media-account/icon-feedback-fail.png';
+import icon4 from '@/assets/img/media-account/icon-warn.png';
 
 // 失效时间
 
@@ -85,7 +89,7 @@ const failReason = ref('');
 const progress = ref(0);
 const id = ref('');
 
-const qrCodeError = ref(false);
+const isFailLoadQrCode = ref(false);
 const qrCodeUrl = ref('');
 const qrCodeLoading = ref(false);
 
@@ -94,6 +98,7 @@ let overdueTimer = null;
 let statusPollingTimer = null;
 
 const confirmBtnText = computed(() => {
+  if (isFailLoadQrCode.value) return '重新生成';
   if (!isCompleted.value) return '完成扫码';
   return isSuccess.value ? '继续添加' : '重新扫码';
 });
@@ -112,7 +117,7 @@ const resetTaskFields = () => {
   progress.value = 0;
   qrCodeUrl.value = '';
   qrCodeLoading.value = false;
-  qrCodeError.value = false;
+  isFailLoadQrCode.value = false;
 };
 const close = () => {
   resetTaskFields();
@@ -137,10 +142,10 @@ const getAuthorizedQrCode = async () => {
         isOverdue.value = true;
       }, OVERDUE_TIME);
     } else {
-      qrCodeError.value = true;
+      isFailLoadQrCode.value = true;
     }
   } catch (error) {
-    qrCodeError.value = true;
+    isFailLoadQrCode.value = true;
   } finally {
     qrCodeLoading.value = false;
   }
@@ -219,8 +224,14 @@ const clearOverdueTimer = () => {
 };
 
 const handleOk = () => {
+  if (isFailLoadQrCode.value) {
+    resetTaskFields();
+    getAuthorizedQrCode();
+    return;
+  }
+
   if (!qrCodeUrl.value) {
-    AMessage.error('二维码生成中，请稍等');
+    AMessage.warning('二维码生成中，请稍等');
     return;
   }
 
diff --git a/src/views/property-marketing/media-account/account-manage/components/reauthorize-account-modal/index.vue b/src/views/property-marketing/media-account/account-manage/components/reauthorize-account-modal/index.vue
index 8d2988a..b3372d2 100644
--- a/src/views/property-marketing/media-account/account-manage/components/reauthorize-account-modal/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/reauthorize-account-modal/index.vue
@@ -32,12 +32,15 @@
         </template> -->
         <!-- <template v-else> -->
         <div class="img-box">
-          <template v-if="qrCodeLoading">
+          <template v-if="qrCodeLoading || isFailLoadQrCode">
             <div class="relative w-160px h-160px">
               <a-image :src="icon1" width="160" height="160" />
               <div class="absolute top-0 left-0 z-2 w-full h-full flex flex-col items-center justify-center">
-                <icon-loading size="24" class="color-#6D4CFE mb-13px" />
-                <span class="s2 !color-#6D4CFE">二维码生成中...</span>
+                <img v-if="isFailLoadQrCode" :src="icon4" width="24" height="24" class="mb-13px" />
+                <icon-loading v-else size="24" class="color-#6D4CFE mb-13px" />
+                <span :class="isFailLoadQrCode ? '!color-#F64B31' : '!color-#6D4CFE'" class="s2">{{
+                  isFailLoadQrCode ? '二维码生成失败' : '二维码生成中...'
+                }}</span>
               </div>
               <div
                 class="absolute top-0 left-0 w-full h-full flex items-center justify-center opacity-80 bg-#fff"
@@ -122,7 +125,7 @@ const failReason = ref('');
 const progress = ref(0);
 const id = ref('');
 
-const qrCodeError = ref(false);
+const isFailLoadQrCode = ref(false);
 const qrCodeUrl = ref('');
 const qrCodeLoading = ref(false);
 
@@ -136,6 +139,7 @@ let overdueTimer = null;
 let statusPollingTimer = null;
 
 const confirmBtnText = computed(() => {
+  if (isFailLoadQrCode.value) return '重新生成';
   if (taskStep.value === TASK_STEP.default) {
     // return hasUnsyncData.value ? '确定' : '完成扫码';
     return '完成扫码';
@@ -162,7 +166,7 @@ const resetTaskFields = () => {
   qrCodeUrl.value = '';
   qrCodeLoading.value = false;
   isNicknameChanged.value = false;
-  qrCodeError.value = false;
+  isFailLoadQrCode.value = false;
   actionType.value = 1;
   taskStep.value = TASK_STEP.default;
 };
@@ -215,10 +219,10 @@ const getAuthorizedQrCode = async () => {
         isOverdue.value = true;
       }, OVERDUE_TIME);
     } else {
-      qrCodeError.value = true;
+      isFailLoadQrCode.value = true;
     }
   } catch (error) {
-    qrCodeError.value = true;
+    isFailLoadQrCode.value = true;
   } finally {
     qrCodeLoading.value = false;
   }
@@ -271,10 +275,16 @@ const clearStatusPollingTimer = () => {
 
 const handleOk = () => {
   if (taskStep.value === TASK_STEP.default) {
+    if (isFailLoadQrCode.value) {
+      resetTaskFields();
+      getAuthorizedQrCode();
+      return;
+    }
+
     clearOverdueTimer();
 
     if (!qrCodeUrl.value) {
-      AMessage.error('二维码生成中，请稍等');
+      AMessage.warning('二维码生成中，请稍等');
       return;
     }
     if (isOverdue.value) {