feat: 账号健康状态、统一组件逻辑

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

@@ -22,7 +22,7 @@
     <div
       v-if="dataSource.length > 0"
       class="tip-row flex justify-between px-16px py-10px w-100% my-12px h-42px"
-      :class="selectedItems.length > 0 ? 'selected' : 'normal'"
+      :class="selectedItems.length > 0 ? 'selected' : isAbNormalStatus ? 'abnormal' : 'normal'"
     >
       <div class="flex items-center">
         <div class="flex items-center">
@@ -42,8 +42,8 @@
             <span class="operation-btn red" @click="handleBatchDelete"> 批量删除 </span>
           </template>
           <template v-else>
-            <img :src="icon4" width="16" height="16" class="mr-8px" />
-            <span class="label"> 太棒啦！所有账号都在正常运行。 </span>
+            <img :src="isAbNormalStatus ? icon5 : icon4" width="16" height="16" class="mr-8px" />
+            <span class="label"> {{ tipLabel }} </span>
           </template>
         </div>
       </div>
@@ -51,6 +51,13 @@
       <template v-if="selectedItems.length > 0">
         <img :src="icon6" width="16" height="16" class="cursor-pointer" @click="handleCloseTip" />
       </template>
+      <div v-else>
+        <a-space v-if="isAbNormalStatus" class="flex items-center">
+          <a-button class="w-96px err-btn" size="mini" @click="handleOpenAbnormalAccount">
+            <template #default>查看异常账号</template>
+          </a-button>
+        </a-space>
+      </div>
     </div>
     <div class="card-wrap">
       <AccountTable
@@ -93,7 +100,7 @@ import AddAccountModal from './components/add-account-modal';
 import DeleteAccountModal from './components/account-table/delete-account';
 
 import { INITIAL_QUERY } from './constants';
-import { getPlacementAccounts } from '@/api/all/propertyMarketing';
+import { getPlacementAccounts, getPlacementAccountsHealth } from '@/api/all/propertyMarketing';
 
 import icon1 from '@/assets/img/media-account/icon-add.png';
 import icon4 from '@/assets/img/media-account/icon-success.png';
@@ -113,17 +120,57 @@ const pageInfo = ref({
 const query = ref(cloneDeep(INITIAL_QUERY));
 const dataSource = ref([]);
 const selectedItems = ref([]);
+const healthData = ref({});
+
+const isAbNormalStatus = computed(() => healthData.value?.abnormal_number > 0);
 
 const checkedAll = computed(() => selectedItems.value.length === dataSource.value.length);
 const indeterminate = computed(
   () => selectedItems.value.length > 0 && selectedItems.value.length < dataSource.value.length,
 );
 
+const tipLabel = computed(() => {
+  if (!isAbNormalStatus.value) {
+    return '太棒啦！所有账号都在正常运行。';
+  }
+
+  const {
+    abnormal_number = 0,
+    login_invalid_number = 0,
+    too_many_requests_number = 0,
+    account_frozen_number = 0,
+  } = healthData.value;
+
+  // 定义异常类型映射
+  const abnormalTypes = [
+    { count: login_invalid_number, label: 'cookie过期' },
+    { count: too_many_requests_number, label: '已请求频繁' },
+    { count: account_frozen_number, label: '账号被封' },
+  ];
+
+  // 过滤出有异常的项并格式化
+  const abnormalLabels = abnormalTypes.filter(({ count }) => count > 0).map(({ count, label }) => `${count}个${label}`);
+
+  return `共有 ${abnormal_number} 个账号存在授权异常，其中：${abnormalLabels.join('，')}。`;
+});
+
 onMounted(() => {
   getData();
 });
 
-const getData = async () => {
+const getData = () => {
+  getHealthData();
+  getAccountData();
+};
+
+const getHealthData = async () => {
+  const { code, data } = await getMediaAccountsHealth();
+  if (code === 200) {
+    healthData.value = data;
+    console.log(healthData.value);
+  }
+};
+const getAccountData = async () => {
   const { page, pageSize } = pageInfo.value;
   const { code, data, total } = await getPlacementAccounts({
     page,
@@ -202,6 +249,10 @@ const onDeleteSuccess = (ids) => {
   selectedItems.value = selectedItems.value.filter((item) => !ids.includes(item.id));
   getData();
 };
+const handleOpenAbnormalAccount = () => {
+  query.value.status = 2;
+  reload();
+};
 </script>
 
 <style scoped lang="scss">