Merge branch 'master' of qk:zhuishuyun/precise_delivery_distribution_front

src/api/index.ts

@@ -10,6 +10,7 @@ import {
   IOfficialSimple,
   IBookSearchResult,
   ADpushSimple,
+  IOfficials,
 } from "@/types/api";
 
 /**
@@ -69,3 +70,16 @@ export const getAdPushList = (
 ): AxiosPromise<IList<ADpushSimple>> => {
   return axios("/ad/accounts", { params: query });
 };
+
+
+ /** 
+ * 获取公众号列表
+ * @param query
+ */
+export const getOfficialAccounts = (query: {
+  official_name: string;
+  platform: string;
+  page: number;
+}): AxiosPromise<IList<IOfficials>> => {
+  return axios("/userOfficialAccounts", { params: query });
+};

src/types/api.d.ts

@@ -64,4 +64,15 @@ export interface PageOptions {
   current: number;
   pageSize: number;
   total: number;
-}
+}
+
+export interface IOfficials {
+  id: number;
+  start_time: string;
+  end_time: string;
+  app_id: string;
+  platform: string;
+  channel_id: number;
+  account_name: string;
+  nickname: string;
+}

src/views/account/account.vue

@@ -1,41 +1,75 @@
 <template>
   <div class="page-wrap page-wrap-account">
     <tool-bar :text="['name']"
-              :label="['公众号名称']">
+              :label="['公众号名称']"
+              v-model:loading="searching"
+              @confirm="onSearch">
       <div class="tool-bar-item">
         <p class="label">平台</p>
         <a-select class="full-width"
-                  v-model:value="platform">
+                  v-model:value="query.platform">
           <a-select-option value="platform1">平台1</a-select-option>
           <a-select-option value="platform2">平台2</a-select-option>
           <a-select-option value="platform3">平台3</a-select-option>
         </a-select>
       </div>
     </tool-bar>
-    <a-table :columns="columns"
+    <a-table :loading="loading"
+             :pagination="tablePageOptions"
+             :columns="columns"
              :data-source="list"></a-table>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, toRefs } from "vue";
+import { defineComponent, onMounted, reactive, ref, toRefs } from "vue";
 
 import ToolBar from "@/components/tool-bar/index.vue";
 
+import usePagination from "@/hooks/usePagination";
+
 import { TableColumnOfAccount } from "@/views/_pageOptions/table-account";
+import { getOfficialAccounts } from "@/api";
+import { IOfficials } from "@/types/api";
 
 const Account = defineComponent({
   components: {
     ToolBar,
   },
   setup() {
-    const data = reactive({
+    let { loading, meta, tablePageOptions } = usePagination();
+
+    const state = reactive({
       platform: "platform1",
-      list: [],
+      list: ref<IOfficials[]>([]),
       columns: TableColumnOfAccount,
+      searching: false,
+      query: {
+        official_name: "",
+        platform: "",
+        page: 1,
+      },
     });
 
-    return { ...toRefs(data) };
+    const onSearch = (fields: Record<string, string>) => {
+      const { name } = fields;
+      state.query.official_name = name;
+      onLoadOfficials();
+    };
+
+    const onLoadOfficials = () => {
+      loading.value = true;
+      getOfficialAccounts(state.query).then(({ data }) => {
+        state.list = data.list;
+        meta = data.meta;
+        loading.value = false;
+        state.searching = false;
+      });
+    };
+
+    onMounted(onLoadOfficials);
+
+    return { ...toRefs(state), loading, tablePageOptions, onSearch };
   },
 });