优化了支付选择界面 ui

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { computed, ref } from 'vue'
+import { ElMessage } from 'element-plus'
 import { ChatDotRound, CopyDocument, Loading } from '@element-plus/icons-vue'
 
 import {
@@ -106,19 +106,27 @@ 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
-  }
+// 通过自定义对话框展示两个平级渠道卡片，返回 null 表示用户取消。
+const payWayDialogVisible = ref(false)
+let payWayResolver: ((value: PaymentPayWay | null) => void) | null = null
+
+function selectPayWay(): Promise<PaymentPayWay | null> {
+  payWayDialogVisible.value = true
+  return new Promise(resolve => {
+    payWayResolver = resolve
+  })
+}
+
+function choosePayWay(payWay: PaymentPayWay) {
+  payWayResolver?.(payWay)
+  payWayResolver = null
+  payWayDialogVisible.value = false
+}
+
+// 对话框关闭（含点 X、按 ESC）时，未选择则视为取消。
+function handlePayWayDialogClosed() {
+  payWayResolver?.(null)
+  payWayResolver = null
 }
 
 // computedPayWayLabel 根据当前支付单展示支付方式名称。
@@ -603,6 +611,38 @@ async function copyListingCode() {
       </div>
     </div>
 
+    <el-dialog
+      v-model="payWayDialogVisible"
+      title="选择支付方式"
+      width="420px"
+      append-to-body
+      :z-index="4000"
+      class="pay-way-dialog"
+      @closed="handlePayWayDialogClosed"
+    >
+      <p class="pay-way-tip">选择渠道后将生成对应的支付二维码</p>
+      <div class="pay-way-options">
+        <button type="button" class="pay-way-option wechat" @click="choosePayWay('WXZF')">
+          <span class="pay-way-icon">
+            <van-icon name="wechat-pay" :size="30" />
+          </span>
+          <span class="pay-way-text">
+            <strong>微信支付</strong>
+            <small>使用微信扫码完成支付</small>
+          </span>
+        </button>
+        <button type="button" class="pay-way-option alipay" @click="choosePayWay('ZFBZF')">
+          <span class="pay-way-icon">
+            <van-icon name="alipay" :size="30" />
+          </span>
+          <span class="pay-way-text">
+            <strong>支付宝支付</strong>
+            <small>使用支付宝扫码完成支付</small>
+          </span>
+        </button>
+      </div>
+    </el-dialog>
+
     <el-dialog
       v-model="paymentDialogVisible"
       title="订单支付"
@@ -1012,6 +1052,90 @@ async function copyListingCode() {
   gap: 20px;
 }
 
+.pay-way-tip {
+  margin: 0 0 16px 0;
+  color: #64748b;
+  font-size: 14px;
+}
+
+.pay-way-options {
+  display: grid;
+  gap: 12px;
+}
+
+.pay-way-option {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 16px 18px;
+  background: #ffffff;
+  border: 2px solid #e5e7eb;
+  border-radius: 12px;
+  cursor: pointer;
+  text-align: left;
+  transition: all 0.18s ease;
+}
+
+.pay-way-option:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
+}
+
+.pay-way-icon {
+  display: grid;
+  place-items: center;
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+  color: #ffffff;
+  flex-shrink: 0;
+}
+
+.pay-way-option.wechat:hover {
+  border-color: #07c160;
+}
+
+.pay-way-option.wechat .pay-way-icon {
+  background: #07c160;
+}
+
+.pay-way-option.alipay:hover {
+  border-color: #1677ff;
+}
+
+.pay-way-option.alipay .pay-way-icon {
+  background: #1677ff;
+}
+
+.pay-way-text {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.pay-way-text strong {
+  font-size: 16px;
+  font-weight: 600;
+  color: #1f2937;
+}
+
+.pay-way-text small {
+  font-size: 13px;
+  color: #94a3b8;
+}
+
+:global(.pay-way-dialog) {
+  border-radius: 16px;
+}
+
+:global(.pay-way-dialog .el-dialog__header) {
+  padding: 20px 24px 0;
+}
+
+:global(.pay-way-dialog .el-dialog__body) {
+  padding: 16px 24px 24px;
+}
+
 .pay-summary {
   padding: 16px 20px;
   background: #f8fafc;