e7cd4ff9ba
- 移除 authStore 中的 payUid 和 checkoutSessionUrl - 更新 checkoutPage 组件，使用路由参数传递支付相关信息- 修改 payment 页面逻辑，适应新的支付流程 - 删除未使用的 payment/checkoutPage 组件
106 lines
3.7 KiB
Vue
106 lines
3.7 KiB
Vue
<script setup>
|
|
import {liveStore} from "~/stores/live/index.js";
|
|
import {createBuyOrder} from "~/api/goods/index.js";
|
|
import {goodStore} from "~/stores/goods/index.js";
|
|
import {showLoadingToast, closeToast} from 'vant';
|
|
import {authStore} from "~/stores/auth/index.js";
|
|
import {message} from "~/components/x-message/useMessage.js";
|
|
import {createOrder} from "~/api-collect-code/goods/index.js";
|
|
import {codeAuthStore} from "~/stores-collect-code/auth/index.js";
|
|
import {useI18n} from "vue-i18n";
|
|
|
|
const {t} = useI18n();
|
|
const {checkoutSessionUrl,qrUid,qrData,codePKey,codePayUid} = codeAuthStore()
|
|
const payStatus = ref(0)
|
|
definePageMeta({
|
|
i18n: 'payment.title'
|
|
})
|
|
const changePayStatus = () => {
|
|
payStatus.value = payStatus.value === 0 ? 1 : 0
|
|
}
|
|
const amount = ref('')
|
|
const router = useRouter()
|
|
const confirmPay = async () => {
|
|
if (payStatus.value === 1 && !amount.value) {
|
|
message.warning(t('collectCode.payment.enterAmount'))
|
|
return
|
|
}
|
|
if (Number(qrData.value.leftPrice) < Number(amount.value)) {
|
|
message.warning(t('collectCode.payment.exceedTotal'))
|
|
return
|
|
}
|
|
showLoadingToast({
|
|
message: t('common.loading'),
|
|
forbidClick: true,
|
|
});
|
|
const res = await createOrder({
|
|
price: payStatus.value === 0 ? qrData.value.leftPrice : amount.value,
|
|
currency: qrData.value.currency,
|
|
qrUid:qrUid.value,
|
|
testReturnHost:window.location.origin,
|
|
testReturnEndPoint: '/collectCode/payment/result'
|
|
})
|
|
if (res.status === 0) {
|
|
codePKey.value=res.data.checkoutSessionUrl
|
|
codePayUid.value=res.data.payUid
|
|
checkoutSessionUrl.value=res.data.checkoutSessionUrl
|
|
payUid.value=res.data.payUid
|
|
router.push({
|
|
path:'/checkoutPage',
|
|
query:{
|
|
payUid:res.data.payUid,
|
|
returnUrl:'/collectCode/payment/result',
|
|
stripeKey:res.data.checkoutSessionUrl
|
|
}
|
|
})
|
|
|
|
|
|
}
|
|
}
|
|
|
|
const handleInput = (e) => {
|
|
// 只允许数字和小数点，且只保留两位小数
|
|
const value = e.target.value
|
|
// 清除非数字和小数点
|
|
let newValue = value.replace(/[^\d.]/g, '')
|
|
// 确保只有一个小数点
|
|
newValue = newValue.replace(/\.{2,}/g, '.')
|
|
// 只保留第一个小数点
|
|
newValue = newValue.replace(/^(\d*\.\d*)\./, '$1')
|
|
// 保留两位小数
|
|
if (newValue.indexOf('.') > 0) {
|
|
newValue = newValue.slice(0, newValue.indexOf('.') + 3)
|
|
}
|
|
// 禁止输入以0开头的多位整数
|
|
newValue = newValue.replace(/^0+(\d)/, '$1')
|
|
|
|
amount.value = newValue
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="w-[100vw] h-screen-nav bg-[url('@/static/images/3532@2x.png')] bg-cover flex-grow-1 flex flex-col items-center pt-183px px-30px">
|
|
<div class="mb-30px">
|
|
<img class="w-126px h-126px" src="@/static/images/dddf34@2x.png" alt="">
|
|
</div>
|
|
<div class="text-#1A1A1A text-16px mb-25px font-bold">{{ payStatus === 0 ? $t('collectCode.payment.fullPayment') : $t('collectCode.payment.partialPayment') }}</div>
|
|
<div class="text-#999999 text-16px mb-24px font-bold" v-if="payStatus===0">{{ qrData.currency }}
|
|
{{ qrData?.leftPrice }}
|
|
</div>
|
|
<div class="mb-12px" v-else>
|
|
<input v-model="amount" class="w-272px h-48px bg-#F3F3F3 px-11px text-16px" type="text"
|
|
:placeholder="`${$t('collectCode.payment.maxAmount')} ${qrData.currency} ${qrData?.leftPrice}`" @input="handleInput">
|
|
</div>
|
|
<div class="text-#2B53AC text-14px" @click="changePayStatus">{{ payStatus === 1 ? $t('collectCode.payment.fullPayment') : $t('collectCode.payment.partialPayment') }}</div>
|
|
<div class="w-full mt-auto mb-40px">
|
|
<van-button type="primary" block @click="confirmPay">
|
|
{{ $t('collectCode.payment.confirmPayment') }}
|
|
</van-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style> |