Taro开发写密码支付弹层

在支付的时候弹出填写密码，模仿了支付宝支付填写密码。主要是利用遮罩的来实现。直接上代码吧。

html设计，通过标记控制显示。

{
          showPayPwdInput ? 
            <View className="dialog">
              <View className="input_main">
                <View className="input_title">
                  <View className="input_back" onClick={this.hidePayLayer}><Text className="input_backtext"></Text></View>
                  <Text>输入支付密码</Text>
                </View>
                <View className="input_row">
                  {
                    [0,1,2,3,4,5].map((item,index) => {
                      return (
                        <View key={index} className="pwd_item">
                          {
                            pwdVal.length>index ? <Text className="pwd_itemtext"></Text> : null
                          }
                        </View>
                      )
                    })
                  }
                </View>
                <View className="forget_pwd" onClick={this.hidePayLayer}>忘记密码</View>
                <Input focus={payFocus} password type="number" maxLength="6" onInput={this.inputPwd} className="input_control"></Input>
              </View>              
            </View> 
            : null
        }

js方法。

hidePayLayer = () => {
    // e.stopPropagation()
    let val = this.state.pwdVal
    this.setState({
      showPayPwdInput: false,
      payFocus: false,
      pwdVal: ''
    }, () => {
      if (val == '123456') {
        Taro.showToast({
          title: '支付成功'
        })
        Taro.navigateTo({
          url: '/pages/payment/index'
        })
      }
      // Taro.showToast({
      //   title: val
      // })
      // console.log(this.state.payFocus)
    })
  }

  inputPwd = (e) => {
    this.setState({
      pwdVal: e.detail.value
    },() => {
      if (e.detail.value.length >= 6) {
        this.hidePayLayer()
      }
    })
     
  }

css样式。

.dialog {
    width: 100%;
    height: 100%;
    position: fixed;
    left:0;
    top:0;
    z-index: 1222;
    background: rgba(0,0,0,0.5);
    .input_main {
      position: fixed; left: 0; bottom: 500px; width: 100%; height: 394px;
      background-color: #fff; z-index: 1223;
      .input_title {
        width: 100%; height: 90px; line-height: 90px; text-align: center; 
        font-size: 32px; border-bottom: 2px solid #e2e2e2;
        .input_back {
          position: absolute; left: 0; top: 0;
          width: 80px; height: 90px; display: flex; justify-content: center; align-items: center;
          .input_backtext {
            width: 20px;
            height: 20px;
            background-color: white;
            border: 2px solid #aaa;
            border-width: 5px 0 0 5px;
            transform: rotate(-45deg);
          }
        }
      }
      .input_row {
        width: 690px; margin: 0 auto; height: 98px; position: relative;
        display: flex; align-items: center; border: 2px solid #cccccc; border-radius: 20px;
        .pwd_item{
          flex: 1; display: flex; align-items: center; justify-content: center; 
          height: 100%; border-right: 2px solid #e2e2e2; position: relative;
          .pwd_item:nth-last-of-type(1) { border-right: 0; } 
          .pwd_itemtext {
            width: 30px; height: 30px; border-radius: 30px; background-color: #555;
          }
        }
      }
      .forget_pwd {
        float: right; margin: 30px; width: 100px; text-align: right; font-size: 24px; color: #ff7800;
      }
      .input_control {
        position: relative; left: -300px; bottom: 0; width: 100px; height: 100px;
      }
    }
  }

这样就实现了密码输入的实现。

转载于:https://www.cnblogs.com/all1008/p/10620278.html