oil-station/gasStation-uni/components/keyboard/keyboard.vue

<template>
	<view>
		<view>
			<view style="text-align: center;height: 50px;font-size: 20px;line-height: 50px;">{{value}}</view>
			<view class="key-bom">
				<view class="wrap">
					<view class="key-line">
						<view class="key-num" @click="valChange(1)">1</view>
						<view class="key-num" @click="valChange(2)">2</view>
						<view class="key-num" @click="valChange(3)">3</view>
					</view>
					<view class="key-line">
						<view class="key-num" @click="valChange(4)">4</view>
						<view class="key-num" @click="valChange(5)">5</view>
						<view class="key-num" @click="valChange(6)">6</view>
					</view>
					<view class="key-line">
						<view class="key-num" @click="valChange(7)">7</view>
						<view class="key-num" @click="valChange(8)">8</view>
						<view class="key-num" @click="valChange(9)">9</view>
					</view>
					<view class="key-line">
						<view class="key-zero" @click="valChange(0)">0</view>
						<view class="key-num" @click="valChange('.')">.</view>
					</view>
				</view>
				<view class="wrap2">
					<view class="key-back" @click="backspace"><u-icon name="backspace" size="28"></u-icon></view>
					<view v-if="pApplt=='WECHAT'" class="key-pay" @click="choosePayMethod">支付</view>
					<view v-else class="key-pay1" @click="choosePayMethod">支付</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:['pApplt'],
		data() {
			return {
				value:"",
				// 小程序类型：WECHAT 微信 ALIPAY 支付宝
				appltType:"WECHAT",
			}
		},
		onLoad() {
			this.appltType = this.pApplt
		},
		methods: {
			valChange(val) {
				// 将每次按键的值拼接到value变量中，注意+=写法
				uni.vibrateShort({
					success: function () {}
				});
				let index = this.value.indexOf(".")
				if(index!=-1){
					if ((this.value.length-index)>=3){
						return;
					}
					
				}else{
					if (this.value.length>=7 && val!="."){
						return;
					}
				}
				this.value += val;
				// console.log(this.value.indexOf("."),this.value.length-index)
				this.$emit('amount', this.value);
				// console.log(this.value);
			},
			// 退格键被点击
			backspace() {
				// 删除value的最后一个字符
				if (this.value.length) this.value = this.value.substr(0, this.value.length - 1);
				this.$emit('backVal', this.value);
				uni.vibrateShort({
					success: function () {}
				});
				// console.log(this.value);
			},
			// 选择支付方式
			choosePayMethod(){
				uni.vibrateShort({
					success: function () {}
				});
				this.$emit('isPay', true);
			},
		}
	}
</script>

<style scoped lang="scss">
	.key-bom{
		display: flex;
		justify-content: space-around;
		background-color: gainsboro;
		margin-bottom: 20px;
	}
	.wrap{
		width: 73%;
	}
	.key-line{
		width: 100%;
		height: 45px;
		line-height: 45px;
		display: flex;
		justify-content: space-around;
		margin: 5px 0;
	}
	.key-num{
		width: 31%;
		text-align: center;
		background-color: white;
		border-radius: 5px;
	}
	.key-zero{
		width: 64%;
		text-align: center;
		background-color: white;
		border-radius: 5px;
	}
	.wrap2{
		width: 24%;
	}
	.key-back{
		width: 96%;
		height: 45px;
		line-height: 45px;
		background-color: white;
		border-radius: 5px;
		margin: 5px 0;
		padding-top: 10%;
		padding-left: 30%;
		box-sizing: border-box;
	}
	.key-pay{
		width: 96%;
		height: 145px;
		line-height: 145px;
		text-align: center;
		background-color: #1fbe1d;
		//background-color: #2773fc;
		color: white;
		border-radius: 5px;
		margin: 5px 0;
	}
	.key-pay1{
		width: 96%;
		height: 145px;
		line-height: 145px;
		text-align: center;
		// background-color: #1fbe1d;
		background-color: #2773fc;
		color: white;
		border-radius: 5px;
		margin: 5px 0;
	}
</style>