uni-app 自定义支付密码键盘

在这里插入图片描述
1.新建组件 payKeyboard .vue

javascript"><template>
	<view class="page-total" v-show="isShow">
		<view class="key-list">
			<view class="list" v-for="(item,index) in keyList" 
			:class="{'special':item.keyCode==190||item.keyCode==8,'payMoney':item.keyCode==88}"
			@click="onKeyList(item,index)"
			:key="item.keyCode">
				<text>{{item.key}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShow: false,
				keyList: [
					{
						key: 1,
						en: '',
						keyCode: 49,
					},{
						key: 2,
						en: 'ABC',
						keyCode: 50,
					},{
						key: 3,
						en: 'ABC',
						keyCode: 51,
					},{
						key: 4,
						en: 'ABC',
						keyCode: 52,
					},{
						key: 5,
						en: 'ABC',
						keyCode: 53,
					},
					
					{
						key: 6,
						en: 'ABC',
						keyCode: 54,
					},{
						key: 7,
						en: 'ABC',
						keyCode: 55,
					},{
						key: 8,
						en: 'ABC',
						keyCode: 56,
					},
					{
						key: '删除',
						en: 'Del',
						keyCode: 8,
					},
					{
						key: 9,
						en: 'ABC',
						keyCode: 57,
					},{
						key: 0,
						en: 'ABC',
						keyCode: 48,
					},{
						key: '确定',
						en: 'Pay',
						keyCode: 88,
					},
				],
				keyIndex: -1,
			};
		},
		props:{
			passwrdType: {
				type: String,
				default: 'pay'
			}
		},
		methods:{
			show(){
				this.isShow = true;
			},
			hide(){
				this.isShow = false;
			},
			/**
			 * 密码键盘按下
			 * @param {Object} item
			 * @param {Number} index
			 */
			onKeyList(item,index){
				let KeyInfo = item;	
				// 删除键
				if(KeyInfo.keyCode === 8 && this.keyIndex > -1){
					this.keyIndex--;
				}
				// 不是删除键
				if(KeyInfo.keyCode != 8){
					if(this.passwrdType == 'pay' && this.keyIndex >= 5){
						console.log('键盘');
						this.keyIndex = -1;
						return;
					}else{
						this.keyIndex = -1;
					}
					this.keyIndex++;
				}
				KeyInfo.index = this.keyIndex;
				this.$emit('KeyInfo',KeyInfo);
			}
		}
	}
</script>

<style scoped lang="scss">
	.page-total{
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	z-index:99999;
	background-color: #f6f6f6;
}

.key-list{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: 1% 3%;
	height: 90%;
	margin-top: 20rpx;
	.list{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 32%;
		height: 92rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		box-shadow: 0 0 10rpx rgba(0,0,0,0.1);
		margin-right: 1.7%;
		margin-bottom: 16rpx;
		text{
			font-size: 38rpx;
			font-weight: bold;
			color: #222222;
		}
	}
	.list:nth-child(3n){
		margin-right: 0;
	}
	.special{
		background-color: #f6f6f6;
		box-shadow: none;
		text{
			color: #959595;
		}
	}
	.payMoney{
		background:#F4CA11;
		text{
			color: #fff;
		}
	}
}
</style>

2.引用

javascript">



<view cclass="page">
<view class="pay-title">
<text v-show="AffirmStatus === 1">请设置6位支付密码</text>
<text v-show="AffirmStatus >= 2">请确认6位支付密码</text>
</view>
<view class="pay-password" @click="onPayUp" >
			<view class="list">
				<text v-show="passwordArr.length >= 1">●</text>
			</view>
			<view class="list">
				<text v-show="passwordArr.length >= 2">●</text>
			</view>
			<view class="list">
				<text v-show="passwordArr.length >= 3">●</text>
			</view>
			<view class="list">
				<text v-show="passwordArr.length >= 4">●</text>
			</view>
			<view class="list">
				<text v-show="passwordArr.length >= 5">●</text>
			</view>
			<view class="list">
				<text v-show="passwordArr.length >= 6">●</text>
			</view>
		</view>
	</view>
	<PayKeyboard ref="codeKeyboard" passwrdType="pay" @KeyInfo="KeyInfo"></PayKeyboard >
</view>


import PayKeyboard  from "@/components/payKeyboard.vue"


const codeKeyboard = ref(null)
	const passwordArr = ref([])
	const newPasswordArr = ref("")
	const AffirmStatus = ref("")
	const passwordArr = ref([])
//支付密码
	function onPayUp() {
		codeKeyboard.value.show();
	}
	/**
	 * 支付键盘回调
	 * @param {Object} val
	 */
	function KeyInfo(val) {
		if (val.index >= 6) {
			return;
		}
		// 判断是否输入的是删除键
		if (val.keyCode === 8) {
			// 删除最后一位
			passwordArr.value.splice(val.index + 1, 1)
		}
		// 判断是否输入的是.
		else if (val.keyCode == 190) {
			// 输入.无效
		} else {
			if(passwordArr.value.length<=6){
				passwordArr.value.push(val.key);
			}
		}
		if (val.keyCode == 88) {
			let pass = parseInt(passwordArr.value.join(""));
			console.log(pass)
			//点击确定的接口
			/*payPassword({
				a: pass
			}).then(res => {
				if (res.code == 200) {
				}
			})*/
		}
		// 判断是否等于6
		if (this.passwordArr.length === 6) {
			if (AffirmStatus.value === 1) {
	
				setTimeout(() => {
					passwordArr.value = [];
					AffirmStatus.value = AffirmStatus.value + 1;
					codeKeyboard..value.hide()
				}, 500)
			}
		}
		// 判断到哪一步了
		if (AffirmStatus.value === 1) {
			oldPasswordArr.value = parseInt(passwordArr.value.join(""));
		} else if (AffirmStatus.value >= 2) {
			afPasswordArr.value = parseInt(passwordArr.value.join(""));
			if (this.passwordArr.length === 6) {
			}
		}
		
		this.$forceUpdate();
	}

<style scoped lang="scss">
	.page {
		/* #ifdef H5 */
		margin-top: 44px;
		/* #endif */
		/* #ifdef APP-PLUS */
		margin-top: calc(44px + var(--status-bar-height));
		/* #endif */
		background: #fff;
	}

	.pay-title {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 200rpx;

		text {
			font-size: 28rpx;
			color: #555555;
		}
	}

	.pay-password {
		display: flex;
		align-items: center;
		width: 90%;
		height: 80rpx;
		margin: 20rpx auto;
		border: 2rpx solid #999;

		.list {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 16.666%;
			height: 100%;
			border-right: 2rpx solid #999;

			text {
				font-size: 32rpx;
			}
		}

		.list:nth-child(6) {
			border-right: none;
		}
	}
</style