index.vue
2.75 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>
<!-- 头部导航栏 -->
<nav-bar title='取消订单'></nav-bar>
<view class="order-cancel">
<image class="orderCancel-bg" src='../../static/order-cancel-bg.png'></image>
<view class="cancel">
<view class="customerBox">
<view class="title">客户相关</view>
<view class="reason-item" v-for='(item,index) in customerReason' :key="index"
@click="checkbox(item.value)">
<view class="checkRadio">
<radio style="transform:scale(0.8)" color="#E44232" :value="String(item.value)"
:checked="item.value === defaultReason" />
</view>
<view class="label">{{item.label}}</view>
</view>
</view>
<view class="senderBox">
<view class="title">快递员/服务相关</view>
<view class="reason-item" v-for='(item,index) in senderReason' :key="index"
@click="checkbox(item.value)">
<view class="checkRadio">
<radio style="transform:scale(0.8)" color="#E44232" :value="String(item.value)"
:checked="item.value === defaultReason" />
</view>
<view class="label">{{item.label}}</view>
</view>
</view>
</view>
<view class="footer">
<view class="cancel-btn" @click="handleNoCancel">暂不取消</view>
<view class="confirm-btn" @click="handleConfirmCancel">确定取消</view>
</view>
</view>
</template>
<script setup>
import {
ref,
reactive,
onMounted
} from 'vue';
import {
onLoad,
onShow
} from '@dcloudio/uni-app';
import {
cancelOrder
} from '@/pages/api/order.js'
const orderId = ref()
let defaultReason = ref(1)
onLoad((options) => {
orderId.value = options.orderId
})
const customerReason = reactive([{
value: 1,
label: '计划有变，不需要寄了'
},
{
value: 2,
label: '换个时间再寄'
},
{
value: 3,
label: '去服务点自寄'
}
])
const senderReason = reactive(
[{
value: 4,
label: '送达时间不能达到我的要求'
},
{
value: 5,
label: '运费太贵了'
},
{
value: 6,
label: '快递员未及时取件'
},
{
value: 7,
label: '快递员不上门'
},
{
value: 8,
label: '快递员服务态度差'
}
])
//确定取消订单
const handleConfirmCancel = () => {
cancelOrder(orderId.value).then((res) => {
uni.showToast({
title: '取消成功',
icon: 'none',
success: () => {
},
duration: 2000
})
setTimeout(() => {
uni.switchTab({
url: '/pages/index/index'
})
}, 2500)
}
).catch(()=>{
uni.showToast({
title: '网络异常',
duration: 2000,
icon: 'none'
});
})
}
//暂不取消
const handleNoCancel = () => {
uni.navigateBack()
}
const checkbox = (value) => {
defaultReason.value = value
}
</script>
<style src="./index.scss" lang="scss" scoped></style>