From d499b10b0d6063bcf4118aac85fa8212b28df5ff Mon Sep 17 00:00:00 2001
From: tk <szdot@live.com>
Date: Mon, 24 Jun 2024 22:14:16 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E7=B1=BB=09=E5=9E=8B=E3=80=91?=
 =?UTF-8?q?=EF=BC=9Afeat=20=E3=80=90=E4=B8=BB=09=E9=A2=98=E3=80=91?=
 =?UTF-8?q?=EF=BC=9A=E7=BB=9F=E8=AE=A1=E9=A1=B5=E9=9D=A2=20=E3=80=90?=
 =?UTF-8?q?=E6=8F=8F=09=E8=BF=B0=E3=80=91=EF=BC=9A=20=09[=E5=8E=9F?=
 =?UTF-8?q?=E5=9B=A0]=EF=BC=9A=E5=A2=9E=E5=8A=A0=E6=9F=A5=E8=AF=A2=20?=
 =?UTF-8?q?=E6=97=A5=20=E6=9C=88=20=E5=B9=B4=E7=BB=9F=E8=AE=A1=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=20=09[=E8=BF=87=E7=A8=8B]=EF=BC=9A=20=09[=E5=BD=B1?=
 =?UTF-8?q?=E5=93=8D]=EF=BC=9A=20=E3=80=90=E7=BB=93=09=E6=9D=9F=E3=80=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# 类型 包含:
# feat：新功能（feature）
# fix：修补bug
# docs：文档（documentation）
# style： 格式（不影响代码运行的变动）
# refactor：重构（即不是新增功能，也不是修改bug的代码变动）
# test：增加测试
# chore：构建过程或辅助工具的变动
---
 src/styles/index.scss                         |  27 ++
 .../layout/components/main/order/stat.vue     | 337 ++++++++++++++++--
 2 files changed, 338 insertions(+), 26 deletions(-)

diff --git a/src/styles/index.scss b/src/styles/index.scss
index 2edba9b..2768855 100644
--- a/src/styles/index.scss
+++ b/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",
diff --git a/src/views/layout/components/main/order/stat.vue b/src/views/layout/components/main/order/stat.vue
index f0d562f..7577f42 100644
--- a/src/views/layout/components/main/order/stat.vue
+++ b/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="flex3 flex mc column">
-            <div class="flex">
-              <div class="p-4 bg-white rad2 fc-b fb">成交额</div>
-              <div class="p-4 m-l-5">￥23441.44</div>
+        <div class="dayStatBox rad4 flex p-10 column">
+          <el-date-picker class="w-100" v-model="dayTime" align="right" type="date" placeholder="今日"
+            :picker-options="dayPickerOptions" />
+          <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-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="p-4 bg-white rad2 fc-b fb">退款额</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 class="flex1 flex mc mac ofh">
+              <div class="rad-c w-50px h-50px bg-white fb fc f-s-32 fc-b l-h-50 no-select">日</div>
             </div>
           </div>
-          <div class="flex1 flex mc mac">
-            <div class="rad-c w-50px h-50px bg-white fb fc f-s-32 fc-b l-h-50">日</div>
+        </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,
-    DatePickerOrder
+    SelectionShopId
   },
   computed: {
-
-  },
-  methods: {
+    // 日统计 订单列表
+    dayOrderList () {
+      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>