feat: 提取订单详情共享逻辑到composables

创建可复用的订单业务逻辑: - useOrderDetail.ts (405行) - 订单操作逻辑 - useOrderSnapshot.ts (147行) - 快照计算工具可复用于: - OrderDetailView.vue (1507行) - MobileOrderDetailView.vue (1494行) 优化收益: - 消除重复代码 - 业务逻辑可测试 - PC和移动端共享逻辑 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-06-04 08:12:22 +08:00
parent af6be6277b
commit 8dae7d9a3a
2 changed files with 552 additions and 0 deletions
@@ -0,0 +1,405 @@
+import { computed, ref, onMounted, onBeforeUnmount, type Ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import type {
+  Order,
+  HandoffRecord,
+  PaymentOrder,
+} from '@/api/orders'
+import {
+  fetchOrder,
+  fetchHandoffRecords,
+  cancelOrder,
+  startOrderPayment,
+  queryOrderPayment,
+  submitHandoff,
+  confirmReceive,
+  submitCheckout,
+  acceptCheckout,
+  counterCheckout,
+  confirmCheckout,
+} from '@/api/orders'
+import { createDispute } from '@/api/disputes'
+import { uploadFile } from '@/api/files'
+import { fetchOrderChat } from '@/api/chats'
+import { useSessionStore } from '@/stores/session'
+
+export interface CheckoutForm {
+  content: string
+  consumable_amount: number
+  coin_consumed_m: number
+  other_amount: number
+  evidenceText: string
+}
+
+export interface CounterForm {
+  consumable_amount: number
+  coin_consumed_m: number
+  other_amount: number
+  deposit_deduct_amount: number
+  reason: string
+  evidenceText: string
+}
+
+export function useOrderDetail() {
+  const route = useRoute()
+  const router = useRouter()
+  const session = useSessionStore()
+
+  // Loading states
+  const loading = ref(false)
+  const cancelling = ref(false)
+  const startingPayment = ref(false)
+  const handoffing = ref(false)
+  const confirming = ref(false)
+  const returning = ref(false)
+  const completing = ref(false)
+  const countering = ref(false)
+  const acceptingCheckout = ref(false)
+  const rejectingCheckout = ref(false)
+  const disputing = ref(false)
+  const uploadingEvidence = ref(false)
+  const openingChat = ref(false)
+
+  // Data
+  const order = ref<Order | null>(null)
+  const handoffRecords = ref<HandoffRecord[]>([])
+  const handoffContent = ref('')
+
+  // Payment states
+  const activePayment = ref<PaymentOrder | null>(null)
+  const paymentQRCodeURL = ref('')
+  const qrGenerating = ref(false)
+  const checkingPayment = ref(false)
+  let paymentPollingTimer: number | undefined
+  let autoPayHandled = false
+
+  // Forms
+  const checkoutForm = ref<CheckoutForm>({
+    content: '',
+    consumable_amount: 0,
+    coin_consumed_m: 0,
+    other_amount: 0,
+    evidenceText: '',
+  })
+
+  const resourceUsage = ref<Record<string, number>>({})
+
+  const counterForm = ref<CounterForm>({
+    consumable_amount: 0,
+    coin_consumed_m: 0,
+    other_amount: 0,
+    deposit_deduct_amount: 0,
+    reason: '',
+    evidenceText: '',
+  })
+
+  const rejectReason = ref('')
+  const disputeType = ref('cannot_login')
+  const disputeDescription = ref('')
+  const disputeEvidenceText = ref('')
+
+  // Computed
+  const isOwner = computed(() => order.value?.owner_id === session.userId)
+  const isRenter = computed(() => order.value?.renter_id === session.userId)
+  const orderAmountLabel = computed(() => (isOwner.value ? '我的租金' : '订单金额'))
+
+  const canOpenDispute = computed(() => {
+    if (!order.value || (!isOwner.value && !isRenter.value)) return false
+    return !['completed', 'cancelled', 'closed', 'disputing', 'checkout_disputing', 'abnormal'].includes(
+      order.value.status
+    )
+  })
+
+  const isCheckoutDisputeStage = computed(() => {
+    return !!order.value && ['pending_checkout_confirm', 'pending_checkout_accept'].includes(order.value.status)
+  })
+
+  // Methods
+  async function loadOrder() {
+    loading.value = true
+    try {
+      order.value = await fetchOrder(String(route.params.id))
+      handoffRecords.value = await fetchHandoffRecords(String(route.params.id))
+      return order.value
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function handleCancel() {
+    if (!order.value) return
+    cancelling.value = true
+    try {
+      await cancelOrder(order.value.id)
+      return true
+    } finally {
+      cancelling.value = false
+    }
+  }
+
+  async function handlePay() {
+    if (!order.value) return null
+    startingPayment.value = true
+    try {
+      const payment = await startOrderPayment(order.value.id)
+      return payment
+    } finally {
+      startingPayment.value = false
+    }
+  }
+
+  async function handleSubmitHandoff() {
+    if (!order.value || !handoffContent.value.trim()) return
+    handoffing.value = true
+    try {
+      await submitHandoff(order.value.id, handoffContent.value.trim())
+      handoffContent.value = ''
+      await loadOrder()
+      return true
+    } finally {
+      handoffing.value = false
+    }
+  }
+
+  async function handleConfirmReceive() {
+    if (!order.value) return
+    confirming.value = true
+    try {
+      await confirmReceive(order.value.id)
+      await loadOrder()
+      return true
+    } finally {
+      confirming.value = false
+    }
+  }
+
+  async function handleSubmitCheckout() {
+    if (!order.value) return
+    returning.value = true
+    try {
+      await submitCheckout(order.value.id, {
+        content: checkoutForm.value.content.trim(),
+        consumable_amount: checkoutForm.value.consumable_amount,
+        coin_consumed_m: checkoutForm.value.coin_consumed_m,
+        other_amount: checkoutForm.value.other_amount,
+        evidence: checkoutForm.value.evidenceText.trim(),
+      })
+      await loadOrder()
+      return true
+    } finally {
+      returning.value = false
+    }
+  }
+
+  async function handleAcceptCheckout() {
+    if (!order.value) return
+    acceptingCheckout.value = true
+    try {
+      await acceptCheckout(order.value.id)
+      await loadOrder()
+      return true
+    } finally {
+      acceptingCheckout.value = false
+    }
+  }
+
+  async function handleCounterCheckout() {
+    if (!order.value) return
+    countering.value = true
+    try {
+      await counterCheckout(order.value.id, {
+        consumable_amount: counterForm.value.consumable_amount,
+        coin_consumed_m: counterForm.value.coin_consumed_m,
+        other_amount: counterForm.value.other_amount,
+        deposit_deduct_amount: counterForm.value.deposit_deduct_amount,
+        reason: counterForm.value.reason.trim(),
+        evidence: counterForm.value.evidenceText.trim(),
+      })
+      await loadOrder()
+      return true
+    } finally {
+      countering.value = false
+    }
+  }
+
+  async function handleRejectCheckout(reason: string) {
+    if (!order.value) return
+    rejectingCheckout.value = true
+    try {
+      await counterCheckout(order.value.id, {
+        consumable_amount: 0,
+        coin_consumed_m: 0,
+        other_amount: 0,
+        deposit_deduct_amount: 0,
+        reason: reason.trim(),
+        evidence: '',
+      })
+      await loadOrder()
+      return true
+    } finally {
+      rejectingCheckout.value = false
+    }
+  }
+
+  async function handleConfirmCheckout() {
+    if (!order.value) return
+    completing.value = true
+    try {
+      await confirmCheckout(order.value.id)
+      await loadOrder()
+      return true
+    } finally {
+      completing.value = false
+    }
+  }
+
+  async function handleCreateDispute() {
+    if (!order.value) return
+    disputing.value = true
+    try {
+      await createDispute({
+        order_id: order.value.id,
+        type: disputeType.value,
+        description: disputeDescription.value.trim(),
+        evidence: disputeEvidenceText.value.trim(),
+      })
+      await loadOrder()
+      return true
+    } finally {
+      disputing.value = false
+    }
+  }
+
+  async function handleUploadEvidence(file: File) {
+    uploadingEvidence.value = true
+    try {
+      const result = await uploadFile(file)
+      return result.url
+    } finally {
+      uploadingEvidence.value = false
+    }
+  }
+
+  async function handleOpenChat() {
+    if (!order.value) return
+    openingChat.value = true
+    try {
+      const chat = await fetchOrderChat(order.value.id)
+      return chat
+    } finally {
+      openingChat.value = false
+    }
+  }
+
+  function startPaymentPolling() {
+    stopPaymentPolling()
+    paymentPollingTimer = window.setInterval(checkPaymentStatus, 2000)
+  }
+
+  function stopPaymentPolling() {
+    if (paymentPollingTimer !== undefined) {
+      clearInterval(paymentPollingTimer)
+      paymentPollingTimer = undefined
+    }
+  }
+
+  async function checkPaymentStatus() {
+    if (!activePayment.value || checkingPayment.value) return
+    checkingPayment.value = true
+    try {
+      const updated = await queryOrderPayment(activePayment.value.id)
+      if (updated.paid) {
+        stopPaymentPolling()
+        activePayment.value = null
+        await loadOrder()
+        return true
+      }
+    } catch {
+      // ignore
+    } finally {
+      checkingPayment.value = false
+    }
+    return false
+  }
+
+  function getOrderStep(status: string) {
+    const stepMap: Record<string, number> = {
+      pending_payment: 0,
+      pending_handoff: 1,
+      renting: 2,
+      overdue: 2,
+      pending_checkout_confirm: 3,
+      pending_checkout_accept: 3,
+      completed: 4,
+      cancelled: 0,
+      closed: 4,
+    }
+    return stepMap[status] ?? 0
+  }
+
+  onMounted(loadOrder)
+  onBeforeUnmount(stopPaymentPolling)
+
+  return {
+    // States
+    loading,
+    cancelling,
+    startingPayment,
+    handoffing,
+    confirming,
+    returning,
+    completing,
+    countering,
+    acceptingCheckout,
+    rejectingCheckout,
+    disputing,
+    uploadingEvidence,
+    openingChat,
+
+    // Data
+    order,
+    handoffRecords,
+    handoffContent,
+
+    // Payment
+    activePayment,
+    paymentQRCodeURL,
+    qrGenerating,
+    checkingPayment,
+
+    // Forms
+    checkoutForm,
+    resourceUsage,
+    counterForm,
+    rejectReason,
+    disputeType,
+    disputeDescription,
+    disputeEvidenceText,
+
+    // Computed
+    isOwner,
+    isRenter,
+    orderAmountLabel,
+    canOpenDispute,
+    isCheckoutDisputeStage,
+
+    // Methods
+    loadOrder,
+    handleCancel,
+    handlePay,
+    handleSubmitHandoff,
+    handleConfirmReceive,
+    handleSubmitCheckout,
+    handleAcceptCheckout,
+    handleCounterCheckout,
+    handleRejectCheckout,
+    handleConfirmCheckout,
+    handleCreateDispute,
+    handleUploadEvidence,
+    handleOpenChat,
+    startPaymentPolling,
+    stopPaymentPolling,
+    checkPaymentStatus,
+    getOrderStep,
+  }
+}