perf: 二维码loading态

2025-07-03 18:02:56 +08:00
parent 0966252280
commit 722c943d29
6 changed files with 78 additions and 36 deletions
--- a/src/views/property-marketing/media-account/account-manage/components/account-table/index.vue
+++ b/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 {
--- 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,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,16 +121,21 @@ const close = () => {
 };

 const getAuthorizedQrCode = async () => {
-  const { code, data } = await getAuthorizedImage(id.value);
-  if (code === 200) {
-    imgUrl.value = data.image;
-    overdueTimer = null;
-    isOverdue.value = false;
+  try {
+    qrCodeLoading.value = true;
+    const { code, data } = await getAuthorizedImage(id.value);
+    if (code === 200) {
+      qrCodeUrl.value = data.image;
+      overdueTimer = null;
+      isOverdue.value = false;

-    // 约定：后端限制40s内必须扫码，前端定30s后失效
-    overdueTimer = setTimeout(() => {
-      isOverdue.value = true;
-    }, OVERDUE_TIME);
+      // 约定：后端限制40s内必须扫码，前端定30s后失效
+      overdueTimer = setTimeout(() => {
+        isOverdue.value = true;
+      }, OVERDUE_TIME);
+    }
+  } finally {
+    qrCodeLoading.value = false;
  }
 };

@ -191,8 +212,8 @@ const clearOverdueTimer = () => {
 };

 const handleOk = () => {
-  if (!imgUrl.value) {
-    AMessage.error('二维码获取中，请稍等');
+  if (!qrCodeUrl.value) {
+    AMessage.error('二维码生成中，请稍等');
    return;
  }

--- 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,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,16 +199,21 @@ const startStatusPolling = () => {
 };

 const getAuthorizedQrCode = async () => {
-  const { code, data } = await getAuthorizedImage(id.value);
-  if (code === 200) {
-    imgUrl.value = data.image;
-    overdueTimer = null;
-    isOverdue.value = false;
+  try {
+    qrCodeLoading.value = true;
+    const { code, data } = await getAuthorizedImage(id.value);
+    if (code === 200) {
+      qrCodeUrl.value = data.image;
+      overdueTimer = null;
+      isOverdue.value = false;

-    // 约定：后端限制40s内必须扫码，前端定30s后失效
-    overdueTimer = setTimeout(() => {
-      isOverdue.value = true;
-    }, OVERDUE_TIME);
+      // 约定：后端限制40s内必须扫码，前端定30s后失效
+      overdueTimer = setTimeout(() => {
+        isOverdue.value = true;
+      }, OVERDUE_TIME);
+    }
+  } finally {
+    qrCodeLoading.value = false;
  }
 };

@ -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) {
--- a/src/views/property-marketing/media-account/account-manage/constants.ts
+++ b/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: '异常',
--- a/src/views/property-marketing/media-account/account-manage/index.vue
+++ b/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);