统一摸大红PC支付方式选择为带图标弹窗

抽取PayWaySelectDialog,与租号端一致展示微信/支付宝图标。
This commit is contained in:
yml2213
2026-07-16 21:01:46 +08:00
parent 183351a297
commit 8b637cf499
4 changed files with 155 additions and 145 deletions
@@ -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 {