Wechat applet payment password input

wxml Code  

<view catchtap='showInputLayer' class="btn_pay"> Pay now </view>
<!--  Password input box  -->
<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> Enter payment password </text>
        </view>
        <view class='input_tip'><text> You need to verify your identity to use your membership card balance to pay , Payment can only be made after verification .</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'> Forget the password </view>
        <input class='input_control' password type='number' focus='{
   {payFocus}}' bindinput='inputPwd' maxlength='6'/>
    </view>
</view>

js Code

Page({
  data: {
    showPayPwdInput: false,  // Whether the password input layer is displayed 
    pwdVal: '',  // The password entered 
    payFocus: true, // Text box focus 
  },
  onLoad: function () {
    
  },
  /**
   *  Display the payment password input layer 
   */
  showInputLayer: function(){
    this.setData({ showPayPwdInput: true, payFocus: true });
  },
  /**
   *  Hide the payment password input layer 
   */
  hidePayLayer: function(){
    
    let val = this.data.pwdVal;

    this.setData({ showPayPwdInput: false, payFocus: false, pwdVal: '' });
  },
  /**
   *  Get focus 
   */
  getFocus: function(){
    this.setData({ payFocus: true });
  },
  /**
   *  Enter password to listen 
   */
  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: ' success ',
                icon: 'success',
                duration: 2000
              })
          }else{
            this.hidePayLayer();
            wx.showToast({
                title: ' Failure ',
                icon: 'error',
                duration: 2000
              })
          }
      }
  }
})

 wxss Code

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

/*  Password mask emulation  */
.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;
}

/*  Text input box position :  Set to the left to hide  */
.input_control {
  position: relative;
  left: -300rpx;
  bottom: 0;
  width: 100rpx;
  height: 100rpx;
}