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";
const {checkoutSessionUrl}= authStore()
const payStatus=ref(0)
const changePayStatus=()=>{
  payStatus.value=payStatus.value===0?1:0
}
const { auctionData} = liveStore()
const validateInput = (e) => {
  const value = e.target.value
  const char = String.fromCharCode(e.charCode)

  if (!/[\d.]/.test(char)) {
    e.preventDefault()
    return
  }

  if (char === '.' && (value.includes('.') || !value)) {
    e.preventDefault()
    return
  }

  if (value.includes('.') && value.split('.')[1]?.length >= 2) {
    e.preventDefault()
    return
  }
}
const confirmPay=async ()=>{
  showLoadingToast({
    message: '加载中...',
    forbidClick: true,
  });
 const res=await createBuyOrder({
   buyUid:auctionData.value?.nowAuctionPrice?.successBuyUuid,
   price:String(auctionData.value?.nowAuctionPrice?.successPrice),
   currency:auctionData.value?.nowAuctionPrice?.currency
 })
  if (res.status===0){
    window.location.href=res.data.checkoutSessionUrl
  }
}
</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?'支付全部':'支付部分'}}</div>
    <div class="text-#999999 text-16px mb-24px font-bold" v-if="payStatus===0">{{auctionData?.nowAuctionPrice?.currency}} {{auctionData?.nowAuctionPrice?.successPrice}}</div>
    <div class="mb-12px" v-else>
      <input class="w-272px h-48px bg-#F3F3F3 px-11px text-16px" type="text" :placeholder="`最多${auctionData?.nowAuctionPrice?.currency}${auctionData?.nowAuctionPrice?.successPrice}`" @keydown="validateInput">
    </div>
    <div class="text-#2B53AC text-14px" @click="changePayStatus">{{payStatus===1?'支付全部':'支付部分'}}</div>
    <div class="w-full mt-auto mb-40px">
      <van-button type="primary" block @click="confirmPay">
        确认支付
      </van-button>
    </div>
</div>
</template>

<style scoped>

</style>