日课月课统计

src/components/orderCount/dayOrderCount.vue

+<template>
+  <div class="orderCount">
+    <el-form ref="searchFrom" inline :model="searchFrom" label-width="100px">
+      <el-form-item label="商品">
+        <el-select
+          style="width: 600px"
+          v-model="searchFrom.priceList"
+          collapse-tags
+          multiple
+          filterable
+          placeholder="请选择"
+          @change="searchPage">
+          <el-option
+            v-for="item in goodsList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="起止日期">
+        <el-date-picker
+          v-model="searchFrom.dateValue"
+          unlink-panels
+          type="daterange"
+          value-format="yyyy-MM-dd"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          @change="searchPage">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="">
+        <el-button type="primary" @click="searchPage()">
+          搜索
+        </el-button>
+      </el-form-item>
+    </el-form>
+    <el-table
+      :data="tableData"
+      style="width: 100%">
+
+      <el-table-column
+        v-for="data in headList"
+        :key="data"
+        :label="data">
+        <template slot-scope="scope">
+          <span v-if="data === '时间'">
+          {{ scope.row['cur_date'] }}
+          </span>
+          <span v-if="data === '注册数'">
+          {{ scope.row['register_num'] }}
+          </span>
+          <span v-if="data === '总金额'">
+          {{ scope.row['total_money']}}
+          </span>
+          <span v-if="data !== '时间' && data !== '注册数' && data !== '总金额'">
+          {{ scope.row[data] | toFixed2}}
+          </span>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+  import {getGoodsListApi,orderCountApi} from "../../service/api";
+  export default {
+    name: "dayOrderCount",
+    data(){
+      return {
+        goodsList:[],
+        headList:[],
+        tableData:[],
+        searchFrom:{
+          priceList:[],
+          dateValue:[]
+        },
+      }
+    },
+    mounted(){
+      this.defaultTime();
+      this.initPage()
+    },
+    filters:{
+      toFixed2(value){
+        if(typeof value === 'number'){
+          let v2 = value.toString().split(".");
+          if(v2.length > 1 && v2[1].length > 2){
+            return Number(value).toFixed(2)
+          }else{
+            return value
+          }
+        }else {
+          return value
+        }
+      }
+    },
+    methods:{
+      initPage(){
+        getGoodsListApi({limit:99999,course_type:1}).then(res=>{
+          res.list.forEach(i=>{
+            this.searchFrom.priceList.push(i.id)
+          });
+          this.goodsList=res.list;
+          this.searchPage();
+        })
+      },
+      searchPage(){
+        if(this.searchFrom.dateValue.length<2){
+          this.$message.error('请先选择起止日期');
+        }else{
+          let json = {
+            start_at:this.searchFrom.dateValue[0],
+            end_at:this.searchFrom.dateValue[1],
+            goods_ids:this.searchFrom.priceList.toString(),
+          };
+          orderCountApi(json).then(res=>{
+            if(res.length>0){
+              let f = res[0];
+              this.tableData = res;
+              this.headList=[];
+              for(let s in f){
+                if(s==='cur_date'){
+                  this.headList.push('时间')
+                }else if(s==='register_num'){
+                  this.headList.push('注册数')
+                }else if(s==='total_money'){
+                  this.headList.push('总金额')
+                }else{
+                  this.headList.push(s)
+                }
+              }
+            }
+          })
+        }
+      },
+      defaultTime(){
+        let date = new Date();
+        let year = date.getFullYear();
+        let Month = date.getMonth()+1;
+        if(Month < 10){
+          Month = `0${Month}`
+        }
+        let Day = date.getDate();
+        if(Day<10)Day = `0${Day}`
+        let star = `${year}-${Month}-01`;
+        let end = `${year}-${Month}-${Day}`
+        this.searchFrom.dateValue = [star,end]
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .orderCount{
+    padding: 10px;
+  }
+
+</style>

src/components/orderCount/monthOrderCount.vue

+<template>
+  <div class="orderCount">
+    <el-form ref="searchFrom" inline :model="searchFrom" label-width="100px">
+      <el-form-item label="商品">
+        <el-select
+          style="width: 600px"
+          v-model="searchFrom.priceList"
+          collapse-tags
+          multiple
+          filterable
+          placeholder="请选择"
+          @change="searchPage">
+          <el-option
+            v-for="item in goodsList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="起止日期">
+        <el-date-picker
+          v-model="searchFrom.dateValue"
+          unlink-panels
+          type="daterange"
+          value-format="yyyy-MM-dd"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          @change="searchPage">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="">
+        <el-button type="primary" @click="searchPage()">
+          搜索
+        </el-button>
+      </el-form-item>
+    </el-form>
+    <el-table
+      :data="tableData"
+      style="width: 100%">
+
+      <el-table-column
+        v-for="data in headList"
+        :key="data"
+        :label="data">
+        <template slot-scope="scope">
+          <span v-if="data === '时间'">
+          {{ scope.row['cur_date'] }}
+          </span>
+          <span v-if="data === '注册数'">
+          {{ scope.row['register_num'] }}
+          </span>
+          <span v-if="data === '总金额'">
+          {{ scope.row['total_money']}}
+          </span>
+          <span v-if="data !== '时间' && data !== '注册数' && data !== '总金额'">
+          {{ scope.row[data] | toFixed2}}
+          </span>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+  import {getGoodsListApi,orderCountApi} from "../../service/api";
+  export default {
+    name: "monthOrderCount",
+    data(){
+      return {
+        goodsList:[],
+        headList:[],
+        tableData:[],
+        searchFrom:{
+          priceList:[],
+          dateValue:[]
+        },
+      }
+    },
+    mounted(){
+      this.defaultTime();
+      this.initPage()
+    },
+    filters:{
+      toFixed2(value){
+        if(typeof value === 'number'){
+          let v2 = value.toString().split(".");
+          if(v2.length > 1 && v2[1].length > 2){
+            return Number(value).toFixed(2)
+          }else{
+            return value
+          }
+        }else {
+          return value
+        }
+      }
+    },
+    methods:{
+      initPage(){
+        getGoodsListApi({limit:99999,course_type:0}).then(res=>{
+          res.list.forEach(i=>{
+            this.searchFrom.priceList.push(i.id)
+          });
+          this.goodsList=res.list;
+          this.searchPage();
+        })
+      },
+      searchPage(){
+        if(this.searchFrom.dateValue.length<2){
+          this.$message.error('请先选择起止日期');
+        }else{
+          let json = {
+            start_at:this.searchFrom.dateValue[0],
+            end_at:this.searchFrom.dateValue[1],
+            goods_ids:this.searchFrom.priceList.toString(),
+          };
+          orderCountApi(json).then(res=>{
+            if(res.length>0){
+              let f = res[0];
+              this.tableData = res;
+              this.headList=[];
+              for(let s in f){
+                if(s==='cur_date'){
+                  this.headList.push('时间')
+                }else if(s==='register_num'){
+                  this.headList.push('注册数')
+                }else if(s==='total_money'){
+                  this.headList.push('总金额')
+                }else{
+                  this.headList.push(s)
+                }
+              }
+            }
+          })
+        }
+      },
+      defaultTime(){
+        let date = new Date();
+        let year = date.getFullYear();
+        let Month = date.getMonth()+1;
+        if(Month < 10){
+          Month = `0${Month}`
+        }
+        let Day = date.getDate();
+        if(Day<10)Day = `0${Day}`
+        let star = `${year}-${Month}-01`;
+        let end = `${year}-${Month}-${Day}`
+        this.searchFrom.dateValue = [star,end]
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .orderCount{
+    padding: 10px;
+  }
+
+</style>

src/util/menuList.js

@@ -168,9 +168,31 @@ export default [{
                 router: {
                     path: '/orderCount',
                     name: 'orderCount',
-                    component: e => require(['@/components/orderCount'], e),
+                    component: e => require(['@/components/orderCount/index'], e),
                 }
             }, {
+                value: '日课订单统计',
+                routerName: 'dayOrderCount',
+                path: '/dayOrderCount',
+                cover: '5-11',
+                router: {
+                    path: '/dayOrderCount',
+                    name: 'dayOrderCount',
+                    component: e => require(['@/components/orderCount/dayOrderCount'], e),
+                }
+            }, 
+            {
+                value: '月课订单统计',
+                routerName: 'monthOrderCount',
+                path: '/monthOrderCount',
+                cover: '5-12',
+                router: {
+                    path: '/monthOrderCount',
+                    name: 'monthOrderCount',
+                    component: e => require(['@/components/orderCount/monthOrderCount'], e),
+                }
+            }, 
+             {
                 value: '优惠券列表',
                 routerName: 'coupon',
                 path: '/coupon',