【类 型】：feat

【主	题】：统计页面
【描	述】：
	[原因]：增加查询 日 月 年统计功能
	[过程]：
	[影响]：
【结	束】

# 类型 包含:
# feat：新功能（feature）
# fix：修补bug
# docs：文档（documentation）
# style： 格式（不影响代码运行的变动）
# refactor：重构（即不是新增功能，也不是修改bug的代码变动）
# test：增加测试
# chore：构建过程或辅助工具的变动

src/components/QuestTabs.vue

@@ -52,12 +52,12 @@
                 <el-button type="danger" icon="iconfont icon-zhengque">
                   <font class="m-l-5">同意退款</font>
                 </el-button>
-                <el-button @click="questAss(item.id, 'back', 'rejected')" type="warning" icon="iconfont icon-cuowu">
+                <el-button @click="questAss(item.id, 'refund_status', '拒绝退')" type="warning" icon="iconfont icon-cuowu">
                   <font class="m-l-5">拒绝退款</font>
                 </el-button>
               </el-button-group>
-              <el-button-group v-else-if="item.refund_status == '未申请' && item.shipment_status == '未接单'">
+              <el-button-group v-else-if="item.refund_status !== '申请中' && item.shipment_status == '未接单'">
-                <el-button @click="questAss(item.id, 'status', 'processing')" type="primary"
+                <el-button @click="questAss(item.id, 'shipment_status', '已接单')" type="primary"
                   icon="iconfont icon-chengjie">
                   <font class="m-l-5">确认接单</font>
                 </el-button>
@@ -68,7 +68,7 @@
                   <font class="m-l-5" @click="orderPrint(index)">打印小票</font>
                 </el-button>
               </el-button-group>
-              <el-button-group v-else-if="item.refund_status == '未申请' && item.shipment_status == '已接单'">
+              <el-button-group v-else-if="item.refund_status !== '申请中' && item.shipment_status == '已接单'">
                 <el-button type="danger" icon="iconfont icon-cuowu">
                   <font class="m-l-5">取消订单</font>
                 </el-button>
@@ -76,9 +76,8 @@
                   <font class="m-l-5" @click="orderPrint(index)">打印小票</font>
                 </el-button>
               </el-button-group>
-              <el-button-group v-else-if="item.refund_status == '未申请' && item.shipment_status == '已发货'">
+              <el-button-group v-else-if="item.refund_status !== '申请中' && item.shipment_status == '已发货'">
-                <el-button @click="questAss(item.id, 'status', 'processing')" type="primary"
+                <el-button type="primary" icon="iconfont icon-chengjie">
-                  icon="iconfont icon-chengjie">
                   <font class="m-l-5">未能送达</font>
                 </el-button>
                 <el-button type="danger" icon="iconfont icon-cuowu">

src/styles/index.scss

@@ -154,6 +154,14 @@ label {
   color: $brand-color;
 }
 
+.fc-s {
+  color: $success-color;
+}
+
+.fc-w {
+  color: $warning-color;
+}
+
 .fc-m {
   color: $maintext-color;
 }
@@ -306,6 +314,25 @@ label {
   border-radius: 2px;
 }
 
+.ofh {
+  overflow: hidden;
+}
+
+.ofa {
+  overflow: auto;
+}
+
+.no-select {
+  -webkit-user-select: none;
+  /* Chrome/Safari */
+  -moz-user-select: none;
+  /* Firefox */
+  -ms-user-select: none;
+  /* Internet Explorer/Edge */
+  user-select: none;
+  /* Standard */
+}
+
 //m-l-0 p-l-0 马根 帕丁
 $position: (
   "t":"top",

src/views/layout/components/main/order/stat.vue

@@ -5,30 +5,120 @@
       <el-col :span="4">
         <SelectionShopId class="w-100" v-model="shop_id" :allSel="true" />
       </el-col>
-      <el-col :span="8">
-        <DatePickerOrder class="w-100" />
-      </el-col>
     </el-row>
     <!-- 统计标签 -->
     <el-row :gutter="10" class="m-t-20">
+      <!-- 日统计标签 -->
       <el-col :span="8">
-        <div class="statBox rad4 flex p-10">
+        <div class="dayStatBox rad4 flex p-10 column">
-          <div class="flex3 flex mc column">
+          <el-date-picker class="w-100" v-model="dayTime" align="right" type="date" placeholder="今日"
-            <div class="flex">
+            :picker-options="dayPickerOptions" />
-              <div class="p-4 bg-white rad2 fc-b fb">成交额</div>
+          <div class="flex m-t-5">
-              <div class="p-4 m-l-5">￥23441.44</div>
+            <div class="flex3 flex mc column">
+              <div class="flex m-t-5">
+                <div class="w-40 flex ml p-l-5 p-r-5">
+                  <div class="p-4 bg-white rad2 fc-b fb fc">营业额</div>
+                </div>
+                <div class="p-4 m-l-5 fr">￥{{ dayPaidTotal }}</div>
+              </div>
+              <div class="flex m-t-5">
+                <div class="w-40 flex ml p-l-5 p-r-5">
+                  <div class="p-4 bg-white rad2 fc-b fb fc">收款单</div>
+                </div>
+                <div class="p-4 m-l-5 fr">{{ dayPaid.length }}单</div>
+              </div>
+              <div class="flex m-t-5">
+                <div class="w-40 flex ml p-l-5 p-r-5">
+                  <div class="p-4 bg-white rad2 fc-b fb fc">退款额</div>
+                </div>
+                <div class="p-4 m-l-5 fr">￥{{ dayRefundTotal }}</div>
+              </div>
+              <div class="flex m-t-5">
+                <div class="w-40 flex ml p-l-5 p-r-5">
+                  <div class="p-4 bg-white rad2 fc-b fb fc">已退单</div>
+                </div>
+                <div class="p-4 m-l-5 fr">{{ dayRefund.length }}单</div>
+              </div>
             </div>
-            <div class="flex m-t-5">
+            <div class="flex1 flex mc mac ofh">
-              <div class="p-4 bg-white rad2 fc-b fb">退款额</div>
+              <div class="rad-c w-50px h-50px bg-white fb fc f-s-32 fc-b l-h-50 no-select">日</div>
-              <div class="p-4 m-l-5">￥23441.44</div>
-            </div>
-            <div class="flex m-t-5">
-              <div class="p-4 bg-white rad2 fc-b fb">订单总数</div>
-              <div class="p-4 m-l-5">18单</div>
             </div>
           </div>
-          <div class="flex1 flex mc mac">
+        </div>
-            <div class="rad-c w-50px h-50px bg-white fb fc f-s-32 fc-b l-h-50">日</div>
+      </el-col>
+      <!-- 月统计标签 -->
+      <el-col :span="8">
+        <div class="monthStatBox rad4 flex p-10 column">
+          <el-date-picker class="w-100" v-model="monthTime" align="right" type="month" placeholder="本月"
+            :picker-options="monthPickerOptions" />
+          <div class="flex m-t-5">
+            <div class="flex3 flex mc column">
+              <div class="flex m-t-5">
+                <div class="w-40 flex ml p-l-5 p-r-5">
+                  <div class="p-4 bg-white rad2 fc-s fb fc">营业额</div>
+                </div>
+                <div class="p-4 m-l-5 fr">￥{{ 23441.44 }}</div>
+              </div>
+              <div class="flex m-t-5">
+                <div class="w-40 flex ml p-l-5 p-r-5">
+                  <div class="p-4 bg-white rad2 fc-s fb fc">收款单</div>
+                </div>
+                <div class="p-4 m-l-5 fr">18单</div>
+              </div>
+              <div class="flex m-t-5">
+                <div class="w-40 flex ml p-l-5 p-r-5">
+                  <div class="p-4 bg-white rad2 fc-s fb fc">退款额</div>
+                </div>
+                <div class="p-4 m-l-5 fr">￥{{ 23441.44 }}</div>
+              </div>
+              <div class="flex m-t-5">
+                <div class="w-40 flex ml p-l-5 p-r-5">
+                  <div class="p-4 bg-white rad2 fc-s fb fc">已退单</div>
+                </div>
+                <div class="p-4 m-l-5 fr">18单</div>
+              </div>
+            </div>
+            <div class="flex1 flex mc mac ofh">
+              <div class="rad-c w-50px h-50px bg-white fb fc f-s-32 fc-s l-h-50 no-select">月</div>
+            </div>
+          </div>
+        </div>
+      </el-col>
+      <!-- 年统计标签 -->
+      <el-col :span="8">
+        <div class="yearStatBox rad4 flex p-10 column">
+          <el-date-picker class="w-100" v-model="yearTime" align="right" type="year" placeholder="本年"
+            :picker-options="yearPickerOptions" />
+          <div class="flex m-t-5">
+            <div class="flex3 flex mc column">
+              <div class="flex m-t-5">
+                <div class="w-40 flex ml p-l-5 p-r-5">
+                  <div class="p-4 bg-white rad2 fc-w fb fc">营业额</div>
+                </div>
+                <div class="p-4 m-l-5 fr">￥{{ 23441.44 }}</div>
+              </div>
+              <div class="flex m-t-5">
+                <div class="w-40 flex ml p-l-5 p-r-5">
+                  <div class="p-4 bg-white rad2 fc-w fb fc">收款单</div>
+                </div>
+                <div class="p-4 m-l-5 fr">18单</div>
+              </div>
+              <div class="flex m-t-5">
+                <div class="w-40 flex ml p-l-5 p-r-5">
+                  <div class="p-4 bg-white rad2 fc-w fb fc">退款额</div>
+                </div>
+                <div class="p-4 m-l-5 fr">￥{{ 23441.44 }}</div>
+              </div>
+              <div class="flex m-t-5">
+                <div class="w-40 flex ml p-l-5 p-r-5">
+                  <div class="p-4 bg-white rad2 fc-w fb fc">已退单</div>
+                </div>
+                <div class="p-4 m-l-5 fr">18单</div>
+              </div>
+            </div>
+            <div class="flex1 flex mc mac ofh">
+              <div class="rad-c w-50px h-50px bg-white fb fc f-s-32 fc-w l-h-50 no-select">年</div>
+            </div>
           </div>
         </div>
       </el-col>
@@ -38,25 +128,211 @@
 
 <script>
 import SelectionShopId from '@/components/SelectionShopId.vue'
-import DatePickerOrder from '@/components/DatePickerOrder.vue'
 
 export default {
   name: 'Stat',
   data () {
     return {
-      shop_id: '' // 搜索条件 商铺id
+      shop_id: '', // 搜索条件 商铺id
+      // 日选择器
+      dayPickerOptions: {
+        disabledDate (time) {
+          return time.getTime() > Date.now()
+        },
+        shortcuts: [{
+          text: '今天',
+          onClick (picker) {
+            const start = new Date()
+            start.setHours(0, 0, 0, 0)
+            picker.$emit('pick', start)
+          }
+        }, {
+          text: '昨天',
+          onClick (picker) {
+            const start = new Date()
+            start.setDate(start.getDate() - 1)
+            start.setHours(0, 0, 0, 0)
+            picker.$emit('pick', start)
+          }
+        }, {
+          text: '前日',
+          onClick (picker) {
+            const start = new Date()
+            start.setDate(start.getDate() - 2)
+            start.setHours(0, 0, 0, 0)
+            picker.$emit('pick', start)
+          }
+        }]
+      },
+      dayTime: new Date(), // 默认值为今天
+
+      monthPickerOptions: {
+        disabledDate (time) {
+          return time.getTime() > Date.now()
+        },
+        shortcuts: [{
+          text: '本月',
+          onClick (picker) {
+            const start = new Date()
+            start.setDate(1)
+            start.setHours(0, 0, 0, 0)
+            picker.$emit('pick', start)
+          }
+        }, {
+          text: '上月',
+          onClick (picker) {
+            const start = new Date()
+            start.setMonth(start.getMonth() - 1)
+            start.setDate(1)
+            start.setHours(0, 0, 0, 0)
+            picker.$emit('pick', start)
+          }
+        }, {
+          text: '前月',
+          onClick (picker) {
+            const start = new Date()
+            start.setMonth(start.getMonth() - 2)
+            start.setDate(1)
+            start.setHours(0, 0, 0, 0)
+            picker.$emit('pick', start)
+          }
+        }]
+      },
+      monthTime: new Date(), // 默认值为本月
+      yearPickerOptions: {
+        disabledDate (time) {
+          return time.getTime() > Date.now()
+        },
+        shortcuts: [{
+          text: '本年',
+          onClick (picker) {
+            const start = new Date()
+            start.setMonth(0)
+            start.setDate(1)
+            start.setHours(0, 0, 0, 0)
+            picker.$emit('pick', start)
+          }
+        }, {
+          text: '去年',
+          onClick (picker) {
+            const start = new Date()
+            start.setFullYear(start.getFullYear() - 1)
+            start.setMonth(0)
+            start.setDate(1)
+            start.setHours(0, 0, 0, 0)
+            picker.$emit('pick', start)
+          }
+        }, {
+          text: '前年',
+          onClick (picker) {
+            const start = new Date()
+            start.setFullYear(start.getFullYear() - 2)
+            start.setMonth(0)
+            start.setDate(1)
+            start.setHours(0, 0, 0, 0)
+            picker.$emit('pick', start)
+          }
+        }]
+      },
+      yearTime: new Date() // 默认值为本年
     }
   },
   components: {
-    SelectionShopId,
+    SelectionShopId
-    DatePickerOrder
   },
   computed: {
-
+    // 日统计 订单列表
-  },
+    dayOrderList () {
-  methods: {
+      return this.$store.state.orderList.filter(item => Number(item.order_time) > Number(this.dayTimestamps.start) && Number(item.order_time) < Number(this.dayTimestamps.end))
+    },
+    // 月统计 订单列表
+    monthOrderList () {
+      return this.$store.state.orderList.filter(item => Number(item.order_time) > Number(this.monthTimestamps.start) && Number(item.order_time) < Number(this.monthTimestamps.end))
+    },
+    // 年统计 订单列表
+    yearOrderList () {
+      return this.$store.state.orderList.filter(item => Number(item.order_time) > Number(this.yearTimestamps.start) && Number(item.order_time) < Number(this.yearTimestamps.end))
+    },
+    // 过滤出 日 收款订单 包括已付款 和 已完成
+    dayPaid () {
+      return this.dayOrderList.filter(item => item.main_status === '已付款' || item.main_status === '已完成')
+    },
+    // 日收款订单 营业额总和
+    dayPaidTotal () {
+      return this.dayPaid.reduce((total, item) => total + Number(item.total_price), 0).toFixed(2)
+    },
+    // 过滤出 日 退款付点单
+    dayRefund () {
+      return this.dayOrderList.filter(item => item.main_status === '已退款')
+    },
+    // 日收款订单 退款额总和
+    dayRefundTotal () {
+      return this.dayRefund.reduce((total, item) => total + Number(item.refund_price), 0).toFixed(2)
+    },
+    // 日 统计组件 起始 结束时间戳
+    dayTimestamps () {
+      if (!this.dayTime) {
+        return { start: null, end: null }
+      }
+      const start = new Date(this.dayTime)
+      start.setHours(0, 0, 0, 0)
+      const end = new Date(this.dayTime)
+      end.setHours(23, 59, 59, 999)
+      return {
+        start: Math.floor(start.getTime() / 1000), // 转换为秒
+        end: Math.floor(end.getTime() / 1000) // 转换为秒
+      }
+    },
+    // 月 统计组件 起始 结束时间戳
+    monthTimestamps () {
+      if (!this.monthTime) {
+        return { start: null, end: null }
+      }
+      const start = new Date(this.monthTime)
+      start.setDate(1)
+      start.setHours(0, 0, 0, 0)
+      const end = new Date(this.monthTime)
+      end.setMonth(end.getMonth() + 1)
+      end.setDate(0)
+      end.setHours(23, 59, 59, 999)
+      return {
+        start: Math.floor(start.getTime() / 1000), // 转换为秒
+        end: Math.floor(end.getTime() / 1000) // 转换为秒
+      }
+    },
+    // 年 统计组件 起始 结束时间戳
+    yearTimestamps () {
+      if (!this.yearTime) {
+        return { start: null, end: null }
+      }
+      const start = new Date(this.yearTime)
+      start.setMonth(0)
+      start.setDate(1)
+      start.setHours(0, 0, 0, 0)
+      const end = new Date(this.yearTime)
+      end.setMonth(11)
+      end.setDate(31)
+      end.setHours(23, 59, 59, 999)
+      return {
+        start: Math.floor(start.getTime() / 1000), // 转换为秒
+        end: Math.floor(end.getTime() / 1000) // 转换为秒
+      }
+    }
   },
+  methods: {},
   watch: {
+    monthTimestamps (val) {
+      console.log(val)
+    },
+    dayTimestamps (val) {
+      console.log(val)
+    },
+    dayPaid (val) {
+      console.log(val)
+    },
+    yearOrderList (val) {
+      console.log(val)
+    }
   },
   created () {
   }
@@ -66,9 +342,18 @@ export default {
 <style lang="scss" scoped>
 @import "@/styles/theme.scss";
 
-.statBox {
+.dayStatBox {
   background-color: $brand-color;
-  height: 30vh;
+  color: $white-color;
+}
+
+.monthStatBox {
+  background-color: $success-color;
+  color: $white-color;
+}
+
+.yearStatBox {
+  background-color: $warning-color;
   color: $white-color;
 }
 </style>