116 lines
4.4 KiB
Vue
116 lines
4.4 KiB
Vue
<script setup lang="ts">
|
||
import { ElMessage } from 'element-plus'
|
||
import { onMounted, ref } from 'vue'
|
||
|
||
import { arbitrateDispute, fetchAdminDisputes, type Dispute } from '@/api/disputes'
|
||
|
||
const loading = ref(false)
|
||
const submitting = ref(false)
|
||
const disputes = ref<Dispute[]>([])
|
||
const activeDispute = ref<Dispute | null>(null)
|
||
const result = ref('release_deposit')
|
||
const remark = ref('')
|
||
const amount = ref<number | undefined>()
|
||
|
||
onMounted(loadDisputes)
|
||
|
||
async function loadDisputes() {
|
||
loading.value = true
|
||
try {
|
||
disputes.value = await fetchAdminDisputes()
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
function openArbitration(row: Dispute) {
|
||
activeDispute.value = row
|
||
result.value = row.arbitration_result || 'release_deposit'
|
||
remark.value = row.arbitration_remark || ''
|
||
amount.value = undefined
|
||
}
|
||
|
||
async function handleArbitrate() {
|
||
if (!activeDispute.value) return
|
||
submitting.value = true
|
||
try {
|
||
await arbitrateDispute(activeDispute.value.id, {
|
||
result: result.value,
|
||
remark: remark.value,
|
||
amount: amount.value,
|
||
})
|
||
ElMessage.success('仲裁结果已保存，双方已收到通知')
|
||
activeDispute.value = null
|
||
remark.value = ''
|
||
await loadDisputes()
|
||
} catch (error) {
|
||
ElMessage.error(readError(error, '仲裁失败'))
|
||
} finally {
|
||
submitting.value = false
|
||
}
|
||
}
|
||
|
||
function readError(error: unknown, fallback: string) {
|
||
if (typeof error === 'object' && error && 'response' in error) {
|
||
const response = (error as { response?: { data?: { message?: string } } }).response
|
||
return response?.data?.message || fallback
|
||
}
|
||
return fallback
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<section class="page">
|
||
<div class="page-header">
|
||
<p class="eyebrow">Arbitration</p>
|
||
<h1>仲裁中心</h1>
|
||
<p>处理无法登录、资产损失、哈夫币争议和超时归还。</p>
|
||
</div>
|
||
|
||
<el-table v-loading="loading" class="table-panel" :data="disputes">
|
||
<el-table-column prop="order_no" label="订单号" min-width="210" />
|
||
<el-table-column prop="title" label="账号" min-width="160" />
|
||
<el-table-column prop="type" label="类型" width="150" />
|
||
<el-table-column prop="status" label="状态" width="110" />
|
||
<el-table-column prop="description" label="说明" min-width="220" show-overflow-tooltip />
|
||
<el-table-column prop="arbitration_result" label="结果" width="150" />
|
||
<el-table-column label="操作" width="120">
|
||
<template #default="{ row }">
|
||
<el-button size="small" :disabled="row.status === 'resolved'" @click="openArbitration(row)">仲裁</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<el-dialog :model-value="!!activeDispute" title="申诉仲裁" width="560px" @update:model-value="activeDispute = null">
|
||
<div v-if="activeDispute" class="dialog-body">
|
||
<p><strong>{{ activeDispute.order_no }}</strong> · {{ activeDispute.title }}</p>
|
||
<p>{{ activeDispute.description }}</p>
|
||
<el-select v-model="result" class="full-control" placeholder="选择裁决结果">
|
||
<el-option label="全额退款" value="full_refund" />
|
||
<el-option label="部分退款" value="partial_refund" />
|
||
<el-option label="扣押金" value="deduct_deposit" />
|
||
<el-option label="释放押金" value="release_deposit" />
|
||
<el-option label="赔付号主" value="compensate_owner" />
|
||
<el-option label="关闭订单" value="order_close" />
|
||
</el-select>
|
||
<el-input-number
|
||
v-if="['partial_refund', 'deduct_deposit', 'compensate_owner'].includes(result)"
|
||
v-model="amount"
|
||
class="full-control panel-action"
|
||
:min="0"
|
||
:precision="2"
|
||
:step="10"
|
||
placeholder="裁决金额"
|
||
/>
|
||
<p v-if="result === 'partial_refund'">部分退款金额表示退给租客的金额，剩余冻结金额结算给号主。</p>
|
||
<p v-if="['deduct_deposit', 'compensate_owner'].includes(result)">金额表示从押金中赔付给号主的部分；不填则默认处理全额押金。</p>
|
||
<el-input v-model="remark" class="panel-action" type="textarea" :rows="4" placeholder="填写客服裁决说明" />
|
||
</div>
|
||
<template #footer>
|
||
<el-button @click="activeDispute = null">取消</el-button>
|
||
<el-button type="primary" :loading="submitting" @click="handleArbitrate">保存裁决</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
</section>
|
||
</template>
|