微信小程序 支付密码输入

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;
}