移动端浏览器支付 ok

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

@@ -23,8 +23,9 @@ import {
   OrderResourceUsageEditor,
   type HandoffRecord,
   type Order,
-  type PaymentOrder,
 } from '@/features/orders'
+import MobilePaymentCashierPopup from '@/features/orders/components/MobilePaymentCashierPopup.vue'
+import { useMobilePaymentCashier } from '@/features/orders/composables/useMobilePaymentCashier'
 import {
   amountYuan,
   hydrateCounterFormFromCheckout,
@@ -92,6 +93,17 @@ const showCounterPopup = ref(false)
 const showRejectPopup = ref(false)
 let autoPayHandled = false
 
+const {
+  paymentPopupVisible,
+  activePayment,
+  payURL,
+  paymentQRCodeURL,
+  qrGenerating,
+  checkingPayment,
+  openMobilePaymentCashier,
+  refreshPaymentStatus,
+} = useMobilePaymentCashier()
+
 const isOwner = computed(() => order.value?.owner_id === session.userId)
 const isRenter = computed(() => order.value?.renter_id === session.userId)
 const orderAmountLabel = computed(() => (isOwner.value ? '预计租金' : '支付租金'))
@@ -186,7 +198,7 @@ async function handlePay() {
       showToast({ message: '支付成功，等待号主交接', icon: 'passed' })
       await loadOrder()
     } else {
-      openPaymentCashier(payment)
+      await openMobilePaymentCashier(payment, loadOrder)
     }
   } catch (error) {
     showToast({ message: readError(error, '支付失败'), icon: 'cross' })
@@ -195,19 +207,6 @@ async function handlePay() {
   }
 }
 
-function openPaymentCashier(payment: PaymentOrder) {
-  const payURL = payment.jspay_url || payment.td_code || payment.jspay_info || ''
-  if (payURL && /^https?:\/\//i.test(payURL)) {
-    window.location.href = payURL
-    return
-  }
-  showDialog({
-    title: '订单支付',
-    message: payURL || '支付单已创建，请稍后刷新订单状态。',
-    confirmButtonText: '知道了',
-  })
-}
-
 async function handleSubmitHandoff() {
   if (!order.value) return
   if (!handoffContent.value.trim()) {
@@ -764,6 +763,16 @@ async function copyListingCode() {
       <van-empty image="search" description="订单不存在或已被删除" />
     </div>
 
+    <MobilePaymentCashierPopup
+      v-model:show="paymentPopupVisible"
+      :payment="activePayment"
+      :pay-url="payURL"
+      :qr-code-url="paymentQRCodeURL"
+      :qr-generating="qrGenerating"
+      :checking="checkingPayment"
+      @refresh="refreshPaymentStatus(false)"
+    />
+
     <!-- POPUP: Owner Counter Checkout Adjustments -->
     <van-popup v-model:show="showCounterPopup" position="bottom" round class="mobile-popup-form">
       <header class="popup-header">

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

@@ -2,15 +2,12 @@
 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 PaymentOrder,
-} from '@/features/orders/api/orders'
+import { fetchOrders, startOrderPayment, type Order } 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'
 import { useSessionStore } from '@/stores/session'
 import { formatDateMinute } from '@/shared/utils/time'
@@ -23,6 +20,16 @@ const loading = ref(false)
 const orders = ref<Order[]>([])
 const activeTab = ref('all')
 const payingOrderId = ref<number | null>(null)
+const {
+  paymentPopupVisible,
+  activePayment,
+  payURL,
+  paymentQRCodeURL,
+  qrGenerating,
+  checkingPayment,
+  openMobilePaymentCashier,
+  refreshPaymentStatus,
+} = useMobilePaymentCashier()
 
 onMounted(() => {
   loadOrders()
@@ -89,7 +96,7 @@ async function handlePay(order: Order) {
       showToast({ message: '支付成功，等待号主交接', icon: 'passed' })
       await loadOrders()
     } else {
-      openPaymentCashier(payment)
+      await openMobilePaymentCashier(payment, loadOrders)
     }
   } catch (error) {
     showToast({ message: readError(error, '支付失败'), icon: 'cross' })
@@ -98,22 +105,6 @@ async function handlePay(order: Order) {
   }
 }
 
-function openPaymentCashier(payment: PaymentOrder) {
-  const payURL = payment.jspay_url || payment.td_code || payment.jspay_info || ''
-  if (payURL && /^https?:\/\//i.test(payURL)) {
-    window.location.href = payURL
-    return
-  }
-  showDialog({
-    title: '订单支付',
-    message: payURL || '支付单已创建，请在订单详情页刷新支付状态。',
-    confirmButtonText: '查看详情',
-  }).then(() => {
-    router.push(`/m/orders/${payment.order_id}`)
-  })
-}
-
-
 function money(value: unknown) {
   return formatMoney(Number(value || 0))
 }
@@ -267,6 +258,16 @@ async function copyListingCode(order: Order) {
     </section>
 
     <!-- 底部导航 -->
+    <MobilePaymentCashierPopup
+      v-model:show="paymentPopupVisible"
+      :payment="activePayment"
+      :pay-url="payURL"
+      :qr-code-url="paymentQRCodeURL"
+      :qr-generating="qrGenerating"
+      :checking="checkingPayment"
+      @refresh="refreshPaymentStatus(false)"
+    />
+
     <MobileBottomNav />
   </main>
 </template>