【类 型】：factor 销售统计模块
【原 因】： 【过 程】：1.调整按需加载2.按选择条件日 月 年 分为三个 异步加载搜索内容 3.调整ui 包裹手机端竖屏自适应 4.点击跳转到订单管理页面，跳转前设置订单全局搜索条件 【影 响】：
This commit is contained in:
tk
parent
0fba1af61b
commit
5abd57755e
@ -42,11 +42,6 @@
|
|||||||
<el-table-column prop="controler" label="操作">
|
<el-table-column prop="controler" label="操作">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<el-button-group>
|
<el-button-group>
|
||||||
<!-- 已付款 未接单 -->
|
|
||||||
<!-- <template v-if="scope.row.main_status === '已付款' && scope.row.shipment_status === '未接单'">
|
|
||||||
<el-button type="danger" icon="el-icon-delete">取消订单</el-button>
|
|
||||||
<el-button type="primary" icon="el-icon-search">确认接单</el-button>
|
|
||||||
</template> -->
|
|
||||||
<el-button type="success" icon="el-icon-search"
|
<el-button type="success" icon="el-icon-search"
|
||||||
@click="$router.replace(`/order/show/${scope.row.id}`)">查看</el-button>
|
@click="$router.replace(`/order/show/${scope.row.id}`)">查看</el-button>
|
||||||
</el-button-group>
|
</el-button-group>
|
||||||
|
|||||||
@ -1,25 +1,23 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="app-container">
|
<div class="app-container">
|
||||||
<!-- 用户select选项 -->
|
<!-- 用户select选项 -->
|
||||||
<el-row :gutter="15" class="m-t-0">
|
<SelectionShopId class="w-40" v-model="shop_id" :allSel="true" />
|
||||||
<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-row :gutter="10" class="m-t-20">
|
||||||
<!-- 日统计标签 -->
|
<!-- 日统计标签 -->
|
||||||
<!-- <el-col :span="8">
|
<el-col :span="8" :xs="24" v-loading="dayBoxLoading" class="m-b-10">
|
||||||
<div class="dayStatBox rad4 flex p-10 column">
|
<div class="dayStatBox rad4 flex p-10 column" @click="handlerRouteCilck('day')">
|
||||||
<el-date-picker class="w-100" v-model="dayTime" align="right" type="date" placeholder="今日"
|
<div @click.stop>
|
||||||
:picker-options="dayPickerOptions" />
|
<el-date-picker class="w-100" v-model="dayTime" align="right" type="date" placeholder="今日"
|
||||||
|
:picker-options="dayPickerOptions" />
|
||||||
|
</div>
|
||||||
<div class="flex m-t-5">
|
<div class="flex m-t-5">
|
||||||
<div class="flex3 flex mc column">
|
<div class="flex3 flex mc column">
|
||||||
<div class="flex m-t-5">
|
<div class="flex m-t-5">
|
||||||
<div class="w-40 flex ml p-l-5 p-r-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 class="p-4 bg-white rad2 fc-b fb fc">营业额</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-4 m-l-5 fr">￥{{ dayPaidTotal }}</div>
|
<div class="p-4 m-l-5 fr">{{ dayPaidTotal }}元</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex m-t-5">
|
<div class="flex m-t-5">
|
||||||
<div class="w-40 flex ml p-l-5 p-r-5">
|
<div class="w-40 flex ml p-l-5 p-r-5">
|
||||||
@ -31,7 +29,7 @@
|
|||||||
<div class="w-40 flex ml p-l-5 p-r-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 class="p-4 bg-white rad2 fc-b fb fc">退款额</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-4 m-l-5 fr">￥{{ dayRefundTotal }}</div>
|
<div class="p-4 m-l-5 fr">{{ dayRefundTotal }}元</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex m-t-5">
|
<div class="flex m-t-5">
|
||||||
<div class="w-40 flex ml p-l-5 p-r-5">
|
<div class="w-40 flex ml p-l-5 p-r-5">
|
||||||
@ -45,37 +43,39 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-col> -->
|
</el-col>
|
||||||
<!-- 月统计标签 -->
|
<!-- 月统计标签 -->
|
||||||
<!-- <el-col :span="8">
|
<el-col :span="8" :xs="24" v-loading="monthBoxLoading" class="m-b-10">
|
||||||
<div class="monthStatBox rad4 flex p-10 column">
|
<div class="monthStatBox rad4 flex p-10 column" @click="handlerRouteCilck('month')">
|
||||||
<el-date-picker class="w-100" v-model="monthTime" align="right" type="month" placeholder="本月"
|
<div @click.stop>
|
||||||
:picker-options="monthPickerOptions" />
|
<el-date-picker class="w-100" v-model="monthTime" align="right" type="month" placeholder="本月"
|
||||||
|
:picker-options="monthPickerOptions" />
|
||||||
|
</div>
|
||||||
<div class="flex m-t-5">
|
<div class="flex m-t-5">
|
||||||
<div class="flex3 flex mc column">
|
<div class="flex3 flex mc column">
|
||||||
<div class="flex m-t-5">
|
<div class="flex m-t-5">
|
||||||
<div class="w-40 flex ml p-l-5 p-r-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 class="p-4 bg-white rad2 fc-s fb fc">营业额</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-4 m-l-5 fr">￥{{ 23441.44 }}</div>
|
<div class="p-4 m-l-5 fr">{{ monthPaidTotal }}元</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex m-t-5">
|
<div class="flex m-t-5">
|
||||||
<div class="w-40 flex ml p-l-5 p-r-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 class="p-4 bg-white rad2 fc-s fb fc">收款单</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-4 m-l-5 fr">18单</div>
|
<div class="p-4 m-l-5 fr">{{ monthPaid.length }}单</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex m-t-5">
|
<div class="flex m-t-5">
|
||||||
<div class="w-40 flex ml p-l-5 p-r-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 class="p-4 bg-white rad2 fc-s fb fc">退款额</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-4 m-l-5 fr">￥{{ 23441.44 }}</div>
|
<div class="p-4 m-l-5 fr">{{ monthRefundTotal }}元</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex m-t-5">
|
<div class="flex m-t-5">
|
||||||
<div class="w-40 flex ml p-l-5 p-r-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 class="p-4 bg-white rad2 fc-s fb fc">已退单</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-4 m-l-5 fr">18单</div>
|
<div class="p-4 m-l-5 fr">{{ monthRefund.length }}单</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex1 flex mc mac ofh">
|
<div class="flex1 flex mc mac ofh">
|
||||||
@ -83,37 +83,39 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-col> -->
|
</el-col>
|
||||||
<!-- 年统计标签 -->
|
<!-- 年统计标签 -->
|
||||||
<!-- <el-col :span="8">
|
<el-col :span="8" :xs="24" v-loading="yearBoxLoading" class="m-b-10">
|
||||||
<div class="yearStatBox rad4 flex p-10 column">
|
<div class="yearStatBox rad4 flex p-10 column" @click="handlerRouteCilck('year')">
|
||||||
<el-date-picker class="w-100" v-model="yearTime" align="right" type="year" placeholder="本年"
|
<div @click.stop>
|
||||||
:picker-options="yearPickerOptions" />
|
<el-date-picker class="w-100" v-model="yearTime" align="right" type="year" placeholder="本年"
|
||||||
|
:picker-options="yearPickerOptions" />
|
||||||
|
</div>
|
||||||
<div class="flex m-t-5">
|
<div class="flex m-t-5">
|
||||||
<div class="flex3 flex mc column">
|
<div class="flex3 flex mc column">
|
||||||
<div class="flex m-t-5">
|
<div class="flex m-t-5">
|
||||||
<div class="w-40 flex ml p-l-5 p-r-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 class="p-4 bg-white rad2 fc-w fb fc">营业额</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-4 m-l-5 fr">￥{{ 23441.44 }}</div>
|
<div class="p-4 m-l-5 fr">{{ yearPaidTotal }}元</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex m-t-5">
|
<div class="flex m-t-5">
|
||||||
<div class="w-40 flex ml p-l-5 p-r-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 class="p-4 bg-white rad2 fc-w fb fc">收款单</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-4 m-l-5 fr">18单</div>
|
<div class="p-4 m-l-5 fr">{{ yearPaid.length }}单</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex m-t-5">
|
<div class="flex m-t-5">
|
||||||
<div class="w-40 flex ml p-l-5 p-r-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 class="p-4 bg-white rad2 fc-w fb fc">退款额</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-4 m-l-5 fr">￥{{ 23441.44 }}</div>
|
<div class="p-4 m-l-5 fr">{{ yearRefundTotal }}元</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex m-t-5">
|
<div class="flex m-t-5">
|
||||||
<div class="w-40 flex ml p-l-5 p-r-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 class="p-4 bg-white rad2 fc-w fb fc">已退单</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-4 m-l-5 fr">18单</div>
|
<div class="p-4 m-l-5 fr">{{ yearRefund.length }}单</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex1 flex mc mac ofh">
|
<div class="flex1 flex mc mac ofh">
|
||||||
@ -121,14 +123,14 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-col> -->
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import SelectionShopId from '@/components/SelectionShopId.vue'
|
import SelectionShopId from '@/components/SelectionShopId.vue'
|
||||||
// import { formatPrice } from '@/utils'
|
import { formatPrice } from '@/utils'
|
||||||
import { getOrderList } from '@/utils/api/table'
|
import { getOrderList } from '@/utils/api/table'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@ -136,223 +138,329 @@ export default {
|
|||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
shop_id: '', // 搜索条件 商铺id
|
shop_id: '', // 搜索条件 商铺id
|
||||||
dayOrderList: [] // 日统计 订单列表
|
dayOrderList: [], // 日统计 订单列表
|
||||||
// // 日选择器
|
monthOrderList: [], // 月统计 订单列表
|
||||||
// dayPickerOptions: {
|
yearOrderList: [], // 年统计 订单列表
|
||||||
// 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: {
|
dayBoxLoading: true, // 日统计框 加载
|
||||||
// disabledDate (time) {
|
monthBoxLoading: true, // 月统计框 加载
|
||||||
// return time.getTime() > Date.now()
|
yearBoxLoading: true, // 年统计框 加载
|
||||||
// },
|
|
||||||
// shortcuts: [{
|
// 日选择器
|
||||||
// text: '本月',
|
dayPickerOptions: {
|
||||||
// onClick (picker) {
|
disabledDate (time) {
|
||||||
// const start = new Date()
|
return time.getTime() > Date.now()
|
||||||
// start.setDate(1)
|
},
|
||||||
// start.setHours(0, 0, 0, 0)
|
shortcuts: [{
|
||||||
// picker.$emit('pick', start)
|
text: '今天',
|
||||||
// }
|
onClick (picker) {
|
||||||
// }, {
|
const start = new Date()
|
||||||
// text: '上月',
|
start.setHours(0, 0, 0, 0)
|
||||||
// onClick (picker) {
|
picker.$emit('pick', start)
|
||||||
// const start = new Date()
|
}
|
||||||
// start.setMonth(start.getMonth() - 1)
|
}, {
|
||||||
// start.setDate(1)
|
text: '昨天',
|
||||||
// start.setHours(0, 0, 0, 0)
|
onClick (picker) {
|
||||||
// picker.$emit('pick', start)
|
const start = new Date()
|
||||||
// }
|
start.setDate(start.getDate() - 1)
|
||||||
// }, {
|
start.setHours(0, 0, 0, 0)
|
||||||
// text: '前月',
|
picker.$emit('pick', start)
|
||||||
// onClick (picker) {
|
}
|
||||||
// const start = new Date()
|
}, {
|
||||||
// start.setMonth(start.getMonth() - 2)
|
text: '前天',
|
||||||
// start.setDate(1)
|
onClick (picker) {
|
||||||
// start.setHours(0, 0, 0, 0)
|
const start = new Date()
|
||||||
// picker.$emit('pick', start)
|
start.setDate(start.getDate() - 2)
|
||||||
// }
|
start.setHours(0, 0, 0, 0)
|
||||||
// }]
|
picker.$emit('pick', start)
|
||||||
// },
|
}
|
||||||
// monthTime: new Date(), // 默认值为本月
|
}]
|
||||||
// yearPickerOptions: {
|
},
|
||||||
// disabledDate (time) {
|
dayTime: new Date(), // 默认值为今天
|
||||||
// return time.getTime() > Date.now()
|
|
||||||
// },
|
monthPickerOptions: {
|
||||||
// shortcuts: [{
|
disabledDate (time) {
|
||||||
// text: '本年',
|
return time.getTime() > Date.now()
|
||||||
// onClick (picker) {
|
},
|
||||||
// const start = new Date()
|
shortcuts: [{
|
||||||
// start.setMonth(0)
|
text: '本月',
|
||||||
// start.setDate(1)
|
onClick (picker) {
|
||||||
// start.setHours(0, 0, 0, 0)
|
const start = new Date()
|
||||||
// picker.$emit('pick', start)
|
start.setDate(1)
|
||||||
// }
|
start.setHours(0, 0, 0, 0)
|
||||||
// }, {
|
picker.$emit('pick', start)
|
||||||
// text: '去年',
|
}
|
||||||
// onClick (picker) {
|
}, {
|
||||||
// const start = new Date()
|
text: '上月',
|
||||||
// start.setFullYear(start.getFullYear() - 1)
|
onClick (picker) {
|
||||||
// start.setMonth(0)
|
const start = new Date()
|
||||||
// start.setDate(1)
|
start.setMonth(start.getMonth() - 1)
|
||||||
// start.setHours(0, 0, 0, 0)
|
start.setDate(1)
|
||||||
// picker.$emit('pick', start)
|
start.setHours(0, 0, 0, 0)
|
||||||
// }
|
picker.$emit('pick', start)
|
||||||
// }, {
|
}
|
||||||
// text: '前年',
|
}, {
|
||||||
// onClick (picker) {
|
text: '前月',
|
||||||
// const start = new Date()
|
onClick (picker) {
|
||||||
// start.setFullYear(start.getFullYear() - 2)
|
const start = new Date()
|
||||||
// start.setMonth(0)
|
start.setMonth(start.getMonth() - 2)
|
||||||
// start.setDate(1)
|
start.setDate(1)
|
||||||
// start.setHours(0, 0, 0, 0)
|
start.setHours(0, 0, 0, 0)
|
||||||
// picker.$emit('pick', start)
|
picker.$emit('pick', start)
|
||||||
// }
|
}
|
||||||
// }]
|
}]
|
||||||
// },
|
},
|
||||||
// yearTime: new Date() // 默认值为本年
|
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: {
|
components: {
|
||||||
SelectionShopId
|
SelectionShopId
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
/**
|
// 日 统计组件 起始 结束时间戳
|
||||||
* @description: 搜索条件 集合
|
dayTimestamps () {
|
||||||
*/
|
if (!this.dayTime) {
|
||||||
orderSerch () {
|
return { start: null, end: null }
|
||||||
return this.$store.getters['app/getOrderSerch']
|
}
|
||||||
}
|
const start = new Date(this.dayTime)
|
||||||
// // 月统计 订单列表
|
start.setHours(0, 0, 0, 0)
|
||||||
// monthOrderList () {
|
const end = new Date(this.dayTime)
|
||||||
// return this.$store.state.orderList.filter(item => Number(item.order_time) > Number(this.monthTimestamps.start) && Number(item.order_time) < Number(this.monthTimestamps.end))
|
end.setHours(23, 59, 59, 999)
|
||||||
// },
|
return {
|
||||||
// // 年统计 订单列表
|
start: Math.floor(start.getTime() / 1000), // 转换为秒
|
||||||
// yearOrderList () {
|
end: Math.floor(end.getTime() / 1000) // 转换为秒
|
||||||
// return this.$store.state.orderList.filter(item => Number(item.order_time) > Number(this.yearTimestamps.start) && Number(item.order_time) < Number(this.yearTimestamps.end))
|
}
|
||||||
// },
|
},
|
||||||
|
// 日搜索条件 集合
|
||||||
|
dayOrderSerch () {
|
||||||
|
return {
|
||||||
|
shop_id: this.shop_id, // 搜索条件 商铺id
|
||||||
|
start_time: Math.floor(this.dayTimestamps.start), // 搜索条件 起始时间
|
||||||
|
end_time: Math.floor(this.dayTimestamps.end), // 搜索条件 结束时间
|
||||||
|
main_status: ['已付款', '已退款', '已完成'], // 搜索条件 主状态
|
||||||
|
shipment_status: [], // 搜索条件 执行状态
|
||||||
|
refund_status: [], // 搜索条件 退款状态
|
||||||
|
search: ['orderSn', '']// 搜索条件 搜索
|
||||||
|
}
|
||||||
|
},
|
||||||
// 过滤出 日 收款订单 包括已付款 和 已完成
|
// 过滤出 日 收款订单 包括已付款 和 已完成
|
||||||
// dayPaid () {
|
dayPaid () {
|
||||||
// return this.dayOrderList.filter(item => item.main_status === '已付款' || item.main_status === '已完成')
|
return this.dayOrderList
|
||||||
// },
|
},
|
||||||
// // 日收款订单 营业额总和
|
// 日收款订单 营业额总和
|
||||||
// dayPaidTotal () {
|
dayPaidTotal () {
|
||||||
// return this.dayPaid.reduce((total, item) => total + Number(item.total_price), 0).toFixed(2)
|
return formatPrice(this.dayPaid.reduce((total, item) => total + Number(item.total_price) - Number(item.refund_price), 0))
|
||||||
// },
|
},
|
||||||
// // 过滤出 日 退款付点单
|
// 过滤出 日 退款付点单
|
||||||
// dayRefund () {
|
dayRefund () {
|
||||||
// return this.dayOrderList.filter(item => item.main_status === '已退款')
|
return this.dayOrderList.filter(item => item.main_status === '已退款')
|
||||||
// },
|
},
|
||||||
// // 日收款订单 退款额总和
|
// 日收款订单 退款额总和
|
||||||
// dayRefundTotal () {
|
dayRefundTotal () {
|
||||||
// return this.dayRefund.reduce((total, item) => total + Number(item.refund_price), 0).toFixed(2)
|
return formatPrice(this.dayRefund.reduce((total, item) => total + Number(item.refund_price), 0))
|
||||||
// },
|
},
|
||||||
// // 日 统计组件 起始 结束时间戳
|
// 月 统计组件 起始 结束时间戳
|
||||||
// dayTimestamps () {
|
monthTimestamps () {
|
||||||
// if (!this.dayTime) {
|
if (!this.monthTime) {
|
||||||
// return { start: null, end: null }
|
return { start: null, end: null }
|
||||||
// }
|
}
|
||||||
// const start = new Date(this.dayTime)
|
const start = new Date(this.monthTime)
|
||||||
// start.setHours(0, 0, 0, 0)
|
start.setDate(1)
|
||||||
// const end = new Date(this.dayTime)
|
start.setHours(0, 0, 0, 0)
|
||||||
// end.setHours(23, 59, 59, 999)
|
const end = new Date(this.monthTime)
|
||||||
// return {
|
end.setMonth(end.getMonth() + 1)
|
||||||
// start: Math.floor(start.getTime() / 1000), // 转换为秒
|
end.setDate(0)
|
||||||
// end: Math.floor(end.getTime() / 1000) // 转换为秒
|
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 }
|
// 月搜索条件 集合
|
||||||
// }
|
monthOrderSerch () {
|
||||||
// const start = new Date(this.monthTime)
|
return {
|
||||||
// start.setDate(1)
|
shop_id: this.shop_id, // 搜索条件 商铺id
|
||||||
// start.setHours(0, 0, 0, 0)
|
start_time: Math.floor(this.monthTimestamps.start), // 搜索条件 起始时间
|
||||||
// const end = new Date(this.monthTime)
|
end_time: Math.floor(this.monthTimestamps.end), // 搜索条件 结束时间
|
||||||
// end.setMonth(end.getMonth() + 1)
|
main_status: ['已付款', '已退款', '已完成'], // 搜索条件 主状态
|
||||||
// end.setDate(0)
|
shipment_status: [], // 搜索条件 执行状态
|
||||||
// end.setHours(23, 59, 59, 999)
|
refund_status: [], // 搜索条件 退款状态
|
||||||
// return {
|
search: ['orderSn', '']// 搜索条件 搜索
|
||||||
// start: Math.floor(start.getTime() / 1000), // 转换为秒
|
}
|
||||||
// end: Math.floor(end.getTime() / 1000) // 转换为秒
|
},
|
||||||
// }
|
// 过滤出 月 收款订单 包括已付款 和 已完成
|
||||||
// },
|
monthPaid () {
|
||||||
// // 年 统计组件 起始 结束时间戳
|
return this.monthOrderList
|
||||||
// yearTimestamps () {
|
},
|
||||||
// if (!this.yearTime) {
|
// 月收款订单 营业额总和
|
||||||
// return { start: null, end: null }
|
monthPaidTotal () {
|
||||||
// }
|
return formatPrice(this.monthPaid.reduce((total, item) => total + Number(item.total_price) - Number(item.refund_price), 0))
|
||||||
// const start = new Date(this.yearTime)
|
},
|
||||||
// start.setMonth(0)
|
// 过滤出 月 退款付点单
|
||||||
// start.setDate(1)
|
monthRefund () {
|
||||||
// start.setHours(0, 0, 0, 0)
|
return this.monthOrderList.filter(item => item.main_status === '已退款')
|
||||||
// const end = new Date(this.yearTime)
|
},
|
||||||
// end.setMonth(11)
|
// 月收款订单 退款额总和
|
||||||
// end.setDate(31)
|
monthRefundTotal () {
|
||||||
// end.setHours(23, 59, 59, 999)
|
return formatPrice(this.monthRefund.reduce((total, item) => total + Number(item.refund_price), 0))
|
||||||
// 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) // 转换为秒
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 年搜索条件 集合
|
||||||
|
yearOrderSerch () {
|
||||||
|
return {
|
||||||
|
shop_id: this.shop_id, // 搜索条件 商铺id
|
||||||
|
start_time: Math.floor(this.yearTimestamps.start), // 搜索条件 起始时间
|
||||||
|
end_time: Math.floor(this.yearTimestamps.end), // 搜索条件 结束时间
|
||||||
|
main_status: ['已付款', '已退款', '已完成'], // 搜索条件 主状态
|
||||||
|
shipment_status: [], // 搜索条件 执行状态
|
||||||
|
refund_status: [], // 搜索条件 退款状态
|
||||||
|
search: ['orderSn', '']// 搜索条件 搜索
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 过滤出 年 收款订单 包括已付款 和 已完成
|
||||||
|
yearPaid () {
|
||||||
|
return this.yearOrderList
|
||||||
|
},
|
||||||
|
// 年收款订单 营业额总和
|
||||||
|
yearPaidTotal () {
|
||||||
|
return formatPrice(this.yearPaid.reduce((total, item) => total + Number(item.total_price) - Number(item.refund_price), 0))
|
||||||
|
},
|
||||||
|
// 过滤出 年 退款付点单
|
||||||
|
yearRefund () {
|
||||||
|
return this.yearOrderList.filter(item => item.main_status === '已退款')
|
||||||
|
},
|
||||||
|
// 年收款订单 退款额总和
|
||||||
|
yearRefundTotal () {
|
||||||
|
return formatPrice(this.yearRefund.reduce((total, item) => total + Number(item.refund_price), 0))
|
||||||
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
async getDayOrderList (orderSerch) {
|
/**
|
||||||
|
* 获取订单列表
|
||||||
|
* @param orderSerch 搜索条件
|
||||||
|
* @param type 请求类型 day month year 按条件给对应 属性列表赋值
|
||||||
|
*/
|
||||||
|
async getOrderList (orderSerch, type) {
|
||||||
const res = await getOrderList(orderSerch)
|
const res = await getOrderList(orderSerch)
|
||||||
if (res.data.status === 1) {
|
if (type === 'day') {
|
||||||
this.dayOrderList = res.data.orderList
|
if (res.data.status === 1) {
|
||||||
} else {
|
this.dayOrderList = res.data.orderList
|
||||||
this.$message.error('获取日订单列表失败')
|
} else {
|
||||||
|
this.$message.error('日订单列表获取失败')
|
||||||
|
}
|
||||||
|
this.dayBoxLoading = false // 结束加载动画
|
||||||
|
} else if (type === 'month') {
|
||||||
|
if (res.data.status === 1) {
|
||||||
|
this.monthOrderList = res.data.orderList
|
||||||
|
} else {
|
||||||
|
this.$message.error('月订单列表获取失败')
|
||||||
|
}
|
||||||
|
this.monthBoxLoading = false // 结束加载动画
|
||||||
|
} else if (type === 'year') {
|
||||||
|
if (res.data.status === 1) {
|
||||||
|
this.yearOrderList = res.data.orderList
|
||||||
|
} else {
|
||||||
|
this.$message.error('年订单列表获取失败')
|
||||||
|
}
|
||||||
|
this.yearBoxLoading = false // 结束加载动画
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 点击路由到订单管理页面
|
||||||
|
* @param type 路由时 判断全局的搜索条件
|
||||||
|
*/
|
||||||
|
handlerRouteCilck (type) {
|
||||||
|
if (type === 'day') {
|
||||||
|
this.$store.commit('app/setOrderSerch', this.dayOrderSerch)
|
||||||
|
} else if (type === 'month') {
|
||||||
|
this.$store.commit('app/setOrderSerch', this.monthOrderSerch)
|
||||||
|
} else if (type === 'year') {
|
||||||
|
this.$store.commit('app/setOrderSerch', this.yearOrderSerch)
|
||||||
|
}
|
||||||
|
this.$router.push('/order/index')
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
// monthTimestamps (val) {
|
dayOrderSerch: {
|
||||||
// console.log(val)
|
handler (val) {
|
||||||
// },
|
this.dayBoxLoading = true// 日统计框 加载动画
|
||||||
// dayTimestamps (val) {
|
this.getOrderList(val, 'day')
|
||||||
// console.log(val)
|
},
|
||||||
// },
|
deep: true
|
||||||
// dayPaid (val) {
|
},
|
||||||
// console.log(val)
|
monthOrderSerch: {
|
||||||
// },
|
handler (val) {
|
||||||
// yearOrderList (val) {
|
this.monthBoxLoading = true// 月统计框 加载动画
|
||||||
// console.log(val)
|
this.getOrderList(val, 'month')
|
||||||
// }
|
},
|
||||||
|
deep: true
|
||||||
|
},
|
||||||
|
yearOrderSerch: {
|
||||||
|
handler (val) {
|
||||||
|
this.yearBoxLoading = true// 年统计框 加载动画
|
||||||
|
this.getOrderList(val, 'year')
|
||||||
|
},
|
||||||
|
deep: true
|
||||||
|
}
|
||||||
},
|
},
|
||||||
created () {
|
created () {
|
||||||
this.getDayOrderList(this.orderSerch)
|
this.getOrderList(this.dayOrderSerch, 'day')
|
||||||
setTimeout(() => {
|
this.getOrderList(this.monthOrderSerch, 'month')
|
||||||
console.error(this.dayOrderList)
|
this.getOrderList(this.yearOrderSerch, 'year')
|
||||||
}, 3000)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user