uniapp余额银行卡支付密码界面实现(直接复制)

示例：

插件地址：自定义数字/身份证/密码输入框，键盘密码框可分离使 - DCloud 插件市场

1.下载插件并导入HBuilderX，找到文件夹，copy number-keyboard.vue一份为number-keyboard2.vue（number-keyboard.vue是键盘，password-input.vue是密码输入框）

、

2.修改插件键盘和密码框样式，已写好，直接copy下面代码

password-input.vue

<template><view class="psdIptBx"><block v-for="(item , index) in psdIptNum" :key='index'><view class="psdTtem"><text v-if="numLng.length > index" class="psdTtemTxt"><text v-if="plaintext">●</text><text v-else>{{numLng[index]}}</text></text><text v-if="numLng.length ==index" class="focus_move">|</text></view></block></view>
</template><script>export default {props: {//是否明文 默认密文plaintext: {type: Boolean,default: true},//键盘输入的valnumLng: {type: [String, Number],default: ''},//密码框的个数psdIptNum: {type: [String, Number],default: 6}},data() {return {}},created() {},methods: {}}
</script><style scoped>.psdIptBx {display: flex;justify-content: space-between;width: 100%;text-align: center;box-sizing: border-box;}.psdTtem {width: 86rpx;height: 86rpx;background: #F2F2F2;border-radius: 20rpx 20rpx 20rpx 20rpx;}.psdTtemTxt {text-align: center;line-height: 80rpx;font-size: 30rpx;}.focus_move {/* color: #E6240F; */font-size: 30rpx;line-height: 80rpx;animation: focus 0.8s infinite;}@keyframes focus {from {opacity: 1;}to {opacity: 0;}}
</style>

number-keyboard.vue

<template><view :class="['KeyboarBody','bottomMove', 'bodMove', bodMove]" v-if="KeyboarHid"><view @click="close" class="dowmImgBx"><view class="dowmImg"></view><view v-if="confirmBtn" class="complete" @click.stop="complete">完成</view></view><view class="KeyboarBx"><view v-for="(num , index) in keyboardNum " :key='index' @click="clickBoard(num)" hover-class="hover":hover-stay-time='20' class="keyboar">{{num}}</view><view @click="clickBoard(otherNum)" :class="['keyboar',otherNum==''?'empty':'']" :hover-stay-time='20'hover-class="hover">{{otherNum}}</view><view @click="clickBoard('0')" hover-class="hover" :hover-stay-time='20' class="keyboar">0</view><view @click="deleteKeyboar()" class="keyboar keyboarflex" :hover-stay-time='20' hover-class="hover"><view class="keyboarDel"></view></view></view></view>
</template><script>export default {props: {//限制输入框的长度 空值不限制psdLength: {type: [Number, String],default: ''},//键盘码keyboardNum: {type: [Array, Object],default: () => {return [1, 2, 3, 4, 5, 6, 7, 8, 9]}},//特殊键盘码 .或者X  默空otherNum: {type: String,default: ''},//是否显示完成按钮confirmBtn:{type: Boolean,default: false},//是否在需要打开键盘时隐藏底部tabBar关闭键盘展示tabBar功能tabBar: {type: Boolean,default: false},value: {type: String,default: ''}},data() {return {bodMove: '',password: '', //要返回的结果iptNum: [], //输入的内容KeyboarHid: false, //键盘影藏和显示}},watch: {iptNum(newVal, oldVal) {this.$emit('input', newVal.join(''))},value(newVal, oldVal) {this.iptNum = newVal.split('')}},created() {},methods: {open() {this.KeyboarHid = true;if (this.tabBar) {uni.hideTabBar()}this.$nextTick(() => {setTimeout(() => {this.bodMove = 'moveShow'}, 30)})},close() {if (this.tabBar) {uni.showTabBar()}this.bodMove = '';this.$nextTick(() => {setTimeout(() => {this.KeyboarHid = false}, 300)})},// 密码框clickBoard(num) {if (num == '') return;let iptNum = this.iptNum.filter(item => item != '');//判断是否限制长度if (this.psdLength != '') {if (iptNum.length >= this.psdLength) {return};this.iptNum.push(num);} else {this.iptNum.push(num);}},//完成complete(){this.$emit('confirm', this.iptNum.join(''))},//重置 清空reset() {this.iptNum = [];},//删除deleteKeyboar() {this.iptNum.pop();}}}
</script><style scoped>.bodMove {transition: all .3s}.bottomMove {bottom: 0;left: 0;width: 100%;transform: translateY(100%)}.moveShow {transform: translateY(0)}.KeyboarBody {position: fixed;bottom: 0;left: 0;right: 0;z-index: 99;background-color: #FFFFFF;}.KeyboarBx {display: flex;flex-wrap: wrap;text-align: center;background-color: rgba(3, 3, 3, 0.1);padding: 10rpx 6rpx 0rpx 6rpx;margin-left: -12rpx;}.keyboar {width: 20%;flex-grow: 1;padding: 3%;font-size: 40rpx;background-color: #FFFFFF;border-radius: 10rpx;margin-left: 12rpx;margin-bottom: 10rpx;}.dian {margin-top: -10rpx;}.keyboarBtn {background: linear-gradient(45deg, rgba(242, 131, 9, 1) 0%, rgba(230, 36, 15, 1) 100%);color: #fff;}.hover {background: #ebedf0;}.bot {bottom: 0;}.empty {background-color: #EEEEEE;}.dowmImgBx {display: flex;justify-content: center;align-items: center;width: 100%;position: relative;}.complete {position: absolute;right: 0rpx;bottom: 5rpx;font-size: 28rpx;padding-right: 30rpx;padding-left: 20rpx;}.dowmImg {width: 35rpx;height: 35rpx;margin-bottom: 10rpx;background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACT0lEQVRYR+2UPWgTYRjH/8/dpdZCpVhU/BoEB8FBEBFt7tJe7i5CbAXhrg6CQ8HBQXAQHBzq5CA4CA4OgoNgr0GQIhQTUkJqCPEDBEEQBAdBQSoVlIakXvLIofmopMnlizjkxuN9nt/v/b/v+xB6/FGP+egL9BPoJ/D/JLC8/Hp33sl9AXDOCMqRbsyH6NLzGwLR7BapuDMQCKy4jHICi5nMNinrpAk4DOC8EZQfdVKiBGemxyHNb5V6bziCaDRxSPT5bAaOCAJd0Cb8DzshUYIT4cnqit+anqZCTQH357NE+qDIhXmAjoJpxtD8D9qRqOwcT538DyscDuer+9W8hNFo8oDok2wGHxcIFzVVvt+KRAkOYDG3NmhNTR3L/ttn01eQTL7cv+6sz4NwkhmXQpp8rxmJ8s6B2NAATFmWf9aqr/sMY7HUHsEHmxkKGJcNTb7rRaKyc1rKZ4vW5KTyfbO6hnMgHo/vYmHQBjBBxFd0VblTT6IC56REjqmq6rd66xsKuMXx+ItRFn/ZYOhMfDWkKrdrNa068xQVJVPXT3xtlJgnAbdJIpEYcViyATpFoGt60H+runkVPCOwYGra2OdG8A2DyMvihYXU8NAwzQF8moDrelC+6daV4YRXcNg0DOWTl35NC7gF6XR661qu6N6JMwzMMrPgjlcw3hCzqevKR6/wlgTcokjk3cDI6KpNRGf/wt6yWDBD4+MfmoG3LPBHIiJu37F3jsH7JAgzqjr2vll4WwKtwJoeRJ2CtD0HuinieQ50S6Iv0E+g5wn8Bo+vyyFXaYw2AAAAAElFTkSuQmCC');background-repeat: no-repeat;background-position: center center;background-size: 100%;}.keyboarDel {width: 50rpx;height: 36rpx;margin-bottom: 10rpx;background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABqUlEQVRYR+2WPUvEQBCGZze1/8DKUnsrEcVaLhvwCgULCy1sLGzFE8RKC0EsBLGwEBRuhmChlTb+hCu0vU4Ff4H3SkKCOS4fezHnNUkXQuZ58s7sbhSN+VJj5lMtUCdglYDrurNKqSMiWqpoaD+IaI6Z3woFjDErRHRJRBMVweMyz8y8mCsQwW8rBtsJjBgeSGQn8A/wbAFbOIBHpdQnEa2ltKijlHoBsJnTvsEEbOFR0SYz37mu21JK7SdAnV6v1wzutdYda4Eh4XHdDWa+Skgk4cHwzlgJlISHtQHsiMhpIAEgXDFa6yL47wx4njcJoPuXpQZgT0QOG43GtCW8fwiNMYFxsOGUucLYAXz7vv+aMhNZNfuHsKRECHcc5wvAAxFdM/OxpUTqKhgmifjLu47j3BPRfDQTWyJyYSGRvhHZJgHgQERanuf5AJaTOQNYFZEbY8wTES1k9CB3JxwmiTJzk78VB09tkyhLzz0L4qIjlig+jkechJ1AJHFGRNt/iHvgVQC7InJS+EeUaMc6gKkqJLTW7+12+zyoZS1QBTitRi1QJzD2BH4AtrHfITKVMwgAAAAASUVORK5CYII=');background-repeat: no-repeat;background-position: center center;background-size: 100%;margin-top: 11rpx;}.keyboarflex {display: flex;justify-content: center;align-items: center;}
</style>

number-keyboard2.vue

<template><view :class="['KeyboarBody','bottomMove', 'bodMove', bodMove]" v-if="KeyboarHid"><view class="KeyboarBx"><view v-for="(num , index) in keyboardNum " :key='index' @click="clickBoard(num)" hover-class="hover":hover-stay-time='20' class="keyboar">{{num}}</view><view @click="clickBoard(otherNum)" :class="['keyboar',otherNum==''?'empty':'']" :hover-stay-time='20'hover-class="hover">{{otherNum}}</view><view @click="clickBoard('0')" hover-class="hover" :hover-stay-time='20' class="keyboar">0</view><view @click="deleteKeyboar()" class="keyboar keyboarflex" :hover-stay-time='20' hover-class="hover"><view class="keyboarDel"></view></view></view></view>
</template><script>export default {props: {//限制输入框的长度 空值不限制psdLength: {type: [Number, String],default: ''},//键盘码keyboardNum: {type: [Array, Object],default: () => {return [1, 2, 3, 4, 5, 6, 7, 8, 9]}},//特殊键盘码 .或者X  默空otherNum: {type: String,default: ''},//是否显示完成按钮confirmBtn:{type: Boolean,default: false},//是否在需要打开键盘时隐藏底部tabBar关闭键盘展示tabBar功能tabBar: {type: Boolean,default: false},value: {type: String,default: ''}},data() {return {bodMove: '',password: '', //要返回的结果iptNum: [], //输入的内容KeyboarHid: false, //键盘影藏和显示}},watch: {iptNum(newVal, oldVal) {this.$emit('input', newVal.join(''))},value(newVal, oldVal) {this.iptNum = newVal.split('')}},created() {},methods: {open() {this.KeyboarHid = true;if (this.tabBar) {uni.hideTabBar()}this.$nextTick(() => {setTimeout(() => {this.bodMove = 'moveShow'}, 30)})},close() {if (this.tabBar) {uni.showTabBar()}this.bodMove = '';this.$nextTick(() => {setTimeout(() => {this.KeyboarHid = false}, 300)})},// 密码框clickBoard(num) {if (num == '') return;let iptNum = this.iptNum.filter(item => item != '');//判断是否限制长度if (this.psdLength != '') {if (iptNum.length >= this.psdLength) {return};this.iptNum.push(num);} else {this.iptNum.push(num);}},//完成complete(){this.$emit('confirm', this.iptNum.join(''))},//重置 清空reset() {this.iptNum = [];},//删除deleteKeyboar() {this.iptNum.pop();}}}
</script><style scoped>.bodMove {transition: all .3s}.bottomMove {bottom: 0;left: 0;width: 100%;transform: translateY(100%)}.moveShow {transform: translateY(0)}.KeyboarBody {background-color: #FFFFFF;}.KeyboarBx {display: flex;flex-wrap: wrap;text-align: center;background-color: rgba(3, 3, 3, 0.1);padding: 10rpx 6rpx 0rpx 6rpx;margin-left: -12rpx;}.keyboar {width: 20%;flex-grow: 1;padding: 3%;font-size: 40rpx;background-color: #FFFFFF;border-radius: 10rpx;margin-left: 12rpx;margin-bottom: 10rpx;}.dian {margin-top: -10rpx;}.keyboarBtn {background: linear-gradient(45deg, rgba(242, 131, 9, 1) 0%, rgba(230, 36, 15, 1) 100%);color: #fff;}.hover {background: #ebedf0;}.bot {bottom: 0;}.empty {background-color: #EEEEEE;}.dowmImgBx {display: flex;justify-content: center;align-items: center;width: 100%;position: relative;}.complete {position: absolute;right: 0rpx;bottom: 5rpx;font-size: 28rpx;padding-right: 30rpx;padding-left: 20rpx;}.dowmImg {width: 35rpx;height: 35rpx;margin-bottom: 10rpx;background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACT0lEQVRYR+2UPWgTYRjH/8/dpdZCpVhU/BoEB8FBEBFt7tJe7i5CbAXhrg6CQ8HBQXAQHBzq5CA4CA4OgoNgr0GQIhQTUkJqCPEDBEEQBAdBQSoVlIakXvLIofmopMnlizjkxuN9nt/v/b/v+xB6/FGP+egL9BPoJ/D/JLC8/Hp33sl9AXDOCMqRbsyH6NLzGwLR7BapuDMQCKy4jHICi5nMNinrpAk4DOC8EZQfdVKiBGemxyHNb5V6bziCaDRxSPT5bAaOCAJd0Cb8DzshUYIT4cnqit+anqZCTQH357NE+qDIhXmAjoJpxtD8D9qRqOwcT538DyscDuer+9W8hNFo8oDok2wGHxcIFzVVvt+KRAkOYDG3NmhNTR3L/ttn01eQTL7cv+6sz4NwkhmXQpp8rxmJ8s6B2NAATFmWf9aqr/sMY7HUHsEHmxkKGJcNTb7rRaKyc1rKZ4vW5KTyfbO6hnMgHo/vYmHQBjBBxFd0VblTT6IC56REjqmq6rd66xsKuMXx+ItRFn/ZYOhMfDWkKrdrNa068xQVJVPXT3xtlJgnAbdJIpEYcViyATpFoGt60H+runkVPCOwYGra2OdG8A2DyMvihYXU8NAwzQF8moDrelC+6daV4YRXcNg0DOWTl35NC7gF6XR661qu6N6JMwzMMrPgjlcw3hCzqevKR6/wlgTcokjk3cDI6KpNRGf/wt6yWDBD4+MfmoG3LPBHIiJu37F3jsH7JAgzqjr2vll4WwKtwJoeRJ2CtD0HuinieQ50S6Iv0E+g5wn8Bo+vyyFXaYw2AAAAAElFTkSuQmCC');background-repeat: no-repeat;background-position: center center;background-size: 100%;}.keyboarDel {width: 50rpx;height: 36rpx;margin-bottom: 10rpx;background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABqUlEQVRYR+2WPUvEQBCGZze1/8DKUnsrEcVaLhvwCgULCy1sLGzFE8RKC0EsBLGwEBRuhmChlTb+hCu0vU4Ff4H3SkKCOS4fezHnNUkXQuZ58s7sbhSN+VJj5lMtUCdglYDrurNKqSMiWqpoaD+IaI6Z3woFjDErRHRJRBMVweMyz8y8mCsQwW8rBtsJjBgeSGQn8A/wbAFbOIBHpdQnEa2ltKijlHoBsJnTvsEEbOFR0SYz37mu21JK7SdAnV6v1wzutdYda4Eh4XHdDWa+Skgk4cHwzlgJlISHtQHsiMhpIAEgXDFa6yL47wx4njcJoPuXpQZgT0QOG43GtCW8fwiNMYFxsOGUucLYAXz7vv+aMhNZNfuHsKRECHcc5wvAAxFdM/OxpUTqKhgmifjLu47j3BPRfDQTWyJyYSGRvhHZJgHgQERanuf5AJaTOQNYFZEbY8wTES1k9CB3JxwmiTJzk78VB09tkyhLzz0L4qIjlig+jkechJ1AJHFGRNt/iHvgVQC7InJS+EeUaMc6gKkqJLTW7+12+zyoZS1QBTitRi1QJzD2BH4AtrHfITKVMwgAAAAASUVORK5CYII=');background-repeat: no-repeat;background-position: center center;background-size: 100%;margin-top: 11rpx;}.keyboarflex {display: flex;justify-content: center;align-items: center;}
</style>

3.这里我用uview 2.0中的Popup弹出层写的弹窗,没用过的小伙伴，先安装uview
Popup 弹出层 | uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架

4.写一个弹出层，按钮demo

<template><view class="withdrawal"><view class="foot"><view class="submit" @click="submitTX">打开弹窗</view></view><u-popup :show="show" :round="24" mode="bottom" @close="close" :closeOnClickOverlay="true"><view class="windowBox"><image class="closeIcon" src="打叉按钮图片路径" @click="closeWindow"/><view class="windowtitle">请输入支付密码</view><view class="txmoney">提现金额</view><view class="pricesss"><view class="rmb">¥</view>{{money}}</view><view class="windowLine"></view><view class="windowWX"><view class="xtz">提现至</view><view class="bankNameBox"><image class="bankLogo" :src="selectObj.bank_logo_img" /><view class="bankName">{{selectObj.bank_name}}</view></view></view><view class="item" @tap='KeyboarOpen'><password-input :numLng='password'></password-input><view class="errMsg" v-if="errMsg">{{errMsg}}</view></view><number-keyboard tabBar ref='KeyboarHid' @input='onInput' psdLength='6'></number-keyboard></view></u-popup></view>
</template><script>
import numberKeyboard from '@/components/number-keyboard/number-keyboard2.vue';
import passwordInput from '@/components/password-input/password-input.vue';
export default {data () {return {money: '10',show: false,password: '',errMsg: '', //错误提示selectObj: {bank_logo_img: '', //银行图片路径，自己写bank_name: '' //银行名称，自己写},}},components: {numberKeyboard,passwordInput,},async onLoad(){},async onShow(){this.selectObj = {}},watch:{errMsg(newVal,oldVal){if(newVal){setTimeout(()=>{this.errMsg = ''},2000)}},},methods:{KeyboarOpen(e) {this.$refs.KeyboarHid.open();},//输入的值async onInput(val) {this.password = val;if(this.password.length == 6){// this.errMsg = '支付密码错误，请重新输入'console.log('当前输入的密码是',this.password);try{//这里写输入完正确密码后，调接口逻辑}catch(err){console.log('err',err);this.errMsg = err.msg // 错误提示可以根据接口返回的，也可以自己写 '密码错误等...'this.password = ''this.show = false}}},submitTX(){this.show = truesetTimeout(()=>{this.$refs.KeyboarHid.open();},50)},close(){this.show = falsethis.password = ''},open(){},closeWindow(){this.show = falsethis.password = ''this.errMsg = ''},}
}
</script><style lang='scss' scoped>
.withdrawal{min-height: 100vh;background-color: #f7f7f7;.foot{position: fixed;left: 0;bottom: 0;padding: 8rpx 26rpx 74rpx;box-sizing: border-box;background-color: #ffffff;.submit{width: 698rpx;height: 86rpx;line-height: 86rpx;text-align: center;background: #FF843E;border-radius: 44rpx 44rpx 44rpx 44rpx;font-weight: 500;font-size: 30rpx;color: #FFFFFF;}}
}.windowBox{position: relative;background-color: #fff;border-radius: 24rpx 24rpx 0rpx 0rpx;z-index: 200000000000;// padding: 50rpx 46rpx;.closeIcon{position: absolute;left: 46rpx;top: 50rpx;width: 30rpx;height: 30rpx;}.windowtitle{font-weight: normal;font-size: 28rpx;color: #111111;text-align: center;margin-top: 42rpx}.txmoney{margin-top: 56rpx;text-align: center;font-weight: normal;font-size: 32rpx;color: #707070;}.pricesss{display: flex;align-items: center;justify-content: center;margin-bottom: 36rpx;font-weight: 400;font-size: 76rpx;color: #111111;.rmb{font-weight: normal;font-size: 46rpx;color: #111111;margin-right: 10rpx;}}.windowLine{width: 658rpx;height: 2rpx;background: #EEEEEE;margin: 0 auto;margin-bottom: 32rpx;}.windowWX{display: flex;align-items: center;justify-content: space-between;padding: 0 46rpx;box-sizing: border-box;margin-bottom: 46rpx;.xtz{font-weight: normal;font-size: 26rpx;color: #707070;}.bankNameBox{display: flex;align-items: center;.bankLogo{width: 36rpx;height: 36rpx;border-radius: 50%;margin-right: 10rpx;}.bankName{font-weight: normal;font-size: 26rpx;color: #707070;}}}
}
.main {padding: 0rpx 40rpx;
}
.ipt {border-bottom: 1rpx solid #CCCCCC;
}
.item {position: relative;padding: 10rpx 78rpx;margin-bottom: 60rpx;.errMsg{position: absolute;left: 50%;bottom: -40rpx;transform: translate(-50%,0);font-weight: normal;font-size: 22rpx;color: #F72323;}
}
.title {margin: 30rpx 0;
}
</style>