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">
	@import 'cc-payKeyboard.scss';
</style>

2.引用

javascript 复制代码

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

<view>
<view>
<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>


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)
			
		}
		// 判断是否等于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();
	}