H5自定义数字支付键盘

模板文件

<template>
	<div class="keybraodNum">
		<!-- 支付金额 -->
		<div class="monenyBox">
			<div class="logoBox">
				<div class="image">
					<span class="iconfont icon-icon_A"></span>
				</div>
				<div class="shopName">商家名称</div>
			</div>
			<div class="monenyNum">
				<div class="payMoneny">支付金额</div>

				<div class="content_num">
					<div>￥</div>
					<div v-for="item in inputArray" :key="item" class="content_item">{{moneyNum[item-1]}}</div>
					<div class="blink"></div>
				</div>
			</div>
		</div>
		<!-- 支付方式 -->
		<div class="playSelete">
			<div>
				<section ref="txttype" class="selectPay" :class="brandFold==true?'openActive':''">
					<ul class="payBox">
						<li class="payWay" v-for="(item,index) in payList" @click="seletePay(index,item)">
							<div>
							<span class="iconfont iconMg-r" :class="item.cuIcon"></span>
							<span class="payNames">{{item.name}}</span>
							</div>
							<div>
								<span class="iconfont" :class="payIndex==index?'icon-radio':'icon-RadioButton'"></span>
							</div>
						</li>
					</ul>
				</section>
			</div>
			<div v-if="payList.length > 7 || nomore" v-on:click="changeFoldState" class="open">
				<span>{{brandFold?'更多支付方式':'收起'}}<i class="iconfont" :class="brandFold==false?'icon-shuangjiantoushang':'icon-shuangjiantouxia'"></i></span>
			</div>
		</div>
		 <Tips :isShow="isShow" :TipsText="TipsText" @closeDialogFather="getSonCancel"></Tips>
		<!-- 手机键盘 -->
		<div class="keyboardbox" v-if="brandFold">
			<div class="numkeyboard">
				<div class="num-area">
					<div class="row" v-for="(item,index) in numKeybordList" :key="index">
						<div :class="['item',ite===0?'z':'']" v-for="(ite,idx) in item" 
						  :key="idx" @click="input({num:ite})">{{ite}}</div>
					</div>
				</div>
				<div class="btn-area">
					<div :class="['item','del']"  @click="delNumFun">
						<span class="iconfont icon-yijianshanchu"></span>
					</div>
					<div class="confirem item"  @click="confirm">
						<div>立即</div>
						<div>支付</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

js部分

<script>
	import Tips from "@/components/tips.vue";
	export default {
		data() {
			return {
				inputArray: [1, 2, 3, 4, 5, 6], //输入金额的长度
				numKeybordList: [
					[1, 2, 3],
					[4, 5, 6],
					[7, 8, 9],
					[0, '.']
				],
				moneyNum: '',
				TipsText:'',
				showKeyboard:true,
				nomore: true,
				brandFold: false,
				isBlanced: true,
				show_key:false,
				isShow:false,
				payList: [{
						cuIcon: 'icon-weixinzhifu',
						id: 1,
						name: '微信支付',

					}, {
						cuIcon: 'icon-zhifubao',
						id: 2,
						name: '支付宝支付'
					}, {
						cuIcon: 'icon-py_yinlian',
						id: 3,
						name: '银联支付'
					}, {
						cuIcon: 'icon-yunshanfu',
						id: 4,
						name: '云闪付'
					},
					{
						cuIcon: 'icon-zhifujinge',
						id: 5,
						name: '其他支付'
					}
				],
				payIndex: 0, //默认选中第一个
				payName:'微信支付',
				isBlanced: true //用于取消选中
			};
		},
		mounted() {
			let hei = this.$refs.txttype.clientHeight;
			if (hei > 113) {
				this.brandFold = true
			} else if (hei == 113) {
				this.brandFold = false
				this.nomore = false
			}
		},
		methods: {
			getSonCancel(val){
			 this.isShow=val
			},
			confirm() {
				let exp = /^(([1-9]\d*)|\d)(\.\d{1,2})?$/;
				if(!exp.test(this.moneyNum)){
					this.isShow = true
					this.TipsText = "支付金额格式不对!"
				    return;
				}
				
			},
			delNumFun() {
				if (this.moneyNum.length == 0) return
				this.moneyNum = this.moneyNum.substring(0, this.moneyNum.length - 1)
			},
			input(op) {
				if (this.moneyNum.length <= 6) {
					this.moneyNum += op.num
					if (this.moneyNum.length == 6) {
						this.$emit('getmoneyNum', {
							moneyNum: this.moneyNum
						})

					}
				}

			},
			
			changeFoldState() {
				this.brandFold = !this.brandFold
			},
			seletePay(index, item) {
				this.payName = item.name
				this.isBlanced = !this.isBlanced;
				if (this.payIndex == index) {
					if (!this.isBlanced) {
						this.payIndex = -1;
					} else {
						this.payIndex = index;
					}
				} else {
					this.payIndex = index;
				}
			},
		},
		components:{
			Tips
		}
	}
</script>

css部分

<style lang="scss" scoped>
	.monenyBox {

		margin: 0 auto;
		background-color: #fff;
		padding: 1rem 0.5rem 1rem;

		.logoBox {
			display: flex;
			flex-direction: row;
			align-items: center;

			.image {
				width: 1.5rem;
				height: 1.5rem;

				
			}

			.shopName {
				margin-left: 0.5rem;
				font-size: 0.8rem;
			}
		}

		.monenyNum {
			background-color: #ccc;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 1rem 0.5rem;
			margin-top: 1rem;
			height: 1.5rem;

			.payMoneny {
				font-size: .8rem;
			}

			.content_num {
				display: flex;
				align-items: center;
				flex-direction: row;

				.content_item {
					font-size: 1.3rem;
				}

				.blink {
					animation: 1s blink infinite;
					border: none;
					margin: 0;
					height: 1.2rem;
					width: 2px;
					// position:absolute;
					// left:174px;
					// top:5px;
					z-index: 1;
				}
			}
		}
	}

	// 支付方式
	.playSelete {
		margin: 0.3rem auto;
		background-color: #fff;
		padding: .5rem 0.5rem .5rem;

		.selectPay {

			.payBox {
				padding: 0px;
				margin: 0px;

				.payWay {
					height: 2rem;
					display: flex;
					box-sizing: border-box;
					font-size: .7rem;
					align-items: center;
					justify-content: space-between;
					align-items: center;
					line-height: 2rem;

					.iconMg-r {
						margin-right: 0.1rem;
					}
					.payNames{
						position: relative;
						top:-2px;
					}
					.active {
						color: #1989fa;
					}
				}
			}
		}

		.openActive {
			height: 6rem;
			overflow: hidden;
		}

		.open {
			text-align: center;
			font-size: .7rem;
			color: #1989fa;
		}
	}

	.keyboardbox {
		background-color: #f0f0f0;
		position: fixed;
		bottom: 0px;
		// top:0px;
		left: 0px;
		right: 0px;
		z-index: 100;

		.numkeyboard {
			height: 11rem;
			display: flex;
			background-color: #ebedf0;

			.btn-area {
				width: 5rem;
				height: 11rem;
				display: flex;
				flex-direction: column;
				margin-right: 0.2rem;

				.item {
					width: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-grow: 1;

				}

				.del {
					background-color: #fff;
					color: #000;
					height: 10%;
					border-radius: 0.5rem;
					margin-bottom: 0.32rem;

					&.active {
						background-color: #f1f3f5;
					}
				}

				.confirem {
					background-color: #1989fa;
					color: #FFFFFF;
					height: 6.7rem;
					border-radius: 0.5rem;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin-bottom: 0.35rem;

					&.active {
						background-color: #0570db;
					}
				}
			}

			.num-area {
				flex-grow: 1;
				display: flex;
				flex-wrap: wrap;

				.row {
					width: 98.5%;
					height: 25%;
					display: flex;
					// margin-top: 1px;

					.item {
						flex-grow: 1;
						height: 2.4rem;
						display: flex;
						justify-content: center;
						align-items: center;
						background-color: #FFFFFF;
						border-right: 1px solid #ebedf0;
						width: 32.5%;
						font-size: 1rem;
						font-weight: 600;
						border-radius: 0.5rem;
						margin-left: 0.2rem;

						&.active {
							background-color: #ebedf0;
						}

						&.z {
							flex-grow: 2;
							width: 66.66%;
						}

						&.disabled {
							background: #FFFFFF;
							color: #B9B9B9;
						}
					}
				}

			}
		}
	}

	@keyframes blink {
		50% {
			color: #000;
			background: #0570db;
			opacity: .5;
		}
	}
</style>