<template>
<view class="keyboard">
<button @click="appendValue(1)">1</button>
<button @click="appendValue(2)">2</button>
<button @click="appendValue(3)">3</button>
<button class="delete-btn" @click="deleteLast">⌫</button>
<button @click="appendValue(4)">4</button>
<button @click="appendValue(5)">5</button>
<button @click="appendValue(6)">6</button>
<button class="transfer-btn" v-if="!inputValue " disabled>付款</button>
<button class="transfer-btn" @click="makeTransfer" v-else>付款</button>
<button @click="appendValue(7)">7</button>
<button @click="appendValue(8)">8</button>
<button @click="appendValue(9)">9</button>
<button @click="appendValue(0)" class="zero-btn">0</button>
<button @click="appendValue('.')">.</button>
</view> </template>
<script setup>
import {
ref,
defineProps,
defineEmits,
watch
} from 'vue' // 导入 watch
// 接收父组件传递的 modelValue 值
const props = defineProps({
modelValue: {
type: String,
default: ''
}
})
const emit = defineEmits(['update:modelValue', 'transfer'])
// 用于绑定的金额值
const inputValue = ref(props.modelValue)
// 监听 inputValue 的变化，更新父组件的 modelValue
watch(inputValue, (newValue) => {
emit('update:modelValue', newValue)
}) // 防抖后的appendValue函数
const appendValue = debounce((value) => {
uni.vibrateShort({
success: function() {
// 判断小数点后面是否有两位数字，如果有两位就不能再输入了
let index = inputValue.value.indexOf('.');
// 1. 输入第一个为小数点时，返回 0.
if (value.toString() === '.' && inputValue.value === '') {
inputValue.value = '0.';
return;
}
// 2. 输入的值为小数点且已有小数点时，不进行操作
if (value.toString() === '.' && inputValue.value.includes('.')) {
return;
}
// 3. 输入的值如果是数字并且第一个是0，且第二个不是小数点，覆盖0
if (inputValue.value.startsWith('0') && inputValue.value.length === 1 && value !== '0' && value !== '.') {
inputValue.value = value.toString();
return;
}
// 4. 如果金额长度超过7位，则不再添加
if (inputValue.value.length >= 7 && !inputValue.value.includes('.')) {
return;
}
// 5. 当存在小数点时，限制小数点后面只能有两位
if (inputValue.value.includes('.') && inputValue.value.length - index - 1 >= 2) {
return;
}
// 6. 更新金额
inputValue.value += value;
}
}); }, 50); // 防抖延迟时间设置为50ms
// 防抖函数，传入需要防抖的函数和延迟时间
function debounce(fn, delay) {
let timer;
return function (...args) {
clearTimeout(timer); // 清除上一个定时器
timer = setTimeout(() => {
fn(...args); // 延迟执行函数
}, delay);
};
}
// 删除最后一个字符
const deleteLast = () => {
uni.vibrateShort({
success: function() {
inputValue.value = inputValue.value.slice(0, -1)
}
})
}
// 转账操作
const makeTransfer = () => {
uni.vibrateShort({
success: function() {
if (inputValue.value.length >= 7 && !inputValue.value.includes('.')) {
uni.showToast({
title: '单笔金额超出限制',
icon: 'error'
})
return
}
if (inputValue.value.length > 9 && inputValue.value.includes('.')) {
uni.showToast({
title: '单笔金额超出限制',
icon: 'error'
})
return
}
if (+inputValue.value < 0.01) {
uni.showToast({
title: '金额不能小于0.01元',
icon: 'error'
})
return
}
// uni.showToast({
// title: '付款成功' + inputValue.value+'元',
// icon: 'success'
// })
// 发出转账事件，并传递输入的金额给父组件
emit('transfer', inputValue.value)
inputValue.value = '' // 清空输入框
}
})
} </script>
<style scoped>
.keyboard {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 5px;
background-color: #f8f8f8;
height: 100%;
}
button {
font-size: 20px;
border: none;
background-color: #ffffff;
color: #000000;
width: 100%;
}
button:active {
background-color: #e0e0e0;
}
.delete-btn {
background-color: #fff;
font-weight: bold;
}
.transfer-btn {
background-color: #1678ff;
color: #ffffff;
grid-row: span 3;
/* 占3行 */
height: 170px;
line-height: 170px;
}
.zero-btn {
grid-column: span 2;
/* 占两列 */
} </style>
//调用组件
<!-- 付款框 -->
<view class="payinput">
<view style="height: 100px;line-height: 100px;" @click="istoggleVisibility()">￥
<text style="font-size: 40px;">{{price}}</text>
<text class="cursor" v-if="isVisible">|</text>
</view>
</view>
<view class="beizhu">
<view style="margin-left: 20px;color: #1678ff;"><text>备注说明：</text></view>
<view @click="toggleVisibility()"><input placeholder="添加备注(100字以内)" v-model="remark" /></view>
</view>
<view style="width: 100%;" v-if="isVisible">
<!-- 付款键盘组件 -->
<PaymentKeyboard v-model="price" @transfer="handleTransfer"></PaymentKeyboard>
</view>
</view> 
