feat: 处理二维码生成失败状态

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" />
+                  <img v-if="isFailLoadQrCode" :src="icon4" width="24" height="24" class="mb-13px" />
-                  <span class="s2 !color-#6D4CFE">二维码生成中...</span>
+                  <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;
   }
 

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" />
+                <img v-if="isFailLoadQrCode" :src="icon4" width="24" height="24" class="mb-13px" />
-                <span class="s2 !color-#6D4CFE">二维码生成中...</span>
+                <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) {