第 4 阶段：订单、交接与账务--ok

frontend/src/api/orders.ts

@@ -79,3 +79,13 @@ export async function confirmReceive(id: number) {
   const { data } = await apiClient.post<ApiResponse<{ received: boolean }>>(`/orders/${id}/confirm-receive`)
   return data.data
 }
+
+export async function submitReturn(id: number, content: string) {
+  const { data } = await apiClient.post<ApiResponse<HandoffRecord>>(`/orders/${id}/return`, { content })
+  return data.data
+}
+
+export async function confirmReturn(id: number) {
+  const { data } = await apiClient.post<ApiResponse<{ completed: boolean }>>(`/orders/${id}/confirm-return`)
+  return data.data
+}

frontend/src/api/wallet.ts

@@ -0,0 +1,39 @@
+import { apiClient } from './client'
+
+export interface WalletAccount {
+  user_id: number
+  available_balance: number
+  frozen_balance: number
+  status: string
+}
+
+export interface WalletLedger {
+  id: number
+  ledger_no: string
+  user_id: number
+  order_id?: number
+  direction: string
+  amount: number
+  balance_after: number
+  balance_type: string
+  biz_type: string
+  biz_no: string
+  remark: string
+  created_at: string
+}
+
+interface ApiResponse<T> {
+  code: string
+  message: string
+  data: T
+}
+
+export async function fetchWalletBalance() {
+  const { data } = await apiClient.get<ApiResponse<WalletAccount>>('/wallet/balance')
+  return data.data
+}
+
+export async function fetchWalletLedger() {
+  const { data } = await apiClient.get<ApiResponse<{ items: WalletLedger[] }>>('/wallet/ledger')
+  return data.data.items
+}

frontend/src/views/account/OrderDetailView.vue

@@ -6,9 +6,11 @@ import { useRoute, useRouter } from 'vue-router'
 import {
   cancelOrder,
   confirmReceive,
+  confirmReturn,
   fetchHandoffRecords,
   fetchOrder,
   submitHandoff,
+  submitReturn,
   type HandoffRecord,
   type Order,
 } from '@/api/orders'
@@ -21,9 +23,12 @@ const loading = ref(false)
 const cancelling = ref(false)
 const handoffing = ref(false)
 const confirming = ref(false)
+const returning = ref(false)
+const completing = ref(false)
 const order = ref<Order | null>(null)
 const handoffRecords = ref<HandoffRecord[]>([])
 const handoffContent = ref('')
+const returnContent = ref('')
 
 const isOwner = computed(() => order.value?.owner_id === session.userId)
 const isRenter = computed(() => order.value?.renter_id === session.userId)
@@ -83,6 +88,35 @@ async function handleConfirmReceive() {
   }
 }
 
+async function handleSubmitReturn() {
+  if (!order.value) return
+  returning.value = true
+  try {
+    await submitReturn(order.value.id, returnContent.value)
+    returnContent.value = ''
+    ElMessage.success('归还申请已提交，等待号主确认')
+    await loadOrder()
+  } catch (error) {
+    ElMessage.error(readError(error, '提交归还失败'))
+  } finally {
+    returning.value = false
+  }
+}
+
+async function handleConfirmReturn() {
+  if (!order.value) return
+  completing.value = true
+  try {
+    await confirmReturn(order.value.id)
+    ElMessage.success('归还已确认，订单完成')
+    await loadOrder()
+  } catch (error) {
+    ElMessage.error(readError(error, '确认归还失败'))
+  } finally {
+    completing.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
@@ -152,5 +186,17 @@ function readError(error: unknown, fallback: string) {
       <p>确认账号可以正常登录后，订单会进入租赁中并重新计算租期结束时间。</p>
       <el-button type="primary" :loading="confirming" @click="handleConfirmReceive">确认已收到账号</el-button>
     </div>
+
+    <div v-if="order && isRenter && order.status === 'renting'" class="order-panel">
+      <h2>提交归还</h2>
+      <el-input v-model="returnContent" type="textarea" :rows="4" placeholder="填写归还说明、租后资产状态或注意事项" />
+      <el-button class="panel-action" type="primary" :loading="returning" @click="handleSubmitReturn">提交归还</el-button>
+    </div>
+
+    <div v-if="order && isOwner && order.status === 'pending_return_confirm'" class="order-panel">
+      <h2>确认归还</h2>
+      <p>确认账号状态无误后，订单会完成，账号重新上架。</p>
+      <el-button type="primary" :loading="completing" @click="handleConfirmReturn">确认归还并完成订单</el-button>
+    </div>
   </section>
 </template>

frontend/src/views/account/WalletView.vue

@@ -1,9 +1,58 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+
+import { fetchWalletBalance, fetchWalletLedger, type WalletAccount, type WalletLedger } from '@/api/wallet'
+
+const loading = ref(false)
+const account = ref<WalletAccount | null>(null)
+const ledger = ref<WalletLedger[]>([])
+
+onMounted(loadWallet)
+
+async function loadWallet() {
+  loading.value = true
+  try {
+    const [balance, rows] = await Promise.all([fetchWalletBalance(), fetchWalletLedger()])
+    account.value = balance
+    ledger.value = rows
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
 <template>
-  <section class="page">
+  <section class="page" v-loading="loading">
     <div class="page-header">
       <p class="eyebrow">Wallet</p>
       <h1>钱包</h1>
-      <p>查看可用余额、冻结余额和不可变资金流水。</p>
+      <p>查看可用余额、冻结余额和不可变资金流水。当前是开发态模拟账务，不代表真实支付余额。</p>
     </div>
+
+    <div v-if="account" class="metric-grid">
+      <div class="metric-card">
+        <span>可用余额</span>
+        <strong>¥{{ account.available_balance }}</strong>
+      </div>
+      <div class="metric-card">
+        <span>冻结余额</span>
+        <strong>¥{{ account.frozen_balance }}</strong>
+      </div>
+      <div class="metric-card">
+        <span>状态</span>
+        <strong>{{ account.status }}</strong>
+      </div>
+    </div>
+
+    <el-table class="table-panel" :data="ledger">
+      <el-table-column prop="ledger_no" label="流水号" min-width="220" />
+      <el-table-column prop="biz_type" label="业务" width="140" />
+      <el-table-column prop="direction" label="方向" width="80" />
+      <el-table-column prop="amount" label="金额" width="100" />
+      <el-table-column prop="balance_type" label="余额类型" width="110" />
+      <el-table-column prop="balance_after" label="变化后余额" width="130" />
+      <el-table-column prop="remark" label="备注" min-width="220" />
+      <el-table-column prop="created_at" label="时间" width="180" />
+    </el-table>
   </section>
 </template>