最近需求说需要自己弄个收银键盘，于是乎直接上手搓
主要基于Vue3写的，主要是CSS
<template><view class="container"><view class="info"><image class="img" src="" mode=""></image><text class="name">达达</text></view><view class="inputBox"><view class="concent flex flex_just_sb flex_items_c"><view class="insideBox"><text class="title">付款金额</text><view class="price"><text class="value">￥</text><text class="number">{{payMuch}}</text></view></view></view></view><div class="btn"><view class="btn_box"><view class="line_one"><button @click="_handleKeyPress('1')" type="primary">1</button><button @click="_handleKeyPress('2')" type="primary">2</button><button @click="_handleKeyPress('3')" type="primary">3</button><button @click="_handleKeyPress('D')" type="primary">清除</button></view><view class="btn_bottom"><view class="line_two"><view class="line-left"><view class="line_box"><view class="line_two"><button @click="_handleKeyPress('4')" type="primary">4</button><button @click="_handleKeyPress('5')" type="primary">5</button><button @click="_handleKeyPress('6')" type="primary">6</button></view><view class="line_three"><button @click="_handleKeyPress('7')" type="primary">7</button><button @click="_handleKeyPress('8')" type="primary">8</button><button @click="_handleKeyPress('9')" type="primary">9</button></view><view class="line_four"><button type="primary"></button><button @click="_handleKeyPress('0')" type="primary">0</button><button @click="_handleKeyPress('.')" type="primary">.</button></view></view></view><view class="line-right"><button type="primary" @click="_handleKeyPress('S')">优惠<br />买单</button></view></view></view></view></div></view>
</template><script setup>import {reactive,ref} from 'vue';import {preferentialPay} from '@/api/store'import {onLoad,onShow} from '@dcloudio/uni-app'const payMuch = ref('0')const payPrice = ref(0)const confirmOrderStatus = ref(false)const isdisabled = ref(false)//处理按键function _handleKeyPress(num) {//不同按键处理逻辑// -1 代表无效按键，直接返回if (num == -1) return false;switch (String(num)) {//小数点case ".":_handleDecimalPoint();break;//删除键case "D":_handleDeleteKey();break;//确认键case "S":_handleConfirmKey();break;default:_handleNumberKey(num);break;}}//处理数字function _handleNumberKey(num) {let S = payMuch.value;//如果有小数点且小数点位数不小于2if (S.indexOf(".") > -1 && S.substring(S.indexOf(".") + 1).length < 2) payMuch.value = S + num;//没有小数点if (!(S.indexOf(".") > -1)) {//如果第一位是0，只能输入小数点if (num == 0 && S.length == 0) payMuch.value = "0.";else {if (S.length && Number(S.charAt(0)) === 0) {payMuch.value = num;return;}payMuch.value = S + num;}}}function _handleConfirmKey() {let S = payMuch.value;//未输入if (!S.length || Number(S) === 0) {showTotal("您目前未输入!");return false;}//将 8. 这种转换成 8.00if (S.indexOf(".") > -1 && S.indexOf(".") === S.length - 1) S = Number(S.substring(0, S.length - 1)).toFixed(2);//保留两位S = Number(S).toFixed(2);confirmOrder();}//处理小数点函数function _handleDecimalPoint() {//如果包含小数点，直接返回if (payMuch.value.indexOf(".") > -1) return false;//如果小数点是第一位，补0if (!payMuch.value.length) payMuch.value = "0.";//如果不是，添加一个小数点else payMuch.value = payMuch.value + ".";}//处理删除键function _handleDeleteKey() {let S = payMuch.value;//如果没有输入，直接返回if (S.length <= 1) return (payMuch.value = "0");//否则删除最后一个payMuch.value = S.substring(0, S.length - 1);}async function toPayMethods(){const {data,result,msg} = await preferentialPay({// 处理你需要处理的支付逻辑})}function showTotal(e) {uni.showToast({title: e,icon: 'none',duration: 2000,mask: true})}function confirmOrder() {var val = payMuch.value;if (val && val > 0) {payPrice.value = val;toPayMethods();confirmOrderStatus.value = true;isdisabled.value = true;} else {showTotal('请输入正确的付款金额！')confirmOrderStatus.value = false;isdisabled.value = false;}}
</script><style lang="scss" scoped>.container {.info {display: flex;align-items: center;justify-content: center;padding-top: 40upx;.img {background: greenyellow;width: 80upx;height: 80upx;border-radius: 50%;}.name {font-weight: bold;font-size: 32upx;color: #323233;line-height: 48upx;padding-left: 20upx;}}.inputBox {// margin-top: 20upx;width: 90vw;min-height: 100upx;background: #fff;border: 0.0625upx solid #999;// border-radius: 0.375rem;margin: 40upx auto;padding: 0 12upx;line-height: 100upx;.concent {.insideBox {display: flex;align-items: center;justify-content: space-between;width: 100%;.title {// display: flex;width: 160upx;font-weight: 500;font-size: 40upx;color: #323233;line-height: 36upx;text-align: right;opacity: 0.6;}.price {display: flex;align-items: flex-end;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;.value {font-weight: 500;font-size: 30upx;color: #323233;text-align: left;}.number {font-weight: 500;font-size: 48upx;color: #323233;text-align: left;&:last-child {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 450upx;}}}}}}.btn {background: #fff;position: fixed;bottom: 0;.btn_box {border-top: solid 0.0625rem #ccc;.line_one {display: flex;button {width: 5.8125rem;// height: 3.75rem;font-size: 2rem;background: none;color: #333;border-radius: 0;padding: 0;border: none;border-right: solid 0.0625rem #ccc;}button:last-child {border-right: none;}}.btn_bottom {.line_two {display: flex;.line-left {.line_box {.line_two {display: flex;border-top: solid 0.0625rem #ccc;button {width: 5.8rem;// height: 3.75rem;font-size: 2rem;background: none;color: #333;border-radius: 0;padding: 0;border: none;border-right: solid 0.0625rem #ccc;}button:last-child {border-right: none;}}.line_three {border-top: solid 0.0625rem #ccc;display: flex;button {width: 5.8rem;// height: 3.75rem;font-size: 2rem;background: none;color: #333;border-radius: 0;padding: 0;border: none;border-right: solid 0.0625rem #ccc;}button:last-child {border-right: none;}}.line_four {display: flex;border-top: solid 0.0625rem #ccc;button {width: 5.8rem;// height: 3.75rem;font-size: 2rem;background: none;color: #333;border-radius: 0;padding: 0;border: none;border-right: solid 0.0625rem #ccc;}button:last-child {border-right: none;}}}}.line-right {button {width: 6rem;height: 100%;padding: 0;border-radius: 0;font-size: 1.375rem;line-height: 6.375rem;}}}}}}}
</style>
)
