pickup.vue
4.26 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
<template>
<!-- 列表内容 -->
<view v-for="(item, index) in itemData" :key="index" class="expressage">
<view class="boxBg">
<view class="tabList">
<view class="item" @click.stop="handleDetails($event, item)">
<view v-if="item.status !== 1" class="history">
<view class="titInfo">订单号：SD{{ item.orderId }}</view>
<view class="address">寄件人：{{ item.name }}</view>
<view class="address">取件地址：{{ item.address }}</view>
<view class="address">取件时间：{{ item.actualEndTime }}</view>
<view class="time" v-if="item.status === 2"
>运费：{{ item.amount }}元</view
>
</view>
<view v-else class="history">
<view class="titInfo">
<view>
<text class="name">{{ item.name }}</text>
{{ item.phone }}
<!-- TODO拨打电话和发信息小图标，暂时保留 -->
<!-- <icon class="phone" @click.stop="handlePhone($event, item.phone)"></icon>
<icon class="note" @click.stop="handleNote"></icon> -->
</view>
</view>
<view class="address">{{ item.address }}</view>
<view class="address">{{ item.distance }}公里</view>
<view class="time"
>预约取件时间：{{ taskTimeFormat(item.estimatedStartTime) }} 至
{{ overTimeFormat(item.estimatedEndTime) }}</view
>
</view>
<text
@click.stop="handleDetails($event, item)"
class="delete"
v-if="item.status === 1"
><button class="uni-btn btn-default">去取件</button></text
>
<text
@click.stop="handleDetails($event, item)"
class="delete"
v-else-if="
item.status === 2 &&
item.paymentStatus === 1 &&
item.paymentMethod === 1
"
><button class="uni-btn btn-default">去收款</button></text
>
<text @click.stop="handleOpen($event, item.id)" class="delete" v-else
><button class="uni-btn concelBtn">删除</button></text
>
</view>
</view>
</view>
</view>
<!-- end -->
</template>
<script setup>
import { onMounted } from "vue";
import { taskTimeFormat, overTimeFormat } from "@/utils/index.js";
import { useStore } from "vuex";
// 获取父组件数据
const props = defineProps({
// 数据
itemData: {
type: Array,
default: () => [],
},
// 当前触发的tab值
tabIndex: {
type: Number,
default: 0,
},
});
// ------定义变量------
const store = useStore(); //vuex获取、储存数据
const users = store.state.user;
const emit = defineEmits(""); //子组件向父组件事件传递
// ------生命周期------
onMounted(() => {});
// ------定义方法------
// 删除弹层
const handleOpen = (e, id) => {
// 阻止事件冒泡
e.stopPropagation();
emit("handleOpen", id);
};
// 去取件详情
const handleDetails = (e, item) => {
// 阻止事件冒泡
e.stopPropagation();
// 把任务id用vuex的方法存储，方便其他页面调用
store.commit("user/setTaskId", item.id);
// 由于取件详情地址和派件详情地址样式一致，所以用类型 1取件，2派件区分开
store.commit("user/setTaskType", 1);
// 已取件\已取消\去派件\已签收\详情页用的是一个,所以用类型status声明 1:待取件，2:已取件,3:已取消,4:待派件,5:已签收
// 用vuex保存状态,因为当从详情页返回列表页的时候要显示对应的tab列表项
store.commit("user/setTaskStatus", 6);
store.commit("user/setDetailType", 1); //从历史订单他跳入订单详情
// 如果时带取件进入到去取件页面
// 进入详情页
if (item.status === 1) {
uni.redirectTo({
url: "/pages/details/index",
});
} else if (
item.status === 2 &&
item.paymentStatus === 1 &&
item.paymentMethod === 1
) {
// 未付款进入付款二维码页面
store.commit("user/setPayData", {});
uni.redirectTo({
url: "/pages/pay/scanPay",
});
} else {
// 已经完成的进入订单详情页
uni.redirectTo({
url: "/pages/details/waybill",
});
}
};
</script>