<script setup> const payStatus=ref(0) const changePayStatus=()=>{ payStatus.value=payStatus.value===0?1:0 } 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 } } </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"> <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">RMB 5000</div> <div class="mb-12px"> <input class="w-272px h-48px bg-#F3F3F3 px-11px text-16px" type="text" placeholder="最多RMB5,000" @keydown="validateInput"> </div> <div class="text-#2B53AC text-14px" @click="changePayStatus">{{payStatus===1?'支付全部':'支付部分'}}</div> </div> </template> <style scoped> </style>