119 lines
3.5 KiB
Vue
119 lines
3.5 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";
|
|
const { checkoutSessionUrl, payment, payUid } = authStore();
|
|
const payStatus = ref(0);
|
|
definePageMeta({
|
|
i18n: "payment.title",
|
|
});
|
|
const { t } = useI18n();
|
|
const router = useRouter();
|
|
const changePayStatus = () => {
|
|
payStatus.value = payStatus.value === 0 ? 1 : 0;
|
|
};
|
|
const { auctionData } = liveStore();
|
|
const amount = ref("");
|
|
const confirmPay = async () => {
|
|
if (payStatus.value === 1 && !amount.value) {
|
|
message.warning(t("payment.amountRequired"));
|
|
return;
|
|
}
|
|
if (Number(payment.value.leftPrice) < Number(amount.value)) {
|
|
message.warning(t("payment.exceedAmount"));
|
|
return;
|
|
}
|
|
showLoadingToast({
|
|
message: t("payment.loading"),
|
|
forbidClick: true,
|
|
});
|
|
|
|
const res = await createBuyOrder({
|
|
buyUid: payment.value.buyUid,
|
|
price: payStatus.value === 0 ? payment.value.leftPrice : amount.value,
|
|
currency: payment.value.leftCurrency,
|
|
testReturnHost: window.location.origin,
|
|
testReturnEndPoint: "/payment/result",
|
|
});
|
|
|
|
if (res.status === 0) {
|
|
checkoutSessionUrl.value = res.data.checkoutSessionUrl;
|
|
payUid.value = res.data.payUid;
|
|
router.push({
|
|
path: "/checkoutPage",
|
|
query: {
|
|
payUid: res.data.payUid,
|
|
returnUrl: "/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("payment.fullPayment") : t("payment.partialPayment")
|
|
}}
|
|
</div>
|
|
<div
|
|
class="text-#999999 text-16px mb-24px font-bold"
|
|
v-if="payStatus === 0"
|
|
>
|
|
{{ payment.leftCurrency }} {{ payment?.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('payment.placeholder.amount')}${
|
|
payment.leftCurrency
|
|
}${payment?.leftPrice}`"
|
|
@input="handleInput"
|
|
/>
|
|
</div>
|
|
<div class="text-#2B53AC text-14px" @click="changePayStatus">
|
|
{{
|
|
payStatus === 1 ? t("payment.fullPayment") : t("payment.partialPayment")
|
|
}}
|
|
</div>
|
|
<div class="w-full mt-auto mb-40px">
|
|
<van-button type="primary" block @click="confirmPay">
|
|
{{ t("payment.confirm") }}
|
|
</van-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|