优化了支付选择界面 ui

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

@@ -4,8 +4,10 @@ import { useRouter } from 'vue-router'
 import { showDialog, showToast } from 'vant'
 
 import MobilePaymentCashierPopup from '@/features/orders/components/MobilePaymentCashierPopup.vue'
+import MobilePayWaySelectPopup from '@/features/orders/components/MobilePayWaySelectPopup.vue'
 import { useOrderActions, CONFIRMABLE_ACTIONS } from '@/features/orders/composables/useOrderActions'
 import { useMobilePaymentCashier } from '@/features/orders/composables/useMobilePaymentCashier'
+import { useMobilePayWaySelect } from '@/features/orders/composables/useMobilePayWaySelect'
 import {
   amountYuan,
   money,
@@ -19,11 +21,14 @@ 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()
 const router = useRouter()
+
+// 支付方式选择底部弹层（与 PC 端一致的渠道卡片体验）。
+const payWaySelect = useMobilePayWaySelect()
+const selectPayWay = payWaySelect.select
 const {
   paymentPopupVisible,
   activePayment,
@@ -117,23 +122,6 @@ 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
@@ -465,6 +453,12 @@ async function copyListingCode() {
       <van-empty image="search" description="订单不存在或已被删除" />
     </div>
 
+    <MobilePayWaySelectPopup
+      v-model:show="payWaySelect.visible.value"
+      @choose="payWaySelect.choose"
+      @closed="payWaySelect.handleClosed"
+    />
+
     <MobilePaymentCashierPopup
       v-model:show="paymentPopupVisible"
       :payment="activePayment"