Taro -- 微信小程序密码弹窗

记录一个类似支付密码的弹窗写法，实现是否免密功能。如图：

index.js

  import Taro, { Component } from '@tarojs/taro'

  import { View, Button, Text } from '@tarojs/components'

  import { AtInput, AtList, AtListItem, AtIcon, AtButton,AtToast} from "taro-ui"

  import './index.scss'

class Index extends Component {
  constructor() {
    super(...arguments)
    this.state = ({
      switchIsCheck: false,
      showPayPwdInput: false,
      payFocus: true,
      pwdVal: '',
      toastText: '',
      isOpened: false

    })
  }
// 打开关闭免密  用了在Switch开关上面遮挡一个透明的View，来显示弹窗，控制Switch的开关
  switchIsCheckBtn = () => {
    this.setState({
      showPayPwdInput: true
    })
  }
  closeClick = () => {
    this.setState({
      showPayPwdInput: false
    })
  }
  // 检验密码 输完6位数字密码时候调用
  hidePayLayer = () => {
    let val = this.state.pwdVal
    this.setState({
      showPayPwdInput: false,
      pwdVal: ''
    }, () => {
      Taro.request({
        method: 'post',
        url:
          API.URL,
        header: {
          'Content-Type': 'application/json',
          'Data-Type':'json',
          'weixinauth': this.state.tookenData
        },
        data:JSON.stringify({
          password:val
        }),
        success: res => {
          if (res.data.status == ) {
            this.setState({
              switchIsCheck: !this.state.switchIsCheck
            })
          }else{
            this.setState({
              isOpened: true,
              toastText: '密码错误'
            })
          }
        }
      })
    })
  }
  // 密码输入
  inputPwd = (e) => {
    this.setState({
      pwdVal: e.detail.value
    },() => {
      if (e.detail.value.length >= ) {
        this.hidePayLayer()
      }
    })
  }
  render() {
    const {isOpened, toastText} = this.state
    return (
      <View className='box-passward'>
        <View className="password-top">
          <View className="no-password">
            <AtList>
              <AtListItem title='密码' extraText='●●●●●●' arrow='right' onClick={this.handleClickChange} />
              <AtListItem
                switchColor='#40ac4b'
                title='我要免密'
                isSwitch
                onSwitchChange={this.handleChange}
                switchIsCheck={this.state.switchIsCheck}
              />
              <View className="password-btn" onClick={this.switchIsCheckBtn}></View>
            </AtList>
            <View className='forget-password' onClick={this.forgetPwd}>忘记密码?</View>
          </View>
        </View>
        {
          this.state.showPayPwdInput ?
            <View className="dialog">
              <View className="input_main">
                <View className="input_title">
                  <AtIcon onClick={this.closeClick} value='close' size=''className="input_title-close"></AtIcon>
                  <Text>免密修改</Text>
                </View>
                <View className="write-title">请输入密码</View>
                <View className="input_row">
                  {
                    [,,,,,].map((item,index) => {
                      return (
                        <View key={index} className="pwd_item">
                          {
                            this.state.pwdVal.length>index ? <Text className="pwd_itemtext"></Text> : null
                          }
                        </View>
                      )
                    })
                  }
                </View>
                <Input focus={this.state.payFocus} password type="number" maxLength="" onInput={this.inputPwd} className="input_control"></Input>
              </View>
            </View>
            : null
        }

          <AtToast isOpened={isOpened} duration={1000} text={toastText} onClose={this.handleClose}/>

      </View>
    )
  }
}

export default Index

index.scss

.box-passward {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f2f2f2;
    .signature-passward-bg {
      background: linear-gradient(#21b459, #24a262);
      position: relative;
    }
    .tabContant-certificate {
        padding-top: %;
        .image-certificate{
            width:360px;
            height: 360px;
            margin: auto;
            image{
               width: %;
               height: %;
            }
        }
        .text-certificate{
            font-size:30px;
            width:508px;
            margin: auto;
        }
    }
    .password-top{
      margin-top:32px;
      .no-password{
        .at-list__item .item-extra__info{
          font-size: 24px;
        }
      }
      .at-list{
         border-top: 1px solid #e5e5e5;
         border-bottom: 1px solid #e5e5e5;
      }
      .password-btn{
         width:105px;
         height: 70px;
         position: absolute;
         right:35px;
         bottom:20px;
      }
      .forget-password{
         padding:20px;
         color:#40ac4b;
         font-size: 28px;
      }
      .my-body {
        .account-tip {
           width: %;
           color: #;
           font-size: 28px;
           line-height: 50px;
           padding:  30px 20px;
           font-family: "PingFang-SC-Medium";
          .active{
             color: #40ac4b;
             font-size: 26px;
          }
        }
        .my-body-content {
           background-color: #fff;
           border-top:1px solid #e5e5e5;
           border-bottom:1px solid #e5e5e5;
        }
        .at-button{
           margin:60px 30px;
        }
      }
    }
  .dialog {
     width: %;
     height: %;
     position: fixed;
     left:;
     top:;
     z-index: ;
     background: rgba(,,,0.5);
    .input_main {
      position: fixed;
      left: %;
      bottom: %;
      margin-bottom:-180px;
      margin-left: -%;
      width: %;
      height: 360px;
      background-color: #fff;
      z-index: ;
      border-radius: 10px;
      .input_title {
        width: %;
        height: 135px;
        line-height: 135px;
        text-align: center;
        font-size: 40px;
        .input_title-close{
          color:rgb(,,);
          float: left;
          margin-top:50px;
          margin-left: 40px;
        }
        .input_back {
          position: absolute;
          left: ;
          top: ;
          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   5px;
            transform: rotate(-45deg);
          }
        }
      }
      .write-title{
        color:rgb(,,);
        font-size: 30px;
        padding-left:40px;
        margin-bottom: 30px;
      }
      .input_row {
        width: %;
        margin:  40px;
        height: 98px;
        position: relative;
        display: flex;
        align-items: center;
        border: 2px solid rgb(,,);
        .pwd_item{
          flex: ;
          display: flex;
          align-items: center;
          justify-content: center;
          height: %;
          border-right: 2px solid rgb(,,);
          position: relative;
          .pwd_itemtext {
            width: 30px;
            height: 30px;
            border-radius: 30px;
            background-color: #;
          }
        }
        .pwd_item:last-child {
          border-right: none;
        }
      }
      .forget_pwd {
        float: right;
        margin: 30px;
        width: 100px;
        text-align: right;
        font-size: 24px;
        color: #ff7800;
      }
      .input_control {
        position: relative;
        left: -300px;
        bottom: ;
        width: 100px;
        height: 100px;
      }
    }
  }
}