diff --git a/src/assets/img/media-account/icon-schedule.png b/src/assets/img/media-account/icon-schedule.png
new file mode 100644
index 0000000..3dade8c
Binary files /dev/null and b/src/assets/img/media-account/icon-schedule.png differ
diff --git a/src/views/property-marketing/media-account/account-detail/components/account-info/index.vue b/src/views/property-marketing/media-account/account-detail/components/account-info/index.vue
index 06f1b32..6b7f3f2 100644
--- a/src/views/property-marketing/media-account/account-detail/components/account-info/index.vue
+++ b/src/views/property-marketing/media-account/account-detail/components/account-info/index.vue
@@ -53,11 +53,7 @@
-
- {{
- STATUS_LIST.find((item) => item.value === detailData.status)?.label
- }}
-
+
@@ -138,8 +134,8 @@ import { useRoute } from 'vue-router';
import { formatTableField, formatNumberShow, exactFormatTime } from '@/utils/tools';
import { getAccountInfoFields } from '../../constants';
-import { STATUS_LIST } from '@/views/property-marketing/media-account/components/status-select/constants';
import { getPropPrefix } from '@/views/property-marketing/media-account/account-dashboard/constants';
+import StatusBox from '@/views/property-marketing/media-account/components/status-select/status-box.tsx';
import { getAccountBoardDetail } from '@/api/all/propertyMarketing';
diff --git a/src/views/property-marketing/media-account/account-manage/components/account-table/footer-btn.tsx b/src/views/property-marketing/media-account/account-manage/components/account-table/footer-btn.tsx
new file mode 100644
index 0000000..66eeea9
--- /dev/null
+++ b/src/views/property-marketing/media-account/account-manage/components/account-table/footer-btn.tsx
@@ -0,0 +1,166 @@
+import {
+ EnumStatus,
+ EnumErrorStatus,
+ getStatusInfo,
+} from '@/views/property-marketing/media-account/components/status-select/status-box';
+import { Dropdown, Doption, Button, Tooltip } from '@arco-design/web-vue';
+export default defineComponent({
+ name: 'FooterBtn',
+ props: {
+ item: {
+ type: Object,
+ default: () => ({}),
+ },
+ },
+ emits: ['syncData', 'handleReauthorize', 'handlePause', 'openDelete', 'openEdit'],
+ setup(props, { emit }) {
+ const statusInfo = computed(() => {
+ const { status, error_status, to_be_expire_for_cookie } = props.item;
+ return getStatusInfo(status, error_status, to_be_expire_for_cookie) ?? {};
+ });
+
+ const renderEditDoption = () => {
+ return (
+
emit('openEdit', props.item)}>
+ 编辑
+
+ );
+ };
+ const renderReauthorizeDoption = (text = '重新授权') => {
+ return (
+
emit('handleReauthorize', props.item)}>
+ {text}
+
+ );
+ };
+ const renderPauseDoption = () => {
+ return (
+
emit('handlePause', props.item)}>
+ 暂停同步
+
+ );
+ };
+ const renderSyncBtn = () => {
+ return (
+
+ );
+ };
+ const renderDeleteDoption = () => {
+ return (
+
emit('openDelete', props.item)}>
+ 删除
+
+ );
+ };
+ const renderNormal = () => {
+ return (
+ <>
+
(
+
+ ),
+ content: () => (
+ <>
+ {renderEditDoption()}
+ {renderReauthorizeDoption()}
+ {renderPauseDoption()}
+ {renderDeleteDoption()}
+ >
+ ),
+ }}
+ >
+ {renderSyncBtn()}
+ >
+ );
+ };
+ const renderPause = () => {
+ return (
+ <>
+
(
+
+ ),
+ content: () => (
+ <>
+ {renderEditDoption()}
+ {renderDeleteDoption()}
+ >
+ ),
+ }}
+ >
+
+ >
+ );
+ };
+ const renderAbnormal = () => {
+ const { error_status } = props.item;
+ const isMissing = error_status === EnumErrorStatus.MISSING;
+ const isUnauthorized = error_status === EnumErrorStatus.UNAUTHORIZED;
+ const renderSyncBtn = () => {
+ if (isMissing) {
+ renderSyncBtn();
+ } else if ([EnumErrorStatus.REQUEST, EnumErrorStatus.FREEZE].includes(error_status)) {
+ return (
+
+
+
+ );
+ } else {
+ return (
+
+ );
+ }
+ };
+ return (
+ <>
+
(
+
+ ),
+ content: () => (
+ <>
+ {renderEditDoption()}
+ {isMissing && renderReauthorizeDoption()}
+ {renderPauseDoption()}
+ {renderDeleteDoption()}
+ >
+ ),
+ }}
+ >
+ {renderSyncBtn()}
+ >
+ );
+ };
+ const renderContent = () => {
+ const { status } = props.item;
+ if (status === EnumStatus.NORMAL) {
+ return renderNormal();
+ } else if (status === EnumStatus.PAUSE) {
+ return renderPause();
+ } else {
+ return renderAbnormal();
+ }
+ };
+ return () => renderContent();
+ },
+});
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 cb64294..0bab22e 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
@@ -24,7 +24,7 @@
状态
-
+
数据更新时间
@@ -75,24 +75,14 @@
-
-
- 更多
-
-
- 编辑
- 重新授权
- 暂停同步
- 删除
-
-
- {{ getBtnText(item) }}
-
-
+
@@ -115,14 +105,15 @@
-
-
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 8f6dea4..06ca037 100644
--- a/src/views/property-marketing/media-account/account-manage/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/index.vue
@@ -132,8 +132,8 @@ import BatchGroupModal from './components/batch-group-modal';
import { INITIAL_QUERY, INITIAL_PAGE_INFO } from './constants';
import { showImportResultNotification } from '@/utils/arcoD';
-import { EnumStatus } from '@/views/property-marketing/media-account/components/status-select/constants';
import { getTaskStatus } from '@/api/all/common';
+import { EnumStatus } from '@/views/property-marketing/media-account/components/status-select/status-box.tsx';
import {
getMediaAccounts,
getMediaAccountsHealth,
@@ -168,7 +168,7 @@ const healthData = ref({});
const syncMediaAccounts = ref([]);
const isLoadingTaskStatus = ref(false); // 正在查询状态中
-const isAbNormalStatus = computed(() => healthData.value?.total_abnormal_number > 0);
+const isAbNormalStatus = computed(() => healthData.value?.abnormal_number > 0);
const isDisabledBatchSyncData = computed(() => selectedItems.value.some((item) => item.status !== EnumStatus.NORMAL));
const checkedAll = computed(() => selectedItems.value.length === dataSource.value.length);
@@ -182,12 +182,11 @@ const tipLabel = computed(() => {
}
const {
- total_abnormal_number = 0,
+ abnormal_number = 0,
login_invalid_number = 0,
too_many_requests_number = 0,
account_frozen_number = 0,
miss_data_number = 0,
- abnormal_number = 0,
} = healthData.value;
// 定义异常类型映射
@@ -202,7 +201,7 @@ const tipLabel = computed(() => {
// 过滤出有异常的项并格式化
const abnormalLabels = abnormalTypes.filter(({ count }) => count > 0).map(({ count, label }) => `${count}个${label}`);
- return `共有 ${total_abnormal_number} 个账号存在授权异常,其中:${abnormalLabels.join(',')}。`;
+ return `共有 ${abnormal_number} 个账号存在授权异常,其中:${abnormalLabels.join(',')}。`;
});
const getData = () => {
diff --git a/src/views/property-marketing/media-account/components/status-select/constants.ts b/src/views/property-marketing/media-account/components/status-select/constants.ts
index 7049295..81901d0 100644
--- a/src/views/property-marketing/media-account/components/status-select/constants.ts
+++ b/src/views/property-marketing/media-account/components/status-select/constants.ts
@@ -3,58 +3,74 @@
* @Date: 2025-07-04 11:18:11
*/
export enum EnumStatus {
- UNAUTHORIZED = 0,
- NORMAL = 1,
- ABNORMAL = 3,
- PAUSE = 2,
- ABNORMAL_LOGIN = 4,
- ABNORMAL_REQUEST = 5,
- ABNORMAL_FREEZE = 6,
- ABNORMAL_MISSING = 7,
+ UNAUTHORIZED = 0, // 未授权
+ NORMAL = 1, // 正常
+ PAUSE = 2, // 暂停同步
+ ABNORMAL = 3, // 全部异常
+ ABNORMAL_LOGIN = 4, // 异常(登录状态失效)
+ ABNORMAL_REQUEST = 5, // 异常(请求频繁)
+ ABNORMAL_FREEZE = 6, // 异常(账号被封)
+ ABNORMAL_MISSING = 7, // 异常(数据缺失)
+ ABNORMAL_EXPIRED = 8, // 即将过期
}
+
export const STATUS_LIST = [
{
text: '正常',
label: '正常',
value: EnumStatus.NORMAL,
},
+ {
+ text: '即将过期',
+ label: '即将过期',
+ value: EnumStatus.ABNORMAL_EXPIRED,
+ },
{
text: '暂停同步',
label: '暂停同步',
value: EnumStatus.PAUSE,
},
{
- text: '未授权',
- label: '未授权',
- value: EnumStatus.UNAUTHORIZED,
- },
- {
- text: '异常',
+ text: '全部异常',
label: '异常',
value: EnumStatus.ABNORMAL,
},
{
- text: '数据缺失',
- label: '数据缺失',
- value: EnumStatus.ABNORMAL_MISSING,
+ text: '异常(未授权)',
+ label: '异常',
+ value: EnumStatus.UNAUTHORIZED,
+ tooltip: '未授权',
+ class: '!pl-24px',
},
{
- text: '异常-登录状态失效',
+ text: '异常(数据缺失)',
+ label: '异常',
+ value: EnumStatus.ABNORMAL_MISSING,
+ tooltip: '数据缺失',
+ class: '!pl-24px',
+ },
+ {
+ text: '异常(登录状态失效)',
label: '异常',
value: EnumStatus.ABNORMAL_LOGIN,
- tooltip: '登录状态失效,需重新扫码授权',
+ tooltip: '登录状态失效',
+ class: '!pl-24px',
},
{
- text: '异常-请求过于频繁',
+ text: '异常(请求频繁)',
label: '异常',
value: EnumStatus.ABNORMAL_REQUEST,
- tooltip: '请求过于频繁,需等待24小时后重试',
+ tooltip: '请求频繁,等待24小时后重试',
+ class: '!pl-24px',
},
{
- text: '异常-账号被冻结/封禁',
+ text: '异常(账号被封)',
label: '异常',
value: EnumStatus.ABNORMAL_FREEZE,
- tooltip: '账号被冻结/封禁',
+ tooltip: '账号被封',
+ class: '!pl-24px',
},
];
+
+
diff --git a/src/views/property-marketing/media-account/components/status-select/index.vue b/src/views/property-marketing/media-account/components/status-select/index.vue
index b327655..e616e60 100644
--- a/src/views/property-marketing/media-account/components/status-select/index.vue
+++ b/src/views/property-marketing/media-account/components/status-select/index.vue
@@ -11,7 +11,7 @@
allow-clear
@change="handleChange"
>
-
+
{{ item.text }}
diff --git a/src/views/property-marketing/media-account/components/status-select/status-box.tsx b/src/views/property-marketing/media-account/components/status-select/status-box.tsx
new file mode 100644
index 0000000..652cdcd
--- /dev/null
+++ b/src/views/property-marketing/media-account/components/status-select/status-box.tsx
@@ -0,0 +1,147 @@
+import { defineComponent, computed } from 'vue';
+import { Tooltip } from '@arco-design/web-vue';
+// import { STATUS_LIST } from '@/views/property-marketing/media-account/components/status-select/constants';
+import iconWarn1 from '@/assets/img/media-account/icon-warn-1.png';
+import iconWarn2 from '@/assets/img/media-account/icon-warn-2.png';
+import icon1 from '@/assets/img/media-account/icon-schedule.png';
+
+export enum EnumErrorStatus {
+ NORMAL = 0, // 正常
+ UNAUTHORIZED = 1, // 未授权
+ LOGIN = 2, // 登录状态失效
+ REQUEST = 3, // 请求过于频繁
+ FREEZE = 4, // 账号被冻结/封禁
+ MISSING = 5, // 数据缺失
+ UNKNOWN = 6, // 未知异常
+}
+
+export enum EnumStatus {
+ ABNORMAL = 0, // 异常
+ NORMAL = 1, // 正常
+ PAUSE = 2, // 暂停同步
+}
+
+export enum EnumExpireForCookie {
+ NORMAL = 0, // 正常
+ EXPIRE = 1, // 即将过期
+}
+
+const normalStyle = {
+ color: '#25c883',
+ background: '#ebf7f2',
+};
+
+const abnormalStyle = {
+ color: '#f64b31',
+ background: '#ffe7e4',
+};
+
+const pauseStyle = {
+ color: '#ffae00',
+ background: '#fff7e5',
+};
+
+const tooltipMap = new Map([
+ [1, { tooltip: '未授权' }],
+ [2, { tooltip: '登录状态失效' }],
+ [3, { tooltip: '请求频繁,等待24小时后重试', btnTooltip: '请求频繁,等待24小时后重试' }],
+ [4, { tooltip: '账号被冻结', btnTooltip: '账号被封,解封后才能操作' }],
+ [5, { tooltip: '数据缺失' }],
+ [6, { tooltip: '未知错误' }],
+]);
+
+/**
+ *
+ * @param status 状态 0-异常,1-正常,2-暂停同步
+ * @param error_status 异常状态 0-无异常,1-未授权,2-登录状态失效,3-请求过于频繁,4-账号被冻结/封禁,5-数据缺失,6-未知错误
+ * @param to_be_expire_for_cookie cookie是否即将过期 0-否,1-是
+ * @returns
+ */
+
+export const getStatusInfo = (status: EnumStatus, error_status: EnumErrorStatus, to_be_expire_for_cookie: EnumExpireForCookie) => {
+ const statusInfo = { color: '', background: '', label: '', tooltip: '', disabledBtnTooltip: '' };
+ if (status === EnumStatus.ABNORMAL) {
+ statusInfo.color = abnormalStyle.color;
+ statusInfo.background = abnormalStyle.background;
+ statusInfo.label = '异常';
+
+ const target = tooltipMap.get(error_status);
+ statusInfo.tooltip = target?.tooltip ?? '';
+ statusInfo.disabledBtnTooltip = target?.btnTooltip ?? '';
+ }
+
+ if (status === EnumStatus.NORMAL) {
+ if (to_be_expire_for_cookie === EnumExpireForCookie.NORMAL) {
+ statusInfo.color = normalStyle.color;
+ statusInfo.background = normalStyle.background;
+ statusInfo.label = '正常';
+ } else {
+ statusInfo.color = abnormalStyle.color;
+ statusInfo.background = abnormalStyle.background;
+ statusInfo.label = '即将过期';
+ }
+ }
+
+ if (status === EnumStatus.PAUSE) {
+ statusInfo.color = pauseStyle.color;
+ statusInfo.background = pauseStyle.background;
+ statusInfo.label = '暂停同步';
+ statusInfo.tooltip = '暂停同步';
+ }
+
+ return statusInfo;
+};
+
+export default defineComponent({
+ name: 'StatusBox',
+ props: {
+ item: {
+ type: Object,
+ default: () => ({}),
+ },
+ },
+ setup(props) {
+ const statusInfo = computed(() => {
+ const { status, error_status, to_be_expire_for_cookie } = props.item;
+ return getStatusInfo(status, error_status, to_be_expire_for_cookie) ?? {};
+ });
+
+ const renderContent = () => {
+ const { to_be_expire_for_cookie, status } = props.item;
+ const { background, color, label } = statusInfo.value;
+ if (status === EnumStatus.NORMAL) {
+ return (
+
+ {to_be_expire_for_cookie === EnumExpireForCookie.EXPIRE && (
+
+

+
{label}
+
+ )}
+
+ 正常
+
+
+ );
+ }
+
+ return (
+
+
{label}
+ {status === EnumStatus.PAUSE ? (
+

+ ) : (
+
+
+
+ )}
+
+ );
+ };
+
+ return () => renderContent();
+ },
+});
diff --git a/src/views/property-marketing/put-account/account-manage/components/status-box/index.vue b/src/views/property-marketing/put-account/account-manage/components/status-box/index.vue
index bc5362f..8b508a9 100644
--- a/src/views/property-marketing/put-account/account-manage/components/status-box/index.vue
+++ b/src/views/property-marketing/put-account/account-manage/components/status-box/index.vue
@@ -75,7 +75,7 @@ const isDisabledReauthorize = (status) => {
}
}
- &-2,
+ &-3,
&-4,
&-5,
&-6 {
@@ -85,7 +85,7 @@ const isDisabledReauthorize = (status) => {
}
}
- &-3 {
+ &-2{
background: #fff7e5;
color: #ffae00;
.text {