wxml代码
<view catchtap='showInputLayer' class="btn_pay">立即支付</view>
<!-- 密码输入框 -->
<view wx:if='{{showPayPwdInput}}'>
<view class='bg_layer'></view>
<view class='input_main'>
<view class='input_title'>
<view class='input_back' catchtap='hidePayLayer'><text></text></view>
<text>输入支付密码</text>
</view>
<view class='input_tip'><text>使用会员卡余额支付需要验证身份,验证通过后才可进行支付。</text></view>
<view class='input_row' catchtap='getFocus'>
<view class='pwd_item' wx:for='{{6}}' wx:key='item' wx:for-index='i'>
<text wx:if='{{pwdVal.length>i}}'></text>
</view>
</view>
<view class='forget_pwd' catchtap='hidePayLayer'>忘记密码</view>
<input class='input_control' password type='number' focus='{{payFocus}}' bindinput='inputPwd' maxlength='6'/>
</view>
</view>
js代码
Page({
data: {
showPayPwdInput: false, //是否展示密码输入层
pwdVal: '', //输入的密码
payFocus: true, //文本框焦点
},
onLoad: function () {
},
/**
* 显示支付密码输入层
*/
showInputLayer: function(){
this.setData({ showPayPwdInput: true, payFocus: true });
},
/**
* 隐藏支付密码输入层
*/
hidePayLayer: function(){
let val = this.data.pwdVal;
this.setData({ showPayPwdInput: false, payFocus: false, pwdVal: '' });
},
/**
* 获取焦点
*/
getFocus: function(){
this.setData({ payFocus: true });
},
/**
* 输入密码监听
*/
inputPwd: function(e){
let that = this;
this.setData({ pwdVal: e.detail.value });
let pwd = e.detail.value;
if (e.detail.value.length >= 6){
if(pwd == '123456'){
this.hidePayLayer();
wx.showToast({
title: '成功',
icon: 'success',
duration: 2000
})
}else{
this.hidePayLayer();
wx.showToast({
title: '失败',
icon: 'error',
duration: 2000
})
}
}
}
})
wxss代码
.bg_layer {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.6);
z-index: 9998;
}
.input_main {
position: fixed;
left: 0;
bottom: 500rpx;
width: 100%;
height: 394rpx;
background-color: #fff;
z-index: 9999;
}
.input_title {
width: 100%;
height: 90rpx;
line-height: 90rpx;
text-align: center;
font-size: 32rpx;
border-bottom: 1rpx solid #e2e2e2;
}
.input_back {
position: absolute;
left: 0;
top: 0;
width: 80rpx;
height: 90rpx;
display: flex;
justify-content: center;
align-items: center;
}
.input_back text {
width: 20rpx;
height: 20rpx;
background-color: white;
border: 1rpx solid #aaa;
border-width: 5rpx 0 0 5rpx;
transform: rotate(-45deg);
}
.input_tip {
margin: 30rpx;
font-size: 24rpx;
color: #888;
}
/* 密码掩码模拟 */
.input_row {
width: 690rpx;
margin: 0 auto;
height: 98rpx;
position: relative;
display: flex;
align-items: center;
border: 1rpx solid #e2e2e2;
border-radius: 20rpx;
}
.input_row .pwd_item {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
border-right: 1rpx solid #e2e2e2;
position: relative;
}
.pwd_item:nth-last-of-type(1) {
border-right: 0;
}
.pwd_item text {
width: 30rpx;
height: 30rpx;
border-radius: 30rpx;
background-color: #555;
}
.forget_pwd {
float: right;
margin: 30rpx;
width: 100rpx;
text-align: right;
font-size: 24rpx;
color: #ff7800;
}
/* 文本输入框位置: 设置到左边隐藏 */
.input_control {
position: relative;
left: -300rpx;
bottom: 0;
width: 100rpx;
height: 100rpx;
}