order-details.vue
3.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<template>
<view>
<view class="" v-for="(item,index) in shopList" :key="index">
<details-item @isCheck="isCheck" :item="item" :index="index" :status="status"></details-item>
</view>
<!-- 按钮 -->
<view class="bottomBar" v-if="status!== '5'">
<view class="barBox">
<view class="btn" @click="handleBtnClick">{{status==='2'?'立即接单':status==='3'?'立即取货':status==='4'?'确认送达':''}}
</view>
</view>
</view>
</view>
</template>
<script>
import detailsItem from './c-cpns/details-item.vue'
import { getOrderList, getTakeOrder, getOrderGoods, getConfirmDelivered } from '@/services/modules/index.js'
export default {
data() {
return {
status: '',
shopList:[],//订单数据
page:1,//第一页
lastPage:1,//最后一页
};
},
components: {
detailsItem
},
onLoad(option) {
this.status = option.status
this.fetchOrderList(option.status)
uni.setNavigationBarTitle({
title: option.status === '2' ? '待接单' : option.status === '3' ? '待取货' : option.status === '4' ? '配送中' : '已完成'
})
},
methods: {
// 子组件传过来的选中商品索引
isCheck(params) {
console.log(params,'姊川福')
this.shopList[params].checkType = !this.shopList[params].checkType
},
// 底部按钮
handleBtnClick() {
let ids = this.shopList.filter(item=>item.checkType).map(it=>it.id)
console.log(ids,'id数组')
if(!ids.length) return uni.showToast({title:'请选择订单',icon:'none'})
if (this.status == 2) this.fetchTakeOrder(ids.join())
if (this.status == 3) this.fetchOrderGoods(ids.join())
if (this.status == 4) this.fetchConfirmDelivered(ids.join())
},
// 订单列表
async fetchOrderList(status) {
const res = await getOrderList(status)
console.log(res, '订单列表');
this.lastPage = res.last_page
res.data.forEach(item=>item.checkType = false)
this.shopList = status === 'page' ? this.shopList.concat(res.data) : res.data
},
//立即接单
async fetchTakeOrder(status) {
const res = await getTakeOrder(status)
this.fetchOrderList()
uni.showToast({title:'成功接单',icon:'none'})
console.log(res, '接单');
},
//立即取货
async fetchOrderGoods(status) {
const res = await getOrderGoods(status)
this.fetchOrderList()
uni.showToast({title:'取货成功',icon:'none'})
console.log(res, '取货');
},
//确认送达
async fetchConfirmDelivered(status) {
const res = await getConfirmDelivered(status)
this.fetchOrderList()
uni.showToast({title:'已确认',icon:'none'})
console.log(res, '确认送达');
},
// TODO 多选
},
onReachBottom() {
if(this.page != this.lastPage) {
this.page = this.page + 1
this.fetchOrderList('page')
} else {
uni.showToast({title:'暂无更多~',icon:'none'})
}
}
}
</script>
<style lang="scss">
page {
font-size: 24rpx;
padding-bottom: 188rpx;
background-color: #f6f6f6;
}
.bottomBar {
position: fixed;
z-index: 999;
left: 0;
right: 0;
bottom: 0;
height: 188rpx;
width: 750rpx;
background-color: #fff;
.barBox {
@include wrapPadding(750rpx, 16rpx, 32rpx, 0, 32rpx);
.btn {
@include flexCj(center);
color: #ffffffff;
font-size: 32rpx;
font-weight: 700;
height: 88rpx;
border-radius: 54rpx;
background: #ec3323ff;
}
}
}
</style>