用css绘制收银键盘

最近需求说需要自己弄个收银键盘，于是乎直接上手搓

主要基于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;
		//如果有小数点且小数点位数不小于2
		if (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.00
		if (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;
		//如果小数点是第一位，补0
		if (!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>