perf: 扫码逻辑优化

src/views/property-marketing/media-account/account-manage/components/account-table/index.vue

@@ -107,8 +107,8 @@
       </div>
     </div>
     <PauseAccountPatchModal ref="pauseAccountPatchModalRef" @success="emits('update')" />
-    <ReauthorizeAccountModal ref="reauthorizeAccountModalRef" @success="emits('update')" />
+    <ReauthorizeAccountModal ref="reauthorizeAccountModalRef" @update="emits('update')" />
-    <AuthorizedAccountModal ref="authorizedAccountModalRef" @success="emits('update')" />
+    <AuthorizedAccountModal ref="authorizedAccountModalRef" @update="emits('update')" />
   </div>
 </template>
 
@@ -166,11 +166,13 @@ const openDelete = (item) => {
 };
 
 const handleReauthorize = (item) => {
-  const isUnauthorized = isUnauthorizedStatus(item.status);
+  console.log({ item });
+  const { id, platform, status } = item;
+  const isUnauthorized = isUnauthorizedStatus(status);
   if (isUnauthorized) {
-    authorizedAccountModalRef.value?.open(item.id);
+    authorizedAccountModalRef.value?.open(id, platform);
   } else {
-    reauthorizeAccountModalRef.value?.open(item.id);
+    reauthorizeAccountModalRef.value?.open(id, platform);
   }
 };
 

src/views/property-marketing/media-account/account-manage/components/add-account-modal/index.vue

@@ -124,7 +124,7 @@
       </a-button>
     </template>
 
-    <AuthorizedAccountModal ref="authorizedAccountModalRef" />
+    <AuthorizedAccountModal ref="authorizedAccountModalRef" @update="emits('update')" />
     <ImportPromptModal ref="importPromptModalRef" />
   </a-modal>
 </template>
@@ -322,15 +322,15 @@ async function onSubmit() {
         if (isEdit.value) {
           onClose();
         } else {
-          startAuthorized(data?.id);
+          startAuthorized(data?.id, data?.platform);
         }
       }
     }
   });
 }
 
-const startAuthorized = (id) => {
+const startAuthorized = (id, platform) => {
-  authorizedAccountModalRef.value.open(id);
+  authorizedAccountModalRef.value.open(id, platform);
 };
 
 const handleDownloadTemplate = async () => {

src/views/property-marketing/media-account/account-manage/components/authorized-account-modal/index.vue

@@ -34,7 +34,7 @@
           <div class="img-box">
             <template v-if="qrCodeLoading || isFailLoadQrCode">
               <div class="relative w-160px h-160px">
-                <a-image :src="icon1" width="160" height="160" />
+                <a-image v-if="qrCodeLoading" :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">
                   <img v-if="isFailLoadQrCode" :src="icon4" width="24" height="24" class="mb-13px" />
                   <icon-loading v-else size="24" class="color-#6D4CFE mb-13px" />
@@ -55,7 +55,7 @@
               <p class="s1">请点击刷新</p>
             </div>
           </div>
-          <span class="mt-16px"> 请使用抖音扫码，将公司账号绑定至灵机平台。 </span>
+          <span class="mt-16px"> 请使用{{ platform }}扫码，将公司账号绑定至灵机平台。 </span>
         </template>
       </template>
     </div>
@@ -88,7 +88,7 @@ const isSuccess = ref(false);
 const failReason = ref('');
 const progress = ref(0);
 const id = ref('');
-
+const platform = ref('');
 const isFailLoadQrCode = ref(false);
 const qrCodeUrl = ref('');
 const qrCodeLoading = ref(false);
@@ -103,8 +103,9 @@ const confirmBtnText = computed(() => {
   return isSuccess.value ? '继续添加' : '重新扫码';
 });
 
-const open = (accountId) => {
+const open = (accountId, platformCode) => {
   id.value = accountId;
+  platform.value = platformCode === 0 ? '抖音' : '小红书';
   getAuthorizedQrCode();
   visible.value = true;
 };
@@ -114,6 +115,7 @@ const resetTaskFields = () => {
   isCompleted.value = false;
   isSuccess.value = false;
   failReason.value = '';
+  platform.value = '';
   progress.value = 0;
   qrCodeUrl.value = '';
   qrCodeLoading.value = false;
@@ -168,6 +170,7 @@ const startStatusPolling = () => {
         clearFakeProgressTimer();
         clearStatusPollingTimer();
         isLoading.value = false;
+        emits('update');
       }
     }
   }, 2000);

src/views/property-marketing/media-account/account-manage/components/reauthorize-account-modal/index.vue

@@ -34,7 +34,7 @@
         <div class="img-box">
           <template v-if="qrCodeLoading || isFailLoadQrCode">
             <div class="relative w-160px h-160px">
-              <a-image :src="icon1" width="160" height="160" />
+              <a-image v-if="qrCodeLoading" :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">
                 <img v-if="isFailLoadQrCode" :src="icon4" width="24" height="24" class="mb-13px" />
                 <icon-loading v-else size="24" class="color-#6D4CFE mb-13px" />
@@ -55,7 +55,7 @@
             <p class="s1">请点击刷新</p>
           </div>
         </div>
-        <span class="mt-16px"> 请使用抖音扫码，将公司账号绑定至灵机平台。 </span>
+        <span class="mt-16px"> 请使用{{ platform }}扫码，将公司账号绑定至灵机平台。 </span>
       </template>
       <!-- </template> -->
       <template v-else-if="taskStep === TASK_STEP.loading">
@@ -106,24 +106,25 @@
 import { defineExpose, ref, onUnmounted } from 'vue';
 import { getMediaAccountsAuthorizedStatus, getAuthorizedImage } from '@/api/all/propertyMarketing';
 
-import icon1 from '@/assets/img/media-account/icon-warn.png';
+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-1.png';
 
+const emits = defineEmits(['update']);
 const OVERDUE_TIME = 30000; // 失效时间
 const TASK_STEP = {
   default: 1,
   loading: 2,
   end: 3,
 };
-
 const visible = ref(false);
 const isOverdue = ref(false); // 二维码失效
 const isSuccess = ref(false);
 const failReason = ref('');
 const progress = ref(0);
 const id = ref('');
+const platform = ref('');
 
 const isFailLoadQrCode = ref(false);
 const qrCodeUrl = ref('');
@@ -153,8 +154,9 @@ const confirmBtnText = computed(() => {
   return '';
 });
 
-const open = (accountId) => {
+const open = (accountId, platformCode) => {
   id.value = accountId;
+  platform.value = platformCode === 0 ? '抖音' : '小红书';
   getAuthorizedQrCode();
   visible.value = true;
 };
@@ -162,6 +164,7 @@ const resetTaskFields = () => {
   isOverdue.value = false;
   isSuccess.value = false;
   failReason.value = '';
+  platform.value = '';
   progress.value = 0;
   qrCodeUrl.value = '';
   qrCodeLoading.value = false;
@@ -200,6 +203,7 @@ const startStatusPolling = () => {
         progress.value = 1;
         clearFakeProgressTimer();
         clearStatusPollingTimer();
+        emits('update');
       }
     }
   }, 2000);