DeliveryOrderList.vue
4.18 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
<template>
<div>
<a-card title="配送订单" :bordered="false">
<template #extra>
<a-space>
<a-select v-model:value="filterStatus" placeholder="状态" allowClear style="width:130px" @change="loadList">
<a-select-option :value="2">待接单</a-select-option>
<a-select-option :value="3">已接单</a-select-option>
<a-select-option :value="4">配送中</a-select-option>
<a-select-option :value="6">已完成</a-select-option>
<a-select-option :value="10">已取消</a-select-option>
</a-select>
<a-input-search v-model:value="keyword" placeholder="外部订单号" @search="loadList" style="width:220px" />
<a-button type="primary" @click="queryByNo" :loading="querying">查询</a-button>
</a-space>
</template>
<a-table :dataSource="list" :columns="columns" :loading="loading" rowKey="id" :pagination="false">
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'status'">
<a-tag :color="statusColor[record.status]">{{ statusMap[record.status] }}</a-tag>
</template>
<template v-if="column.key === 'action'">
<a-popconfirm v-if="record.status === 2" title="确认取消该配送订单？" @confirm="cancelOrder(record)">
<a style="color:red">取消</a>
</a-popconfirm>
<span v-else>-</span>
</template>
</template>
</a-table>
</a-card>
<!-- 查询结果弹窗 -->
<a-modal v-model:open="queryVisible" title="配送订单详情" :footer="null">
<a-descriptions :column="1" bordered size="small" v-if="queryResult">
<a-descriptions-item label="配送订单ID">{{ queryResult.deliveryOrderId }}</a-descriptions-item>
<a-descriptions-item label="外部订单号">{{ queryResult.outOrderNo }}</a-descriptions-item>
<a-descriptions-item label="状态">{{ statusMap[queryResult.status] }}</a-descriptions-item>
<a-descriptions-item label="配送费">¥{{ queryResult.totalFee }}</a-descriptions-item>
<a-descriptions-item label="距离">{{ queryResult.distance }} km</a-descriptions-item>
<a-descriptions-item label="预计时间">{{ queryResult.estimatedMinutes }} 分钟</a-descriptions-item>
</a-descriptions>
</a-modal>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { deliveryOrderApi, riderApi } from '@/api'
const loading = ref(false)
const querying = ref(false)
const list = ref<any[]>([])
const filterStatus = ref<number | undefined>()
const keyword = ref('')
const queryVisible = ref(false)
const queryResult = ref<any>(null)
const statusMap: Record<number, string> = {
2: '待接单', 3: '已接单', 4: '配送中', 6: '已完成', 7: '退款申请',
8: '退款成功', 9: '退款拒绝', 10: '已取消'
}
const statusColor: Record<number, string> = {
2: 'blue', 3: 'cyan', 4: 'processing', 6: 'green',
7: 'orange', 8: 'green', 9: 'red', 10: 'red'
}
const columns = [
{ title: 'ID', dataIndex: 'id', width: 80 },
{ title: '外部订单号', dataIndex: 'outOrderNo' },
{ title: '接入方', dataIndex: 'appKey', ellipsis: true },
{ title: '收件人', dataIndex: 'recipName' },
{ title: '配送费', dataIndex: 'moneyDelivery' },
{ title: '状态', key: 'status' },
{ title: '操作', key: 'action' },
]
async function loadList() {
loading.value = true
try {
const res: any = await riderApi.deliveryOrderList({
status: filterStatus.value,
outOrderNo: keyword.value || undefined,
page: 1
})
list.value = Array.isArray(res?.data) ? res.data : []
} finally { loading.value = false }
}
async function queryByNo() {
if (!keyword.value) { message.warning('请输入外部订单号'); return }
querying.value = true
try {
const res: any = await deliveryOrderApi.query(keyword.value)
queryResult.value = res.data
queryVisible.value = true
} finally { querying.value = false }
}
async function cancelOrder(record: any) {
await deliveryOrderApi.cancel(record.outOrderNo)
message.success('取消成功')
loadList()
}
onMounted(loadList)
</script>