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

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>