refactor(CheckoutPage): 调整支付弹窗高度和返回按钮逻辑
将支付弹窗的高度调整为100%,移除不必要的圆角样式。修改支付成功后的返回按钮逻辑,从返回首页改为返回上一页,并更新按钮文本为“完成”。简化代码,移除冗余的导航逻辑。
Showing
1 changed file
with
6 additions
and
10 deletions
| ... | @@ -251,14 +251,12 @@ | ... | @@ -251,14 +251,12 @@ |
| 251 | <van-popup | 251 | <van-popup |
| 252 | v-model:show="showPayment" | 252 | v-model:show="showPayment" |
| 253 | position="bottom" | 253 | position="bottom" |
| 254 | - round | 254 | + :style="{ height: '100%' }" |
| 255 | - :style="{ height: '50%' }" | ||
| 256 | > | 255 | > |
| 257 | <div class="bg-gradient-to-r from-green-500/10 to-blue-500/10 h-full"> | 256 | <div class="bg-gradient-to-r from-green-500/10 to-blue-500/10 h-full"> |
| 258 | <WechatPayment | 257 | <WechatPayment |
| 259 | v-if="showPayment && orderId" | 258 | v-if="showPayment && orderId" |
| 260 | :order-id="orderId" | 259 | :order-id="orderId" |
| 261 | - cancelBtnText="关闭" | ||
| 262 | @success="handlePaymentSuccess" | 260 | @success="handlePaymentSuccess" |
| 263 | @failed="handlePaymentFailed" | 261 | @failed="handlePaymentFailed" |
| 264 | @processing="handlePaymentProcessing" | 262 | @processing="handlePaymentProcessing" |
| ... | @@ -266,10 +264,10 @@ | ... | @@ -266,10 +264,10 @@ |
| 266 | > | 264 | > |
| 267 | <template #success-action> | 265 | <template #success-action> |
| 268 | <button | 266 | <button |
| 269 | - @click="handleBackToHome" | 267 | + @click="handleBack" |
| 270 | class="w-full bg-gradient-to-r from-green-500 to-green-600 text-white py-3 rounded-xl font-medium" | 268 | class="w-full bg-gradient-to-r from-green-500 to-green-600 text-white py-3 rounded-xl font-medium" |
| 271 | > | 269 | > |
| 272 | - 返回首页 | 270 | + 完成 |
| 273 | </button> | 271 | </button> |
| 274 | </template> | 272 | </template> |
| 275 | <template #failed-action> | 273 | <template #failed-action> |
| ... | @@ -375,8 +373,6 @@ const handleSubmit = async (e) => { | ... | @@ -375,8 +373,6 @@ const handleSubmit = async (e) => { |
| 375 | const handlePaymentSuccess = () => { | 373 | const handlePaymentSuccess = () => { |
| 376 | orderComplete.value = true | 374 | orderComplete.value = true |
| 377 | clearCart(); | 375 | clearCart(); |
| 378 | - // 返回上一页 | ||
| 379 | - router.go(-1) | ||
| 380 | } | 376 | } |
| 381 | 377 | ||
| 382 | // 处理支付失败 | 378 | // 处理支付失败 |
| ... | @@ -390,8 +386,8 @@ const handlePaymentProcessing = () => { | ... | @@ -390,8 +386,8 @@ const handlePaymentProcessing = () => { |
| 390 | console.log('支付处理中...') | 386 | console.log('支付处理中...') |
| 391 | } | 387 | } |
| 392 | 388 | ||
| 393 | -// Handle navigation back to home after order completion | 389 | +// 返回详情页 |
| 394 | -const handleBackToHome = () => { | 390 | +const handleBack = () => { |
| 395 | - router.push('/') | 391 | + router.go(-1) |
| 396 | } | 392 | } |
| 397 | </script> | 393 | </script> | ... | ... |
-
Please register or login to post a comment