支持微信支付宝独立支付渠道

2026-06-14 23:38:03 +08:00
parent 2dc5a8121e
commit 3ff8c1de88
27 changed files with 550 additions and 97 deletions
@@ -142,6 +142,8 @@ export interface StartOrderPaymentRequest {
  jspay_flag?: string
 }

+export type PaymentPayWay = 'ZFBZF' | 'WXZF'
+
 export interface RefundStatus {
  order_id: number
  refund_status: string
@@ -15,6 +15,15 @@ const emit = defineEmits<{
  'update:show': [value: boolean]
  refresh: []
 }>()
+
+// payWayLabel 展示当前支付单实际选择的支付方式。
+function payWayLabel(payWay?: string) {
+  const map: Record<string, string> = {
+    ZFBZF: '支付宝',
+    WXZF: '微信',
+  }
+  return map[payWay || ''] || '当前方式'
+}
 </script>

 <template>
@@ -41,7 +50,7 @@ const emit = defineEmits<{
        <img v-else-if="qrCodeUrl" :src="qrCodeUrl" alt="支付二维码" />
        <van-icon v-else name="qr" :size="46" />
      </div>
-      <p class="mobile-pay-title">请使用微信或支付宝扫码支付</p>
+      <p class="mobile-pay-title">请使用{{ payWayLabel(payment?.pay_way) }}扫码支付</p>
      <p class="mobile-pay-desc">支付完成后页面会自动刷新，也可以手动点击下方按钮确认。</p>
      <van-button
        type="primary"
@@ -19,6 +19,7 @@ import {
  type HandoffRecord,
  type Order,
  type PaymentOrder,
+  type PaymentPayWay,
 } from '@/features/orders/api/orders'
 import {
  hydrateCounterFormFromCheckout,
@@ -51,6 +52,8 @@ export interface UseOrderActionsOptions {
  confirm: (opts: { title: string; message: string }) => Promise<boolean>
  /** 需要走二次确认的 handler 名集合。Mobile 传 ['cancel','confirmCheckout','acceptCheckout','cancelDispute']，PC 传 []。 */
  actionsNeedingConfirm: readonly string[]
+  /** 支付前选择支付方式。返回 null 表示用户取消支付。 */
+  selectPayWay: () => Promise<PaymentPayWay | null>
  /** 订单列表跳转路径，PC '/orders' / Mobile '/m/orders'。 */
  ordersPath: string
  /** 订单群聊路由前缀，PC '/messages/' / Mobile '/m/chats/'。openOrderChat 内部拼接 `${prefix}${chat.id}`。 */
@@ -261,9 +264,11 @@ export function useOrderActions(options: UseOrderActionsOptions) {

  async function handlePay() {
    if (!order.value) return
+    const payWay = await options.selectPayWay()
+    if (!payWay) return
    startingPayment.value = true
    try {
-      const payment = await startOrderPayment(order.value.id)
+      const payment = await startOrderPayment(order.value.id, { pay_way: payWay })
      if (payment.paid) {
        options.notifySuccess('支付成功，等待号主交接')
        await loadOrder()
@@ -19,6 +19,7 @@ import {
 } from '@/features/orders'
 import { handoffStatusLabel, orderStatusLabel } from '@/shared/utils/statusLabels'
 import { formatDateTime } from '@/shared/utils/time'
+import type { PaymentPayWay } from '@/features/orders/api/orders'

 // 移动端支付收银台（基于通用 useOrderPaymentCashier 的薄封装：注入 vant toast + App 浏览器跳转）。
 const cashier = useMobilePaymentCashier()
@@ -101,6 +102,7 @@ const {
    }
  },
  actionsNeedingConfirm: CONFIRMABLE_ACTIONS,
+  selectPayWay,
  ordersPath: '/m/orders',
  chatPathPrefix: '/m/chats/',
  startCashier: (payment, onPaid) => cashier.openMobilePaymentCashier(payment, onPaid),
@@ -115,6 +117,23 @@ const showDisputePopup = ref(false)
 const showCounterPopup = ref(false)
 const showRejectPopup = ref(false)

+// selectPayWay 在创建支付单前让移动端用户选择支付宝或微信。
+async function selectPayWay(): Promise<PaymentPayWay | null> {
+  try {
+    await showDialog({
+      title: '选择支付方式',
+      message: '选择后将生成对应渠道的支付二维码。',
+      showCancelButton: true,
+      confirmButtonText: '支付宝支付',
+      cancelButtonText: '微信支付',
+      closeOnClickOverlay: false,
+    })
+    return 'ZFBZF'
+  } catch (action) {
+    return action === 'cancel' ? 'WXZF' : null
+  }
+}
+
 // 账号快照展示（PC 不用，保留在本视图）。
 function readSnapshot() {
  return readOrderSnapshot(order.value) as Record<string, any> | null
@@ -2,10 +2,15 @@
 import { readError } from '@/shared/utils/error'
 import { onMounted, ref, computed } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
-import { showToast } from 'vant'
+import { showDialog, showToast } from 'vant'
 import MobileBottomNav from '@/components/MobileBottomNav.vue'

-import { fetchOrders, startOrderPayment, type Order } from '@/features/orders/api/orders'
+import {
+  fetchOrders,
+  startOrderPayment,
+  type Order,
+  type PaymentPayWay,
+} from '@/features/orders/api/orders'
 import MobilePaymentCashierPopup from '@/features/orders/components/MobilePaymentCashierPopup.vue'
 import { useMobilePaymentCashier } from '@/features/orders/composables/useMobilePaymentCashier'
 import { centToYuan, formatMoney } from '@/shared/utils/money'
@@ -89,9 +94,11 @@ function goDetail(id: number) {
 }

 async function handlePay(order: Order) {
+  const payWay = await selectPayWay()
+  if (!payWay) return
  payingOrderId.value = order.id
  try {
-    const payment = await startOrderPayment(order.id)
+    const payment = await startOrderPayment(order.id, { pay_way: payWay })
    if (payment.paid) {
      showToast({ message: '支付成功，等待号主交接', icon: 'passed' })
      await loadOrders()
@@ -105,6 +112,23 @@ async function handlePay(order: Order) {
  }
 }

+// selectPayWay 在列表快捷支付前让用户选择支付宝或微信。
+async function selectPayWay(): Promise<PaymentPayWay | null> {
+  try {
+    await showDialog({
+      title: '选择支付方式',
+      message: '选择后将生成对应渠道的支付二维码。',
+      showCancelButton: true,
+      confirmButtonText: '支付宝支付',
+      cancelButtonText: '微信支付',
+      closeOnClickOverlay: false,
+    })
+    return 'ZFBZF'
+  } catch (action) {
+    return action === 'cancel' ? 'WXZF' : null
+  }
+}
+
 function money(value: unknown) {
  return formatMoney(Number(value || 0))
 }
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { ElMessage } from 'element-plus'
+import { computed } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { ChatDotRound, CopyDocument, Loading } from '@element-plus/icons-vue'

 import {
@@ -14,6 +15,7 @@ import { useOrderPaymentCashier } from '@/features/orders/composables/useOrderPa
 import { formatCent } from '@/shared/utils/money'
 import { handoffStatusLabel, orderStatusLabel } from '@/shared/utils/statusLabels'
 import { formatDateTime } from '@/shared/utils/time'
+import type { PaymentPayWay } from '@/features/orders/api/orders'

 // 支付收银台：二维码渲染 + 轮询查询。PC 不做 App 浏览器跳转，直接渲染二维码弹窗。
 const cashier = useOrderPaymentCashier({
@@ -88,6 +90,7 @@ const {
  notifyWarning: message => ElMessage.warning(message),
  confirm: async () => true, // PC 不做二次确认，直接放行。
  actionsNeedingConfirm: [],
+  selectPayWay,
  ordersPath: '/orders',
  chatPathPrefix: '/messages/',
  startCashier: (payment, onPaid) => cashier.openPaymentCashier(payment, onPaid),
@@ -100,6 +103,34 @@ const paymentQRCodeURL = cashier.paymentQRCodeURL
 const qrGenerating = cashier.qrGenerating
 const checkingPayment = cashier.checkingPayment
 const paymentPayURL = cashier.payURL
+const activePayWayLabel = computedPayWayLabel(activePayment)
+
+// selectPayWay 在创建支付单前让用户选择支付宝或微信。
+async function selectPayWay(): Promise<PaymentPayWay | null> {
+  try {
+    await ElMessageBox.confirm('选择后将生成对应渠道的支付二维码。', '选择支付方式', {
+      type: 'info',
+      confirmButtonText: '支付宝支付',
+      cancelButtonText: '微信支付',
+      distinguishCancelAndClose: true,
+      closeOnClickModal: false,
+    })
+    return 'ZFBZF'
+  } catch (action) {
+    return action === 'cancel' ? 'WXZF' : null
+  }
+}
+
+// computedPayWayLabel 根据当前支付单展示支付方式名称。
+function computedPayWayLabel(paymentRef: typeof activePayment) {
+  return computed(() => {
+    const map: Record<string, string> = {
+      ZFBZF: '支付宝',
+      WXZF: '微信',
+    }
+    return map[paymentRef.value?.pay_way || ''] || '当前方式'
+  })
+}
 function handleRefreshPayment() {
  void cashier.refreshPaymentStatus(false)
 }
@@ -594,7 +625,7 @@ async function copyListingCode() {
            <img v-else-if="paymentQRCodeURL" :src="paymentQRCodeURL" alt="支付二维码" />
          </div>
          <div class="pay-instructions">
-            <h3>请使用微信或支付宝扫码支付</h3>
+            <h3>请使用{{ activePayWayLabel }}扫码支付</h3>
            <p>扫码完成后将自动刷新，也可手动点击下方按钮确认。</p>
          </div>
        </div>