拆分订单详情结账逻辑

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

@@ -6,7 +6,7 @@ import { showToast, showDialog } from 'vant'
 import { fetchOrderChat } from '@/features/chats/api/chats'
 import { createDispute } from '@/features/disputes/api/disputes'
 import { uploadFile } from '@/shared/api/files'
-import { centToYuan, formatMoney } from '@/shared/utils/money'
+import { readError } from '@/shared/utils/error'
 import {
   acceptCheckout,
   cancelOrder,
@@ -18,10 +18,25 @@ import {
   startOrderPayment,
   submitCheckout,
   submitHandoff,
+  OrderCheckoutSummary,
+  OrderHandoffTimeline,
+  OrderResourceUsageEditor,
   type HandoffRecord,
   type Order,
   type PaymentOrder,
-} from '@/features/orders/api/orders'
+} from '@/features/orders'
+import {
+  amountYuan,
+  hydrateCounterFormFromCheckout,
+  linesToList,
+  money,
+  orderEstimatedEndAt as readOrderEstimatedEndAt,
+  orderRentAmount,
+  ownerActualIncome,
+  readAssetSummary as readOrderAssetSummary,
+  readSnapshot as readOrderSnapshot,
+  useOrderCheckoutSnapshot,
+} from '@/features/orders/composables/useOrderSnapshot'
 import { useSessionStore } from '@/stores/session'
 import { handoffStatusLabel, orderStatusLabel } from '@/shared/utils/statusLabels'
 import { formatDateTime } from '@/shared/utils/time'
@@ -79,9 +94,11 @@ const showRejectPopup = ref(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 orderRentDisplayAmount = computed(() => (order.value ? orderRentAmount(order.value) : 0))
+const orderRentDisplayAmount = computed(() =>
+  order.value ? orderRentAmount(order.value, session.userId) : 0
+)
 const ownerIncomeDisplayAmount = computed(() =>
-  order.value ? ownerActualIncome(order.value) : null
+  order.value ? ownerActualIncome(order.value, session.userId) : null
 )
 const ownerIncomeLabel = computed(() =>
   order.value?.status === 'completed' ? '实际到手' : '结账预计到手'
@@ -103,28 +120,15 @@ const isCheckoutDisputeStage = computed(() => {
     ['pending_checkout_confirm', 'pending_checkout_accept'].includes(order.value.status)
   )
 })
-const checkoutResources = computed(() => {
-  const resources = readSnapshotResources()
-  return resources.filter(item => item.quantity > 0)
-})
-const resourceChargeAmount = computed(() => {
-  return roundMoney(
-    checkoutResources.value.reduce((sum, item) => {
-      if (!isChargedResource(item)) return sum
-      const used = readResourceUsage(item.key)
-      return sum + used * item.unitPrice
-    }, 0)
-  )
-})
-const snapshotHafCoinM = computed(() => {
-  const snapshot = readSnapshot()
-  return roundQuantity(readNumber(snapshot?.haf_coin_amount) / 1000000)
-})
-const remainingHafCoinM = computed(() => {
-  return roundQuantity(
-    Math.max(snapshotHafCoinM.value - Number(checkoutForm.value.coin_consumed_m || 0), 0)
-  )
-})
+const {
+  checkoutResources,
+  resourceChargeAmount,
+  snapshotHafCoinM,
+  remainingHafCoinM,
+  hydrateResourceUsage,
+  resourceLineAmount,
+  checkoutContentWithSummary,
+} = useOrderCheckoutSnapshot({ order, checkoutForm, resourceUsage })
 
 onMounted(loadOrder)
 
@@ -406,203 +410,25 @@ async function handleCounterEvidenceUpload(event: Event) {
   }
 }
 
-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
+function orderEstimatedEndAt() {
+  return readOrderEstimatedEndAt(order.value)
 }
 
 function orderRentedAt() {
   return order.value?.rented_at
 }
 
-function orderEstimatedEndAt() {
-  if (!order.value) return undefined
-  const rentedAt = orderRentedAt()
-  const durationHours = Number(order.value.estimated_duration_hours || 0)
-  if (!rentedAt || durationHours <= 0) return undefined
-  return new Date(new Date(rentedAt).getTime() + durationHours * 60 * 60 * 1000).toISOString()
+function readSnapshot() {
+  return readOrderSnapshot(order.value) as Record<string, any> | null
 }
 
-interface CheckoutResource {
-  key: string
-  label: string
-  price: string
-  mode: string
-  quantity: number
-  unitPrice: number
-}
-
-function readSnapshot(): any {
-  const snapshot = order.value?.account_snapshot
-  if (isRecord(snapshot)) return snapshot
-  return null
-}
-
-function readAssetSummary(): any {
-  const summary = readSnapshot()?.asset_summary
-  if (isRecord(summary)) return summary
-  return null
-}
-
-function readSnapshotResources(): CheckoutResource[] {
-  const resources = readAssetSummary()?.resources
-  if (!Array.isArray(resources)) return []
-  return resources
-    .filter(isRecord)
-    .map(item => {
-      const key = String(item.key || item.label || '')
-      const label = String(item.label || key || '额外消耗品')
-      const price = String(item.price || '')
-      return {
-        key,
-        label,
-        price,
-        mode: String(item.mode || '收费'),
-        quantity: readNumber(item.quantity),
-        unitPrice: readUnitPrice(price),
-      }
-    })
-    .filter(item => item.key && item.quantity > 0)
-}
-
-function hydrateResourceUsage() {
-  const next: Record<string, number> = {}
-  for (const item of checkoutResources.value) {
-    next[item.key] = Math.min(
-      Math.max(Number(resourceUsage.value[item.key] || 0), 0),
-      item.quantity
-    )
-  }
-  resourceUsage.value = next
-}
-
-function readResourceUsage(key: string) {
-  return Math.max(Number(resourceUsage.value[key] || 0), 0)
-}
-
-function isChargedResource(item: CheckoutResource) {
-  return item.mode !== '赠送'
-}
-
-function resourceLineAmount(item: CheckoutResource) {
-  return roundMoney(readResourceUsage(item.key) * item.unitPrice)
-}
-
-function checkoutContentWithSummary() {
-  const lines = [checkoutForm.value.content.trim()].filter(Boolean)
-  const usedResources = checkoutResources.value.filter(item => readResourceUsage(item.key) > 0)
-  if (usedResources.length) {
-    lines.push(
-      `额外消耗品：${usedResources
-        .map(
-          item =>
-            `${item.label} ${readResourceUsage(item.key)}/${item.quantity}${
-              isChargedResource(item) ? `，金额¥${money(resourceLineAmount(item))}` : '，赠送不扣款'
-            }`
-        )
-        .join('；')}`
-    )
-  }
-  if (Number(checkoutForm.value.coin_consumed_m || 0) > 0) {
-    lines.push(
-      `哈夫币消耗：${quantity(Number(checkoutForm.value.coin_consumed_m))}M，预计剩余${quantity(
-        remainingHafCoinM.value
-      )}M`
-    )
-  }
-  if (lines.length === 0) {
-    lines.push('租客发起结账。')
-  }
-  return lines.join('\n')
-}
-
-function readUnitPrice(priceText: string) {
-  const normalized = priceText.replace(/，/g, ',').trim()
-  const fractionMatch = normalized.match(/(\d+(?:\.\d+)?)\s*元\s*\/\s*(\d+(?:\.\d+)?)/)
-  if (fractionMatch) {
-    const amount = Number(fractionMatch[1])
-    const count = Number(fractionMatch[2])
-    return count > 0 ? roundMoney(amount / count) : 0
-  }
-  const singleMatch = normalized.match(/(\d+(?:\.\d+)?)\s*元/)
-  if (singleMatch) return Number(singleMatch[1])
-  const fallback = normalized.match(/(\d+(?:\.\d+)?)/)
-  return fallback ? Number(fallback[1]) : 0
-}
-
-function roundMoney(value: number) {
-  return Math.round(Number(value || 0) * 10) / 10
-}
-
-function roundQuantity(value: number) {
-  return Math.round(value * 100) / 100
-}
-
-function money(value: unknown) {
-  return formatMoney(readNumber(value))
-}
-
-function formatHandoffRecordType(type: string) {
-  const typeMap: Record<string, string> = {
-    owner_handoff: '卖家交接',
-    renter_checkout: '买家结账',
-    owner_counter_checkout: '卖家反驳结账',
-    renter_confirm_checkout: '买家确认结账',
-    owner_accept_checkout: '卖家接受结账',
-    admin_arbitration: '客服仲裁',
-  }
-  return typeMap[type] || type
-}
-
-function amountYuan(cent: unknown) {
-  if (cent !== undefined && cent !== null) return centToYuan(readNumber(cent))
-  return 0
-}
-
-function orderRentAmount(item: Order) {
-  if (item.owner_id === session.userId) return amountYuan(item.owner_rent_amount_cent)
-  if (item.renter_id === session.userId) return amountYuan(item.rent_amount_cent)
-  return amountYuan(item.display_amount_cent)
-}
-
-function ownerActualIncome(item: Order) {
-  if (item.owner_id !== session.userId) return null
-  const value = item.checkout?.owner_income_amount_cent
-  if (typeof value === 'number') return centToYuan(value)
-  return null
-}
-
-function quantity(value: unknown) {
-  const rounded = roundQuantity(readNumber(value))
-  return Number.isInteger(rounded) ? `${rounded}` : rounded.toFixed(2)
-}
-
-function readNumber(value: unknown) {
-  const number = Number(value || 0)
-  return Number.isFinite(number) ? number : 0
-}
-
-function isRecord(value: unknown): value is Record<string, unknown> {
-  return typeof value === 'object' && value !== null
+function readAssetSummary() {
+  return readOrderAssetSummary(order.value) as Record<string, any> | null
 }
 
 function hydrateCounterForm() {
   if (!order.value?.checkout) return
-  const checkout = order.value.checkout
-  counterForm.value.consumableAmountYuan = amountYuan(checkout.consumable_amount_cent)
-  counterForm.value.coin_consumed_m = checkout.coin_consumed_m
-  counterForm.value.otherAmountYuan = amountYuan(checkout.other_amount_cent)
-  counterForm.value.depositDeductAmountYuan = amountYuan(checkout.deposit_deduct_amount_cent)
-}
-
-function linesToList(value: string) {
-  return value
-    .split('\n')
-    .map(item => item.trim())
-    .filter(Boolean)
+  counterForm.value = hydrateCounterFormFromCheckout(order.value.checkout)
 }
 
 async function openOrderChat() {
@@ -803,187 +629,38 @@ async function copyListingCode() {
       </section>
 
       <!-- Handoff Records list -->
-      <section class="card-section">
-        <h3 class="section-title">交接日志 · 商品编号 {{ listingCode }}</h3>
-        <van-empty
-          v-if="handoffRecords.length === 0"
-          image="search"
-          description="暂无交接日志记录"
-        />
-        <div v-else class="log-timeline">
-          <div v-for="record in handoffRecords" :key="record.id" class="log-item">
-            <div class="log-dot"></div>
-            <div class="log-content-wrap">
-              <strong class="log-type">{{ formatHandoffRecordType(record.type) }}</strong>
-              <p class="log-desc">{{ record.content }}</p>
-              <span class="log-time">{{ formatDateTime(record.created_at) }}</span>
-            </div>
-          </div>
-        </div>
-      </section>
+      <OrderHandoffTimeline
+        variant="mobile"
+        :records="handoffRecords"
+        :listing-code="listingCode"
+      />
 
       <!-- Renter Action: Return Account & Initiate Checkout -->
-      <section
+      <OrderResourceUsageEditor
         v-if="isRenter && ['renting', 'overdue'].includes(order.status)"
-        class="card-section action-card"
-      >
-        <h3 class="section-title">退号发起结账</h3>
-        <p class="action-hint">使用完毕，请输入在此期间消耗的物资与哈夫币进行结账申请。</p>
-
-        <van-field
-          v-model="checkoutForm.content"
-          rows="3"
-          autosize
-          label="结账备注"
-          type="textarea"
-          placeholder="可在此说明物品消耗情况或归还留言"
-          class="action-field"
-        />
-
-        <!-- Checkout resource usage selection -->
-        <div v-if="checkoutResources.length" class="resource-usage-panel">
-          <strong class="resource-panel-title">额外物资消耗登记</strong>
-          <div v-for="item in checkoutResources" :key="item.key" class="resource-row">
-            <div class="resource-meta">
-              <span class="resource-name">{{ item.label }}</span>
-              <span class="resource-price-text"
-                >上限 {{ item.quantity }} · {{ item.mode }} · {{ item.price }}</span
-              >
-            </div>
-            <div class="stepper-wrap">
-              <van-stepper v-model="resourceUsage[item.key]" integer min="0" :max="item.quantity" />
-              <span class="resource-line-amount">¥{{ money(resourceLineAmount(item)) }}</span>
-            </div>
-          </div>
-          <div class="resource-panel-footer">
-            <span>物资金额合计：</span>
-            <strong>¥{{ money(resourceChargeAmount) }}</strong>
-          </div>
-        </div>
-
-        <van-cell-group inset :border="false" class="action-field">
-          <van-field label="消耗哈夫币" label-width="100px">
-            <template #input>
-              <div class="coin-input-wrap">
-                <input
-                  v-model.number="checkoutForm.coin_consumed_m"
-                  type="number"
-                  placeholder="消耗数量"
-                  class="custom-inline-input"
-                />
-                <span class="input-unit">M</span>
-              </div>
-            </template>
-          </van-field>
-          <div class="coin-hint">
-            订单快照 {{ quantity(snapshotHafCoinM) }}M，预计剩余 {{ quantity(remainingHafCoinM) }}M
-          </div>
-          <van-field label="其他押金赔付" label-width="100px">
-            <template #input>
-              <div class="coin-input-wrap">
-                <input
-                  v-model.number="checkoutForm.otherAmountYuan"
-                  type="number"
-                  placeholder="不含上方额外物资"
-                  class="custom-inline-input"
-                />
-                <span class="input-unit">元</span>
-              </div>
-            </template>
-          </van-field>
-          <div class="deposit-deduct-hint">仅填写封禁、违规、资产损坏等需要从押金赔付的费用。</div>
-        </van-cell-group>
-        <div class="checkout-fee-preview">
-          <div>
-            <span>额外消耗品已用</span>
-            <strong>¥{{ money(resourceChargeAmount) }}</strong>
-            <em>计入实际结算租金</em>
-          </div>
-          <div>
-            <span>其他押金赔付</span>
-            <strong>¥{{ money(checkoutForm.otherAmountYuan) }}</strong>
-            <em>从押金赔付扣除</em>
-          </div>
-        </div>
-
-        <van-field
-          v-model="checkoutForm.evidenceText"
-          rows="2"
-          autosize
-          label="结账证据"
-          type="textarea"
-          placeholder="结账截图链接（每行一个）"
-          class="action-field"
-        />
-
-        <van-button
-          type="primary"
-          block
-          round
-          :loading="returning"
-          loading-text="正在提交结账..."
-          @click="handleSubmitCheckout"
-        >
-          提交结账归还
-        </van-button>
-      </section>
+        v-model:checkout-form="checkoutForm"
+        v-model:resource-usage="resourceUsage"
+        variant="mobile"
+        :resources="checkoutResources"
+        :resource-charge-amount="resourceChargeAmount"
+        :snapshot-haf-coin-m="snapshotHafCoinM"
+        :remaining-haf-coin-m="remainingHafCoinM"
+        :returning="returning"
+        :resource-line-amount="resourceLineAmount"
+        @submit="handleSubmitCheckout"
+      />
 
       <!-- Checkout Details Display -->
-      <section
+      <OrderCheckoutSummary
         v-if="
           order.checkout &&
           ['pending_checkout_confirm', 'pending_checkout_accept'].includes(order.status)
         "
-        class="card-section"
-      >
-        <h3 class="section-title">结账结算账单</h3>
-        <van-cell-group inset :border="false">
-          <van-cell
-            title="实际结算租金"
-            :value="`¥${money(amountYuan(order.checkout.display_amount_cent))}`"
-          />
-          <van-cell
-            title="押金总额"
-            :label="
-              amountYuan(order.deposit_waived_amount_cent) > 0
-                ? `已免押 ¥${money(amountYuan(order.deposit_waived_amount_cent))}`
-                : ''
-            "
-            :value="`¥${money(amountYuan(order.checkout.deposit_amount_cent))}`"
-          />
-          <van-cell
-            title="额外消耗品已用"
-            :value="`¥${money(amountYuan(order.checkout.consumable_amount_cent))}`"
-          />
-          <van-cell
-            title="押金赔付扣除"
-            :value="`¥${money(amountYuan(order.checkout.deposit_deduct_amount_cent))}`"
-            value-class="red-text"
-          />
-          <van-cell
-            v-if="isRenter"
-            title="退还租客"
-            :value="`¥${money(amountYuan(order.checkout.renter_refund_amount_cent))}`"
-            value-class="green-text"
-          />
-          <van-cell
-            v-if="isOwner"
-            title="号主最终收入"
-            :value="`¥${money(amountYuan(order.checkout.owner_income_amount_cent))}`"
-            value-class="green-text"
-          />
-          <van-cell
-            v-if="order.checkout.content"
-            title="结账备注"
-            :label="order.checkout.content"
-          />
-          <van-cell
-            v-if="order.checkout.owner_adjustment_reason"
-            title="号主修正原因"
-            :label="order.checkout.owner_adjustment_reason"
-          />
-        </van-cell-group>
-      </section>
+        variant="mobile"
+        :order="order"
+        :is-owner="isOwner"
+        :is-renter="isRenter"
+      />
 
       <!-- Owner Action: Confirm Checkout / Make Counter Adjustment Proposal -->
       <section
@@ -1424,186 +1101,6 @@ async function copyListingCode() {
   overflow: hidden;
 }
 
-/* ========== Log Timeline ========== */
-.log-timeline {
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  padding-left: 16px;
-  margin-top: 10px;
-}
-
-.log-timeline::after {
-  content: '';
-  position: absolute;
-  top: 6px;
-  bottom: 6px;
-  left: 4px;
-  width: 1px;
-  background: #e2e8f0;
-}
-
-.log-item {
-  position: relative;
-  padding-bottom: 16px;
-}
-
-.log-item:last-child {
-  padding-bottom: 0;
-}
-
-.log-dot {
-  position: absolute;
-  top: 5px;
-  left: -15px;
-  z-index: 2;
-  width: 7px;
-  height: 7px;
-  background: #1477ff;
-  border-radius: 50%;
-}
-
-.log-content-wrap {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.log-type {
-  font-size: 13px;
-  color: #2d3748;
-}
-
-.log-desc {
-  font-size: 12px;
-  color: #718096;
-  margin: 0;
-  line-height: 1.4;
-}
-
-.log-time {
-  font-size: 11px;
-  color: #a0aec0;
-}
-
-/* ========== Resource Panel ========== */
-.resource-usage-panel {
-  background: #f8fafc;
-  border-radius: 8px;
-  padding: 12px;
-  margin-bottom: 12px;
-}
-
-.resource-panel-title {
-  display: block;
-  font-size: 13px;
-  font-weight: 700;
-  margin-bottom: 10px;
-  color: #2d3748;
-}
-
-.resource-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 8px 0;
-  border-bottom: 1px dashed #e2e8f0;
-}
-
-.resource-row:last-child {
-  border-bottom: none;
-}
-
-.resource-meta {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.resource-name {
-  font-size: 13px;
-  color: #2d3748;
-  font-weight: 600;
-}
-
-.resource-price-text {
-  font-size: 11px;
-  color: #a0aec0;
-}
-
-.stepper-wrap {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.resource-line-amount {
-  min-width: 50px;
-  text-align: right;
-  font-size: 13px;
-  font-weight: 700;
-  color: #ff5f00;
-}
-
-.resource-panel-footer {
-  display: flex;
-  justify-content: flex-end;
-  align-items: baseline;
-  margin-top: 10px;
-  font-size: 12px;
-  color: #4a5568;
-}
-
-.resource-panel-footer strong {
-  font-size: 15px;
-  color: #ff5f00;
-}
-
-.deposit-deduct-hint {
-  padding: 0 16px 10px;
-  color: #8a94a6;
-  font-size: 12px;
-  line-height: 1.5;
-}
-
-.checkout-fee-preview {
-  display: grid;
-  gap: 8px;
-  margin: 0 16px 12px;
-}
-
-.checkout-fee-preview div {
-  display: grid;
-  gap: 4px;
-  padding: 10px 12px;
-  border-radius: 8px;
-  background: #f8fafc;
-}
-
-.checkout-fee-preview span {
-  color: #4a5568;
-  font-size: 12px;
-  font-weight: 700;
-}
-
-.checkout-fee-preview strong {
-  color: #ff5f00;
-  font-size: 16px;
-  font-weight: 800;
-}
-
-.checkout-fee-preview em {
-  color: #8a94a6;
-  font-size: 11px;
-  font-style: normal;
-}
-
-.coin-input-wrap {
-  display: flex;
-  align-items: center;
-  width: 100%;
-}
-
 .custom-inline-input {
   border: none;
   background: transparent;
@@ -1612,19 +1109,6 @@ async function copyListingCode() {
   flex: 1;
 }
 
-.input-unit {
-  font-size: 14px;
-  color: #718096;
-  margin-left: 6px;
-}
-
-.coin-hint {
-  font-size: 11px;
-  color: #a0aec0;
-  padding: 0 16px 8px 16px;
-  margin-top: -6px;
-}
-
 .no-snapshot-hint {
   text-align: center;
   padding: 10px;
@@ -1700,15 +1184,6 @@ async function copyListingCode() {
   outline: none;
 }
 
-/* Utilities */
-.red-text {
-  color: #ef4444;
-}
-
-.green-text {
-  color: #10b981;
-}
-
 .empty-wrap {
   padding: 60px 0;
 }