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'
// import { formatPrice } from '@/utils'
import { getOrderList } from '@/utils/api/table'

export default {
  name: 'Stat',
  data () {
    return {
      shop_id: '', // 搜索条件 商铺id
      dayOrderList: [] // 日统计 订单列表
      // // 日选择器
      // 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: {
    /**
     * @description: 搜索条件 集合
     */
    orderSerch () {
      return this.$store.getters['app/getOrderSerch']
    }
    // // 月统计 订单列表
    // 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: {
    async getDayOrderList (orderSerch) {
      const res = await getOrderList(orderSerch)
      if (res.data.status === 1) {
        this.dayOrderList = res.data.orderList
      } else {
        this.$message.error('获取日订单列表失败')
      }
    }
  },
  watch: {
    // monthTimestamps (val) {
    //   console.log(val)
    // },
    // dayTimestamps (val) {
    //   console.log(val)
    // },
    // dayPaid (val) {
    //   console.log(val)
    // },
    // yearOrderList (val) {
    //   console.log(val)
    // }
  },
  created () {
    this.getDayOrderList(this.orderSerch)
    setTimeout(() => {
      console.error(this.dayOrderList)
    }, 3000)
  }
}
</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>