统计

src/router/index.js

@@ -413,6 +413,12 @@ export const asyncRouterMap = [{
       component: _import('order/memberOrderInfo/index'),
       name: '会员订单管理',
       authority: 'memberOrderInfo'
+    },
+    {
+      path: 'orderStatistics',
+      component: _import('order/orderStatistics/index'),
+      name: '会员订单统计',
+      authority: 'orderStatistics'
     }
   ]
 },

src/views/order/orderStatistics/index.vue

+<template>
+  <div class="app-container calendar-list-container">
+    <div class="filter-container">
+      <el-form ref="queryForm" :model="listQuery" label-width="100px">
+        <el-row>
+          <el-col :span="5">
+            <el-form-item label="统计时间:">
+              <el-date-picker
+                v-model="listQuery.time"
+                type="daterange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                @change="changeTime"
+                placeholder="请选择统计时间"
+              ></el-date-picker>
+            </el-form-item>
+          </el-col>
+          <el-col :span="5">
+            <el-form-item label="统计方式:" class="wayMsg">
+              <span
+                v-for="(item,index) in way"
+                :key="index"
+                :class="{active:isactive==item.label}"
+                @click="changeWay(item.label)"
+              >{{item.label}}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="5" style="float:right;text-align:right">
+            <el-button class="filter-item" type="primary" v-waves @click="handleFilter">导出为Excel</el-button>
+          </el-col>
+        </el-row>
+      </el-form>
+
+      <el-table
+        :key="tableKey"
+        :data="list"
+        border
+        fit
+        highlight-current-row
+        style="width: 100%"
+      >
+        <el-table-column align="center" label="时间">
+          <template scope="scope">
+            <span>{{scope.row.id}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="普通会员购买量">
+          <template scope="scope">
+            <span>{{scope.row.no}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="支付金额(普通会员)">
+          <template scope="scope">
+            <span>{{scope.row.name}}</span>
+          </template>
+        </el-table-column>
+         <el-table-column align="center" label="黄金会员购买量">
+          <template scope="scope">
+            <span>{{scope.row.name}}</span>
+          </template>
+        </el-table-column>
+         <el-table-column align="center" label="支付金额(普通会员)">
+          <template scope="scope">
+            <span>{{scope.row.name}}</span>
+          </template>
+        </el-table-column>
+         <el-table-column align="center" label="支付金额(黄金会员)">
+          <template scope="scope">
+            <span>{{scope.row.name}}</span>
+          </template>
+        </el-table-column>
+         <el-table-column align="center" label="钻石会员购买量">
+          <template scope="scope">
+            <span>{{scope.row.name}}</span>
+          </template>
+        </el-table-column>
+         <el-table-column align="center" label="支付金额(钻石会员)">
+          <template scope="scope">
+            <span>{{scope.row.name}}</span>
+          </template>
+        </el-table-column>
+         <el-table-column align="center" label="总支付金额">
+          <template scope="scope">
+            <span>{{scope.row.name}}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  created() {},
+  data() {
+    return {
+      // 统计时间筛选
+      listQuery: {
+        time: "null"
+      },
+      //统计方式筛选
+      way: [
+        {
+          label: "全部",
+          id: "0"
+        },
+        {
+          label: "日统计",
+          id: "1"
+        },
+        {
+          label: "周统计",
+          id: "2"
+        },
+        {
+          label: "月统计",
+          id: "3"
+        }
+      ],
+      isactive: "全部"
+    };
+  },
+  methods: {
+    //统计时间筛选
+    changeTime() {
+      console.log("----");
+    },
+    //统计方式筛选
+    changeWay(val) {
+      this.isactive = val;
+    },
+    //导出
+    handleFilter() {}
+  }
+};
+</script>
+<style>
+.wayMsg span {
+  margin: 10px;
+  cursor: pointer;
+}
+.active {
+  color: #409eff;
+  font-weight: bold;
+}
+</style>
\ No newline at end of file