当前位置：首页 > news >正文

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

news 2025/7/15 0:46:32

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

<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.引用

<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) {}})*/}// 判断是否等于6if (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