From 8b637cf4995d3fe820d13cc7a36c39d92dee0282 Mon Sep 17 00:00:00 2001
From: yml2213 <a2213290201@gmail.com>
Date: Thu, 16 Jul 2026 21:01:46 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=9F=E4=B8=80=E6=91=B8=E5=A4=A7=E7=BA=A2PC?=
 =?UTF-8?q?=E6=94=AF=E4=BB=98=E6=96=B9=E5=BC=8F=E9=80=89=E6=8B=A9=E4=B8=BA?=
 =?UTF-8?q?=E5=B8=A6=E5=9B=BE=E6=A0=87=E5=BC=B9=E7=AA=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

抽取PayWaySelectDialog，与租号端一致展示微信/支付宝图标。
---
 .../mohong/views/MohongDetailView.vue         |  56 +------
 .../features/mohong/views/MohongListView.vue  |  48 +-----
 .../mohong/views/MohongOrderDetailView.vue    |  55 +------
 .../orders/components/PayWaySelectDialog.vue  | 141 ++++++++++++++++++
 4 files changed, 155 insertions(+), 145 deletions(-)
 create mode 100644 frontend/src/features/orders/components/PayWaySelectDialog.vue

diff --git a/frontend/src/features/mohong/views/MohongDetailView.vue b/frontend/src/features/mohong/views/MohongDetailView.vue
index 24d1eb4..ef54504 100644
--- a/frontend/src/features/mohong/views/MohongDetailView.vue
+++ b/frontend/src/features/mohong/views/MohongDetailView.vue
@@ -11,6 +11,7 @@ import {
 } from '@/features/mohong/api/mohong'
 import MohongCartPanel from '@/features/mohong/components/MohongCartPanel.vue'
 import { useMohongCart } from '@/features/mohong/composables/useMohongCart'
+import PayWaySelectDialog from '@/features/orders/components/PayWaySelectDialog.vue'
 import type { PaymentPayWay } from '@/features/orders/api/orders'
 import { useOrderPaymentCashier } from '@/features/orders/composables/useOrderPaymentCashier'
 import { useSessionStore } from '@/stores/session'
@@ -260,25 +261,11 @@ async function handleBuy() {
       :start-cashier="(payment, onPaid) => cashier.openPaymentCashier(payment, onPaid)"
     />
 
-    <el-dialog
+    <PayWaySelectDialog
       v-model="payWayDialogVisible"
-      title="选择支付方式"
-      width="420px"
-      append-to-body
+      @choose="choosePayWay"
       @closed="handlePayWayDialogClosed"
-    >
-      <p class="pay-way-tip">选择渠道后将生成对应的支付二维码</p>
-      <div class="pay-way-options">
-        <button type="button" class="pay-way-option wechat" @click="choosePayWay('WXZF')">
-          <strong>微信支付</strong>
-          <small>使用微信扫码完成支付</small>
-        </button>
-        <button type="button" class="pay-way-option alipay" @click="choosePayWay('ZFBZF')">
-          <strong>支付宝支付</strong>
-          <small>使用支付宝扫码完成支付</small>
-        </button>
-      </div>
-    </el-dialog>
+    />
 
     <el-dialog
       v-model="cashier.paymentPopupVisible.value"
@@ -509,41 +496,6 @@ async function handleBuy() {
   line-height: 1.7;
 }
 
-.pay-way-tip {
-  margin: 0 0 14px;
-  color: #6b7a90;
-  font-size: 13px;
-}
-
-.pay-way-options {
-  display: grid;
-  gap: 10px;
-}
-
-.pay-way-option {
-  display: grid;
-  gap: 4px;
-  width: 100%;
-  padding: 14px 16px;
-  border: 1px solid #e7edf6;
-  border-radius: 12px;
-  background: #fff;
-  text-align: left;
-  cursor: pointer;
-}
-
-.pay-way-option:hover {
-  border-color: #ff6a00;
-}
-
-.pay-way-option strong {
-  color: #17233d;
-}
-
-.pay-way-option small {
-  color: #8a94a6;
-}
-
 .pay-dialog-body {
   display: grid;
   gap: 16px;
diff --git a/frontend/src/features/mohong/views/MohongListView.vue b/frontend/src/features/mohong/views/MohongListView.vue
index c7982c1..de9a521 100644
--- a/frontend/src/features/mohong/views/MohongListView.vue
+++ b/frontend/src/features/mohong/views/MohongListView.vue
@@ -7,9 +7,10 @@ import MohongCartPanel from '@/features/mohong/components/MohongCartPanel.vue'
 import MohongProductCard from '@/features/mohong/components/MohongProductCard.vue'
 import { useMohongCart } from '@/features/mohong/composables/useMohongCart'
 import { ensureSupportChat } from '@/features/chats/api/chats'
+import PayWaySelectDialog from '@/features/orders/components/PayWaySelectDialog.vue'
 import type { PaymentPayWay } from '@/features/orders/api/orders'
 import { useOrderPaymentCashier } from '@/features/orders/composables/useOrderPaymentCashier'
-import { queryMohongPayment, startMohongPayment } from '@/features/mohong/api/mohong'
+import { queryMohongPayment } from '@/features/mohong/api/mohong'
 import {
   fetchMohongCategories,
   fetchMohongProducts,
@@ -296,24 +297,11 @@ async function handleSupportClick() {
       :select-pay-way="selectPayWay"
       :start-cashier="(payment, onPaid) => cashier.openPaymentCashier(payment, onPaid)"
     />
-    <el-dialog
+    <PayWaySelectDialog
       v-model="payWayDialogVisible"
-      title="选择支付方式"
-      width="420px"
-      append-to-body
+      @choose="choosePayWay"
       @closed="handlePayWayDialogClosed"
-    >
-      <div class="pay-way-options">
-        <button type="button" class="pay-way-option" @click="choosePayWay('WXZF')">
-          <strong>微信支付</strong>
-          <small>使用微信扫码完成支付</small>
-        </button>
-        <button type="button" class="pay-way-option" @click="choosePayWay('ZFBZF')">
-          <strong>支付宝支付</strong>
-          <small>使用支付宝扫码完成支付</small>
-        </button>
-      </div>
-    </el-dialog>
+    />
   </section>
 </template>
 
@@ -543,31 +531,7 @@ async function handleSupportClick() {
   font-size: 12px;
 }
 
-.pay-way-options {
-  display: grid;
-  gap: 10px;
-}
-.pay-way-option {
-  display: grid;
-  gap: 4px;
-  padding: 14px 16px;
-  border: 1px solid #e5e7eb;
-  border-radius: 12px;
-  background: #fff;
-  text-align: left;
-  cursor: pointer;
-}
-.pay-way-option:hover {
-  border-color: #ff6a00;
-}
-.pay-way-option strong {
-  color: #0f172a;
-  font-size: 15px;
-}
-.pay-way-option small {
-  color: #94a3b8;
-  font-size: 12px;
-}
+
 
 @media (max-width: 900px) {
   .shop-layout {
diff --git a/frontend/src/features/mohong/views/MohongOrderDetailView.vue b/frontend/src/features/mohong/views/MohongOrderDetailView.vue
index 39b5145..d5a20da 100644
--- a/frontend/src/features/mohong/views/MohongOrderDetailView.vue
+++ b/frontend/src/features/mohong/views/MohongOrderDetailView.vue
@@ -10,6 +10,7 @@ import {
   startMohongPayment,
   type MohongOrder,
 } from '@/features/mohong/api/mohong'
+import PayWaySelectDialog from '@/features/orders/components/PayWaySelectDialog.vue'
 import type { PaymentPayWay } from '@/features/orders/api/orders'
 import { useOrderPaymentCashier } from '@/features/orders/composables/useOrderPaymentCashier'
 import { formatCent } from '@/shared/utils/money'
@@ -214,24 +215,11 @@ async function copyText() {
     </template>
     <el-empty v-else-if="!loading" description="订单不存在" />
 
-    <el-dialog
+    <PayWaySelectDialog
       v-model="payWayDialogVisible"
-      title="选择支付方式"
-      width="420px"
-      append-to-body
+      @choose="choosePayWay"
       @closed="handlePayWayDialogClosed"
-    >
-      <div class="pay-way-options">
-        <button type="button" class="pay-way-option" @click="choosePayWay('WXZF')">
-          <strong>微信支付</strong>
-          <small>使用微信扫码完成支付</small>
-        </button>
-        <button type="button" class="pay-way-option" @click="choosePayWay('ZFBZF')">
-          <strong>支付宝支付</strong>
-          <small>使用支付宝扫码完成支付</small>
-        </button>
-      </div>
-    </el-dialog>
+    />
 
     <el-dialog
       v-model="cashier.paymentPopupVisible.value"
@@ -495,41 +483,6 @@ async function copyText() {
   width: 100%;
 }
 
-.pay-way-options {
-  display: grid;
-  gap: 10px;
-}
-
-.pay-way-option {
-  display: grid;
-  gap: 4px;
-  width: 100%;
-  padding: 14px 16px;
-  border: 1px solid #e7edf6;
-  border-radius: 12px;
-  background: #fff;
-  text-align: left;
-  cursor: pointer;
-  transition:
-    border-color 0.2s,
-    background 0.2s;
-}
-
-.pay-way-option:hover {
-  border-color: #ff6a00;
-  background: #fff8f2;
-}
-
-.pay-way-option strong {
-  color: #17233d;
-  font-size: 15px;
-}
-
-.pay-way-option small {
-  color: #8a94a6;
-  font-size: 12px;
-}
-
 .mohong-pay-dialog :deep(.el-dialog__footer) {
   display: flex;
   justify-content: center;
diff --git a/frontend/src/features/orders/components/PayWaySelectDialog.vue b/frontend/src/features/orders/components/PayWaySelectDialog.vue
new file mode 100644
index 0000000..8f8ff34
--- /dev/null
+++ b/frontend/src/features/orders/components/PayWaySelectDialog.vue
@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import type { PaymentPayWay } from '@/features/orders/api/orders'
+
+defineProps<{
+  modelValue: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  choose: [payWay: PaymentPayWay]
+  closed: []
+}>()
+
+function choose(payWay: PaymentPayWay) {
+  emit('choose', payWay)
+  emit('update:modelValue', false)
+}
+</script>
+
+<template>
+  <el-dialog
+    :model-value="modelValue"
+    title="选择支付方式"
+    width="420px"
+    append-to-body
+    :z-index="4000"
+    class="pay-way-dialog"
+    @update:model-value="emit('update:modelValue', $event)"
+    @closed="emit('closed')"
+  >
+    <p class="pay-way-tip">选择渠道后将生成对应的支付二维码</p>
+    <div class="pay-way-options">
+      <button type="button" class="pay-way-option wechat" @click="choose('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="choose('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>
+</template>
+
+<style scoped>
+.pay-way-tip {
+  margin: 0 0 16px;
+  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: #fff;
+  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: #fff;
+  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;
+}
+</style>
+
+<style>
+.pay-way-dialog {
+  border-radius: 16px;
+}
+
+.pay-way-dialog .el-dialog__header {
+  padding: 20px 24px 0;
+}
+
+.pay-way-dialog .el-dialog__body {
+  padding: 16px 24px 24px;
+}
+</style>