优化订单结算金额展示和钱包流水号

frontend/src/features/orders/views/OrderDetailView.vue

@@ -77,7 +77,10 @@ let autoPayHandled = false
 
 const isOwner = computed(() => order.value?.owner_id === session.userId)
 const isRenter = computed(() => order.value?.renter_id === session.userId)
-const orderAmountLabel = computed(() => (isOwner.value ? '我的租金' : '订单金额'))
+const orderAmountLabel = computed(() => (isOwner.value ? '预计租金' : '支付租金'))
+const orderRentDisplayAmount = computed(() => (order.value ? orderRentAmount(order.value) : 0))
+const ownerIncomeDisplayAmount = computed(() => (order.value ? ownerActualIncome(order.value) : null))
+const ownerIncomeLabel = computed(() => (order.value?.status === 'completed' ? '实际到手' : '结账预计到手'))
 const canOpenDispute = computed(() => {
   if (!order.value || (!isOwner.value && !isRenter.value)) return false
   return !['completed', 'cancelled', 'closed', 'disputing', 'checkout_disputing', 'abnormal'].includes(order.value.status)
@@ -567,6 +570,18 @@ function money(value: unknown) {
   return `${roundMoney(readNumber(value))}`
 }
 
+function orderRentAmount(item: Order) {
+  if (item.owner_id === session.userId) return Number(item.owner_rent_amount ?? item.display_amount ?? 0)
+  if (item.renter_id === session.userId) return Number(item.rent_amount ?? item.display_amount ?? 0)
+  return Number(item.display_amount ?? 0)
+}
+
+function ownerActualIncome(item: Order) {
+  if (item.owner_id !== session.userId) return null
+  const value = item.checkout?.owner_income_amount
+  return typeof value === 'number' ? value : null
+}
+
 function quantity(value: unknown) {
   const rounded = roundQuantity(readNumber(value))
   return Number.isInteger(rounded) ? `${rounded}` : rounded.toFixed(2)
@@ -635,7 +650,11 @@ function linesToList(value: string) {
       </div>
       <div class="metric-card highlight">
         <span class="metric-label">{{ orderAmountLabel }}</span>
-        <strong class="metric-value amount">¥{{ money(order.display_amount) }}</strong>
+        <strong class="metric-value amount">¥{{ money(orderRentDisplayAmount) }}</strong>
+      </div>
+      <div v-if="isOwner && ownerIncomeDisplayAmount !== null" class="metric-card income">
+        <span class="metric-label">{{ ownerIncomeLabel }}</span>
+        <strong class="metric-value amount">¥{{ money(ownerIncomeDisplayAmount) }}</strong>
       </div>
       <div class="metric-card">
         <span class="metric-label">押金</span>
@@ -1028,6 +1047,19 @@ function linesToList(value: string) {
   color: #ffffff;
 }
 
+.metric-card.income {
+  background: #f0fdf4;
+  border-color: #bbf7d0;
+}
+
+.metric-card.income .metric-label {
+  color: #15803d;
+}
+
+.metric-card.income .metric-value {
+  color: #16a34a;
+}
+
 .metric-label {
   font-size: 13px;
   color: #64748b;