第 5 阶段：纠纷、通知与后台-1

frontend/src/views/admin/AdminDisputesView.vue

@@ -1,3 +1,61 @@
+<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('')
+
+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 || ''
+}
+
+async function handleArbitrate() {
+  if (!activeDispute.value) return
+  submitting.value = true
+  try {
+    await arbitrateDispute(activeDispute.value.id, {
+      result: result.value,
+      remark: remark.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">
@@ -5,5 +63,39 @@
       <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 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>