接口不全

src/api/index.ts

@@ -11,6 +11,7 @@ import {
   IBookSearchResult,
   ADpushSimple,
   IOfficials,
+  ADPlanItem,
 } from "@/types/api";
 
 /**
@@ -71,8 +72,7 @@ export const getAdPushList = (
   return axios("/ad/accounts", { params: query });
 };
 
-
- /** 
+/**
  * 获取公众号列表
  * @param query
  */
@@ -83,3 +83,22 @@ export const getOfficialAccounts = (query: {
 }): AxiosPromise<IList<IOfficials>> => {
   return axios("/userOfficialAccounts", { params: query });
 };
+
+/**
+ * 获取公众号列表
+ * @param query
+ */
+export const getADPlanlist = (
+  query: Partial<{
+    email: string;
+    account_name: string;
+    ad_name: string;
+    status: string;
+    begin_date: string;
+    end_date: string;
+    campaign_name: string;
+    page: number;
+  }> = { page: 1 }
+): AxiosPromise<IList<ADPlanItem>> => {
+  return axios("/ad/adData", { params: query });
+};

src/types/api.d.ts

@@ -76,3 +76,30 @@ export interface IOfficials {
   account_name: string;
   nickname: string;
 }
+
+export interface ADPlanItem {
+  ad_id: string | number;
+  ad_name: string;
+  status: string | number;
+  cpa_bid: string | number;
+  ad_create_time: string;
+  external_url: string;
+  uid: string;
+  delivery_platform: string;
+  cost: number;
+  show: string;
+  crt: string;
+  click: number | string;
+  avg_click_cost: number;
+  avg_show_cost: number;
+  convert: number;
+  convert_cost: number;
+  convert_rate: number;
+  campaign_name: string;
+  email: string;
+  account_name: string;
+  start_time: string;
+  end_time: string;
+  budget: string;
+  aim: string;
+}

src/views/_pageOptions/table-put.ts

@@ -31,32 +31,32 @@ export const TableColumnOfPutAdAccount = [
   {
     title: "邮箱",
     dataIndex: "email",
-    key: 'email',
+    key: "email",
   },
   {
     title: "账户ID",
     dataIndex: "account_id",
-    key: 'account_id',
+    key: "account_id",
   },
   {
     title: "用户名",
     dataIndex: "user_name",
-    key: 'user_name',
+    key: "user_name",
   },
   {
     title: "平台",
     dataIndex: "delivery_platform",
-    key: 'delivery_platform',
+    key: "delivery_platform",
   },
   {
     title: "推广员",
     dataIndex: "account_name",
-    key: 'account_name',
+    key: "account_name",
   },
   {
     title: "状态",
     dataIndex: "status",
-    key: 'status',
+    key: "status",
   },
 ];
 
@@ -159,3 +159,111 @@ export const TableColumnOfPutAdPlan = [
     width: 150,
   },
 ];
+
+export const ALLCloumnList = [
+  {
+    title: "计划名称",
+    dataIndex: "ad_name",
+    width: 150,
+  },
+  {
+    title: "计划状态",
+    dataIndex: "status",
+    width: 150,
+  },
+  {
+    title: "计划预算（元）",
+    dataIndex: "ad_name",
+    width: 150,
+  },
+  {
+    title: "出价（元）",
+    dataIndex: "cpa_bid",
+    width: 150,
+  },
+  {
+    title: "计划ID",
+    dataIndex: "ad_id",
+    width: 150,
+  },
+  {
+    title: "投放场景-竞价策略",
+    dataIndex: "aim",
+    width: 150,
+  },
+  {
+    title: "投放范围",
+    dataIndex: "delivery_platform",
+    width: 150,
+  },
+  {
+    title: "投放时间",
+    dataIndex: "start_time",
+    width: 150,
+  },
+  {
+    title: "下载方式",
+    dataIndex: "ad_name",
+    width: 150,
+  },
+  {
+    title: "下载链接",
+    dataIndex: "ad_name",
+    width: 150,
+  },
+  {
+    title: "落地页链接",
+    dataIndex: "external_url",
+    width: 150,
+  },
+  {
+    title: "应用下载详情页链接",
+    dataIndex: "ad_name",
+    width: 150,
+  },
+  {
+    title: "转化目标",
+    dataIndex: "campaign_name",
+    width: 150,
+  },
+  {
+    title: "深度转化出价（元）",
+    dataIndex: "ad_name",
+    width: 150,
+  },
+  {
+    title: "深度转化目标",
+    dataIndex: "ad_name",
+    width: 150,
+  },
+  {
+    title: "ROI系数",
+    dataIndex: "ad_name",
+    width: 150,
+  },
+  {
+    title: "转换检测地址",
+    dataIndex: "ad_name",
+    width: 150,
+  },
+  {
+    title: "投放设置",
+    dataIndex: "ad_name",
+    width: 150,
+  },
+  {
+    title: "计划诊断",
+    dataIndex: "ad_name",
+    width: 150,
+  },
+  {
+    title: "一键起量",
+    dataIndex: "ad_name",
+    width: 150,
+  },
+  {
+    title: "建议",
+    dataIndex: "ad_name",
+    width: 150,
+  },
+];

src/views/put/put-ad-account.vue

@@ -26,9 +26,7 @@
 
 <script lang="ts">
 import { defineComponent, reactive, toRefs, ref } from "vue";
-
 import ToolBar from "@/components/tool-bar/index.vue";
-
 import { TableColumnOfPutAdAccount } from "../_pageOptions/table-put";
 import usePagination from "@/hooks/usePagination";
 import { getAdPushList } from "@/api";

src/views/put/put-ad-plan.vue

@@ -1,73 +1,104 @@
 <template>
   <div class="page-wrap page-wrap-account">
-    <tool-bar :text="['account_id', 'email', 'user_name', 'plan_name', 'ad_group_name']"
-              :label="['账户ID', '邮箱', '用户名', '计划名称', '广告组名称']">
+    <tool-bar
+      :text="['account_name', 'email', 'ad_name', 'campaign_name']"
+      :label="['账户名', '邮箱', '计划名称', '广告组名称']"
+    >
       <template #picker>
         <p class="label">日期</p>
         <a-range-picker />
       </template>
-      <div class="tool-bar-item">
+      <!-- <div class="tool-bar-item">
         <p class="label">计划状态</p>
         <a-select class="full-width">
           <a-select-option value="status1">状态一</a-select-option>
         </a-select>
-      </div>
+      </div> -->
     </tool-bar>
-    <a-table :columns="columns"
-             :data-source="list"
-             :scroll="{ x: 2500 }"></a-table>
+    <a-table
+      :columns="columns"
+      :data-source="list"
+      :pagination="tablePageOptions"
+      :loading="loading.value"
+      @change="handleTableChange"
+      rowKey="id"
+      :scroll="{ x: 2500 }"
+    ></a-table>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, toRefs } from "vue";
+import { defineComponent, reactive, toRefs, ref } from "vue";
 
 import ToolBar from "@/components/tool-bar/index.vue";
+import usePagination from "@/hooks/usePagination";
+import {
+  TableColumnOfPutAdPlan,
+  ALLCloumnList,
+} from "../_pageOptions/table-put";
 
-import { TableColumnOfPutAdPlan } from "../_pageOptions/table-put";
+import { getADPlanlist } from "@/api";
+
+import { ADPlanItem, PageOptions } from "@/types/api";
 
 const PutAdPlan = defineComponent({
   components: {
     ToolBar,
   },
   setup() {
-    const data = reactive({
+    let { loading, meta, tablePageOptions } = usePagination();
+    const state = reactive({
       platform: "platform1",
-      list: [],
+      list: ref<ADPlanItem[]>([]),
+      inSearching: false,
+      loading,
+      tablePageOptions,
       columns: TableColumnOfPutAdPlan,
-      customColumns: [
-        {
-          title: "计划名称",
-          dataIndex: "plan_name",
-        },
-        {
-          title: "计划状态",
-          dataIndex: "plan_status",
-        },
-        {
-          title: "计划预算(元)",
-          dataIndex: "plan_money",
-        },
-        {
-          title: "出价",
-          dataIndex: "price",
-        },
-        {
-          title: "计划ID",
-          dataIndex: "plan_id",
-        },
-      ],
     });
-
-    // TODO 动态column需要根据具体接口来决定如何写逻辑
-
-    data.columns.push(...(data.customColumns as any[]));
-
-    console.log(data.columns);
-
-    return { ...toRefs(data) };
+    state.columns.push(...(ALLCloumnList as any[]));
+    const onSearch = async (fields: Record<string, string>) => {
+      try {
+        const {
+          email,
+          account_name,
+          ad_name,
+          status,
+          begin_date,
+          end_date,
+          campaign_name,
+        } = fields;
+        const { data } = await getADPlanlist({
+          email,
+          account_name,
+          ad_name,
+          status,
+          begin_date,
+          end_date,
+          campaign_name,
+          page: 1,
+        });
+        state.list = data.list;
+        meta = data.meta;
+      } catch (e) {
+        console.log(e);
+      } finally {
+        console.log(state.inSearching);
+        state.inSearching = false;
+      }
+    };
+    getADPlanlist().then((res) => {
+      state.list = res.data.list;
+    });
+    const handleTableChange = (pagination: PageOptions) => {
+      const { current, pageSize, total } = pagination;
+      getADPlanlist({ page: current }).then((res) => {
+        state.list = res.data.list;
+        meta = res.data.meta;
+      });
+    };
+    return { ...toRefs(state), handleTableChange };
   },
 });
 
 export default PutAdPlan;
-</script>
+</script>