perf: 二维码loading态

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

@@ -149,8 +149,7 @@ const openDelete = (item) => {
 };
 
 const handleReauthorize = (item) => {
-  // const isUnauthorized = isUnauthorizedStatus(item.status);
-  const isUnauthorized = false;
+  const isUnauthorized = isUnauthorizedStatus(item.status);
   if (isUnauthorized) {
     authorizedAccountModalRef.value?.open(item.id);
   } else {

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

@@ -32,7 +32,20 @@
         </template>
         <template v-else>
           <div class="img-box">
-            <img :src="imgUrl" width="160" height="160" />
+            <template v-if="qrCodeLoading">
+              <div class="relative w-160px h-160px">
+                <img :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>
+                </div>
+                <div
+                  class="absolute top-0 left-0 w-full h-full flex items-center justify-center opacity-80 bg-#fff"
+                ></div>
+              </div>
+            </template>
+            <img v-else :src="qrCodeUrl" width="160" height="160" />
+
             <div v-if="isOverdue" class="mask cursor-pointer" @click="getAuthorizedQrCode">
               <icon-refresh size="24" class="mb-13px" />
               <p class="s1">二维码失效</p>
@@ -54,6 +67,7 @@
 import { defineExpose, ref } from 'vue';
 import { getAuthorizedImage, getMediaAccountsAuthorizedStatus } from '@/api/all/propertyMarketing';
 
+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';
 
@@ -70,7 +84,8 @@ const isSuccess = ref(false);
 const failReason = ref('');
 const progress = ref(0);
 const id = ref('');
-const imgUrl = ref('');
+const qrCodeUrl = ref('');
+const qrCodeLoading = ref(false);
 
 let progressTimer = null;
 let overdueTimer = null;
@@ -93,7 +108,8 @@ const resetTaskFields = () => {
   isSuccess.value = false;
   failReason.value = '';
   progress.value = 0;
-  imgUrl.value = '';
+  qrCodeUrl.value = '';
+  qrCodeLoading.value = false;
 };
 const close = () => {
   resetTaskFields();
@@ -105,9 +121,11 @@ const close = () => {
 };
 
 const getAuthorizedQrCode = async () => {
+  try {
+    qrCodeLoading.value = true;
     const { code, data } = await getAuthorizedImage(id.value);
     if (code === 200) {
-    imgUrl.value = data.image;
+      qrCodeUrl.value = data.image;
       overdueTimer = null;
       isOverdue.value = false;
 
@@ -116,6 +134,9 @@ const getAuthorizedQrCode = async () => {
         isOverdue.value = true;
       }, OVERDUE_TIME);
     }
+  } finally {
+    qrCodeLoading.value = false;
+  }
 };
 
 const clearStatusPollingTimer = () => {
@@ -191,8 +212,8 @@ const clearOverdueTimer = () => {
 };
 
 const handleOk = () => {
-  if (!imgUrl.value) {
-    AMessage.error('二维码获取中，请稍等');
+  if (!qrCodeUrl.value) {
+    AMessage.error('二维码生成中，请稍等');
     return;
   }
 

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

@@ -32,7 +32,20 @@
         </template> -->
         <!-- <template v-else> -->
         <div class="img-box">
-          <img :src="imgUrl" width="160" height="160" />
+          <template v-if="qrCodeLoading">
+            <div class="relative w-160px h-160px">
+              <img :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>
+              </div>
+              <div
+                class="absolute top-0 left-0 w-full h-full flex items-center justify-center opacity-80 bg-#fff"
+              ></div>
+            </div>
+          </template>
+          <img v-else :src="qrCodeUrl" width="160" height="160" />
+
           <div v-if="isOverdue" class="mask cursor-pointer" @click="getAuthorizedQrCode">
             <icon-refresh size="24" class="mb-13px" />
             <p class="s1">二维码失效</p>
@@ -108,7 +121,8 @@ const isSuccess = ref(false);
 const failReason = ref('');
 const progress = ref(0);
 const id = ref('');
-const imgUrl = ref('');
+const qrCodeUrl = ref('');
+const qrCodeLoading = ref(false);
 
 const taskStep = ref(TASK_STEP.default);
 // const hasUnsyncData = ref(false); // 含有未同步数据
@@ -143,7 +157,8 @@ const resetTaskFields = () => {
   isSuccess.value = false;
   failReason.value = '';
   progress.value = 0;
-  imgUrl.value = '';
+  qrCodeUrl.value = '';
+  qrCodeLoading.value = false;
   isNicknameChanged.value = false;
   actionType.value = 1;
   taskStep.value = TASK_STEP.default;
@@ -184,9 +199,11 @@ const startStatusPolling = () => {
 };
 
 const getAuthorizedQrCode = async () => {
+  try {
+    qrCodeLoading.value = true;
     const { code, data } = await getAuthorizedImage(id.value);
     if (code === 200) {
-    imgUrl.value = data.image;
+      qrCodeUrl.value = data.image;
       overdueTimer = null;
       isOverdue.value = false;
 
@@ -195,6 +212,9 @@ const getAuthorizedQrCode = async () => {
         isOverdue.value = true;
       }, OVERDUE_TIME);
     }
+  } finally {
+    qrCodeLoading.value = false;
+  }
 };
 
 const startLoading = async () => {
@@ -246,8 +266,8 @@ const handleOk = () => {
   if (taskStep.value === TASK_STEP.default) {
     clearOverdueTimer();
 
-    if (!imgUrl.value) {
-      AMessage.error('二维码获取中，请稍等');
+    if (!qrCodeUrl.value) {
+      AMessage.error('二维码生成中，请稍等');
       return;
     }
     if (isOverdue.value) {

src/views/property-marketing/media-account/account-manage/constants.ts

@@ -36,6 +36,7 @@ export enum EnumStatus {
   ABNORMAL_LOGIN = 4,
   ABNORMAL_REQUEST = 5,
   ABNORMAL_FREEZE = 6,
+  ABNORMAL_MISSING = 7,
 }
 
 export const STATUS_LIST = [
@@ -59,6 +60,11 @@ export const STATUS_LIST = [
     label: '异常',
     value: EnumStatus.ABNORMAL,
   },
+  {
+    text: '数据缺失',
+    label: '数据缺失',
+    value: EnumStatus.ABNORMAL_MISSING,
+  },
   {
     text: '异常-登录状态失效',
     label: '异常',

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

@@ -212,12 +212,8 @@ const handleOpenEdit = (item) => {
 const handleSelectionChange = (val) => {
   selectedItems.value = val;
 };
-const handleChangeAll = (val) => {
-  if (val) {
-    selectedItems.value = cloneDeep(dataSource.value);
-  } else {
-    selectedItems.value = [];
-  }
+const handleChangeAll = (checked) => {
+  selectedItems.value = checked ? cloneDeep(dataSource.value) : [];
 };
 const handleBatchDelete = () => {
   const ids = selectedItems.value.map((item) => item.id);