feat: 账号看板详情

2025-07-05 11:57:06 +08:00
parent 6e32de357f
commit ff8ef62436
12 changed files with 662 additions and 500 deletions
--- 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
@ -5,61 +5,83 @@
 <template>
  <div class="account-info-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid px-24px mb-16px">
    <div class="title-row">
-      <span class="cts !text-18px !lh-26px">账号信息</span>
+      <span class="cts !text-18px !lh-26px title">账号信息</span>
    </div>
    <div class="account-info-box">
-      <div v-for="(row, rowIdx) in accountInfoFields" :key="rowIdx" class="flex mb-24px">
+      <div
+        v-for="(row, rowIdx) in getAccountInfoFields(dateType, showMore)"
+        :key="rowIdx"
+        class="grid grid-cols-4 gap-6 mb-24px"
+      >
        <div
          v-for="(field, colIdx) in row"
          :key="colIdx"
-          :class="field.dataIndex === 'ai_evaluation' ? 'flex-2' : 'flex-1'"
+          :class="field.dataIndex === 'ai_evaluation' ? 'col-span-2' : ''"
        >
-          <!-- 第二组的AI评价占1/2宽度 -->
-          <template v-if="rowIdx === 1 && colIdx === 0">
+          <template v-if="field.dataIndex === 'ai_evaluation'">
            <div class="flex items-center mb-4px">
              <img width="16" height="16" :src="icon1" class="mr-4px" />
              <span class="cts !color-#737478 mr-4px">AI评价</span>
            </div>
            <div class="flex items-center">
-              <img
-                width="16"
-                height="16"
-                :src="
-                  detailData.ai_evaluation?.status === 1
-                    ? icon4
-                    : detailData.ai_evaluation?.status === 2
-                    ? icon3
-                    : icon2
-                "
-                class="mr-8px"
-              />
+              <template v-if="detailData.ai_evaluate">
+                <img
+                  width="16"
+                  height="16"
+                  :src="
+                    detailData.ai_evaluate?.status === 0 ? icon2 : detailData.ai_evaluate?.status === 1 ? icon3 : icon4
+                  "
+                  class="mr-4px"
+                />

-              <span v-if="detailData.ai_evaluation" class="cts">
-                {{ detailData.ai_evaluation?.text }}。观看: +{{ detailData.ai_evaluation.look_chain }}% 点赞: +{{
-                  detailData.ai_evaluation.like_chain
-                }}%
-              </span>
+                <div class="flex items-center">
+                  <p class="cts">{{ `${detailData.ai_evaluate?.level} | ${detailData.ai_evaluate?.advise}` }}。</p>
+                  <p class="cts text-12px lh-20px">
+                    {{
+                      `观看: ${detailData[`${getPropPrefix(dateType)}view_rate`] ?? '-'}%  点赞: ${
+                        detailData[`${getPropPrefix(dateType)}like_rate`] ?? '-'
+                      }%`
+                    }}
+                  </p>
+                </div>
+              </template>
            </div>
          </template>
          <template v-else>
            <div class="flex items-center mb-4px">
-              <p class="cts !color-#737478 !mr-4px">{{ field.label }}</p>
+              <p class="cts !color-#737478 !mr-4px">{{ field.title }}</p>
              <a-tooltip v-if="field.tooltip" :content="field.tooltip" position="top">
                <icon-question-circle class="tooltip-icon color-#737478" size="16" />
              </a-tooltip>
            </div>
            <p class="cts">
              <template v-if="field.type === 'status'">
-                <span v-if="detailData.status === 1" style="color: #4ad991">正常</span>
-                <span v-else style="color: #ff4d4f">异常</span>
+                <div class="status-tag" :class="`status-tag-${detailData.status}`">
+                  <span class="cts status-tag-text">{{
+                    STATUS_LIST.find((item) => item.value === detailData.status)?.label
+                  }}</span>
+                </div>
+              </template>
+              <template v-else-if="field.dataIndex === 'like_collect_number'">
+                {{
+                  formatNumberShow({
+                    value: `${detailData[`${getPropPrefix(dateType)}like_number`] ?? 0} + ${
+                      detailData[`${getPropPrefix(dateType)}collect_number`] ?? 0
+                    }`,
+                    showExactValue: true,
+                  })
+                }}
              </template>
              <!-- 环比字段特殊渲染 -->
-              <template v-else-if="field.type === 'rate'">
-                <span :style="{ color: detailData[field.dataIndex] > 0 ? 'red' : 'green' }">
-                  <icon-arrow-up v-if="detailData[field.dataIndex] > 0" />
-                  <icon-arrow-down v-else />
-                  {{ detailData[field.dataIndex] }}%
-                </span>
+              <template v-else-if="field.suffix === '%'">
+                <div
+                  class="flex items-center"
+                  :class="detailData[field.dataIndex] > 0 ? 'color-#F64B31' : 'color-#25C883'"
+                >
+                  <icon-arrow-up v-if="detailData[field.dataIndex] > 0" size="16" />
+                  <icon-arrow-down v-else size="16" />
+                  {{ `${(detailData[field.dataIndex] * 100).toFixed(2)}%` }}
+                </div>
              </template>
              <template v-else>
                {{ formatTableField(field, detailData, true) }}
@ -69,14 +91,28 @@
        </div>
      </div>
    </div>
+    <div
+      class="more-btn-row flex items-center absolute right-24px bottom-32px cursor-pointer"
+      @click="showMore = !showMore"
+    >
+      <span class="cts mr-8px !color-#6D4CFE"> {{ showMore ? '收起' : '更多' }} </span>
+      <icon-down
+        size="13"
+        class="!color-#6D4CFE transform transition-transform duration-300 ease-in-out"
+        :class="showMore ? 'rotate-180' : ''"
+      />
+    </div>
  </div>
 </template>

 <script setup>
 import { useRoute } from 'vue-router';

-import { formatTableField } from '@/utils/tools';
-import { accountInfoFields } from '../../constants';
+import { formatTableField, formatNumberShow } 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 { getAccountBoardDetail } from '@/api/all/propertyMarketing';

 import icon1 from '@/assets/img/media-account/icon5.png';
@ -86,39 +122,9 @@ import icon4 from '@/assets/img/media-account/icon-success.png';

 const route = useRoute();
 const id = route.params.id;
+const dateType = route.query.type;
 const detailData = ref({});
-// const detailData = ref({
-//   id: 1,
-//   name: '抖音官方账号',
-//   mobile: '13800138001',
-//   account_id: 'douyin_001',
-//   holder_name: '张三',
-//   operator_id: 1,
-//   platform: 0,
-//   group_id: 1,
-//   status: 1,
-//   is_pause: 0,
-//   fans_number: 1250000,
-//   like_number: 890000,
-//   collect_number: 45000,
-//   view_number: 5600000,
-//   view_chain: -12.5,
-//   like_chain: 8.3,
-//   ai_evaluation: {
-//     status: 1,
-//     text: '表现优质 | 建议保持',
-//     look_chain: 12.5,
-//     like_chain: 8.3,
-//   },
-//   operator: {
-//     id: 1,
-//     name: '李运营',
-//   },
-//   group: {
-//     id: 1,
-//     name: '抖音组',
-//   },
-// });
+const showMore = ref(false);

 const getDetail = async () => {
  const { code, data } = await getAccountBoardDetail(id);
--- a/src/views/property-marketing/media-account/account-detail/components/account-info/style.scss
+++ b/src/views/property-marketing/media-account/account-detail/components/account-info/style.scss
@ -1,3 +1,41 @@
 .account-info-wrap {
+  position: relative;
+  .status-tag {
+    width: fit-content;
+    display: flex;
+    height: 20px;
+    padding: 0px 8px;
+    align-items: center;
+    border-radius: 2px;
+    background: #f2f3f5;

+    .status-tag-text {
+      color: var(--BG-700, #737478);
+    }
+    &-1 {
+      background: #ebf7f2;
+      .status-tag-text {
+        color: #25c883;
+      }
+    }
+
+    &-2,
+    &-4,
+    &-5,
+    &-6,
+    &-7 {
+      background: #ffe7e4;
+      .status-tag-text {
+        color: #f64b31;
+      }
+    }
+
+    &-3 {
+      background: #fff7e5;
+      color: #ffae00;
+      .status-tag-text {
+        color: #ffae00;
+      }
+    }
+  }
 }
--- a/src/views/property-marketing/media-account/account-detail/components/note-table/constants.ts
+++ b/src/views/property-marketing/media-account/account-detail/components/note-table/constants.ts
@ -4,10 +4,16 @@
 */

 export const INITIAL_QUERY = {
-  name: '',
+  title: '',
  published_at: [],
 };

+export const INITIAL_PAGE_INFO = {
+  page: 1,
+  page_size: 20,
+  total: 0,
+};
+
 export const TABLE_COLUMNS = [
  {
    title: '笔记标题',
--- a/src/views/property-marketing/media-account/account-detail/components/note-table/index.vue
+++ b/src/views/property-marketing/media-account/account-detail/components/note-table/index.vue
@ -6,7 +6,7 @@
  <div class="note-table-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid px-24px flex-1 flex flex-col">
    <div class="title-row">
      <div class="flex items-center">
-        <span class="cts !text-18px !lh-26px mr-4px">笔记详情</span>
+        <span class="cts !text-18px !lh-26px mr-4px title">笔记详情</span>
        <icon-question-circle size="16" class="color-#737478" />
      </div>
    </div>
@ -14,7 +14,7 @@
      <div class="filter-row-item flex items-center">
        <span class="label">笔记标题</span>
        <a-space size="medium" class="w-240px">
-          <a-input v-model="query.name" placeholder="请搜索..." size="medium" allow-clear>
+          <a-input v-model="query.title" placeholder="请搜索..." size="medium" allow-clear @change="handleSearch">
            <template #prefix>
              <icon-search />
            </template>
@ -23,13 +23,14 @@
      </div>
      <div class="filter-row-item flex items-center">
        <span class="label">发布日期</span>
-        <a-space size="medium" class="w-240px">
+        <a-space size="medium" class="w-260px">
          <a-range-picker
-            v-model="query.published_at"
+            v-model="published_at"
            size="medium"
            allow-clear
-            format="YYYY-MM-DD HH:mm"
+            format="YYYY-MM-DD"
            class="w-100%"
+            @change="onDateChange"
          />
        </a-space>
      </div>
@ -91,7 +92,7 @@
        show-jumper
        show-page-size
        :current="pageInfo.page"
-        :page-size="pageInfo.pageSize"
+        :page-size="pageInfo.page_size"
        @change="onPageChange"
        @page-size-change="onPageSizeChange"
      />
@ -100,7 +101,7 @@
 </template>

 <script setup>
-import { TABLE_COLUMNS, INITIAL_QUERY } from './constants';
+import { TABLE_COLUMNS, INITIAL_QUERY, INITIAL_PAGE_INFO } from './constants';
 import { useRoute } from 'vue-router';
 import { formatTableField, exactFormatTime } from '@/utils/tools';
 import { getMediaAccountBoardWorks } from '@/api/all/propertyMarketing';
@ -108,33 +109,39 @@ import { getMediaAccountBoardWorks } from '@/api/all/propertyMarketing';
 const route = useRoute();
 const id = route.params.id;
 const dataSource = ref([]);
-const pageInfo = ref({
-  page: 1,
-  pageSize: 20,
-  total: 0,
-});
+const published_at = ref([]);
+const pageInfo = ref(cloneDeep(INITIAL_PAGE_INFO));

 const query = ref(cloneDeep(INITIAL_QUERY));

 const handleSearch = () => {
-  console.log(query.value);
+  reload();
 };

 const handleReset = () => {
-  pageInfo.value.page = 1;
-  pageInfo.value.pageSize = 20;
-  pageInfo.value.total = 0;
+  pageInfo.value = cloneDeep(INITIAL_PAGE_INFO);
  query.value = cloneDeep(INITIAL_QUERY);
+  published_at.value = [];
  reload();
 };

+const onDateChange = (value) => {
+  const FORMAT_DATE = 'YYYY-MM-DD HH:mm:ss';
+  query.value.published_at = [
+    dayjs(value[0]).startOf('day').format(FORMAT_DATE),
+    dayjs(value[1]).endOf('day').format(FORMAT_DATE),
+  ];
+
+  handleSearch();
+};
+
 const onPageChange = (current) => {
  pageInfo.value.page = current;
  getData();
 };

 const onPageSizeChange = (pageSize) => {
-  pageInfo.value.pageSize = pageSize;
+  pageInfo.value.page_size = pageSize;
  reload();
 };

@ -144,7 +151,12 @@ const reload = () => {
 };

 const getData = async () => {
-  const { code, data } = await getMediaAccountBoardWorks(query.value);
+  const { page, page_size } = pageInfo.value;
+  const { code, data } = await getMediaAccountBoardWorks(id, {
+    ...query.value,
+    page,
+    page_size,
+  });
  if (code === 200) {
    dataSource.value = data?.data || [];
    pageInfo.value.total = data.total;
--- a/src/views/property-marketing/media-account/account-detail/constants.ts
+++ b/src/views/property-marketing/media-account/account-detail/constants.ts
@ -2,22 +2,45 @@
 * @Author: RenXiaoDong
 * @Date: 2025-06-28 12:55:44
 */
-export const accountInfoFields = [
-  [
-    { label: '账号名称', dataIndex: 'name' },
-    { label: '项目分组', dataIndex: 'group.name' },
-    { label: '状态', dataIndex: 'status', type: 'status' },
-    { label: '运营人员', dataIndex: 'operator_name' },
-  ],
-  [
-    { label: 'AI评价', dataIndex: 'ai_evaluation' },
-    { label: '粉丝量', dataIndex: 'fans_number', tooltip: '粉丝量' },
-    { label: '总赞藏数', dataIndex: 'like_number', tooltip: '总赞藏数' },
-  ],
-  [
-    { label: '观看量', dataIndex: 'view_number', tooltip: '观看量' },
-    { label: '观看量环比', dataIndex: 'view_chain', tooltip: '观看量环比', suffix: '%', type: 'rate' },
-    { label: '点赞量', dataIndex: 'like_number', tooltip: '点赞量' },
-    { label: '点赞量环比', dataIndex: 'like_chain', tooltip: '点赞量环比', suffix: '%', type: 'rate' },
-  ],
-];
+import { CUSTOM_FIELDS, getPropPrefix } from '@/views/property-marketing/media-account/common_constants';
+
+// 不足4个。就补两个null进去
+export function groupArrayBySize<T extends { dataIndex: string; prop: string }>(
+  fields: T[],
+  groupSize = 4,
+  dateType: string,
+): T[][] {
+  const result: T[][] = [];
+
+  for (let i = 0; i < fields.length; i += groupSize) {
+    result.push(fields.slice(i, i + groupSize));
+  }
+
+  return result.map((item) => {
+    return item.map((item) => {
+      return {
+        ...item,
+        dataIndex: `${getPropPrefix(dateType)}${item.dataIndex}`,
+        prop: `${getPropPrefix(dateType)}${item.prop}`,
+      };
+    });
+  });
+}
+
+export const getAccountInfoFields = (dateType: string, showMore: boolean) => {
+  const baseFields = [
+    [
+      { title: '账号名称', dataIndex: 'name' },
+      { title: '项目分组', dataIndex: 'group.name' },
+      { title: '状态', dataIndex: 'status', type: 'status' },
+      { title: '运营人员', dataIndex: 'operator_name' },
+    ],
+    [
+      { title: 'AI评价', dataIndex: 'ai_evaluation' },
+      { title: '粉丝量', dataIndex: 'fans_number', tooltip: '粉丝量' },
+      { title: '总赞藏数', dataIndex: 'like_collect_number', tooltip: '总赞藏数' },
+    ],
+  ];
+  const customFields = groupArrayBySize(CUSTOM_FIELDS, 4, dateType);
+  return showMore ? [...baseFields, ...customFields] : [...baseFields];
+};
--- a/src/views/property-marketing/media-account/account-detail/style.scss
+++ b/src/views/property-marketing/media-account/account-detail/style.scss
@ -4,11 +4,14 @@
  flex-direction: column;
  :deep(.cts) {
    color: var(--Text-1, #211f24);
-    font-family: 'PuHuiTi-Medium';
+    font-family: 'PuHuiTi-Regular';
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
+    &.title {
+      font-family: 'PuHuiTi-Medium';
+    }
  }
  :deep(.title-row) {
    display: flex;