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

<template>
  <div class="app-container">
    <!-- 用户select选项 -->
    <el-row :gutter="15" class="m-t-0">
      <el-col :span="4">
        <SelectionShopId class="w-100" v-model="shop_id" :allSel="true" />
      </el-col>
    </el-row>
    <!-- 统计标签 -->
    <el-row :gutter="10" class="m-t-20">
      <!-- 日统计标签 -->
      <el-col :span="8">
        <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="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>
      </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>
    </el-row>
  </div>
</template>

<script>
import SelectionShopId from '@/components/SelectionShopId.vue'

export default {
  name: 'Stat',
  data () {
    return {
      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
  },
  computed: {
    // 日统计 订单列表
    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 () {
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/theme.scss";

.dayStatBox {
  background-color: $brand-color;
  color: $white-color;
}

.monthStatBox {
  background-color: $success-color;
  color: $white-color;
}

.yearStatBox {
  background-color: $warning-color;
  color: $white-color;
}
</style>