feat: 账号数据看板、账户详情、投放数据

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

@@ -0,0 +1,245 @@
+<!--
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-28 14:13:42
+-->
+<template>
+  <div class="account-data-wrap">
+    <div class="filter-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid pb-24px mb-16px">
+      <a-tabs v-model="activeTab" @tab-click="handleTabClick">
+        <a-tab-pane :key="1" title="账户"></a-tab-pane>
+        <a-tab-pane :key="2" title="项目"></a-tab-pane>
+      </a-tabs>
+      <FilterBlock v-model:query="query" @onSearch="handleSearch" @onReset="handleReset" />
+    </div>
+    <div
+      class="table-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid px-24px py-24px flex-1 flex flex-col"
+    >
+      <AccountTable
+        ref="accountTableRef"
+        :isAccountTab="isAccountTab"
+        :dataSource="dataSource"
+        @export="handleExport"
+        @sorterChange="handleSorterChange"
+        @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 { INITIAL_QUERY } from './constants';
+
+const query = ref({});
+const dataSource = ref([]);
+const pageInfo = reactive({
+  page: 1,
+  pageSize: 20,
+  total: 100,
+});
+const selectedRowKeys = ref([]);
+const activeTab = ref(1);
+const accountTableRef = ref(null);
+
+const isAccountTab = computed(() => activeTab.value === 1);
+
+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,
+    total_consumption: 1000000,
+    balance: 1000000,
+    roi: 1.2,
+    roi_chain: -32.5,
+    cpa: 1.2,
+    cpa_chain: -32.5,
+    conversion_number: 10000,
+    conversion_chain: 12.5,
+    conversion_rate: 1.2,
+    conversion_rate_chain: -2.5,
+    ai_evaluation: {
+      status: 1,
+      text: '表现优质 | 建议保持',
+      look_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,
+    total_consumption: 1000000,
+    balance: 1000000,
+    roi: 1.2,
+    roi_chain: 12.5,
+    cpa: 1.2,
+    cpa_chain: 22.5,
+    conversion_number: 10000,
+    conversion_chain: 12.5,
+    conversion_rate: 1.2,
+    conversion_rate_chain: -2.5,
+    ai_evaluation: {
+      status: 2,
+      text: '表现中等 | 建议优化',
+      look_chain: -12.5,
+      like_chain: 8.3,
+    },
+    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,
+    total_consumption: 1000000,
+    balance: 1000000,
+    roi: 32898,
+    roi_chain: 12.5,
+    cpa: 1.2,
+    cpa_chain: -32.5,
+    conversion_number: 10000,
+    conversion_chain: 12.5,
+    conversion_rate: 1.2,
+    conversion_rate_chain: -2.5,
+    ai_evaluation: {
+      status: 3,
+      text: '表现较差 | 建议整改',
+      look_chain: -12.5,
+      like_chain: -8.3,
+    },
+    operator: {
+      id: 1,
+      name: '李运营',
+    },
+    group: {
+      id: 1,
+      name: '抖音组',
+    },
+  },
+];
+
+const getData = () => {
+  dataSource.value = mockData;
+  pageInfo.total = mockData.length;
+};
+
+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 = () => {
+  pageInfo.page = 1;
+  pageInfo.pageSize = 20;
+  pageInfo.total = 0;
+  selectedRowKeys.value = [];
+  accountTableRef.value?.resetTable();
+  query.value = cloneDeep(INITIAL_QUERY);
+  reload();
+};
+
+const handleSorterChange = (column, order) => {
+  query.value.column = column;
+  query.value.order = order;
+  reload();
+};
+const handleSelectionChange = (selectedRows) => {
+  selectedRowKeys.value = selectedRows;
+  console.log('选中的账号:', selectedRowKeys.value);
+};
+
+const handleTabClick = (tab) => {
+  activeTab.value = tab.key;
+  handleReset();
+};
+
+onMounted(() => {
+  getData();
+});
+</script>
+
+<style scoped lang="scss">
+@import './style.scss';
+</style>