feat(payment): 优化支付结果页面并支持多种支付状态展示

- 新增支付结果查询接口并调用该接口获取支付状态
- 根据支付状态动态显示支付结果信息
- 更新国际化文案,增加支付失败、未支付、支付过期等状态的提示
- 调整支付结果页面布局和样式
This commit is contained in:
xingyy 2025-02-18 10:29:49 +08:00
parent d974db8286
commit 2919400d7f
4 changed files with 33 additions and 8 deletions

View File

@ -78,3 +78,11 @@ export async function createBuyOrder(data) {
data
})
}
export async function orderQuery(data) {
return await request( {
url:'/api/v1/payment/order/query',
method: 'POST',
data
})
}

View File

@ -21,7 +21,6 @@ const { auctionDetail} = goodStore();
const player = ref(null)
const {quoteStatus, show, playerId, show1, auctionData, getSocketData, getLiveLink, fullLive} = liveStore()
const pullLink = ref('')
const handlePlayerError = (error) => {
console.error('播放器错误:', error)
player.value?.play()

View File

@ -1,16 +1,31 @@
<script setup>
import {orderQuery} from "~/api/goods/index.js";
definePageMeta({
layout: 'default',
i18n: 'payment.text1',
})
const {t}=useI18n();
const route = useRoute();
const resData=ref({})
const res=await orderQuery({
orderNo:route.query.orderNo
})
if (res.status===0){
resData.value=res.data
}
const statusLabel={
1:t('payment.text2'),
2:t('payment.text3'),
3:t('payment.text4'),
4:t('payment.text5'),
}
</script>
<template>
<div class="w-[100vw] bg-[url('@/static/images/3532@2x.png')] bg-cover pt-43px flex-grow-1 flex flex-col pt-180px">
<div class="flex flex-col items-center">
<div class="w-[100vw] bg-[url('@/static/images/3532@2x.png')] bg-cover pt-43px flex-grow-1 flex flex-col">
<div class="flex flex-col items-center mt-150px">
<img class="w-119px h-120px mb-36px" src="@/static/images/5554@2x1.png" alt="">
<div class="text-#000 text-16px mb-25px">{{$t('payment.text2')}}!</div>
<div class="text-#999 text-16px">RMB5,000</div>
<div class="text-#000 text-16px mb-25px">{{statusLabel[resData.status]}}!</div>
<div class="text-#999 text-16px">{{resData.currency}}{{resData.money}}</div>
</div>
</div>
</template>

View File

@ -148,8 +148,11 @@
"next": "下一步"
},
"payment": {
"text1": "支付",
"text2":"付款成功",
"text1": "支付结果",
"text2":"支付成功",
"text3":"支付失败",
"text4":"未支付",
"text5":"支付过期",
"next": "下一步"
}
}