feat: 投放账户管理

src/api/all/propertyMarketing.ts

@@ -19,6 +19,11 @@ export const fetchAccountOperators = (params = {}) => {
   return Http.get('/v1/media-account-operators/list', params);
 };
 
+// 投放账户运营人员分组-列表
+export const fetchPlacementAccountOperators = (params = {}) => {
+  return Http.get('/v1/placement-account-operators/list', params);
+};
+
 // 媒体账号-分页
 export const getMediaAccounts = (params = {}) => {
   return Http.get('/v1/media-accounts', params);
@@ -94,7 +99,7 @@ export const deleteTag = (id: string) => {
 
 // 媒体账号-批量删除
 export const batchDeleteMediaAccounts = (params = {}) => {
-  return Http.delete(`/v1/media-accounts/batch`, params);
+  return Http.delete(`/v1/media-accounts/batch`, { data: params });
 };
 
 // 媒体账号-批量标签
@@ -141,3 +146,60 @@ export const postAccountBoardExport = (params = {}) => {
 export const getAccountBoardDetail = (id: string) => {
   return Http.get(`/v1/media-account-boards/${id}`);
 };
+
+// 投放账号-分页
+export const getPlacementAccounts = (params = {}) => {
+  return Http.get('/v1/placement-accounts', params);
+};
+
+// 投放账号-暂停爬取
+export const pausePatchPlacementAccount = (id: string) => {
+  return Http.patch(`/v1/placement-accounts/${id}/pause`);
+};
+
+// 投放账号-删除
+export const deletePlacementAccount = (id: string) => {
+  return Http.delete(`/v1/placement-accounts/${id}`);
+};
+
+// 投放账号-批量删除
+export const batchDeletePlacementAccounts = (params = {}) => {
+  return Http.delete(`/v1/placement-accounts/batch`, { data: params });
+};
+
+// 投放账号-批量添加
+export const batchPlacementAccounts = (params = {}, config = {}) => {
+  return Http.post('/v1/placement-accounts/batch', params, config);
+};
+
+// 投放账号-修改
+export const putPlacementAccounts = (params = {}) => {
+  const { id, ...rest } = params as { id: string; [key: string]: any };
+  return Http.put(`/v1/placement-accounts/${id}`, rest);
+};
+
+// 投放账号-添加
+export const postPlacementAccounts = (params = {}) => {
+  return Http.post('/v1/placement-accounts', params);
+};
+
+// 投放账号-详情
+export const getPlacementAccountsDetail = (id: string) => {
+  return Http.get(`/v1/placement-accounts/${id}`);
+};
+
+// 投放账号-授权
+export const putPlacementAccountsAuthorized = (params = {}) => {
+  const { id, ...rest } = params as { id: string; [key: string]: any };
+  return Http.put(`/v1/placement-accounts/${id}/authorized`, rest);
+};
+
+// 投放账号-获取模板地址
+export const getPlacementAccountsTemplateUrl = (params = {}) => {
+  return Http.get('/v1/placement-accounts/template', params);
+};
+
+// 投放账号-查询授权状态
+export const getPlacementAccountsAuthorizedStatus = (id: string) => {
+  return Http.get(`/v1/placement-accounts/${id}/authorized-status`);
+};

src/components/custom-table-column-modal/style.scss

@@ -22,7 +22,7 @@
             margin-bottom: 16px;
             .text {
               color: var(--Text-1, #211f24);
-              font-family: 'Alibaba PuHuiTi';
+              font-family: 'PuHuiTi-Medium';
               font-size: 16px;
               font-style: normal;
               font-weight: 400;
@@ -47,7 +47,7 @@
         flex-direction: column;
         .checked-title {
           color: var(--Text-1, #211f24);
-          font-family: 'Alibaba PuHuiTi';
+          font-family: 'PuHuiTi-Medium';
           font-size: 16px;
           font-style: normal;
           font-weight: 400;
@@ -69,7 +69,7 @@
             align-items: center;
             .text {
               color: var(--Text-1, #211f24);
-              font-family: 'Alibaba PuHuiTi';
+              font-family: 'PuHuiTi-Medium';
               font-size: 14px;
               font-style: normal;
               font-weight: 400;

src/layouts/Basic.vue

@@ -35,8 +35,6 @@ const paddingStyle = computed(() => {
   return { ...paddingLeft, ...paddingTop };
 });
 
-console.log('showSidebar', showSidebar);
-
 onMounted(() => {
   checkHasInviteCode();
 });

src/router/routes/modules/propertyMarketing.ts

@@ -37,7 +37,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
     name: 'MediaAccount',
     redirect: 'media-account/accountManagement',
     meta: {
-      locale: '新媒体账号管理',
+      locale: '账号资源中心',
       icon: IconBookmark,
       requiresAuth: true,
       roles: ['*'],
@@ -96,7 +96,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
         path: 'manage',
         name: 'PutAccountAccountManagement',
         meta: {
-          locale: '账号管理',
+          locale: '账户管理',
           requiresAuth: true,
           roles: ['*'],
         },
@@ -106,7 +106,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
         path: 'data',
         name: 'PutAccountAccountData',
         meta: {
-          locale: '账号数据',
+          locale: '账户数据',
           requiresAuth: true,
           roles: ['*'],
         },
@@ -126,7 +126,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
         path: 'investmentGuidelines',
         name: 'PutAccountInvestmentGuidelines',
         meta: {
-          locale: '投放指南',
+          locale: '平台投放指南',
           requiresAuth: true,
           roles: ['*'],
         },

src/styles/components/pagination.scss

@@ -28,7 +28,7 @@
     &-prepend {
       color: var(--Text-2, #3c4043);
       text-align: right;
-      font-family: 'Alibaba PuHuiTi';
+      font-family: 'PuHuiTi-Medium';
       font-size: 14px;
       font-style: normal;
       font-weight: 400;

src/styles/components/tabs.scss

@@ -4,7 +4,7 @@
       .arco-tabs-tab {
         .arco-tabs-tab-title {
           color: var(--Text-2, #3c4043);
-          font-family: 'Alibaba PuHuiTi';
+          font-family: 'PuHuiTi-Medium';
           font-size: 16px;
           font-style: normal;
           font-weight: 400;

src/views/property-marketing/brands/brand-materials/style.scss

@@ -44,7 +44,7 @@
         .label {
           margin-right: 8px;
           color: #211f24;
-          font-family: 'Alibaba PuHuiTi';
+          font-family: 'PuHuiTi-Medium';
           font-size: 14px;
           font-style: normal;
           font-weight: 400;

src/views/property-marketing/component.scss

@@ -31,7 +31,7 @@
       }
       .arco-form-item-label {
         color: var(--Text-1, #211f24);
-        font-family: 'Alibaba PuHuiTi';
+        font-family: 'PuHuiTi-Regular';
         font-size: 14px;
         font-style: normal;
         font-weight: 400;

src/views/property-marketing/intelligent-solution/businessAnalysisReport.vue

@@ -198,7 +198,7 @@ const columns = [
         .label {
           margin-right: 8px;
           color: #211f24;
-          font-family: 'Alibaba PuHuiTi';
+          font-family: 'PuHuiTi-Medium';
           font-size: 14px;
           font-style: normal;
           font-weight: 400;

src/views/property-marketing/intelligent-solution/competitiveProductAnalysisReport.vue

@@ -190,7 +190,7 @@ const columns = [
         .label {
           margin-right: 8px;
           color: #211f24;
-          font-family: 'Alibaba PuHuiTi';
+          font-family: 'PuHuiTi-Medium';
           font-size: 14px;
           font-style: normal;
           font-weight: 400;

src/views/property-marketing/media-account/account-dashboard/components/account-table/style.scss

@@ -9,7 +9,7 @@
 .account-table {
   .cts {
     color: var(--Text-1, #211f24);
-    font-family: 'Alibaba PuHuiTi';
+    font-family: 'PuHuiTi-Medium';
     font-size: 14px;
     font-style: normal;
     font-weight: 400;

src/views/property-marketing/media-account/account-dashboard/components/filter-block/style.scss

@@ -20,7 +20,7 @@
       .label {
         margin-right: 8px;
         color: #211f24;
-        font-family: 'Alibaba PuHuiTi';
+        font-family: 'PuHuiTi-Regular';
         font-size: 14px;
         font-style: normal;
         font-weight: 400;

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

@@ -64,11 +64,9 @@ import FilterBlock from './components/filter-block';
 import AccountTable from './components/account-table';
 
 import { getAccountBoardOverview, getAccountBoardList, postAccountBoardExport } from '@/api/all/propertyMarketing';
-
 import { formatNumberShow } from '@/utils/tools';
-import { INITIAL_QUERY } from './constants';
+import { INITIAL_QUERY, CARD_FIELDS } from './constants';
 
-import { CARD_FIELDS } from './constants';
 import icon1 from '@/assets/img/icon-question.png';
 
 const query = ref(cloneDeep(INITIAL_QUERY));

src/views/property-marketing/media-account/account-dashboard/style.scss

@@ -17,7 +17,7 @@
     border: 1px solid #e6e6e8;
     .top {
       .title {
-        font-family: 'Alibaba PuHuiTi';
+        font-family: 'PuHuiTi-Medium';
         font-style: normal;
       }
       :deep(.arco-btn) {

src/views/property-marketing/media-account/account-detail/components/note-table/style.scss

@@ -21,7 +21,7 @@
       .label {
         margin-right: 8px;
         color: #211f24;
-        font-family: 'Alibaba PuHuiTi';
+        font-family: 'PuHuiTi-Regular';
         font-size: 14px;
         font-style: normal;
         font-weight: 400;

src/views/property-marketing/media-account/account-detail/style.scss

@@ -4,7 +4,7 @@
   flex-direction: column;
   :deep(.cts) {
     color: var(--Text-1, #211f24);
-    font-family: 'Alibaba PuHuiTi';
+    font-family: 'PuHuiTi-Medium';
     font-size: 14px;
     font-style: normal;
     font-weight: 400;

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

@@ -4,7 +4,14 @@
 -->
 <template>
   <div class="card-container">
-    <div v-for="(item, index) in dataSource" :key="index" class="card-item">
+    <div
+      v-for="(item, index) in dataSource"
+      :key="index"
+      class="card-item"
+      :class="{
+        checked: isSelected(item),
+      }"
+    >
       <a-checkbox :model-value="isSelected(item)" :value="item.id" @change="toggleSelect(item)"></a-checkbox>
       <div class="ml-8px flex-1">
         <p class="name">{{ item.name }}</p>

src/views/property-marketing/media-account/account-manage/components/account-table/style.scss

@@ -19,7 +19,7 @@
     align-items: flex-start;
     .name {
       color: var(--Text-1, #211f24);
-      font-family: 'Alibaba PuHuiTi';
+      font-family: 'PuHuiTi-Medium';
       font-size: 14px;
       font-style: normal;
       font-weight: 400;
@@ -30,7 +30,7 @@
       margin-right: 20px;
       flex-shrink: 0;
       color: var(--Text-3, #737478);
-      font-family: 'Alibaba PuHuiTi';
+      font-family: 'PuHuiTi-Medium';
       font-size: 12px;
       font-style: normal;
       font-weight: 400;
@@ -44,7 +44,7 @@
       .cts {
         @include ellipsis;
         color: var(--Text-2, #3c4043);
-        font-family: 'Alibaba PuHuiTi';
+        font-family: 'PuHuiTi-Medium';
         font-size: 12px;
         font-style: normal;
         font-weight: 400;
@@ -61,7 +61,7 @@
         .text {
           @include ellipsis();
           color: var(--Text-2, #3c4043);
-          font-family: 'Alibaba PuHuiTi';
+          font-family: 'PuHuiTi-Medium';
           font-size: 10px;
           font-style: normal;
           font-weight: 400;
@@ -82,5 +82,8 @@
       justify-content: flex-end;
       padding-top: 8px;
     }
+    &.checked { 
+      border: 1px solid var(--Brand-6, #6D4CFE);
+    }
   }
 }

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

@@ -141,7 +141,7 @@ const fileName = ref('账号导入模板.xlsx');
 const formRef = ref();
 const authorizedAccountModalRef = ref(null);
 const importPromptModalRef = ref(null);
-const form = reactive({
+const form = ref({
   mobile: '',
   operator_name: '',
   holder_name: '',
@@ -289,7 +289,7 @@ const handleSuccess = (id) => {
 const handleDownloadTemplate = async () => {
   const { code, data } = await getTemplateUrl();
   if (code === 200) {
-    window.open(data.url, '_blank');
+    window.open(data.download_url, '_blank');
   }
 };
 

src/views/property-marketing/media-account/account-manage/components/add-account-modal/style.scss

@@ -9,7 +9,7 @@
       width: 100%;
       .dt {
         color: var(--Brand-Brand-6, #6d4cfe);
-        font-family: 'Alibaba PuHuiTi';
+        font-family: 'PuHuiTi-Medium';
         font-size: 14px;
         font-style: normal;
         font-weight: 400;
@@ -21,7 +21,7 @@
         background: var(--BG-200, #f2f3f5);
         .name {
           color: var(--Text-1, #211f24);
-          font-family: 'Alibaba PuHuiTi';
+          font-family: 'PuHuiTi-Medium';
           font-size: 14px;
           font-style: normal;
           font-weight: 400;

src/views/property-marketing/media-account/account-manage/components/authorized-account-modal/style.scss

@@ -20,7 +20,7 @@
       .s1 {
         color: var(--BG-White, #fff);
         text-align: center;
-        font-family: 'Alibaba PuHuiTi';
+        font-family: 'PuHuiTi-Medium';
         font-size: 14px;
         font-style: normal;
         font-weight: 400;
@@ -30,7 +30,7 @@
   }
   .s2 {
     color: var(--Text-1, #211f24);
-    font-family: 'Alibaba PuHuiTi';
+    font-family: 'PuHuiTi-Medium';
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
@@ -40,7 +40,7 @@
     overflow: hidden;
     color: var(--Functional-Red-6, #f64b31);
     text-overflow: ellipsis;
-    font-family: 'Alibaba PuHuiTi';
+    font-family: 'PuHuiTi-Medium';
     font-size: 14px;
     font-style: normal;
     font-weight: 400;

src/views/property-marketing/media-account/account-manage/components/batch-group-modal/style.scss

@@ -6,7 +6,7 @@
     // min-height: 200px;
     .t1 {
       color: var(--Text-3, #737478);
-      font-family: 'Alibaba PuHuiTi';
+      font-family: 'PuHuiTi-Medium';
       font-size: 14px;
       font-style: normal;
       font-weight: 400;

src/views/property-marketing/media-account/account-manage/components/batch-tag-modal/style.scss

@@ -6,7 +6,7 @@
     // min-height: 200px;
     .t1 {
       color: var(--Text-3, #737478);
-      font-family: 'Alibaba PuHuiTi';
+      font-family: 'PuHuiTi-Medium';
       font-size: 14px;
       font-style: normal;
       font-weight: 400;

src/views/property-marketing/media-account/account-manage/components/filter-block/style.scss

@@ -20,7 +20,7 @@
       .label {
         margin-right: 8px;
         color: #211f24;
-        font-family: 'Alibaba PuHuiTi';
+        font-family: 'PuHuiTi-Regular';
         font-size: 14px;
         font-style: normal;
         font-weight: 400;

src/views/property-marketing/media-account/account-manage/components/group-manage-modal/style.scss

@@ -10,7 +10,7 @@
     }
     .s1 {
       color: var(--Text-3, #737478);
-      font-family: 'Alibaba PuHuiTi';
+      font-family: 'PuHuiTi-Medium';
       font-size: 14px;
       font-style: normal;
       font-weight: 400;
@@ -40,7 +40,7 @@
         .arco-pagination-jumper-prepend {
           color: var(--Text-2, #3c4043);
           text-align: right;
-          font-family: 'Alibaba PuHuiTi';
+          font-family: 'PuHuiTi-Medium';
           font-size: 14px;
           font-style: normal;
           font-weight: 400;

src/views/property-marketing/media-account/account-manage/components/import-prompt-modal/style.scss

@@ -4,7 +4,7 @@
   .arco-modal-body {
     .tip {
       color: var(--Text-1, #211f24);
-      font-family: 'Alibaba PuHuiTi';
+      font-family: 'PuHuiTi-Medium';
       font-size: 14px;
       font-style: normal;
       font-weight: 400;

src/views/property-marketing/media-account/account-manage/components/reauthorize-account-modal/style.scss

@@ -20,7 +20,7 @@
       .s1 {
         color: var(--BG-White, #fff);
         text-align: center;
-        font-family: 'Alibaba PuHuiTi';
+        font-family: 'PuHuiTi-Medium';
         font-size: 14px;
         font-style: normal;
         font-weight: 400;
@@ -30,7 +30,7 @@
   }
   .s2 {
     color: var(--Text-1, #211f24);
-    font-family: 'Alibaba PuHuiTi';
+    font-family: 'PuHuiTi-Medium';
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
@@ -40,7 +40,7 @@
     overflow: hidden;
     color: var(--Functional-Red-6, #f64b31);
     text-overflow: ellipsis;
-    font-family: 'Alibaba PuHuiTi';
+    font-family: 'PuHuiTi-Medium';
     font-size: 14px;
     font-style: normal;
     font-weight: 400;

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

@@ -61,7 +61,7 @@ const isDisabledReauthorize = (status) => {
 
   .text {
     color: var(--BG-700, #737478);
-    font-family: 'Alibaba PuHuiTi';
+    font-family: 'PuHuiTi-Medium';
     font-size: 12px;
     font-style: normal;
     font-weight: 400;

src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/style.scss

@@ -30,7 +30,7 @@
         gap: 12px;
         .text {
           color: var(--Text-2, #3c4043);
-          font-family: 'Alibaba PuHuiTi';
+          font-family: 'PuHuiTi-Medium';
           font-size: 14px;
           font-style: normal;
           font-weight: 400;

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

@@ -92,7 +92,7 @@
           size="mini"
           show-total
           show-jumper
-          show-page-size
+          :show-page-size="false"
           :current="pageInfo.page"
           :page-size="pageInfo.pageSize"
           @change="onPageChange"
@@ -142,8 +142,8 @@ const batchGroupModalRef = ref(null);
 const tipStatus = ref(2);
 const pageInfo = reactive({
   page: 1,
-  pageSize: 20,
+  pageSize: 8,
-  total: 100,
+  total: 0,
 });
 const query = ref(cloneDeep(INITIAL_QUERY));
 const dataSource = ref([]);
@@ -169,8 +169,8 @@ const getData = async () => {
   //   ...query.value,
   // });
   // if (code === 200) {
-  //   dataSource.value = data.data;
+  //   dataSource.value = data?.data ?? [];
-  //   pageInfo.total = total;
+  //   pageInfo.total = data?.total ?? 0;
   // }
   dataSource.value = [
     {

src/views/property-marketing/media-account/account-manage/style.scss

@@ -15,7 +15,7 @@
   .filter-wrap {
     .top {
       .title {
-        font-family: 'Alibaba PuHuiTi';
+        font-family: 'PuHuiTi-Medium';
         font-style: normal;
       }
       :deep(.arco-btn) {
@@ -29,7 +29,7 @@
     border-radius: 2px;
     background: #f0edff;
     .label {
-      font-family: 'Alibaba PuHuiTi';
+      font-family: 'PuHuiTi-Medium';
       font-size: 14px;
       font-style: normal;
       font-weight: 400;
@@ -60,7 +60,7 @@
       padding: 0;
       cursor: pointer;
       color: var(--Brand-Brand-6, #6d4cfe);
-      font-family: 'Alibaba PuHuiTi';
+      font-family: 'PuHuiTi-Medium';
       font-size: 14px;
       font-style: normal;
       font-weight: 400;

src/views/property-marketing/put-account/account-dashboard/components/echarts-item/style.scss

@@ -13,7 +13,7 @@
   .a-card-title {
     color: var(--Text-1, #211F24);
     font-size: 16px;
-    font-family: Alibaba PuHuiTi;
+    font-family: PuHuiTi-Medium;
     font-weight: 400;
     line-height: 24px;
     word-wrap: break-word;

src/views/property-marketing/put-account/account-dashboard/style.scss

@@ -28,7 +28,7 @@
 
     .top {
       .title {
-        font-family: 'Alibaba PuHuiTi';
+        font-family: 'PuHuiTi-Medium';
         font-style: normal;
       }
 
@@ -91,7 +91,7 @@
         .label {
           margin-right: 8px;
           color: #211f24;
-          font-family: 'Alibaba PuHuiTi';
+          font-family: 'PuHuiTi-Regular';
           font-size: 14px;
           font-style: normal;
           font-weight: 400;

src/views/property-marketing/put-account/account-data/components/account-table/style.scss

@@ -9,7 +9,7 @@
 .account-table {
   .cts {
     color: var(--Text-1, #211f24);
-    font-family: 'Alibaba PuHuiTi';
+    font-family: 'PuHuiTi-Medium';
     font-size: 14px;
     font-style: normal;
     font-weight: 400;

src/views/property-marketing/put-account/account-data/components/filter-block/style.scss

@@ -21,7 +21,7 @@
       .label {
         margin-right: 8px;
         color: #211f24;
-        font-family: 'Alibaba PuHuiTi';
+        font-family: 'PuHuiTi-Regular';
         font-size: 14px;
         font-style: normal;
         font-weight: 400;

src/views/property-marketing/put-account/account-data/style.scss

@@ -23,7 +23,7 @@
     }
     .top {
       .title {
-        font-family: 'Alibaba PuHuiTi';
+        font-family: 'PuHuiTi-Medium';
         font-style: normal;
       }
       :deep(.arco-btn) {

src/views/property-marketing/put-account/account-manage/components/account-table/delete-account.vue

@@ -9,14 +9,14 @@
 <template>
   <a-modal
     v-model:visible="visible"
-    :title="isBatch ? '批量删除账号' : '删除账号'"
+    :title="isBatch ? '批量删除账户' : '删除账户'"
-    width="400px"
+    width="480px"
     modal-class="account-manage-modal"
     @close="onClose"
   >
     <div class="flex items-center">
       <img :src="icon1" width="20" height="20" class="mr-12px" />
-      <span>确认删除 {{ accountName }} 这个账号吗？</span>
+      <span>确认删除 {{ accountName }} 这个账户吗？</span>
     </div>
     <template #footer>
       <a-button class="cancel-btn" size="large" @click="onClose">取消</a-button>
@@ -29,10 +29,10 @@
 
 <script setup>
 import { ref } from 'vue';
-import { deleteMediaAccount, batchDeleteMediaAccounts } from '@/api/all/propertyMarketing';
+import { deletePlacementAccount, batchDeletePlacementAccounts } from '@/api/all/propertyMarketing';
 import icon1 from '@/assets/img/media-account/icon-warn-1.png';
 
-const emits = defineEmits(['success', 'close']);
+const emits = defineEmits(['update', 'close']);
 
 const visible = ref(false);
 const accountId = ref(null);
@@ -56,11 +56,12 @@ const open = (record) => {
 };
 
 async function onDelete() {
-  const _fn = isBatch ? batchDeleteMediaAccounts : deleteMediaAccount;
+  const _fn = isBatch.value ? batchDeletePlacementAccounts : deletePlacementAccount;
-  const { code } = await _fn(accountId.value);
+  const _params = isBatch.value ? { ids: accountId.value } : accountId.value;
+  const { code } = await _fn(_params);
   if (code === 200) {
     AMessage.success('删除成功');
-    emits('success');
+    emits('update', isBatch.value ? accountId.value : [accountId.value]);
     onClose();
   }
 }

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

@@ -4,21 +4,28 @@
 -->
 <template>
   <div class="card-container">
-    <div v-for="(item, index) in dataSource" :key="index" class="card-item">
+    <div
+      v-for="(item, index) in dataSource"
+      :key="index"
+      class="card-item"
+      :class="{
+        checked: isSelected(item),
+      }"
+    >
       <a-checkbox :model-value="isSelected(item)" :value="item.id" @change="toggleSelect(item)"></a-checkbox>
       <div class="ml-8px flex-1">
-        <p class="name">{{ item.name }}</p>
+        <p class="name">{{ item.name || '-' }}</p>
         <div class="field-row">
           <span class="label">状态</span>
           <StatusBox :status="item.status" />
         </div>
         <div class="field-row">
           <span class="label">平台</span>
-          <img :src="item.platform === 0 ? icon1 : icon2" width="20" height="19" />
+          <img :src="PLATFORM_LIST.find((v) => v.value === item.platform)?.icon" width="14" height="14" />
         </div>
         <div class="field-row">
           <span class="label">账号ID</span>
-          <span class="cts">{{ item.account_id }}</span>
+          <span class="cts">{{ item.account_id || '-' }}</span>
         </div>
         <div class="field-row">
           <span class="label">手机号码</span>
@@ -29,34 +36,15 @@
           <span class="cts">{{ item.operator?.name }}</span>
         </div>
         <div class="field-row">
-          <span class="label">分组</span>
+          <span class="label">账户总消耗</span>
-          <span class="cts">{{ item.group?.name }}</span>
+          <span class="cts">{{ `￥${formatNumberShow({ value: item.total_use_amount, showExactValue: true })}` }}</span>
         </div>
         <div class="field-row">
-          <span class="label">标签</span>
+          <span class="label">账户余额</span>
-          <div class="flex items-center">
+          <span class="cts">{{ `￥${formatNumberShow({ value: item.balance_amount, showExactValue: true })}` }}</span>
-            <a-tooltip
-              v-if="item.tags.length > 2"
-              position="bottom"
-              :content="
-                item.tags
-                  .slice(2)
-                  .map((v) => v.name)
-                  .join(',')
-              "
-            >
-              <div class="tag-box">
-                <span class="text">{{ `+${item.tags.length - 2}` }}</span>
-              </div>
-            </a-tooltip>
-
-            <div v-for="(tag, index) in item.tags.slice(0, 2).reverse()" :key="index" class="tag-box">
-              <span class="text">{{ tag.name }}</span>
-            </div>
-          </div>
         </div>
         <div class="operate-row">
-          <img :src="icon3" width="16" height="16" class="mr-8px cursor-pointer" @click="openDelete(item)" />
+          <img :src="icon1" 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"
@@ -65,16 +53,9 @@
           >
             <template #default>暂停同步</template>
           </a-button>
-          <a-tooltip v-if="isDisabledReauthorize(item.status)" :content="getTooltipText(item.status)">
+          <a-button class="w-64px search-btn mr-8px" size="mini" @click="handleReauthorize(item)">
-            <a-button class="w-64px search-btn mr-8px" size="mini" @click="handleReauthorize(item)">
+            <template #default>获取凭证</template>
-              <template #default>重新授权</template>
+          </a-button>
-            </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>
@@ -82,21 +63,21 @@
         </div>
       </div>
     </div>
-    <PauseAccountPatchModal ref="pauseAccountPatchModalRef" @success="emits('update')" />
+    <PauseAccountPatchModal ref="pauseAccountPatchModalRef" @update="emits('update')" />
-    <AuthorizedAccountModal ref="authorizedAccountModalRef" @success="emits('update')" />
+    <AuthorizedAccountModal ref="authorizedAccountModalRef" @update="emits('update')" />
   </div>
 </template>
 
 <script setup>
 import { defineProps, ref, computed } from 'vue';
-import { STATUS_LIST, EnumStatus } from '../../constants';
+import { STATUS_LIST, EnumStatus, PLATFORM_LIST } from '../../constants';
+import { formatNumberShow } from '@/utils/tools';
+
 import PauseAccountPatchModal from './pause-account-patch';
 import StatusBox from '../status-box';
 import AuthorizedAccountModal from '../authorized-account-modal';
 
-import icon1 from '@/assets/img/media-account/icon-dy.png';
+import icon1 from '@/assets/img/media-account/icon-delete.png';
-import icon2 from '@/assets/img/media-account/icon-xhs.png';
-import icon3 from '@/assets/img/media-account/icon-delete.png';
 
 const props = defineProps({
   dataSource: {
@@ -138,10 +119,7 @@ const openDelete = (item) => {
 };
 
 const handleReauthorize = (item) => {
-  const isUnauthorized = isUnauthorizedStatus(item.status);
+  authorizedAccountModalRef.value?.open(item.id, item.last_synced_at);
-  if (isUnauthorized) {
-    authorizedAccountModalRef.value?.open(item.id);
-  }
 };
 
 const handlePause = (item) => {
@@ -149,19 +127,7 @@ const handlePause = (item) => {
 };
 
 const showPauseButton = (status) => {
-  return ![EnumStatus.PAUSE, EnumStatus.UNAUTHORIZED].includes(status);
+  return status === EnumStatus.NORMAL;
-};
-const isUnauthorizedStatus = (status) => {
-  return [EnumStatus.UNAUTHORIZED].includes(status);
-};
-
-// 三种异常情况
-const isDisabledReauthorize = (status) => {
-  return [EnumStatus.ABNORMAL_LOGIN, EnumStatus.ABNORMAL_REQUEST, EnumStatus.ABNORMAL_FREEZE].includes(status);
-};
-
-const getTooltipText = (status) => {
-  return STATUS_LIST.find((v) => v.value === status)?.tooltip ?? '-';
 };
 </script>
 

src/views/property-marketing/put-account/account-manage/components/account-table/pause-account-patch.vue

@@ -3,24 +3,24 @@
  * @Date: 2025-06-27 14:41:20
 -->
 <template>
-  <a-modal v-model:visible="visible" title="暂停同步" width="400px" modal-class="account-manage-modal" @close="onClose">
+  <a-modal v-model:visible="visible" title="暂停同步" width="480px" modal-class="account-manage-modal" @close="onClose">
     <div class="flex items-center">
       <img :src="icon1" width="20" height="20" class="mr-12px" />
       <span>确认暂停同步 “{{ accountName }}” 这个账号的数据吗？</span>
     </div>
     <template #footer>
       <a-button class="cancel-btn" size="large" @click="onClose">取消</a-button>
-      <a-button type="primary" class="ml-16px" size="large" @click="onConfirm">确定</a-button>
+      <a-button type="primary" class="ml-16px !bg-#f64b31" size="large" @click="onConfirm">确定</a-button>
     </template>
   </a-modal>
 </template>
 
 <script setup>
 import { ref } from 'vue';
-import { pausePatchAccount } from '@/api/all/propertyMarketing';
+import { pausePatchPlacementAccount } from '@/api/all/propertyMarketing';
 import icon1 from '@/assets/img/media-account/icon-warn-1.png';
 
-const emits = defineEmits(['success', 'close']);
+const emits = defineEmits(['update', 'close']);
 
 const visible = ref(false);
 const accountId = ref(null);
@@ -42,10 +42,10 @@ const open = (record) => {
 };
 
 async function onConfirm() {
-  const { code } = await pausePatchAccount(accountId.value);
+  const { code } = await pausePatchPlacementAccount(accountId.value);
   if (code === 200) {
     AMessage.success('暂停成功');
-    emits('success');
+    emits('update');
     onClose();
   }
 }

src/views/property-marketing/put-account/account-manage/components/account-table/style.scss

@@ -9,7 +9,7 @@
   display: grid;
   // grid-template-rows: repeat(2, 1fr); /* 2行 */
   grid-template-columns: repeat(4, 1fr); /* 4列 */
-  gap: 20px;
+    gap: 20px;
   .card-item {
     border-radius: 8px;
     border: 1px solid var(--BG-300, #e6e6e8);
@@ -19,7 +19,7 @@
     align-items: flex-start;
     .name {
       color: var(--Text-1, #211f24);
-      font-family: 'Alibaba PuHuiTi';
+      font-family: 'PuHuiTi-Medium';
       font-size: 14px;
       font-style: normal;
       font-weight: 400;
@@ -30,7 +30,7 @@
       margin-right: 20px;
       flex-shrink: 0;
       color: var(--Text-3, #737478);
-      font-family: 'Alibaba PuHuiTi';
+      font-family: 'PuHuiTi-Regular';
       font-size: 12px;
       font-style: normal;
       font-weight: 400;
@@ -44,7 +44,7 @@
       .cts {
         @include ellipsis;
         color: var(--Text-2, #3c4043);
-        font-family: 'Alibaba PuHuiTi';
+        font-family: 'PuHuiTi-Medium';
         font-size: 12px;
         font-style: normal;
         font-weight: 400;
@@ -61,7 +61,7 @@
         .text {
           @include ellipsis();
           color: var(--Text-2, #3c4043);
-          font-family: 'Alibaba PuHuiTi';
+          font-family: 'PuHuiTi-Medium';
           font-size: 10px;
           font-style: normal;
           font-weight: 400;
@@ -82,5 +82,8 @@
       justify-content: flex-end;
       padding-top: 8px;
     }
+    &.checked { 
+      border: 1px solid var(--Brand-6, #6D4CFE);
+    }
   }
 }

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

@@ -5,60 +5,74 @@
 <template>
   <a-modal
     v-model:visible="visible"
-    :title="isEdit ? '编辑账号' : '添加账号'"
+    :title="isEdit ? '编辑账户' : '添加账户'"
     modal-class="add-put-account-modal"
     width="500px"
     :mask-closable="false"
+    unmount-on-close
     @close="onClose"
   >
     <a-form ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
       <a-form-item v-if="!isEdit" label="上传方式" required>
         <a-radio-group v-model="uploadType">
-          <a-radio value="manual">手动添加账号</a-radio>
+          <a-radio value="manual">手动添加账户</a-radio>
-          <a-radio value="batch">批量导入账号</a-radio>
+          <a-radio value="batch">批量导入账户</a-radio>
         </a-radio-group>
       </a-form-item>
 
-      <!-- 批量导入账号模式下的内容 -->
+      <!-- 批量导入账户模式下的内容 -->
       <template v-if="isBatchImport">
-        <a-form-item label="账号文件" required>
+        <a-form-item label="账户文件" required>
           <!-- 默认状态 -->
           <div class="upload-block">
-            <template v-if="uploadStatus === 'default'">
+            <template v-if="uploadStatus === UploadStatus.DEFAULT">
-              <a-upload draggable :custom-request="handleUpload" />
+              <a-upload
+                ref="uploadRef"
+                action="/"
+                draggable
+                :custom-request="handleUpload"
+                accept=".xlsx,.xls,.docx,.doc"
+                :show-file-list="false"
+              />
             </template>
             <template v-else>
               <div class="flex items-center">
                 <div
                   class="flex items-center justify-between py-9px px-12px flex-1 import-row"
                   :class="{
-                    error: uploadStatus === 'error',
+                    error: uploadStatus === UploadStatus.ERROR,
                   }"
                 >
                   <div class="flex items-center">
                     <icon-file size="16" />
                     <span class="name ml-8px">{{ fileName }}</span>
                   </div>
-                  <span v-if="uploadStatus === 'error'" class="upload-error" @click="retryUpload">点击重试</span>
+                  <span
+                    v-if="uploadStatus === UploadStatus.ERROR"
+                    class="upload-error flex-shrink-0"
+                    @click="handleBatchImport"
+                  >
+                    点击重试
+                  </span>
                 </div>
                 <img :src="icon2" width="16" height="16" class="cursor-pointer ml-12px" @click="removeFile" />
               </div>
             </template>
             <div class="flex items-center cursor-pointer mt-8px" @click="handleDownloadTemplate">
               <img :src="icon1" width="16" height="16" class="mr-4px" />
-              <span class="dt">下载账号导入模板.xlsx</span>
+              <span class="dt">下载账户导入模板.xlsx</span>
             </div>
           </div>
         </a-form-item>
       </template>
 
-      <!-- 手动添加账号 -->
+      <!-- 手动添加账户 -->
       <template v-else>
         <template v-if="isEdit">
-          <a-form-item label="账号名称" field="name">
+          <a-form-item label="账户名称" field="name">
             <a-input v-model="form.name" placeholder="请输入..." size="large" disabled />
           </a-form-item>
-          <a-form-item label="账号ID" field="account_id">
+          <a-form-item label="账户ID" field="account_id">
             <a-input v-model="form.account_id" placeholder="请输入..." size="large" disabled />
           </a-form-item>
           <a-form-item label="状态" field="status">
@@ -76,18 +90,35 @@
           <a-input v-model="form.holder_name" placeholder="请输入..." class="w-240px" size="large" />
         </a-form-item>
         <a-form-item label="运营平台" :required="!isEdit">
-          <img v-if="isEdit" :src="form.platform === 0 ? icon3 : icon4" width="24" height="24" />
+          <div v-if="isEdit" class="flex items-center">
+            <img :src="PLATFORM_LIST[form.platform].icon" width="14" height="14" class="mr-4px" />
+            <span>{{ PLATFORM_LIST[form.platform].label }}</span>
+          </div>
           <a-radio-group v-else v-model="form.platform">
-            <a-radio :value="0">抖音</a-radio>
+            <a-radio v-for="item in PLATFORM_LIST" :key="item.value" :value="item.value">
-            <a-radio :value="1">小红书</a-radio>
+              <div class="flex items-center">
+                <img :src="item.icon" width="14" height="14" class="mr-4px" />
+                <span>{{ item.label }}</span>
+              </div>
+            </a-radio>
           </a-radio-group>
         </a-form-item>
-        <a-form-item label="同步项目数据" field="sync_project_data">
+        <template v-if="isEdit">
+          <a-form-item label="账户总消耗" field="total_use_amount">
+            <a-input v-model="form.total_use_amount" placeholder="请输入..." size="large" disabled />
+          </a-form-item>
+          <a-form-item label="账户余额" field="balance_amount">
+            <a-input v-model="form.balance_amount" placeholder="请输入..." size="large" disabled />
+          </a-form-item>
+        </template>
+        <a-form-item label="同步项目数据" field="is_sync">
           <template #label>
             <span class="label">同步项目数据</span>
-            <icon-question-circle size="14" class="ml-4px color-#737478" />
+            <a-tooltip content="同步项目数据后，账户数据将同步到项目中">
+              <icon-question-circle size="14" class="ml-4px color-#737478" />
+            </a-tooltip>
           </template>
-          <a-switch v-model="form.sync_project_data" size="medium" />
+          <a-switch v-model="form.is_sync" size="medium" :checked-value="1" :un-checked-value="0" />
         </a-form-item>
       </template>
     </a-form>
@@ -98,50 +129,55 @@
       </a-button>
     </template>
 
-    <AuthorizedAccountModal ref="authorizedAccountModalRef" />
+    <AuthorizedAccountModal ref="authorizedAccountModalRef" @update="emits('update')" />
-    <ImportPromptModal ref="importPromptModalRef" />
+    <!-- <ImportPromptModal ref="importPromptModalRef" /> -->
   </a-modal>
 </template>
 
 <script setup>
-import { ref, reactive } from 'vue';
+import { ref, defineEmits } from 'vue';
 
 import AuthorizedAccountModal from '../authorized-account-modal';
-import ImportPromptModal from '../import-prompt-modal';
+// import ImportPromptModal from '../import-prompt-modal';
 import StatusBox from '../status-box';
+import { PLATFORM_LIST } from '../../constants';
 
 import {
-  postMediaAccounts,
+  postPlacementAccounts,
-  getMediaAccountsDetail,
+  getPlacementAccountsDetail,
-  putMediaAccounts,
+  putPlacementAccounts,
-  getTemplateUrl,
+  getPlacementAccountsTemplateUrl,
+  batchPlacementAccounts,
 } from '@/api/all/propertyMarketing';
 
 import icon1 from '@/assets/img/media-account/icon-download.png';
 import icon2 from '@/assets/img/media-account/icon-delete.png';
-import icon3 from '@/assets/img/media-account/icon-dy.png';
+
-import icon4 from '@/assets/img/media-account/icon-xhs.png';
+const emits = defineEmits(['update']);
+
+const UploadStatus = {
+  DEFAULT: 'default',
+  WAITING: 'waiting',
+  ERROR: 'error',
+};
 
 const visible = ref(false);
 const uploadType = ref('manual');
-const uploadStatus = ref('default');
+const uploadStatus = ref(UploadStatus.DEFAULT);
 const id = ref('');
 const isEdit = ref(false);
-const fileName = ref('账号导入模板.xlsx');
+const fileName = ref('');
-const formRef = ref();
+const formRef = ref(null);
 const authorizedAccountModalRef = ref(null);
-const importPromptModalRef = ref(null);
+// const importPromptModalRef = ref(null);
-const form = reactive({
+const uploadRef = ref(null);
+const file = ref(null);
+const form = ref({
   mobile: '',
   operator_name: '',
   holder_name: '',
   platform: 0,
-});
+  is_sync: 0,
-
-const isBatchImport = computed(() => uploadType.value === 'batch');
-const confirmBtnText = computed(() => {
-  if (isBatchImport.value) return '确定导入';
-  return isEdit.value ? '确定' : '下一步';
 });
 
 const rules = {
@@ -166,27 +202,35 @@ const rules = {
   holder_name: [{ required: true, message: '请输入号码持有人' }],
 };
 
-function handleUpload({ file, onSuccess, onError }) {
+const isBatchImport = computed(() => uploadType.value === 'batch');
-  // 模拟上传
+const confirmBtnText = computed(() => {
-  uploadStatus.value = 'error';
+  if (isBatchImport.value) return '确定导入';
-}
+  return isEdit.value ? '确定' : '下一步';
+});
+
+const handleUpload = async (option) => {
+  const { fileItem } = option;
+
+  uploadStatus.value = UploadStatus.WAITING;
+
+  file.value = fileItem.file;
+  fileName.value = fileItem.name;
+};
 
 function removeFile() {
   fileName.value = '';
-  uploadStatus.value = 'default';
+  file.value = null;
+  uploadStatus.value = UploadStatus.DEFAULT;
 }
 
-function retryUpload() {
-  handleUpload();
-  // uploadStatus.value = 'default';
-}
 const reset = () => {
   formRef.value.resetFields();
   formRef.value.clearValidate();
 
   fileName.value = '';
+  file.value = null;
   isEdit.value = false;
-  uploadStatus.value = 'default';
+  uploadStatus.value = UploadStatus.DEFAULT;
   uploadType.value = 'manual';
 };
 function onClose() {
@@ -206,15 +250,33 @@ const open = (accountId = '') => {
 };
 
 const getAccountDetail = async () => {
-  const { code, data } = await getMediaAccountsDetail(id.value);
+  const { code, data } = await getPlacementAccountsDetail(id.value);
   if (code === 200) {
     form.value = data;
   }
 };
 
-const handleBatchImport = () => {
+const handleBatchImport = async () => {
-  onClose();
+  try {
-  importPromptModalRef.value.open();
+    const formData = new FormData();
+    formData.append('file', file.value);
+
+    const { code } = await batchPlacementAccounts(formData, {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+    });
+    if (code === 200) {
+      AMessage.success('导入成功');
+      onClose();
+    } else {
+      uploadStatus.value = UploadStatus.ERROR;
+    }
+  } catch (error) {
+    uploadStatus.value = UploadStatus.ERROR;
+  }
+
+  // importPromptModalRef.value.open();
 };
 
 async function onSubmit() {
@@ -223,18 +285,17 @@ async function onSubmit() {
     return;
   }
 
-  handleSuccess();
-
   formRef.value.validate(async (errors) => {
     if (!errors) {
-      const _fn = id.value ? putMediaAccounts : postMediaAccounts;
+      const _fn = id.value ? putPlacementAccounts : postPlacementAccounts;
-      const _params = id.value ? { id: id.value, ...form.value } : form;
+      const _params = id.value ? { id: id.value, ...form.value } : form.value;
       const { code, data } = await _fn(_params);
       if (code === 200) {
-        AMessage.success(isEdit.value ? '修改成功' : '添加成功');
+        isEdit.value && AMessage.success('修改成功');
+        emits('update');
 
         if (isEdit.value) {
-          visible.value = false;
+          onClose();
         } else {
           handleSuccess(data?.id);
         }
@@ -248,9 +309,9 @@ const handleSuccess = (id) => {
 };
 
 const handleDownloadTemplate = async () => {
-  const { code, data } = await getTemplateUrl();
+  const { code, data } = await getPlacementAccountsTemplateUrl();
   if (code === 200) {
-    window.open(data.url, '_blank');
+    window.open(data.download_url, '_blank');
   }
 };
 

src/views/property-marketing/put-account/account-manage/components/add-account-modal/style.scss

@@ -9,7 +9,7 @@
       width: 100%;
       .dt {
         color: var(--Brand-Brand-6, #6d4cfe);
-        font-family: 'Alibaba PuHuiTi';
+        font-family: 'PuHuiTi-Regular';
         font-size: 14px;
         font-style: normal;
         font-weight: 400;
@@ -21,7 +21,7 @@
         background: var(--BG-200, #f2f3f5);
         .name {
           color: var(--Text-1, #211f24);
-          font-family: 'Alibaba PuHuiTi';
+          font-family: 'PuHuiTi-Regular';
           font-size: 14px;
           font-style: normal;
           font-weight: 400;

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

@@ -6,13 +6,27 @@
   <a-modal
     v-model:visible="visible"
     width="480px"
-    title="授权账号"
+    title="获取凭证"
     modal-class="authorized-account-modal"
     :mask-closable="false"
     :footer="!isLoading"
     @close="close"
   >
-    <div class="flex flex-col items-center">
+    <div v-if="showSyncTip">
+      <div class="flex items-center mb-20px">
+        <img :src="icon1" width="16" height="16" class="mr-16px" />
+        <p class="s2">
+          检测到该账户最后更新日期为{{ exactFormatTime(lastSyncedAt, 'MM-DD', 'YYYY-MM-DD') }}，已有{{
+            dayjs().diff(dayjs(lastSyncedAt * 1000), 'day')
+          }}天未同步最新数据。
+        </p>
+      </div>
+      <a-radio-group v-model="syncType" class="ml-32px">
+        <a-radio value="sync" class="mb-16px">立即同步遗漏数据 - 获取完整的最新数据 （推荐）</a-radio>
+        <a-radio value="no_sync">仅授权不更新 - 继续使用当前不完全的数据</a-radio>
+      </a-radio-group>
+    </div>
+    <div v-else class="flex flex-col items-center">
       <template v-if="isLoading">
         <a-progress
           :percent="progress"
@@ -30,112 +44,153 @@
           <p class="s2">{{ `数据初始化${isSuccess ? '成功' : '失败'}。` }}</p>
           <p v-if="!isSuccess" class="red-text">失败原因：{{ failReason || '-' }}</p>
         </template>
-        <template v-else>
+        <a-form v-else ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
-          <!-- <div class="flex items-center mb-16px">
+          <a-form-item label="账户" field="account">
-            <img :src="icon1" width="16" height="16" />
+            <a-input v-model="form.account" placeholder="请输入..." size="large" />
-            <span class="ml-8px red-text">未识别到有效二维码。</span>
+          </a-form-item>
-          </div> -->
+          <a-form-item label="密码" field="password">
-          <div class="img-box">
+            <a-input-password v-model="form.password" placeholder="请输入..." size="large" />
-            <img :src="imgUrl" width="160" height="160" class="mb-16px" />
+          </a-form-item>
-            <div v-if="isOverdue" class="mask" @click="getAuthorizedQrCode">
+        </a-form>
-              <icon-refresh size="24" class="mb-13px" />
-              <p class="s1">二维码失效</p>
-              <p class="s1">请点击刷新</p>
-            </div>
-          </div>
-          <span> 请使用抖音扫码，将公司账号绑定至灵机平台。 </span>
-        </template>
       </template>
     </div>
     <template #footer>
-      <a-button v-if="isCompleted" size="large" class="cancel-btn" @click="close">取消</a-button>
+      <a-button size="large" class="cancel-btn" @click="close">取消</a-button>
       <a-button type="primary" size="large" @click="handleOk">{{ confirmBtnText }} </a-button>
     </template>
   </a-modal>
 </template>
 
 <script setup>
-import { defineExpose, ref, onUnmounted } from 'vue';
+import dayjs from 'dayjs';
-import { startPatchAccount, getAuthorizedImage } from '@/api/all/propertyMarketing';
+import { defineExpose, ref, computed, defineEmits } from 'vue';
+import { exactFormatTime } from '@/utils/tools';
+import { putPlacementAccountsAuthorized, getPlacementAccountsAuthorizedStatus } from '@/api/all/propertyMarketing';
 
-import icon1 from '@/assets/img/media-account/icon-warn.png';
+import icon1 from '@/assets/img/media-account/icon-warn-1.png';
 import icon2 from '@/assets/img/media-account/icon-feedback-success.png';
 import icon3 from '@/assets/img/media-account/icon-feedback-fail.png';
 
-const OVERDUE_TIME = 30000; // 失效时间
+const emits = defineEmits(['update']);
 
 const visible = ref(false);
-const isOverdue = ref(false); // 二维码失效
 const isLoading = ref(false);
 const isCompleted = ref(false);
 const isSuccess = ref(false);
+const formRef = ref(null);
 const failReason = ref('');
 const progress = ref(0);
 const id = ref('');
-const imgUrl = ref('');
+const lastSyncedAt = ref(null);
+const syncType = ref('sync'); // sync ｜ no_sync
+const showSyncTip = ref(false);
 
+const form = ref({
+  account: '',
+  password: '',
+});
 let progressTimer = null;
-let overdueTimer = null;
+let statusPollingTimer = null;
+
+const rules = {
+  account: [
+    {
+      required: true,
+      message: '请输入账户',
+      trigger: ['blur', 'change'],
+    },
+  ],
+  password: [{ required: true, message: '请输入密码', trigger: ['blur', 'change'] }],
+};
 
-const notCompleted = computed(() => {
-  return !isCompleted.value;
-});
 const confirmBtnText = computed(() => {
-  if (notCompleted.value) return '完成扫码';
+  if (!isCompleted.value) return '确定';
-  return isSuccess.value ? '继续添加' : '重新扫码';
+  return isSuccess.value ? '继续添加' : '重试';
 });
 
-const open = (accountId) => {
+const open = (accountId, last_synced_at = null) => {
   id.value = accountId;
-  getAuthorizedQrCode();
+  lastSyncedAt.value = last_synced_at;
   visible.value = true;
 };
+
 const close = () => {
-  isOverdue.value = false;
+  formRef.value.resetFields();
+  formRef.value.clearValidate();
+
   isLoading.value = false;
   isCompleted.value = false;
   isSuccess.value = false;
   failReason.value = '';
   progress.value = 0;
   id.value = '';
+  lastSyncedAt.value = null;
+  syncType.value = 'sync';
+  showSyncTip.value = false;
   clearFakeProgressTimer();
-  clearOverdueTimer();
+  clearStatusPollingTimer();
   visible.value = false;
 };
 
-const getAuthorizedQrCode = async () => {
+// 轮询接口
-  const { code, data } = await getAuthorizedImage(id.value);
+const getAuthorizedStatus = async () => {
+  const { code, data } = await getPlacementAccountsAuthorizedStatus(id.value);
   if (code === 200) {
-    imgUrl.value = data.url;
+    const { status, message } = data;
-    overdueTimer = null;
+    if (status !== 0) {
-
+      isCompleted.value = true;
-    // 约定：后端限制40s内必须扫码，前端定30s后失效
+      isSuccess.value = status === 1;
-    overdueTimer = setTimeout(() => {
+      failReason.value = status === 2 ? message : '';
-      isOverdue.value = true;
+    }
-    }, OVERDUE_TIME);
   }
 };
+
+const startStatusPolling = () => {
+  clearStatusPollingTimer();
+  statusPollingTimer = setInterval(async () => {
+    if (!isCompleted.value) {
+      await getAuthorizedStatus();
+      if (isCompleted.value) {
+        // 结束时，进度条直接到100%，并清理动画
+        progress.value = 1;
+        clearFakeProgressTimer();
+        clearStatusPollingTimer();
+        isLoading.value = false;
+      }
+    }
+  }, 2000);
+};
+
+const clearStatusPollingTimer = () => {
+  if (statusPollingTimer) {
+    clearInterval(statusPollingTimer);
+    statusPollingTimer = null;
+  }
+};
+
 const startLoading = async () => {
-  isLoading.value = true;
+  const { code } = await putPlacementAccountsAuthorized({ id: id.value, ...form.value });
-  progress.value = 0;
+  if (code === 200) {
-  startFakeProgressPolling();
+    isLoading.value = true;
-  // const { code } = await startPatchAccount(id.value);
+    isCompleted.value = false;
-  // if (code === 200) {
+    progress.value = 0;
-  //   isLoading.value = true;
+    startFakeProgressPolling();
-  //   progress.value = 0;
+    startStatusPolling();
-  //   startFakeProgressPolling();
+  }
-  // }
 };
 
 const startFakeProgressPolling = () => {
   clearFakeProgressTimer();
   progressTimer = setInterval(() => {
-    if (progress.value < 0.99) {
+    if (!isCompleted.value && progress.value < 0.99) {
       const step = Math.random() * 0.04 + 0.01;
       progress.value = Math.min(progress.value + step, 0.99);
       progress.value = Number(progress.value.toFixed(2));
+    } else if (!isCompleted.value && progress.value >= 0.99) {
+      progress.value = 0.99; // 卡在99%
     } else {
       clearFakeProgressTimer();
+      clearStatusPollingTimer();
     }
   }, 1000);
 };
@@ -146,25 +201,31 @@ const clearFakeProgressTimer = () => {
     progressTimer = null;
   }
 };
-const clearOverdueTimer = () => {
-  if (overdueTimer) {
-    clearTimeout(overdueTimer);
-    overdueTimer = null;
-  }
-};
 
 const handleOk = () => {
-  if (notCompleted.value) {
+  if (lastSyncedAt.value) {
-    clearOverdueTimer();
+    formRef.value.validate(async (errors) => {
-
+      if (!errors) {
-    if (isOverdue.value) {
+        showSyncTip.value = true;
-      AMessage.error('二维码已失效，请重新扫码');
+      }
-      return;
+    });
-    }
-
-    startLoading();
     return;
   }
+
+  if (isCompleted.value) {
+    if (isSuccess.value) {
+      emits('update');
+      close();
+    } else {
+      startLoading();
+    }
+  } else {
+    formRef.value.validate(async (errors) => {
+      if (!errors) {
+        startLoading();
+      }
+    });
+  }
 };
 
 defineExpose({

src/views/property-marketing/put-account/account-manage/components/authorized-account-modal/style.scss

@@ -20,7 +20,7 @@
       .s1 {
         color: var(--BG-White, #fff);
         text-align: center;
-        font-family: 'Alibaba PuHuiTi';
+        font-family: 'PuHuiTi-Medium';
         font-size: 14px;
         font-style: normal;
         font-weight: 400;
@@ -30,7 +30,7 @@
   }
   .s2 {
     color: var(--Text-1, #211f24);
-    font-family: 'Alibaba PuHuiTi';
+    font-family: 'PuHuiTi-Medium';
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
@@ -40,7 +40,7 @@
     overflow: hidden;
     color: var(--Functional-Red-6, #f64b31);
     text-overflow: ellipsis;
-    font-family: 'Alibaba PuHuiTi';
+    font-family: 'PuHuiTi-Medium';
     font-size: 14px;
     font-style: normal;
     font-weight: 400;

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

@@ -73,12 +73,8 @@
 
 <script setup>
 import { defineEmits, defineProps } from 'vue';
-import { fetchAccountOperators } from '@/api/all/propertyMarketing';
+import { fetchPlacementAccountOperators } from '@/api/all/propertyMarketing';
-import {
+import { PLATFORM_LIST, STATUS_LIST } from '@/views/property-marketing/put-account/account-manage/constants';
-  INITIAL_QUERY,
-  PLATFORM_LIST,
-  STATUS_LIST,
-} from '@/views/property-marketing/put-account/account-manage/constants';
 
 const props = defineProps({
   query: {
@@ -99,14 +95,14 @@ const handleReset = () => {
   emits('onReset');
 };
 const getOperators = async () => {
-  const { code, data } = await fetchAccountOperators();
+  const { code, data } = await fetchPlacementAccountOperators();
   if (code === 200) {
     operators.value = data;
   }
 };
 
 onMounted(() => {
-  // getOperators();
+  getOperators();
 });
 </script>
 

src/views/property-marketing/put-account/account-manage/components/filter-block/style.scss

@@ -20,7 +20,7 @@
       .label {
         margin-right: 8px;
         color: #211f24;
-        font-family: 'Alibaba PuHuiTi';
+        font-family: 'PuHuiTi-Regular';
         font-size: 14px;
         font-style: normal;
         font-weight: 400;

src/views/property-marketing/put-account/account-manage/components/import-prompt-modal/style.scss

@@ -4,7 +4,7 @@
   .arco-modal-body {
     .tip {
       color: var(--Text-1, #211f24);
-      font-family: 'Alibaba PuHuiTi';
+      font-family: 'PuHuiTi-Medium';
       font-size: 14px;
       font-style: normal;
       font-weight: 400;

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

@@ -61,7 +61,7 @@ const isDisabledReauthorize = (status) => {
 
   .text {
     color: var(--BG-700, #737478);
-    font-family: 'Alibaba PuHuiTi';
+    font-family: 'PuHuiTi-Medium';
     font-size: 12px;
     font-style: normal;
     font-weight: 400;

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

@@ -2,6 +2,10 @@
  * @Author: RenXiaoDong
  * @Date: 2025-06-25 15:24:59
  */
+import icon1 from '@/assets/img/media-account/icon-jl.png';
+import icon2 from '@/assets/img/media-account/icon-jg.png';
+import icon3 from '@/assets/img/media-account/icon-bili.png';
+
 export const INITIAL_QUERY = {
   search: '',
   status: '',
@@ -11,23 +15,31 @@ export const INITIAL_QUERY = {
 
 export const PLATFORM_LIST = [
   {
-    label: '抖音',
+    label: '巨量',
     value: 0,
+    icon: icon1,
   },
   {
-    label: '小红书',
+    label: '聚光',
     value: 1,
+    icon: icon2,
+  },
+  {
+    label: 'B站',
+    value: 2,
+    icon: icon3,
   },
 ];
 
 export enum EnumStatus {
-  NORMAL = 1,
-  PAUSE = 3,
   UNAUTHORIZED = 0,
-  ABNORMAL = 2,
+  NORMAL = 1,
+  PAUSE = 2,
+  ABNORMAL = 3,
   ABNORMAL_LOGIN = 4,
   ABNORMAL_REQUEST = 5,
   ABNORMAL_FREEZE = 6,
+  ABNORMAL_MISSING = 7,
 }
 
 export const STATUS_LIST = [
@@ -69,4 +81,9 @@ export const STATUS_LIST = [
     value: EnumStatus.ABNORMAL_FREEZE,
     tooltip: '账号被冻结/封禁',
   },
+  {
+    text: '数据缺失',
+    label: '数据缺失',
+    value: EnumStatus.ABNORMAL_MISSING,
+  },
 ];

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

@@ -20,8 +20,9 @@
     </div>
 
     <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' : isNormalStatus ? 'normal' : 'abnormal'"
+      :class="selectedItems.length > 0 ? 'selected' : 'normal'"
     >
       <div class="flex items-center">
         <div class="flex items-center">
@@ -41,14 +42,8 @@
             <span class="operation-btn red" @click="handleBatchDelete"> 批量删除 </span>
           </template>
           <template v-else>
-            <img :src="isNormalStatus ? icon4 : icon5" width="16" height="16" class="mr-8px" />
+            <img :src="icon4" width="16" height="16" class="mr-8px" />
-            <span class="label">
+            <span class="label"> 太棒啦！所有账号都在正常运行。 </span>
-              {{
-                isNormalStatus
-                  ? '太棒啦！所有账号都在正常运行。'
-                  : `共有 12 个账号存在授权异常，其中：7 个已掉线，5 个已超过 5 天未登录，有掉线风险。`
-              }}
-            </span>
           </template>
         </div>
       </div>
@@ -56,29 +51,26 @@
       <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
+        v-if="dataSource.length > 0"
         :dataSource="dataSource"
         :selectedItems="selectedItems"
         @selectionChange="handleSelectionChange"
         @delete="handleDelete"
         @openEdit="handleOpenEdit"
+        @update="getData"
       />
-      <div class="pagination-box">
+      <NoData v-else />
+
+      <div v-if="pageInfo.total > 0" class="pagination-box">
         <a-pagination
           :total="pageInfo.total"
           size="mini"
           show-total
           show-jumper
-          show-page-size
+          :show-page-size="false"
           :current="pageInfo.page"
           :page-size="pageInfo.pageSize"
           @change="onPageChange"
@@ -87,8 +79,8 @@
       </div>
     </div>
 
-    <AddAccountModal ref="addAccountModalRef" />
+    <AddAccountModal ref="addAccountModalRef" @update="getData" />
-    <DeleteAccountModal ref="deleteAccountRef" @update="getData" />
+    <DeleteAccountModal ref="deleteAccountRef" @update="onDeleteSuccess" />
   </div>
 </template>
 
@@ -101,7 +93,7 @@ import AddAccountModal from './components/add-account-modal';
 import DeleteAccountModal from './components/account-table/delete-account';
 
 import { INITIAL_QUERY } from './constants';
-import { getMediaAccounts } from '@/api/all/propertyMarketing';
+import { getPlacementAccounts } 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,18 +105,15 @@ const tagsManageModalRef = ref(null);
 const addAccountModalRef = ref(null);
 const deleteAccountRef = ref(null);
 
-const tipStatus = ref(2);
 const pageInfo = reactive({
   page: 1,
-  pageSize: 20,
+  pageSize: 8,
-  total: 100,
+  total: 0,
 });
 const query = ref(cloneDeep(INITIAL_QUERY));
 const dataSource = ref([]);
 const selectedItems = ref([]);
 
-const isNormalStatus = computed(() => tipStatus.value === 1);
-const isAbnormalStatus = computed(() => tipStatus.value === 2);
 const checkedAll = computed(() => selectedItems.value.length === dataSource.value.length);
 const indeterminate = computed(
   () => selectedItems.value.length > 0 && selectedItems.value.length < dataSource.value.length,
@@ -135,72 +124,16 @@ onMounted(() => {
 });
 
 const getData = async () => {
-  console.log('getData');
+  const { page, pageSize } = pageInfo;
-  // const { page, pageSize } = pageInfo;
+  const { code, data, total } = await getPlacementAccounts({
-  // const { code, data, total } = await getMediaAccounts({
+    page,
-  //   page,
+    page_size: pageSize,
-  //   page_size: pageSize,
+    ...query.value,
-  //   ...query.value,
+  });
-  // });
+  if (code === 200) {
-  // if (code === 200) {
+    dataSource.value = data?.data ?? [];
-  //   dataSource.value = data.data;
+    pageInfo.total = data?.total ?? 0;
-  //   pageInfo.total = total;
+  }
-  // }
-  dataSource.value = [
-    {
-      id: 1,
-      name: '全球',
-      account_id: 1,
-      mobile: 1777777,
-      status: 0,
-      platform: 0,
-      operator: {
-        name: '小周',
-      },
-      group: {
-        name: '美团组',
-      },
-      tags: [
-        {
-          name: '标签1',
-        },
-        {
-          name: '标签2',
-        },
-        {
-          name: '标签3',
-        },
-        {
-          name: '标签4',
-        },
-        {
-          name: '标签5',
-        },
-      ],
-    },
-    {
-      id: 2,
-      name: '全球2',
-      account_id: 1,
-      mobile: 1777777,
-      status: 4,
-      platform: 0,
-      operator: {
-        name: '小周',
-      },
-      group: {
-        name: '美团组',
-      },
-      tags: [
-        {
-          name: '标签1',
-        },
-        {
-          name: '标签2',
-        },
-      ],
-    },
-  ];
 };
 const reload = () => {
   pageInfo.page = 1;
@@ -260,9 +193,14 @@ const handleDelete = (item) => {
 const handleCloseTip = () => {
   selectedItems.value = [];
 };
-const handleOpenAbnormalAccount = () => {
+// const handleOpenAbnormalAccount = () => {
-  query.value.status = 2;
+//   query.value.status = 2;
-  reload();
+//   reload();
+// };
+
+const onDeleteSuccess = (ids) => {
+  selectedItems.value = selectedItems.value.filter((item) => !ids.includes(item.id));
+  getData();
 };
 </script>
 

src/views/property-marketing/put-account/account-manage/style.scss

@@ -15,7 +15,7 @@
   .filter-wrap {
     .top {
       .title {
-        font-family: 'Alibaba PuHuiTi';
+        font-family: 'PuHuiTi-Medium';
         font-style: normal;
       }
       :deep(.arco-btn) {
@@ -29,7 +29,7 @@
     border-radius: 2px;
     background: #f0edff;
     .label {
-      font-family: 'Alibaba PuHuiTi';
+      font-family: 'PuHuiTi-Regular';
       font-size: 14px;
       font-style: normal;
       font-weight: 400;
@@ -41,12 +41,6 @@
         color: #211f24;
       }
     }
-    &.abnormal {
-      background: #ffe7e4;
-      .label {
-        color: #211f24;
-      }
-    }
     .err-btn {
       background-color: #f64b31 !important;
       color: var(--BG-white, #fff);
@@ -60,7 +54,7 @@
       padding: 0;
       cursor: pointer;
       color: var(--Brand-Brand-6, #6d4cfe);
-      font-family: 'Alibaba PuHuiTi';
+      font-family: 'PuHuiTi-Regular';
       font-size: 14px;
       font-style: normal;
       font-weight: 400;
@@ -69,7 +63,7 @@
         margin-right: 16px;
       }
       &.red {
-        color: #F64B31;
+        color: #f64b31;
       }
     }
   }
@@ -82,7 +76,6 @@
       padding: 16px 24px;
       justify-content: flex-end;
       align-items: center;
-
     }
   }
 }

src/views/property-marketing/put-account/investment-guidelines/components/month-data/style.scss

@@ -19,7 +19,7 @@
 .month-text-blue {
   color: var(--Brand-Brand-6, #6D4CFE);
   font-size: 16px;
-  font-family: Alibaba PuHuiTi;
+  font-family: PuHuiTi-Medium;
   font-weight: 400;
   line-height: 24px;
   word-wrap: break-word
@@ -29,7 +29,7 @@
 .month-text-red {
   color: var(--Functional-Danger-6, #F64B31);
   font-size: 16px;
-  font-family: Alibaba PuHuiTi;
+  font-family: PuHuiTi-Medium;
   font-weight: 400;
   line-height: 24px;
   word-wrap: break-word
@@ -39,7 +39,7 @@
 .month-text-black {
   color: var(--Text-1, #211F24);
   font-size: 16px;
-  font-family: Alibaba PuHuiTi;
+  font-family: PuHuiTi-Medium;
   font-weight: 400;
   line-height: 24px;
   word-wrap: break-word

src/views/property-marketing/put-account/investment-guidelines/components/table-data/guideListHistory.vue

@@ -137,7 +137,7 @@ const topImages = [top1, top2, top3];
   // 下载
   color: var(--Brand-6, #6d4cfe);
   font-size: 14px;
-  font-family: Alibaba PuHuiTi;
+  font-family: PuHuiTi-Medium;
   font-weight: 400;
   line-height: 22px;
   word-wrap: break-word;

src/views/property-marketing/put-account/investment-guidelines/components/table-data/listSearchForm.vue

@@ -100,7 +100,7 @@ const handleSearch = () => {
   // 搜索
   color: var(--Brand-6, #6d4cfe);
   font-size: 14px;
-  font-family: Alibaba PuHuiTi;
+  font-family: PuHuiTi-Medium;
   font-weight: 400;
   line-height: 22px;
   height: 32px;
@@ -112,7 +112,7 @@ const handleSearch = () => {
   // 重置
   color: var(--Text-2, #3c4043);
   font-size: 14px;
-  font-family: Alibaba PuHuiTi;
+  font-family: PuHuiTi-Medium;
   font-weight: 400;
   line-height: 22px;
   height: 32px;

src/views/property-marketing/put-account/investment-guidelines/style.scss

@@ -34,7 +34,7 @@
 .a-tab-class {
   color: var(--Brand-6, #6D4CFE);
   font-size: 66px;
-  font-family: Alibaba PuHuiTi;
+  font-family: PuHuiTi-Medium;
   font-weight: 400;
   line-height: 30px;
   word-wrap: break-word;
@@ -49,7 +49,7 @@
   flex-direction: column;
   color: var(--Text-1, #211F24);
   font-size: 18px;
-  font-family: Alibaba PuHuiTi;
+  font-family: PuHuiTi-Medium;
   font-weight: 400;
   line-height: 26px;
   word-wrap: break-word;
@@ -103,7 +103,7 @@
   flex-direction: column;
   color: var(--Text-1, #211F24);
   font-size: 18px;
-  font-family: Alibaba PuHuiTi;
+  font-family: PuHuiTi-Medium;
   font-weight: 400;
   line-height: 26px;
   word-wrap: break-word
@@ -131,7 +131,7 @@
   // 总体策略
   color: var(--Text-1, #211F24);
   font-size: 16px;
-  font-family: Alibaba PuHuiTi;
+  font-family: PuHuiTi-Medium;
   font-weight: 400;
   line-height: 22px;
   word-wrap: break-word
@@ -141,7 +141,7 @@
   align-self: stretch;
   color: var(--Text-2, #3C4043);
   font-size: 14px;
-  font-family: Alibaba PuHuiTi;
+  font-family: PuHuiTi-Medium;
   font-weight: 400;
   line-height: 22px;
   word-wrap: break-word
@@ -153,7 +153,7 @@
   // 表现分析
   color: var(--Text-1, #211F24);
   font-size: 16px;
-  font-family: Alibaba PuHuiTi;
+  font-family: PuHuiTi-Medium;
   font-weight: 400;
   line-height: 22px;
   word-wrap: break-word

vite.config.ts

@@ -1,3 +1,7 @@
+/*
+ * @Author: RenXiaoDong
+ * @Date: 2025-07-02 09:17:39
+ */
 import type { ConfigEnv, UserConfig } from 'vite';
 
 import { defineConfig, loadEnv } from 'vite';
@@ -16,7 +20,7 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
     css: {
       preprocessorOptions: {
         scss: {
-          additionalData: `@import "@/styles/vars.css";`,
+          // additionalData: `@import "@/styles/vars.css";`,
         },
       },
     },
@@ -36,7 +40,8 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
           changeOrigin: true,
           rewrite: (path) => path.replace(/^\/api/, ''),
           // 目标地址
-          target: 'https://lingjiapi.lvfunai.com/api',
+          target: 'http://192.168.40.7/api',
+          // target: 'https://lingjiapi.lvfunai.com/api',
         },
       },
     },