hookehuyr

fix(支付弹窗): 调整支付弹窗高度并优化关闭逻辑

将支付弹窗的高度从90%调整为50%,并移除不必要的关闭图标。在支付失败时,直接关闭弹窗而不是显示错误提示,以提升用户体验。
......@@ -16,7 +16,6 @@
</FrostedGlass>
</div>
<div v-else-if="!orderComplete" class="pb-20">
<!-- Order Summary -->
<div class="p-4 bg-gradient-to-r from-green-500/10 to-blue-500/10">
......@@ -253,17 +252,17 @@
v-model:show="showPayment"
position="bottom"
round
closeable
close-icon-position="top-right"
:style="{ height: '90%' }"
:style="{ height: '50%' }"
>
<div class="bg-gradient-to-r from-green-500/10 to-blue-500/10 h-full">
<WechatPayment
v-if="showPayment && orderId"
:order-id="orderId"
cancelBtnText="关闭"
@success="handlePaymentSuccess"
@failed="handlePaymentFailed"
@processing="handlePaymentProcessing"
@cancel="showPayment = false"
>
<template #success-action>
<button
......@@ -275,10 +274,10 @@
</template>
<template #failed-action>
<button
@click="handleBackToHome"
@click="showPayment = false"
class="w-full bg-gray-100 text-gray-700 py-3 sm:py-3.5 rounded-xl font-medium text-base sm:text-lg hover:bg-gray-200 transition-colors"
>
返回首页
关闭
</button>
</template>
</WechatPayment>
......
......@@ -162,9 +162,7 @@
v-model:show="showPaymentPopup"
position="bottom"
round
closeable
close-icon-position="top-right"
:style="{ height: '90%' }"
:style="{ height: '50%' }"
>
<div class="bg-gradient-to-r from-green-500/10 to-blue-500/10 h-full">
<WechatPayment
......@@ -173,7 +171,16 @@
@success="handlePaymentSuccess"
@failed="handlePaymentFailed"
@processing="handlePaymentProcessing"
/>
>
<template #failed-action>
<button
@click="showPaymentPopup = false"
class="w-full bg-gray-100 text-gray-700 py-3 sm:py-3.5 rounded-xl font-medium text-base sm:text-lg hover:bg-gray-200 transition-colors"
>
关闭
</button>
</template>
</WechatPayment>
</div>
</van-popup>
</AppLayout>
......@@ -316,7 +323,7 @@ const handlePaymentSuccess = () => {
// 处理支付失败
const handlePaymentFailed = (error) => {
showToast(error || '支付失败')
// showToast(error || '支付失败')
}
// 处理支付处理中
......