广告账号

src/api/index.ts

@@ -9,6 +9,7 @@ import {
   IDeliveryBook,
   IOfficialSimple,
   IBookSearchResult,
+  ADpushSimple,
 } from "@/types/api";
 
 /**
@@ -54,3 +55,17 @@ export const getBooksByName = (
 ): AxiosPromise<IList<IBookSearchResult>> => {
   return axios("/searchBooks", { params: { key_word, page } });
 };
+
+/**
+ * @description: 获取广告投放列表
+ */
+export const getAdPushList = (
+  query: Partial<{
+    email: string;
+    account_name: string;
+    account_id: string;
+    page: number;
+  }> = { page: 1 }
+): AxiosPromise<IList<ADpushSimple>> => {
+  return axios("/ad/accounts", { params: query });
+};

src/components/tool-bar/index.vue

@@ -21,6 +21,7 @@
         </template>
         查询
       </a-button>
+      <slot name="exbutton" />
     </div>
   </div>
 </template>
@@ -51,7 +52,6 @@ const ToolBar = defineComponent({
   setup(props, { emit, slots }) {
     const fields = ref<{ [key: string]: string }>({});
     let btn_loading = ref(props.loading);
-
     let showPickerSlots = ref(!!slots.picker);
 
     props.text.forEach((field) => {

src/scss/index.scss

@@ -93,3 +93,7 @@ body {
 .operator-bar {
   margin-bottom: 15px;
 }
+
+.ml-10{
+margin-left: 10px;
+}

src/types/api.d.ts

@@ -49,3 +49,19 @@ export interface IOfficialSimple {
   id: number;
   name: string;
 }
+
+export interface ADpushSimple {
+  id: number;
+  email: string;
+  account_id: string | number;
+  account_name: string;
+  delivery_platform: string;
+  user_name: string;
+  status: string | number;
+}
+
+export interface PageOptions {
+  current: number;
+  pageSize: number;
+  total: number;
+}

src/types/global.d.ts

@@ -13,3 +13,5 @@ declare type SelectOptions<T = any> = {
 }[];
 
 declare type EmitType = (event: string, ...args: any[]) => void;
+
+

src/views/_pageOptions/table-put.ts

@@ -31,31 +31,32 @@ export const TableColumnOfPutAdAccount = [
   {
     title: "邮箱",
     dataIndex: "email",
+    key: 'email',
   },
   {
     title: "账户ID",
-    dataIndex: "account",
+    dataIndex: "account_id",
+    key: 'account_id',
   },
   {
     title: "用户名",
-    dataIndex: "user",
+    dataIndex: "user_name",
+    key: 'user_name',
   },
   {
     title: "平台",
-    dataIndex: "platform",
+    dataIndex: "delivery_platform",
+    key: 'delivery_platform',
   },
   {
     title: "推广员",
-    dataIndex: "promoter",
+    dataIndex: "account_name",
+    key: 'account_name',
   },
   {
     title: "状态",
     dataIndex: "status",
-  },
-  {
-    title: "操作",
-    key: "operator",
-    slots: { customRender: "operator" },
+    key: 'status',
   },
 ];
 

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

@@ -1,32 +1,88 @@
 <template>
   <div class="page-wrap page-wrap-put-books">
-    <tool-bar :text="['email', 'account', 'user']"
-              :label="['邮箱', '账户ID', '用户名']" />
-    <a-table :columns="columns"
-             :data-source="list"></a-table>
+    <tool-bar
+      :text="['email', 'account_id', 'account_name']"
+      :label="['邮箱', '账户ID', '用户名']"
+      v-model:loading="inSearching"
+      @confirm="onSearch"
+    >
+      <template #exbutton>
+        <a-button type="primary" class="ml-10">
+          授权
+        </a-button>
+      </template>
+    </tool-bar>
+    <a-table
+      :columns="columns"
+      :data-source="list"
+      :pagination="tablePageOptions"
+      :loading="loading.value"
+      @change="handleTableChange"
+      rowKey="id"
+    >
+    </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 { TableColumnOfPutAdAccount } from "../_pageOptions/table-put";
+import usePagination from "@/hooks/usePagination";
+import { getAdPushList } from "@/api";
+import { ADpushSimple, PageOptions } from "@/types/api";
+import useDebounceFn from "@/hooks/useDebounceFn";
 
 const PutAdAccount = defineComponent({
   components: {
     ToolBar,
   },
   setup() {
-    const data = reactive({
-      list: [],
+    let { loading, meta, tablePageOptions } = usePagination();
+    const state = reactive({
+      list: ref<ADpushSimple[]>([]),
       columns: TableColumnOfPutAdAccount,
+      inSearching: false,
+      loading,
+      tablePageOptions,
     });
+    getAdPushList({ page: 1 }).then((res) => {
+      state.list = res.data.list;
+      meta = res.data.meta;
+    });
+    const onSearch = async (fields: Record<string, string>) => {
+      try {
+        const { email, account_name, account_id } = fields;
+        console.log(account_name, account_id);
+        const { data } = await getAdPushList({
+          email,
+          account_name,
+          account_id,
+          page: 1,
+        });
+        state.list = data.list;
+        meta = data.meta;
+      } catch (e) {
+        console.log(e);
+      } finally {
+        console.log(state.inSearching);
+        state.inSearching = false;
+      }
+    };
+
+    const handleTableChange = (pagination: PageOptions) => {
+      const { current, pageSize, total } = pagination;
+      getAdPushList({ page: current }).then((res) => {
+        state.list = res.data.list;
+        meta = res.data.meta;
+      });
+    };
 
-    return { ...toRefs(data) };
+    return { ...toRefs(state), onSearch, handleTableChange };
   },
 });
 
 export default PutAdAccount;
-</script>
+</script>