新增流量统计页面

vue-admin-template-master/src/api/order.js

@@ -140,3 +140,19 @@ export function statisticsbytitle(data) {
     data
   });
 }
+
+//流量入口列表
+export function inviteStatistics() {
+  return request({
+    url: "/dashboard/invite/statistics",
+    method: "get"
+  });
+}
+//流量入口统计
+export function inviteStatisticsByinvitor(data) {
+  return request({
+    url: "/dashboard/invite/statistics/byinvitor",
+    method: "post",
+    data
+  });
+}

vue-admin-template-master/src/router/index.js

@@ -183,6 +183,12 @@ export const constantRoutes = [
         name: "Query",
         component: () => import("@/views/orders/query"),
         meta: { title: "查询", noCache: false }
+      },
+      {
+        path: "statistics",
+        name: "Statistics",
+        component: () => import("@/views/orders/statistics"),
+        meta: { title: "流量转化统计" }
       }
     ]
   },

vue-admin-template-master/src/views/orders/statistics/index.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="wrapper">
+    <div>
+      <h4>流量转化</h4>
+      <el-table
+        :data="receiveTableData"
+        border
+        style="width: 100%"
+        @cell-click="receiveClick"
+      >
+        <el-table-column prop="title" label="流量入口"> </el-table-column>
+        <!-- <el-table-column prop="value" label="券数量"> </el-table-column> -->
+      </el-table>
+    </div>
+
+    <!-- 搜索 -->
+    <div class="mt-40">
+      <div class="search">
+        <el-input
+          class="input"
+          v-model="input"
+          clearable
+          placeholder="流量入口"
+        ></el-input>
+        <el-button
+          class="mr-10"
+          type="primary"
+          @click="search"
+          :loading="searchLoading"
+          >查 询</el-button
+        >
+      </div>
+      <div class="mt-20">
+        <el-row :gutter="12">
+          <el-col :span="8">
+            <el-card shadow="hover">
+              邀请用户数： <span class="num">{{ receiveNum }}</span>
+            </el-card>
+          </el-col>
+          <el-col :span="8">
+            <el-card shadow="hover">
+              支付订单数：<span class="num">{{ useNum }}</span>
+            </el-card>
+          </el-col>
+          <el-col :span="8">
+            <el-card shadow="hover">
+              退款订单数：<span class="num">{{ refunds }}</span>
+            </el-card>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+    <!-- <div class="mt-20 font-color">
+      注: <br />
+      1. 此处统计全部平台、途径发放的券,包括二维码形式与随机码串形式 <br />
+      2. 领取和使用没有时间上的关联关系 <br />
+      3. 用户取消订单后的返券视为再次领取
+    </div> -->
+  </div>
+</template>
+
+<script>
+import { inviteStatistics, inviteStatisticsByinvitor } from "@/api/order";
+export default {
+  data() {
+    return {
+      queryLoading: false,
+      time: "",
+      pickeroptions: {
+        disabledDate: time => {
+          return time.getTime() > Date.now() - 8.64e6;
+        }
+      },
+      receiveTableData: [],
+      useTableData: [],
+
+      input: "",
+      searchLoading: false,
+      receiveNum: 0,
+      useNum: 0,
+      refunds: 0
+    };
+  },
+  created() {
+    this.init();
+  },
+  methods: {
+    async init() {
+      let res = await inviteStatistics();
+      let newResult = res.map(v => {
+        return {
+          title: v
+        };
+      });
+      this.receiveTableData = newResult;
+    },
+    receiveClick(row, column, cell, event) {
+      this.input = row.title;
+      this.search();
+    },
+    async search() {
+      if (!this.input) return this.$message.error("请输入流量入口");
+      this.searchLoading = true;
+      let res = await inviteStatisticsByinvitor({
+        invitor: this.input
+      });
+      this.receiveNum = res.invites;
+      this.useNum = res.pays;
+      this.refunds = res.refunds;
+      this.searchLoading = false;
+    }
+  }
+};
+</script>
+
+<style>
+.wrapper {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 20px;
+  overflow-y: scroll;
+}
+.mr-10 {
+  margin-left: 20px;
+}
+.mt-20 {
+  margin: 20px 0;
+}
+.mt-40 {
+  margin: 40px 0;
+}
+.search {
+  margin-bottom: 20px;
+}
+.search .input {
+  width: 350px;
+}
+.num {
+  font-size: 36px;
+  font-weight: bold;
+}
+.font-color {
+  color: #666;
+}
+</style>