liveh5-nuxt/app/pages/payment/index.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>