yml/hfb_sys
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
抽取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
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/features/mohong/views/MohongDetailView.vue
+4 -52
View File
@@ -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;
frontend/src/features/mohong/views/MohongListView.vue
+6 -42
View File
@@ -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 {
frontend/src/features/mohong/views/MohongOrderDetailView.vue
+4 -51
View File
@@ -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;
frontend/src/features/orders/components/PayWaySelectDialog.vue
+141
View File
@@ -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>