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

frontend/src/views/account/NotificationsView.vue

@@ -1,3 +1,30 @@
+<script setup lang="ts">
+import { ElMessage } from 'element-plus'
+import { onMounted, ref } from 'vue'
+
+import { fetchNotifications, markNotificationRead, type NotificationItem } from '@/api/notifications'
+
+const loading = ref(false)
+const notifications = ref<NotificationItem[]>([])
+
+onMounted(loadNotifications)
+
+async function loadNotifications() {
+  loading.value = true
+  try {
+    notifications.value = await fetchNotifications()
+  } finally {
+    loading.value = false
+  }
+}
+
+async function markRead(id: number) {
+  await markNotificationRead(id)
+  ElMessage.success('已标记为已读')
+  await loadNotifications()
+}
+</script>
+
 <template>
   <section class="page">
     <div class="page-header">
@@ -5,5 +32,23 @@
       <h1>站内信</h1>
       <p>接收审核、交接、归还、申诉和仲裁结果通知。</p>
     </div>
+
+    <el-empty v-if="!loading && notifications.length === 0" description="暂无站内信" />
+    <div v-else v-loading="loading" class="notification-list">
+      <div v-for="item in notifications" :key="item.id" class="notification-item" :class="{ unread: !item.read_at }">
+        <div>
+          <span>{{ item.type }}</span>
+          <h2>{{ item.title }}</h2>
+          <p>{{ item.content }}</p>
+          <small>{{ item.created_at }}</small>
+        </div>
+        <div class="notification-actions">
+          <RouterLink v-if="item.biz_type === 'order' && item.biz_id" :to="`/orders/${item.biz_id}`">
+            <el-button size="small">查看订单</el-button>
+          </RouterLink>
+          <el-button v-if="!item.read_at" size="small" type="primary" @click="markRead(item.id)">已读</el-button>
+        </div>
+      </div>
+    </div>
   </section>
 </template>

frontend/src/views/account/OrderDetailView.vue

@@ -3,6 +3,7 @@ import { ElMessage } from 'element-plus'
 import { computed, onMounted, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
+import { createDispute } from '@/api/disputes'
 import {
   cancelOrder,
   confirmReceive,
@@ -25,13 +26,21 @@ const handoffing = ref(false)
 const confirming = ref(false)
 const returning = ref(false)
 const completing = ref(false)
+const disputing = ref(false)
 const order = ref<Order | null>(null)
 const handoffRecords = ref<HandoffRecord[]>([])
 const handoffContent = ref('')
 const returnContent = ref('')
+const disputeType = ref('cannot_login')
+const disputeDescription = ref('')
+const disputeEvidenceText = ref('')
 
 const isOwner = computed(() => order.value?.owner_id === session.userId)
 const isRenter = computed(() => order.value?.renter_id === session.userId)
+const canOpenDispute = computed(() => {
+  if (!order.value || (!isOwner.value && !isRenter.value)) return false
+  return !['completed', 'cancelled', 'closed', 'disputing'].includes(order.value.status)
+})
 
 onMounted(loadOrder)
 
@@ -117,6 +126,30 @@ async function handleConfirmReturn() {
   }
 }
 
+async function handleCreateDispute() {
+  if (!order.value) return
+  disputing.value = true
+  try {
+    const evidence_urls = disputeEvidenceText.value
+      .split('\n')
+      .map((item) => item.trim())
+      .filter(Boolean)
+    await createDispute(order.value.id, {
+      type: disputeType.value,
+      description: disputeDescription.value,
+      evidence_urls,
+    })
+    disputeDescription.value = ''
+    disputeEvidenceText.value = ''
+    ElMessage.success('申诉已提交，订单进入仲裁处理')
+    await loadOrder()
+  } catch (error) {
+    ElMessage.error(readError(error, '提交申诉失败'))
+  } finally {
+    disputing.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
@@ -198,5 +231,33 @@ function readError(error: unknown, fallback: string) {
       <p>确认账号状态无误后，订单会完成，账号重新上架。</p>
       <el-button type="primary" :loading="completing" @click="handleConfirmReturn">确认归还并完成订单</el-button>
     </div>
+
+    <div v-if="order && canOpenDispute" class="order-panel">
+      <h2>发起申诉</h2>
+      <el-select v-model="disputeType" class="full-control" placeholder="选择申诉类型">
+        <el-option label="无法登录" value="cannot_login" />
+        <el-option label="虚假描述" value="false_description" />
+        <el-option label="账号被封" value="account_banned" />
+        <el-option label="资产损失" value="asset_loss" />
+        <el-option label="哈夫币争议" value="haf_coin_dispute" />
+        <el-option label="超时未交接" value="handoff_timeout" />
+        <el-option label="超时未归还" value="return_timeout" />
+      </el-select>
+      <el-input
+        v-model="disputeDescription"
+        class="panel-action"
+        type="textarea"
+        :rows="4"
+        placeholder="说明争议经过、时间点和希望客服核查的证据"
+      />
+      <el-input
+        v-model="disputeEvidenceText"
+        class="panel-action"
+        type="textarea"
+        :rows="3"
+        placeholder="证据链接，一行一个。开发阶段可先填截图地址或备注链接"
+      />
+      <el-button class="panel-action" type="warning" :loading="disputing" @click="handleCreateDispute">提交申诉</el-button>
+    </div>
   </section>
 </template>