优化了支付选择界面 ui
This commit is contained in:
yml
@@ -4,8 +4,10 @@ import { useRouter } from 'vue-router'
|
||||
import { showDialog, showToast } from 'vant'
|
||||
|
||||
import MobilePaymentCashierPopup from '@/features/orders/components/MobilePaymentCashierPopup.vue'
|
||||
import MobilePayWaySelectPopup from '@/features/orders/components/MobilePayWaySelectPopup.vue'
|
||||
import { useOrderActions, CONFIRMABLE_ACTIONS } from '@/features/orders/composables/useOrderActions'
|
||||
import { useMobilePaymentCashier } from '@/features/orders/composables/useMobilePaymentCashier'
|
||||
import { useMobilePayWaySelect } from '@/features/orders/composables/useMobilePayWaySelect'
|
||||
import {
|
||||
amountYuan,
|
||||
money,
|
||||
@@ -19,11 +21,14 @@ import {
|
||||
} from '@/features/orders'
|
||||
import { handoffStatusLabel, orderStatusLabel } from '@/shared/utils/statusLabels'
|
||||
import { formatDateTime } from '@/shared/utils/time'
|
||||
import type { PaymentPayWay } from '@/features/orders/api/orders'
|
||||
|
||||
// 移动端支付收银台（基于通用 useOrderPaymentCashier 的薄封装：注入 vant toast + App 浏览器跳转）。
|
||||
const cashier = useMobilePaymentCashier()
|
||||
const router = useRouter()
|
||||
|
||||
// 支付方式选择底部弹层（与 PC 端一致的渠道卡片体验）。
|
||||
const payWaySelect = useMobilePayWaySelect()
|
||||
const selectPayWay = payWaySelect.select
|
||||
const {
|
||||
paymentPopupVisible,
|
||||
activePayment,
|
||||
@@ -117,23 +122,6 @@ const showDisputePopup = ref(false)
|
||||
const showCounterPopup = ref(false)
|
||||
const showRejectPopup = ref(false)
|
||||
|
||||
// selectPayWay 在创建支付单前让移动端用户选择支付宝或微信。
|
||||
async function selectPayWay(): Promise<PaymentPayWay | null> {
|
||||
try {
|
||||
await showDialog({
|
||||
title: '选择支付方式',
|
||||
message: '选择后将生成对应渠道的支付二维码。',
|
||||
showCancelButton: true,
|
||||
confirmButtonText: '支付宝支付',
|
||||
cancelButtonText: '微信支付',
|
||||
closeOnClickOverlay: false,
|
||||
})
|
||||
return 'ZFBZF'
|
||||
} catch (action) {
|
||||
return action === 'cancel' ? 'WXZF' : null
|
||||
}
|
||||
}
|
||||
|
||||
// 账号快照展示（PC 不用，保留在本视图）。
|
||||
function readSnapshot() {
|
||||
return readOrderSnapshot(order.value) as Record<string, any> | null
|
||||
@@ -465,6 +453,12 @@ async function copyListingCode() {
|
||||
<van-empty image="search" description="订单不存在或已被删除" />
|
||||
</div>
|
||||
|
||||
<MobilePayWaySelectPopup
|
||||
v-model:show="payWaySelect.visible.value"
|
||||
@choose="payWaySelect.choose"
|
||||
@closed="payWaySelect.handleClosed"
|
||||
/>
|
||||
|
||||
<MobilePaymentCashierPopup
|
||||
v-model:show="paymentPopupVisible"
|
||||
:payment="activePayment"
|
||||
|
||||
@@ -2,17 +2,18 @@
|
||||
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 PaymentPayWay,
|
||||
} from '@/features/orders/api/orders'
|
||||
import MobilePaymentCashierPopup from '@/features/orders/components/MobilePaymentCashierPopup.vue'
|
||||
import MobilePayWaySelectPopup from '@/features/orders/components/MobilePayWaySelectPopup.vue'
|
||||
import { useMobilePaymentCashier } from '@/features/orders/composables/useMobilePaymentCashier'
|
||||
import { useMobilePayWaySelect } from '@/features/orders/composables/useMobilePayWaySelect'
|
||||
import { fetchOrderChat } from '@/features/chats/api/chats'
|
||||
import { centToYuan, formatMoney } from '@/shared/utils/money'
|
||||
import { useSessionStore } from '@/stores/session'
|
||||
@@ -37,6 +38,10 @@ const {
|
||||
refreshPaymentStatus,
|
||||
} = useMobilePaymentCashier()
|
||||
|
||||
// 支付方式选择底部弹层。
|
||||
const payWaySelect = useMobilePayWaySelect()
|
||||
const selectPayWay = payWaySelect.select
|
||||
|
||||
onMounted(() => {
|
||||
loadOrders()
|
||||
if (route.query.tab) {
|
||||
@@ -123,22 +128,7 @@ async function openOrderChatAfterPayment(order: Order) {
|
||||
}
|
||||
}
|
||||
|
||||
// selectPayWay 在列表快捷支付前让用户选择支付宝或微信。
|
||||
async function selectPayWay(): Promise<PaymentPayWay | null> {
|
||||
try {
|
||||
await showDialog({
|
||||
title: '选择支付方式',
|
||||
message: '选择后将生成对应渠道的支付二维码。',
|
||||
showCancelButton: true,
|
||||
confirmButtonText: '支付宝支付',
|
||||
cancelButtonText: '微信支付',
|
||||
closeOnClickOverlay: false,
|
||||
})
|
||||
return 'ZFBZF'
|
||||
} catch (action) {
|
||||
return action === 'cancel' ? 'WXZF' : null
|
||||
}
|
||||
}
|
||||
// selectPayWay 在列表快捷支付前让用户选择支付宝或微信（见 payWaySelect）。
|
||||
|
||||
function money(value: unknown) {
|
||||
return formatMoney(Number(value || 0))
|
||||
@@ -293,6 +283,12 @@ async function copyListingCode(order: Order) {
|
||||
</section>
|
||||
|
||||
<!-- 底部导航 -->
|
||||
<MobilePayWaySelectPopup
|
||||
v-model:show="payWaySelect.visible.value"
|
||||
@choose="payWaySelect.choose"
|
||||
@closed="payWaySelect.handleClosed"
|
||||
/>
|
||||
|
||||
<MobilePaymentCashierPopup
|
||||
v-model:show="paymentPopupVisible"
|
||||
:payment="activePayment"
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user