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 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 player = ref(null)
const {quoteStatus, show, playerId, show1, auctionData, getSocketData, getLiveLink, fullLive} = liveStore() const {quoteStatus, show, playerId, show1, auctionData, getSocketData, getLiveLink, fullLive} = liveStore()
const pullLink = ref('') const pullLink = ref('')
const handlePlayerError = (error) => { const handlePlayerError = (error) => {
console.error('播放器错误:', error) console.error('播放器错误:', error)
player.value?.play() player.value?.play()

View File

@ -1,16 +1,31 @@
<script setup> <script setup>
import {orderQuery} from "~/api/goods/index.js";
definePageMeta({ definePageMeta({
layout: 'default',
i18n: 'payment.text1', 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> </script>
<template> <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="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"> <div class="flex flex-col items-center mt-150px">
<img class="w-119px h-120px mb-36px" src="@/static/images/5554@2x1.png" alt=""> <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-#000 text-16px mb-25px">{{statusLabel[resData.status]}}!</div>
<div class="text-#999 text-16px">RMB5,000</div> <div class="text-#999 text-16px">{{resData.currency}}{{resData.money}}</div>
</div> </div>
</div> </div>
</template> </template>

View File

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