📦 页面

src/components/tool-bar/index.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="tool-bar-wrap">
+    <div class="tool-bar-item tool-bar-range-item"
+         v-show="showPickerSlots">
+      <slot name="picker" />
+    </div>
+    <div class="tool-bar-item"
+         v-for="(field, index) in text"
+         :key="field">
+      <p class="label">{{label[index]}}</p>
+      <a-input v-model:value="fields[field]"
+               :placeholder="label[index]"
+               size="large" />
+    </div>
+    <slot />
+    <div class="tool-bar-item">
+      <a-button type="primary"
+                size="large">
+        <template #icon>
+          <search-outlined />
+        </template>
+        查询
+      </a-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, ref } from "vue";
+import { SearchOutlined } from "@ant-design/icons-vue";
+
+const ToolBar = defineComponent({
+  components: {
+    SearchOutlined,
+  },
+  props: {
+    text: {
+      type: Object as PropType<string[]>,
+      default: () => ref<string[]>([]),
+    },
+    label: {
+      type: Object as PropType<string[]>,
+      default: () => ref<string[]>([]),
+    },
+  },
+  setup(props, { emit, slots }) {
+    const fields = ref<{ [key: string]: string }>({});
+
+    let showPickerSlots = ref(!!slots.picker);
+
+    props.text.forEach((field) => {
+      fields.value[field] = "";
+    });
+
+    return { fields, showPickerSlots };
+  },
+});
+
+export default ToolBar;
+</script>
+
+<style lang="scss">
+.tool-bar-wrap {
+  @include flex($space: flex-start, $align: flex-end);
+  flex-flow: row wrap;
+  border-bottom: 1px solid #d4d4d4;
+  margin-bottom: 10px;
+
+  .tool-bar-item {
+    width: 25%;
+    font-size: 14px;
+    color: #333;
+    box-sizing: border-box;
+    padding: 10px 15px;
+
+    .label {
+      text-align: left;
+      margin-bottom: 5px;
+    }
+
+    &.tool-bar-range-item {
+      width: 30%;
+    }
+  }
+}
+</style>

src/plugins/install.ts

@@ -2,12 +2,14 @@ import { App } from "vue";
 import {
   Button,
   ConfigProvider,
+  DatePicker,
   Form,
   Input,
   Layout,
   Menu,
   Modal,
-  notification,
+  Select,
+  Table,
 } from "ant-design-vue";
 
 import VueClipboard3 from "./vue-clipboard";
@@ -27,7 +29,10 @@ const install = (app: App<Element>) => {
     .use(Menu)
     .use(Form)
     .use(Input)
-    .use(Button);
+    .use(Button)
+    .use(Select)
+    .use(DatePicker)
+    .use(Table);
 };
 
 export default install;

src/scss/index.scss

@@ -4,6 +4,9 @@
 // @import "./components/index.scss";
 // @import "./views/index.scss";
 body {
+  min-width: 1300px;
+  overflow-x: auto;
+
   p {
     margin-bottom: 0;
   }
@@ -33,3 +36,11 @@ body {
     height: 0;
   }
 }
+
+.full-width {
+  width: 100%;
+}
+
+.page-wrap {
+  padding: 23px;
+}

src/views/_pageOptions/table-account.ts

@@ -0,0 +1,35 @@
+export const TableColumnOfAccount = [
+  {
+    title: "公众号名称",
+    dataIndex: "name",
+  },
+  {
+    title: "公众号唯一标识",
+    dataIndex: "openid",
+  },
+  {
+    title: "平台",
+    dataIndex: "platform",
+  },
+  {
+    title: "站点",
+    dataIndex: "channel",
+  },
+  {
+    title: "推广员",
+    dataIndex: "promoter",
+  },
+  {
+    title: "开始时间",
+    dataIndex: "start_time",
+  },
+  {
+    title: "结束时间",
+    dataIndex: "end_time",
+  },
+  {
+    title: "操作",
+    key: "operator",
+    slots: { customRender: "operator" },
+  },
+];

src/views/_pageOptions/table-put.ts

@@ -0,0 +1,137 @@
+export const TableColumnOfPutBooks = [
+  {
+    title: "公众号名称",
+    dataIndex: "name",
+  },
+  {
+    title: "书籍",
+    dataIndex: "book_name",
+  },
+  {
+    title: "推广员",
+    dataIndex: "promoter",
+  },
+  {
+    title: "流量平台",
+    dataIndex: "platform",
+  },
+
+  {
+    title: "开始时间",
+    dataIndex: "start_time",
+  },
+  {
+    title: "结束时间",
+    dataIndex: "end_time",
+  },
+  {
+    title: "操作",
+    key: "operator",
+    slots: { customRender: "operator" },
+  },
+];
+
+export const TableColumnOfPutAdAccount = [
+  {
+    title: "邮箱",
+    dataIndex: "email",
+  },
+  {
+    title: "账户ID",
+    dataIndex: "account",
+  },
+  {
+    title: "用户名",
+    dataIndex: "user",
+  },
+  {
+    title: "平台",
+    dataIndex: "platform",
+  },
+  {
+    title: "推广员",
+    dataIndex: "promoter",
+  },
+  {
+    title: "状态",
+    dataIndex: "status",
+  },
+  {
+    title: "操作",
+    key: "operator",
+    slots: { customRender: "operator" },
+  },
+];
+
+export const TableColumnOfPutData = [
+  {
+    fixed: "left",
+    title: "日期",
+    dataIndex: "date",
+    width: 100,
+  },
+  {
+    title: "公众号名称",
+    dataIndex: "account",
+    width: 150,
+  },
+  {
+    title: "书名",
+    dataIndex: "book_name",
+  },
+  {
+    title: "消耗",
+    dataIndex: "cost",
+  },
+  {
+    title: "新增注册用户",
+    dataIndex: "add_register_user",
+  },
+  {
+    title: "流量平台",
+    dataIndex: "platform",
+  },
+  {
+    title: "注册成本",
+    dataIndex: "register_number",
+  },
+  {
+    title: "支付粉价",
+    dataIndex: "fans_cost",
+  },
+  {
+    title: "累计回本",
+    dataIndex: "cumulative",
+  },
+  {
+    fixed: "right",
+    title: "24小时回本率",
+    dataIndex: "day_rate",
+    width: 120,
+  },
+  {
+    fixed: "right",
+    title: "3天回本率",
+    dataIndex: "three_day_rate",
+    width: 100,
+  },
+  {
+    fixed: "right",
+    title: "7天回本率",
+    dataIndex: "week_rate",
+    width: 100,
+  },
+  {
+    fixed: "right",
+    title: "30天回本率",
+    dataIndex: "month_rate",
+    width: 120,
+  },
+  {
+    fixed: "right",
+    title: "操作",
+    key: "operator",
+    width: 200,
+    slots: { customRender: "operator" },
+  },
+];

src/views/account/account.vue

@@ -1,3 +1,44 @@
 <template>
-  <div>公众号管理</div>
-</template>
+  <div class="page-wrap page-wrap-account">
+    <tool-bar :text="['name']"
+              :label="['公众号名称']">
+      <div class="tool-bar-item">
+        <p class="label">平台</p>
+        <a-select class="full-width"
+                  size="large"
+                  v-model:value="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"
+             :data-source="list"></a-table>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, toRefs } from "vue";
+
+import ToolBar from "@/components/tool-bar/index.vue";
+
+import { TableColumnOfAccount } from "@/views/_pageOptions/table-account";
+
+const Account = defineComponent({
+  components: {
+    ToolBar,
+  },
+  setup() {
+    const data = reactive({
+      platform: "platform1",
+      list: [],
+      columns: TableColumnOfAccount,
+    });
+
+    return { ...toRefs(data) };
+  },
+});
+
+export default Account;
+</script>

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

@@ -1,3 +1,32 @@
 <template>
-  <div>投放广告账号</div>
-</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>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, toRefs } from "vue";
+
+import ToolBar from "@/components/tool-bar/index.vue";
+
+import { TableColumnOfPutAdAccount } from "../_pageOptions/table-put";
+
+const PutBooks = defineComponent({
+  components: {
+    ToolBar,
+  },
+  setup() {
+    const data = reactive({
+      list: [],
+      columns: TableColumnOfPutAdAccount,
+    });
+
+    return { ...toRefs(data) };
+  },
+});
+
+export default PutBooks;
+</script>

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

@@ -1,3 +1,38 @@
 <template>
-  <div>投放广告计划</div>
-</template>
+  <div class="page-wrap page-wrap-account">
+    <tool-bar :text="['account_id', 'email', 'user_name', 'plan_name', 'ad_group_name']"
+              :label="['账户ID', '邮箱', '用户名', '计划名称', '广告组名称']">
+      <template #picker>
+        <p class="label">日期</p>
+        <a-range-picker size="large" />
+      </template>
+    </tool-bar>
+    <a-table :columns="columns"
+             :data-source="list"></a-table>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, toRefs } from "vue";
+
+import ToolBar from "@/components/tool-bar/index.vue";
+
+import { TableColumnOfAccount } from "@/views/_pageOptions/table-account";
+
+const Account = defineComponent({
+  components: {
+    ToolBar,
+  },
+  setup() {
+    const data = reactive({
+      platform: "platform1",
+      list: [],
+      columns: TableColumnOfAccount,
+    });
+
+    return { ...toRefs(data) };
+  },
+});
+
+export default Account;
+</script>

src/views/put/put-book.vue

@@ -1,3 +1,32 @@
 <template>
-  <div>投放书籍</div>
-</template>
+  <div class="page-wrap page-wrap-put-books">
+    <tool-bar :text="['name', 'book_name']"
+              :label="['公众号名称', '书名']" />
+    <a-table :columns="columns"
+             :data-source="list"></a-table>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, toRefs } from "vue";
+
+import ToolBar from "@/components/tool-bar/index.vue";
+
+import { TableColumnOfPutBooks } from "../_pageOptions/table-put";
+
+const PutBooks = defineComponent({
+  components: {
+    ToolBar,
+  },
+  setup() {
+    const data = reactive({
+      list: [],
+      columns: TableColumnOfPutBooks,
+    });
+
+    return { ...toRefs(data) };
+  },
+});
+
+export default PutBooks;
+</script>

src/views/put/put-data.vue

@@ -1,3 +1,38 @@
 <template>
-  <div>投放数据</div>
-</template>
+  <div class="page-wrap page-wrap-put-books">
+    <tool-bar :text="['account', 'user']"
+              :label="['公众号名称', '用户名']">
+      <template #picker>
+        <p class="label">日期</p>
+        <a-range-picker size="large" />
+      </template>
+    </tool-bar>
+    <a-table :columns="columns"
+             :data-source="list"
+             :scroll="{x: 1800}"></a-table>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, toRefs } from "vue";
+
+import ToolBar from "@/components/tool-bar/index.vue";
+
+import { TableColumnOfPutData } from "../_pageOptions/table-put";
+
+const PutBooks = defineComponent({
+  components: {
+    ToolBar,
+  },
+  setup() {
+    const data = reactive({
+      list: [],
+      columns: TableColumnOfPutData,
+    });
+
+    return { ...toRefs(data) };
+  },
+});
+
+export default PutBooks;
+</script>