RefundList.vue
3.58 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
<template>
<div>
<a-card title="退款管理" :bordered="false">
<template #extra>
<a-space>
<a-select v-model:value="filterStatus" placeholder="状态" allowClear style="width:120px" @change="loadList">
<a-select-option :value="0">待处理</a-select-option>
<a-select-option :value="1">已通过</a-select-option>
<a-select-option :value="2">已拒绝</a-select-option>
</a-select>
<a-input-search v-model:value="keyword" placeholder="订单号" @search="loadList" style="width:200px" />
</a-space>
</template>
<a-table :dataSource="list" :columns="columns" :loading="loading" rowKey="id" :pagination="false">
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'role'">
{{ record.role === 1 ? '用户' : '骑手' }}
</template>
<template v-if="column.key === 'status'">
<a-tag :color="record.status === 1 ? 'green' : record.status === 2 ? 'red' : 'orange'">
{{ statusMap[record.status] }}
</a-tag>
</template>
<template v-if="column.key === 'action'">
<a-space v-if="record.status === 0">
<a-popconfirm title="确认通过退款？" @confirm="handle(record.id, 1)">
<a style="color:green">通过</a>
</a-popconfirm>
<a @click="openReject(record)">拒绝</a>
</a-space>
<span v-else>{{ record.remark || '-' }}</span>
</template>
</template>
</a-table>
</a-card>
<!-- 拒绝弹窗 -->
<a-modal v-model:open="rejectVisible" title="拒绝退款" @ok="handleReject" :confirmLoading="saving">
<a-form layout="vertical">
<a-form-item label="拒绝原因">
<a-textarea v-model:value="rejectRemark" :rows="3" placeholder="请填写拒绝原因" />
</a-form-item>
</a-form>
</a-modal>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { refundApi } from '@/api'
import request from '@/utils/request'
const loading = ref(false)
const saving = ref(false)
const list = ref<any[]>([])
const filterStatus = ref<number | undefined>()
const keyword = ref('')
const rejectVisible = ref(false)
const rejectRemark = ref('')
const currentRecordId = ref(0)
const statusMap: Record<number, string> = { 0: '待处理', 1: '已通过', 2: '已拒绝' }
const columns = [
{ title: 'ID', dataIndex: 'id', width: 80 },
{ title: '订单号', dataIndex: 'orderNo', ellipsis: true },
{ title: '申请角色', key: 'role' },
{ title: '原因', dataIndex: 'reason', ellipsis: true },
{ title: '退款金额', dataIndex: 'money' },
{ title: '状态', key: 'status' },
{ title: '操作/备注', key: 'action' },
]
async function loadList() {
loading.value = true
try {
// 退款列表需要后端补充列表接口，暂用空列表
list.value = []
} finally { loading.value = false }
}
async function handle(recordId: number, status: number, remark = '') {
await refundApi.handle(recordId, status, remark)
message.success('操作成功')
loadList()
}
function openReject(record: any) {
currentRecordId.value = record.id
rejectRemark.value = ''
rejectVisible.value = true
}
async function handleReject() {
saving.value = true
try {
await refundApi.handle(currentRecordId.value, 2, rejectRemark.value)
message.success('操作成功')
rejectVisible.value = false
loadList()
} finally { saving.value = false }
}
onMounted(loadList)
</script>