liveh5-nuxt/app/pages/collectCode/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";
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} = codeAuthStore()
const payStatus = ref(0)
definePageMeta({
  title: '线下支付'
})
const changePayStatus = () => {
  payStatus.value = payStatus.value === 0 ? 1 : 0
}
const amount = ref('')
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) {
    window.location.href = 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', { currency: qrData.currency, price: 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>