评论

短信验证框

验证码提示框

效果图

1.组件

js

Component({
  properties: {
    // 输入框的数量
    inputLength: {
      type: Number,
      value: 4
    },
    // 单个输入框的宽度
    inputWidth: {
      type: String,
      value: '58rpx'
    },
    inputHeight: {
      type: String,
      value: '58rpx'
    },
    // 是否显示输入的值,默认隐藏
    showValue: {
      type: Boolean,
      value: false
    },
    //提示文字
    tipText: {
      type: String,
      value: '请输入验证码'
    },
    //手机号码
    phone: {
      type: String,
      value: ''
    },
    //手机号码提示
    phoneTip: {
      type: String,
      value: '已发送到:'
    },
    //是否显示倒计时
    showMask:{
      type:Boolean,
      value:false
    },
    //倒计时
    countDown:{
      type:Number,
      value:5
    },
    //是否已发送验证码
    alreadySend:{
      type:Boolean,
      value:false
    }
  },
  data: {
    // input是否获取焦点
    inputFocus: true,
    // 初始input值为空
    currentValue: '',
    
  },
  methods: {
    //请稍后再试
    pleaseWait:function(){
      wx.showToast({
        title: '请稍后再试',
      })
    },
    //重新发送验证码
    reSendCode:function(){
      this.triggerEvent('reSendCode',{value:true})
    },
    closeMask: function () {
      this.setData({ showMask: false,currentValue:'' })
      this.triggerEvent('closeMask',{value:false},{bubbles:true,composed:true})
    },
    showView({ phone }) {
      var mPhone = phone.substr(03) + '****' + phone.substr(7);
      this.setData({
        phone: mPhone,
      })
    },
    // 设置当前的值
    _setCurrentValue(e) {
      // 在此处判断满6(inputLength)位,把值返回给上级父组件或页面
      let currentValue = e.detail.value
      // 改变时,派发一个事件,如果父组件或页面中需要实时获取改变后的值,可以监听这个事件。
      this.triggerEvent('change', e.detail.value)


      this.setData({
        currentValue
      })
      if (currentValue.length >= this.data.inputLength) {
        this._complate()
        return
      }
    },
    // 点击伪装的input时,让隐藏的input获得焦点
    _focusInput() {
      this.setData({
        inputFocus: true
      })
      console.log(this.data.inputFocus)
    },
    _complate() {
      this.triggerEvent('inputComplate'this.data.currentValue)
    },
    // 提供给外部调用的方法,显示/隐藏密码。接收一个参数,可以显性修改展示的状态。
    toggleValue(state) {
      this.setData({
        showValue: state != undefined ? state : !this.data.showValue
      })
    },
    // 清除input当前的值
    clearCurrentValue() {
      this.setData({
        currentValue: ''
      })
    },
    //确认按钮
    tapConfirm() {
      let value = this.data.currentValue
      if (value.length < this.data.inputLength) {
        return
      }
      this.triggerEvent('confirm', value)
      this.closeMask()
    },


  },
  ready: function (e) {
    var phone = this.data.phone;
    this.setData({
      phone: phone.substr(03) + '****' + phone.substr(7)
    })
  }
})

json

{
  "component"true

}


wxml

  
    
  
    
       
    
    {{tipText}}
    {{phoneTip}}{{phone}}
    
    
      
        
          
          
            
            
              
              
              
              {{currentValue.length>=index+1?currentValue[index]:''}}
            
          
        
        
        
      


    


    重新发送({{countDown}}s)
    重新发送


    
    
    确定
  

       
  
  


wxss

.password-box .password-wrapper {
  margin-top20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.password-box .password-item {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.password-box .password-item::after {
  display: block;
  content'';
  position: absolute;
  top0;
  left0;
  border1px solid #D8D8D8;
  box-sizing: border-box;
  width200%;
  height200%;
  border-radius4rpx;
  transformscale(0.5);
  transform-origin: left top;
}
.password-box .password-item + .password-item {
  margin-left44rpx;
}
.password-box .password-wrapper .hidden {
  width14rpx;
  height14rpx;
  border-radius50%;
  background#999;
}
.password-box .password-wrapper .show {
  color#1a88f9;
}
.password-box .hidden-input {
  width1px;
  height0;
  min-height0;
}


.mask{
  position: fixed;
  top0;
  left0;
  display: flex;
  justify-content: center;
  backgroundrgba(0000.4);
  height100vh;
  width100vw;
  z-index1000;
}


.set-password {
  position: absolute;
  top:35vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  width540rpx;
  padding-bottom20rpx;
  height: auto;
  background#ffffff;
  border-radius10rpx;
}
.tip {
  position: relative;
  top: -80rpx;
  text-align: center;
  height43rpx;
  font-size32rpx;
  font-family: MicrosoftYaHeiSemibold;
  font-weight800;
  text-align: center;
  color#333333;
  line-height43rpx;
}
.close_view_reverse{
  width:100%;
  display: flex;
  flex-direction: row-reverse;
}
.close_view{
  display: flex;
  flex-direction: row-reverse;
  height100rpx;
  width100rpx;
  padding:10rpx 10rpx 0 0;
}


.divider_line{
  position: relative;
  top:-20rpx;
  width540rpx;
  height1px;
  background-color#f0f1f1;
}


.btn-next {
  background#1a88f9;
  border-radius110rpx;
  box-shadow0px 4rpx 10rpx 0rpx rgba(0,0,0,0.1); 
  box-sizing: border-box;
  margin0 auto 0;
  width260rpx;
  height70rpx;
  line-height70rpx;
  text-align: center;
  color#fff;
  background#d8d8d8;
}
.btn-next-active {
  background#1A88F9;
}


.verify-content{
  position: relative;
  top: -70rpx;
  text-align: center;
  height30rpx;
  font-size24rpx;
  color#C5C5C5;
}
.text_countDown{
  position: relative;
  top: -50rpx;
  height30rpx;
  font-size22rpx;
  text-decoration: underline;
  text-align: center;
  color#999999;
  line-height30rpx;
}
.c_flex{
  display: flex;
  align-items:center;
}


组建中用到的图片

---------图片在中间------------

-----------图片在中间-----------


2.页面调用组件

index.js


//index.js
//获取应用实例
const app = getApp()


Page({
  data: {
    showMaskfalse,
    countDown60,//倒计时时间s
    alreadySendfalse,//验证码是否发送
    clearIntervalfalse,//释放interval重置倒计时
  },
  onLoadfunction () {


  },
  onShowfunction () {
    this.dialogVCode = this.selectComponent('#dialogVCode')
  },
  //显示验证码提示框
  getVCodefunction () {
    //显示验证码框
    this.setData({ 
      showMasktrue, 
      countDown60, 
      alreadySendtrue, 
      clearIntervalfalse })
    //开启倒计时
    this.timer()
    //传入手机号码
    this.dialogVCode.showView({ phone'18855556666' })
  },
  //验证码倒计时
  timerfunction () {
    if (!this.data.showMask) return
    let promise = new Promise((resolve, reject) => {
      let setTimer = setInterval(
        () => {
          this.setData({
            countDown: --this.data.countDown
          })
          if (this.data.countDown <= 0) {
            this.setData({
              countDown60,
              alreadySendfalse
            })
            resolve(setTimer)
          } else {
            //关闭验证码框后重新点击按钮时,释放上一个正在执行的setInterval
            if (this.data.clearInterval) {
              resolve(setTimer)
            }
          }
        }, 1000)
    })
    promise.then((setTimer) => {
      clearInterval(setTimer)
    })
  },
  //重新发送
  reSendCodefunction (e{
    console.log('重新发送验证码', e.detail.value)
    wx.showToast({
      title'验证码已发送',
    })
    this.setData({
      alreadySend: e.detail.value,
      countDown60
    })
    this.timer()
    //调用发送验证码接口
    
  },
  //自定义验证码弹框的确定
  verifyCodeConfirm(e) {
    console.log('验证码弹框的确定', e.detail)
   //确定后重新计时
   this.setData({
    countDown60,
    clearIntervaltrue,
    alreadySendfalse
  })
  },
  //关闭验证码提示框
  closeMaskfunction (e{
    console.log('验证码关闭按钮', e.detail.value)
    this.setData({
      showMask: e.detail.value,
      clearIntervaltrue
    })


  },
})


index.json


{
  "usingComponents": {
    "dialog-vccode":"/component/dialog-vccode/dialog-vccode"
  }
}

index.wxml


  点击获取验证码


index.wxss

.c_flex_center{
    display: flex;
    justify-content: center;
    align-items: center;
    width100vw;
    height100vh;
}
最后一次编辑于  2020-12-30  
点赞 0
收藏
评论
登录 后发表内容