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

<!--
 * @Author: RenXiaoDong
 * @Date: 2025-06-25 10:02:20
-->

<template>
  <div class="account-dashboard-wrap">
    <div class="filter-wrap bg-#fff border-radius-8px px-24px pb-20px mb-16px">
      <div class="top flex h-64px py-10px justify-between items-center mb-19px">
        <div class="flex items-center">
          <p class="text-18px font-400 lh-26px color-#211F24 title">数据总览</p>
          <img :src="icon1" width="14" height="14" class="cursor-pointer ml-4px" />
        </div>
      </div>
      <div class="overview-row flex">
        <div v-for="item in CARD_FIELDS" :key="item.prop" class="overview-item flex-1">
          <div class="flex items-center mb-8px">
            <img :src="item.icon" width="24" height="24" class="mr-8px" />
            <p class="s2 color-#211F24">{{ item.label }}</p>
            <a-tooltip v-if="item.tooltip" :content="item.tooltip" position="bottom">
              <img :src="icon1" width="14" height="14" class="cursor-pointer ml-4px" />
            </a-tooltip>
          </div>
          <span class="s1 color-#211F24 ml-28px">{{
            item.prop === 'total_like_number'
              ? formatNumberShow(overviewData.total_like_number + overviewData.total_collect_number)
              : formatNumberShow(overviewData[item.prop])
          }}</span>
        </div>
      </div>
    </div>
    <div class="filter-wrap bg-#fff border-radius-8px px-24px py-24px mb-16px">
      <FilterBlock v-model:query="query" @onSearch="handleSearch" @onReset="handleReset" />
    </div>
    <div class="table-wrap bg-#fff border-radius-8px px-24px py-24px flex-1">
      <AccountTable
        :dataSource="dataSource"
        @edit="handleEdit"
        @delete="handleDelete"
        @selectionChange="handleSelectionChange"
      />
      <div class="pagination-box">
        <a-pagination
          :total="pageInfo.total"
          size="mini"
          show-total
          show-jumper
          show-page-size
          :current="pageInfo.page"
          :page-size="pageInfo.pageSize"
          @change="onPageChange"
          @page-size-change="onPageSizeChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import FilterBlock from './components/filter-block';
import AccountTable from './components/account-table';

import { getAccountBoardOverview, getAccountBoardList } from '@/api/all/propertyMarketing';

import { formatNumberShow } from '@/utils/tools';
import { INITIAL_QUERY } from './constants';

import { CARD_FIELDS } from './constants';
import icon1 from '@/assets/img/icon-question.png';

const query = ref(cloneDeep(INITIAL_QUERY));
const dataSource = ref([]);
const overviewData = ref({});
const selectedItems = ref([]);
const pageInfo = reactive({
  page: 1,
  pageSize: 20,
  total: 100,
});

// 测试数据
const mockData = [
  {
    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,
    operator: {
      id: 1,
      name: '李运营',
    },
    group: {
      id: 1,
      name: '抖音组',
    },
  },
  {
    id: 2,
    name: '小红书美妆号',
    mobile: '13800138002',
    account_id: 'xhs_001',
    holder_name: '李四',
    operator_id: 2,
    platform: 1,
    group_id: 2,
    status: 1,
    is_pause: 1,
    fans_number: 890000,
    like_number: 670000,
    collect_number: 89000,
    view_number: 3200000,
    view_chain: -5.2,
    like_chain: 15.7,
    operator: {
      id: 2,
      name: '王运营',
    },
    group: {
      id: 2,
      name: '小红书组',
    },
  },
  {
    id: 3,
    name: '抖音美食号',
    mobile: '13800138003',
    account_id: 'douyin_002',
    holder_name: '王五',
    operator_id: 1,
    platform: 0,
    group_id: 1,
    status: 0,
    is_pause: 0,
    fans_number: 0,
    like_number: 0,
    collect_number: 0,
    view_number: 0,
    view_chain: 0,
    like_chain: 0,
    operator: {
      id: 1,
      name: '李运营',
    },
    group: {
      id: 1,
      name: '抖音组',
    },
  },
  {
    id: 4,
    name: '小红书穿搭号',
    mobile: '13800138004',
    account_id: 'xhs_002',
    holder_name: '赵六',
    operator_id: 2,
    platform: 1,
    group_id: 2,
    status: 2,
    is_pause: 0,
    fans_number: 450000,
    like_number: 320000,
    collect_number: 23000,
    view_number: 1800000,
    view_chain: -12.8,
    like_chain: -8.5,
    operator: {
      id: 2,
      name: '王运营',
    },
    group: {
      id: 2,
      name: '小红书组',
    },
  },
  {
    id: 5,
    name: '抖音科技号',
    mobile: '13800138005',
    account_id: 'douyin_003',
    holder_name: '钱七',
    operator_id: 3,
    platform: 0,
    group_id: 3,
    status: 1,
    is_pause: 0,
    fans_number: 2100000,
    like_number: 1500000,
    collect_number: 120000,
    view_number: 8900000,
    view_chain: 25.6,
    like_chain: 18.9,
    operator: {
      id: 3,
      name: '陈运营',
    },
    group: {
      id: 3,
      name: '科技组',
    },
  },
];

const getOverviewData = async () => {
  // 使用模拟数据
  overviewData.value = {
    total_number: 5,
    total_fans_number: 4690000,
    total_like_number: 3380000,
    total_collect_number: 1230000,
    in_the_past_seven_days_view_number: 19500000,
  };

  // 如果有真实接口，可以这样调用：
  // const { code, data } = await getAccountBoardOverview();
  // if (code === 200) {
  //   overviewData.value = data;
  // }
};

const getData = async () => {
  // 使用模拟数据
  dataSource.value = mockData;
  pageInfo.total = mockData.length;

  // 如果有真实接口，可以这样调用：
  // const { code, data } = await getAccountBoardList(query.value);
  // if (code === 200) {
  //   dataSource.value = data.data;
  //   pageInfo.total = data.total;
  // }
};

const onPageChange = (current) => {
  pageInfo.page = current;
  getData();
};

const onPageSizeChange = (pageSize) => {
  pageInfo.pageSize = pageSize;
  reload();
};

const handleSearch = () => {
  getData();
};

const reload = () => {
  pageInfo.page = 1;
  getData();
};

const handleReset = () => {
  query.value = cloneDeep(INITIAL_QUERY);
  reload();
};

const handleEdit = (record) => {
  console.log('编辑账号:', record);
  // 这里可以打开编辑弹窗
};

const handleDelete = (record) => {
  console.log('删除账号:', record);
  // 这里可以打开删除确认弹窗
};

const handleSelectionChange = (selectedRows) => {
  selectedItems.value = selectedRows;
  console.log('选中的账号:', selectedRows);
};

onMounted(() => {
  getOverviewData();
  getData();
});
</script>

<style scoped lang="scss">
@import './style.scss';
</style>