<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 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>