From a5811cdda46ae1e40c41cba64be09fba305a7cce Mon Sep 17 00:00:00 2001
From: rd <1344903914@qq.com>
Date: Mon, 14 Jul 2025 18:08:39 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=A7=BB=E9=99=A4=E5=90=8C=E6=AD=A5?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/all/propertyMarketing.ts              |  5 +++
 .../components/account-table/index.vue        | 44 +++++++------------
 .../components/account-table/style.scss       | 22 +++++++++-
 .../media-account/account-manage/index.vue    | 35 ++++++++-------
 4 files changed, 60 insertions(+), 46 deletions(-)

diff --git a/src/api/all/propertyMarketing.ts b/src/api/all/propertyMarketing.ts
index 4c665be..e0c1f51 100644
--- a/src/api/all/propertyMarketing.ts
+++ b/src/api/all/propertyMarketing.ts
@@ -346,3 +346,8 @@ export const postBatchSyncMediaAccountData = (params: {}) => {
 export const getMediaAccountSyncStatus = (params = {}) => {
   return Http.get('/v1/media-accounts/sync-status', params);
 };
+
+// 媒体账号-移除同步状态
+export const deleteSyncStatus = (id: string) => {
+  return Http.delete(`/v1/media-accounts/${id}/sync-status`);
+};
diff --git 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
index 70b4fe2..532ff60 100644
--- 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
@@ -4,8 +4,6 @@
 -->
 <template>
   <div class="card-container">
-    <!-- <a-spin class="w-100% h-100%"> -->
-
     <a-spin
       v-for="(item, index) in dataSource"
       :key="index"
@@ -89,34 +87,19 @@
               <template #default>{{ getBtnText(item) }}</template>
             </a-button>
           </a-dropdown>
-
-          <!-- <img :src="icon3" width="16" height="16" class="mr-8px cursor-pointer" @click="openDelete(item)" />
-          <a-button
-            v-if="showPauseButton(item.status)"
-            class="w-64px search-btn mr-8px"
-            size="mini"
-            @click="handlePause(item)"
-          >
-            <template #default>暂停同步</template>
-          </a-button>
-          <a-tooltip v-if="isAbnormalStatus(item.status)" :content="getTooltipText(item.status)">
-            <a-button class="w-64px search-btn mr-8px" size="mini" @click="handleReauthorize(item)">
-              <template #default>重新授权</template>
-            </a-button>
-          </a-tooltip>
-          <template v-else>
-            <a-button class="w-64px search-btn mr-8px" size="mini" @click="handleReauthorize(item)">
-              <template #default>{{ isUnauthorizedStatus(item.status) ? '去授权' : '重新授权' }}</template>
-            </a-button>
-          </template>
-
-          <a-button class="w-40px search-btn" size="mini" @click="openEdit(item)">
-            <template #default>编辑</template>
-          </a-button> -->
+        </div>
+      </div>
+      <div v-if="item.status === 2" class="mask">
+        <div class="flex items-center mb-16px box">
+          <img :src="icon3" width="16" height="16" class="mr-8px" />
+          <span class="name !mb-0">更新数据失败</span>
+        </div>
+        <div class="flex items-center">
+          <a-button class="search-btn mr-8px" size="mini" @click="onDeleteSyncStatus(item)">取消</a-button>
+          <a-button class="search-btn" size="mini" @click="syncData(item)">重新更新</a-button>
         </div>
       </div>
     </a-spin>
-    <!-- </div> -->
     <PauseAccountPatchModal ref="pauseAccountPatchModalRef" @success="emits('update')" />
     <ReauthorizeAccountModal ref="reauthorizeAccountModalRef" @update="emits('update')" />
     <AuthorizedAccountModal ref="authorizedAccountModalRef" @update="emits('update')" />
@@ -127,6 +110,7 @@
 import { defineProps, ref, computed, inject } from 'vue';
 import { useRouter } from 'vue-router';
 import { STATUS_LIST, EnumStatus } from '@/views/property-marketing/media-account/components/status-select/constants';
+import { deleteSyncStatus } from '@/api/all/propertyMarketing';
 
 import PauseAccountPatchModal from './pause-account-patch';
 import StatusBox from '../status-box';
@@ -135,6 +119,7 @@ import AuthorizedAccountModal from '../authorized-account-modal';
 
 import icon1 from '@/assets/img/media-account/icon-dy.png';
 import icon2 from '@/assets/img/media-account/icon-xhs.png';
+import icon3 from '@/assets/img/media-account/icon-warn.png';
 // import icon3 from '@/assets/img/media-account/icon-delete.png';
 
 const props = defineProps({
@@ -266,6 +251,11 @@ const getBtnText = (item) => {
 const goDetail = (item) => {
   router.push(`/media-account/detail/${item.id}`);
 };
+
+const onDeleteSyncStatus = async (item) => {
+  await deleteSyncStatus(item.id);
+  item.status = 1;
+};
 </script>
 
 <style scoped lang="scss">
diff --git a/src/views/property-marketing/media-account/account-manage/components/account-table/style.scss b/src/views/property-marketing/media-account/account-manage/components/account-table/style.scss
index e27be09..f3b99bd 100644
--- a/src/views/property-marketing/media-account/account-manage/components/account-table/style.scss
+++ b/src/views/property-marketing/media-account/account-manage/components/account-table/style.scss
@@ -17,6 +17,7 @@
     padding: 12px 16px 16px;
     display: flex;
     align-items: flex-start;
+    position: relative;
     .name {
       color: var(--Text-1, #211f24);
       font-family: $font-family-medium;
@@ -78,6 +79,23 @@
         margin-bottom: 8px;
       }
     }
+    .mask {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      text-align: center;
+      background-color: rgba(255, 255, 255, 0.8);
+      transition: opacity 0.1s cubic-bezier(0, 0, 1, 1);
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      .name {
+        font-family: $font-family-regular;
+      }
+    }
 
     .operate-row {
       display: flex;
@@ -85,8 +103,8 @@
       justify-content: flex-end;
       padding-top: 8px;
     }
-    &.checked { 
-      border: 1px solid var(--Brand-6, #6D4CFE);
+    &.checked {
+      border: 1px solid var(--Brand-6, #6d4cfe);
     }
   }
 }
diff --git a/src/views/property-marketing/media-account/account-manage/index.vue b/src/views/property-marketing/media-account/account-manage/index.vue
index 5708765..d9ab9fa 100644
--- a/src/views/property-marketing/media-account/account-manage/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/index.vue
@@ -278,27 +278,28 @@ const handleDelete = (item) => {
 const handleCloseTip = () => {
   selectedItems.value = [];
 };
+// 先立即执行一次
+const getAsyncStatus = async () => {
+  const { code, data } = await getMediaAccountSyncStatus();
+  if (code === 200) {
+    syncMediaAccounts.value = data;
+
+    // 所有任务都结束了，才停止轮询，刷新页面
+    const isEnd = data.every((item) => item.status !== 0);
+    if (isEnd) {
+      clearSyncDataTimer();
+      startSyncData.value = false;
+      getData();
+    }
+  }
+};
+
 const startSyncDataPolling = () => {
   startSyncData.value = true;
   clearSyncDataTimer();
 
-  // 先立即执行一次
-  const poll = async () => {
-    const { code, data } = await getMediaAccountSyncStatus();
-    if (code === 200) {
-      syncMediaAccounts.value = data;
-
-      // 所有任务都结束了，才停止轮询，刷新页面
-      const isEnd = data.every((item) => item.status !== 0);
-      if (isEnd) {
-        clearSyncDataTimer();
-        startSyncData.value = false;
-        getData();
-      }
-    }
-  };
-  poll();
-  syncDataTimer = setInterval(poll, 3000);
+  getAsyncStatus();
+  syncDataTimer = setInterval(getAsyncStatus, 3000);
 };
 
 const handleSyncData = async (item) => {