优化了支付选择界面 ui

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

@@ -2,17 +2,18 @@
 import { readError } from '@/shared/utils/error'
 import { onMounted, ref, computed } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
-import { showDialog, showToast } from 'vant'
+import { showToast } from 'vant'
 import MobileBottomNav from '@/components/MobileBottomNav.vue'
 
 import {
   fetchOrders,
   startOrderPayment,
   type Order,
-  type PaymentPayWay,
 } from '@/features/orders/api/orders'
 import MobilePaymentCashierPopup from '@/features/orders/components/MobilePaymentCashierPopup.vue'
+import MobilePayWaySelectPopup from '@/features/orders/components/MobilePayWaySelectPopup.vue'
 import { useMobilePaymentCashier } from '@/features/orders/composables/useMobilePaymentCashier'
+import { useMobilePayWaySelect } from '@/features/orders/composables/useMobilePayWaySelect'
 import { fetchOrderChat } from '@/features/chats/api/chats'
 import { centToYuan, formatMoney } from '@/shared/utils/money'
 import { useSessionStore } from '@/stores/session'
@@ -37,6 +38,10 @@ const {
   refreshPaymentStatus,
 } = useMobilePaymentCashier()
 
+// 支付方式选择底部弹层。
+const payWaySelect = useMobilePayWaySelect()
+const selectPayWay = payWaySelect.select
+
 onMounted(() => {
   loadOrders()
   if (route.query.tab) {
@@ -123,22 +128,7 @@ async function openOrderChatAfterPayment(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
-  }
-}
+// selectPayWay 在列表快捷支付前让用户选择支付宝或微信（见 payWaySelect）。
 
 function money(value: unknown) {
   return formatMoney(Number(value || 0))
@@ -293,6 +283,12 @@ async function copyListingCode(order: Order) {
     </section>
 
     <!-- 底部导航 -->
+    <MobilePayWaySelectPopup
+      v-model:show="payWaySelect.visible.value"
+      @choose="payWaySelect.choose"
+      @closed="payWaySelect.handleClosed"
+    />
+
     <MobilePaymentCashierPopup
       v-model:show="paymentPopupVisible"
       :payment="activePayment"