guosen-ldt-shop/components/amountInput/amountInput.vue

<template>
	<view class="keyboard-main" :style="{height:height+'px'}">
		<view class="mask" @click.stop="hide" v-if="isShow"></view>
		<view class='keyboard' :style="'margin-bottom:'+safeAreaBottom+'rpx'" :class="{noPadding:!isShow}">
			<view class='key-row' v-if="isShow">
				<view class='key-cell key-cell-num' @click.stop='_handleKeyPress(1)'>1</view>
				<view class='key-cell key-cell-num' @click.stop='_handleKeyPress(2)'>2</view>
				<view class='key-cell key-cell-num' @click.stop='_handleKeyPress(3)'>3</view>
				<view class='key-cell  last-child' @click.stop="_handleKeyPress('delete')">
					<image class="icon" src="../../static/icon/del.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class='key-row' v-if="isShow">
				<view class='key-cell key-cell-num' @click.stop='_handleKeyPress(4)'>4</view>
				<view class='key-cell key-cell-num' @click.stop='_handleKeyPress(5)'>5</view>
				<view class='key-cell key-cell-num' @click.stop='_handleKeyPress(6)'>6</view>
				<view class='key-cell last-child'></view>
			</view>
			<view class='key-row' v-if="isShow">
				<view class='key-cell key-cell-num' @click.stop='_handleKeyPress(7)'>7</view>
				<view class='key-cell key-cell-num' @click.stop='_handleKeyPress(8)'>8</view>
				<view class='key-cell key-cell-num' @click.stop='_handleKeyPress(9)'>9</view>
				<view class='key-cell last-child '></view>
			</view>
			<view class="key-zero-and-point" v-if="isShow">
				<view class="a zero key-cell-num" @click.stop='_handleKeyPress(0)'>0</view>
				<view class="a point key-cell-num" @click.stop="_handleKeyPress('.')">.</view>
				<view class='a last-child'>
				</view>
			</view>

			<view class='key-confirm key-cell-num' :class="{big:isShow,frist:fristShow}" :style="{'background':btnColor}"
				@click.stop="_handleKeyPress('confirm')">
				{{confirmText.substring(0,2)}}
			</view>

			<view v-if="!isShow">
				<view class="" style="height: 90rpx;"></view>
				<view  class="footer-fixed center" style="bottom: 14%;">
					<view @click="_handleKeyPress('confirm')" class="cu-btn df radius " :style="{'background':btnColor}" style="color: #FFFFFF;width: 90%;height: 90rpx;">
						{{confirmText}}
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		name: "keyBoard",
		props: {
			confirmText: {
				default: '充值',
				type: String
			},
			btnColor: {
				default: '#2B76EF',
				type: String
			},
			placeholder: {
				default: '请输入交易金额',
				type: String
			},
			currency: {
				default: '￥',
				type: String
			},
			maxNumber: {
				default: 10000000,
				type: Number
			},
			fontSize: {
				type: [String, Number],
				default: 30
			},
			isBold: {
				type: Boolean,
				default: true
			},
			isFilter: {
				type: Boolean,
				default: true
			},
		},
		data() {
			return {
				fristShow: true,
				isShow: false,
				size: 0,
				height: 0,
				allWidth: 0,
				money: ''
			}
		},
		created() {
			
		},
		computed: {
			//ios底部安全区域
			safeAreaBottom() {
				let info = uni.getSystemInfoSync()
				let safe = 20
				if (
					info && ['devtools', 'ios'].includes(info.platform) &&
					info.statusBarHeight > safe
				) {
					return info.statusBarHeight - safe
				}
				return 0
			}
		},
		watch: {
			money(val) {
				this.$emit('change', val);
			}
		},
		methods: {
			initialMoney(data){
				this.money=data.toString()
			},
			show() {
				this.isShow = true;
			},
			hide() {
				this.isShow = false;
			},
			//处理按键
			_handleKeyPress(num) {
				uni.vibrateShort();
				if (num == -1) return false;
				switch (String(num)) {
					//小数点
					case '.':
						this._handleDecimalPoint();
						break;
						//删除键
					case 'delete':
						this._handleDeleteKey();
						break;
						//确认键
					case 'confirm':
						this._handleConfirmKey();
						break;
					default:
						this._handleNumberKey(num);
						break;
				}
			},
			//处理小数点函数
			_handleDecimalPoint() {
				//如果包含小数点，直接返回
				if (this.money.indexOf('.') > -1) return false;
				//如果小数点是第一位，补0
				if (!this.money.length) {
					this.money = '0.'
				} else {
					this.money = this.money + '.';
				}
			},
			//处理删除键
			_handleDeleteKey() {
				let S = this.money;
				//如果没有输入，直接返回
				if (!S.length) return false;
				//否则删除最后一个
				this.money = S.substring(0, S.length - 1);
			},
			//处理数字
			_handleNumberKey(num) {
				if (Number(this.money + num) > this.maxNumber) {
					uni.showToast({
						title:"不能超过最大交易金额",
						icon:"none"
					})
					return
				}
				let S = this.money;
				//如果有小数点且小数点位数不小于2
				if (S.indexOf('.') > -1 && S.substring(S.indexOf('.') + 1).length < 2)
					this.money = S + num;
				if (S.indexOf('.') > -1 && S.substring(S.indexOf('.') + 1).length >= 2)
					return
				//没有小数点
				if (!(S.indexOf('.') > -1)) {
					//如果第一位是0，只能输入小数点
					if (num == 0 && S.length == 0)
						this.money = '0.';
					else {
						if (S.length && Number(S.charAt(0)) === 0) return;
						this.money = S + num;
					}
				}
			},

			//提交
			_handleConfirmKey() {
				let S = this.money;
				//未输入
				if (!S.length || S == 0) {
					uni.showToast({
						title: this.placeholder,
						icon: 'none',
						duration: 1000
					});
					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);
				this.$emit('confirm', parseFloat(S)); //提交参数
			}
		}
	}
</script>

<style lang="less" scoped>
	.data-content {
		font-size: 32rpx;
		font-weight: 800;
		padding: 50rpx;
	}

	.keyboard-main {
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: flex-end;
		padding: 20rpx 0;
		box-sizing: initial;
		color: #1B1B1B;

		text {
			font-size: 24px;
			margin-right: 10px;
		}
	}

	.keyboard-content {
		width: 100%;
		height: 30px;
		position: relative;

		.placeholder {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			color: #c0c4cc;
			display: flex;
			justify-content: flex-start;
			align-items: flex-end;
		}

		.input {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			display: flex;
			justify-content: flex-start;
			align-items: flex-end;
			font-size: 30px;
			font-weight: bold;

			&.zIndex {
				z-index: 999;
			}

			#text {
				display: flex;
				justify-content: flex-start;
				align-items: flex-end;
			}

			.line {
				display: inline-block;
				width: 4rpx;
				height: 30px;
				border: 2rpx;
				background-color: #0063E5;
				margin-left: 8rpx;
				animation: cursorImg 1s infinite steps(1, start);

				@keyframes cursorImg {

					0%,
					100% {
						opacity: 0;
					}

					50% {
						opacity: 1;
					}
				}
			}
		}
	}

	.mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
	}

	.keyboard {
		flex: 1;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #f6f6f6;
		padding: 20rpx;
		transition: all 0.6s;
		z-index: 9;
		box-sizing: border-box;

		&.noPadding {
			padding: 0;
			bottom: -100%;
		}
	}

	.keyboard .key-row {
		display: flex;
		justify-content: space-between;
		display: -webkit-flex;
		position: relative;
		box-sizing: border-box;
	}

	.keyboard .key-cell {
		font-size: 18px;
		width: 160rpx;
		font-weight: 800;
		height: 90rpx;
		/* margin-right: 20rpx; */
		margin-bottom: 20rpx;
		background-color: #fff;
		border-radius: 4rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		&.last-child {
			/* margin-right: 0px; */
			width: 170rpx;
		}

		.icon {
			width: 50rpx;
			height: 40rpx;
		}
	}

	.keyboard .key-confirm {
		position: fixed;
		text-align: center;
		/* min-height: 100rpx; */
		width: 170rpx;
		padding: 20rpx 30rpx;
		border-radius: 6rpx;
		box-sizing: border-box;
		color: #FFFFFF;
		z-index: 10;
		right: 20rpx;
		top: calc(100vh - 280rpx);
		bottom: 200rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 20px;
		letter-spacing: 4px;
		font-weight: bold;
		transition: all 0.3s;

		&.big {
			right: 20rpx;
			bottom: 20rpx;
			padding: 0 30rpx;
			bottom: 20rpx;
		}

		&.frist {
			position: absolute;
			top: auto;
			right: 20rpx;
			height: 304rpx;
			bottom: 18rpx;
		}
	}

	.key-zero-and-point {
		display: flex;
		height: 80rpx;
		justify-content: space-between;
		align-items: center;
		font-size: 20px;
		font-weight: 800;

		.zero {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 340rpx;
			text-align: center;
			background-color: #fff;
			border-radius: 4rpx;
			height: 100%;
		}

		.point {
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #fff;
			border-radius: 4rpx;
			width: 160rpx;
			height: 100%;
		}

		.last-child {
			background-color: #fff;
			border-radius: 8rpx;
			width: 170rpx;
			height: 100%;
		}
	}

	.key-cell-num:active {
		color: white;
		background: black; //黑色
		opacity: 0.1; //这里重要，就是通过这个透明度来设置
	}

	// .a:active,.key-confirm2:active{
	// 	color: white;
	// 	background: black;  //黑色
	// 	opacity: 0.1;    //这里重要，就是通过这个透明度来设置
	// }
	#input-text {
		width: max-content;
		position: fixed;
		bottom: -200%;
	}
</style>