效果圖

在這里插入圖片描述

目錄結(jié)構(gòu)

微信截圖_20201230172254.png

關(guān)閉圖標

close.png

dialog-vccode組件

dialog-vccode.js

Component({
  properties: {
    // 輸入框的數(shù)量
    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: '已發(fā)送到:'
    },
    //是否顯示倒計時
    showMask:{
      type:Boolean,
      value:false
    },
    //倒計時
    countDown:{
      type:Number,
      value:5
    },
    //是否已發(fā)送驗證碼
    alreadySend:{
      type:Boolean,
      value:false
    }
  },
  data: {
    // input是否獲取焦點
    inputFocus: true,
    // 初始input值為空
    currentValue: '',
    
  },
  methods: {
    //請稍后再試
    pleaseWait:function(){
      wx.showToast({
        title: '請稍后再試',
      })
    },
    //重新發(fā)送驗證碼
    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(0, 3) + '****' + phone.substr(7);
      this.setData({
        phone: mPhone,
      })
    },
    // 設置當前的值
    _setCurrentValue(e) {
      // 在此處判斷滿6（inputLength）位，把值返回給上級父組件或頁面
      let currentValue = e.detail.value
      // 改變時，派發(fā)一個事件，如果父組件或頁面中需要實時獲取改變后的值，可以監(jiān)聽這個事件。
      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)
    },
    // 提供給外部調(diào)用的方法，顯示/隱藏密碼。接收一個參數(shù)，可以顯性修改展示的狀態(tài)。
    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(0, 3) + '****' + phone.substr(7)
    })
  }
})

dialog-vccode.json

{
  "component": true
}

dialog-vccode.wxml

<view wx:if="{{showMask}}" class="mask">
  <view class="set-password">
    <view class="close_view_reverse" catchtap="closeMask">
       <view class="close_view"><image src='./image/close.png' style="height: 34rpx;width: 34rpx;"></image></view>
    </view>
    <view class="tip">{{tipText}}</view>
    <view class='verify-content'>{{phoneTip}}{{phone}}</view>
    <!-- 密碼框 -->
    <view style="position: relative;top: -65rpx;">
      <view class="password-box">
        <view class='password-wrapper'>
          <!-- 偽裝的input -->
          <block wx:for="{{inputLength}}" wx:key="item">
            <!-- 寬高可以由外部指定 -->
            <view class="password-item" style="width: {{inputWidth}}; height: {{inputHeight}}" catchtap='_focusInput'>
              <!-- 隱藏密碼時顯示的小圓點【自定義】 -->
              <!-- <view wx:if="{{!showValue && currentValue.length>=index+1}}" class="hidden"></view> -->
              <!-- 顯示密碼時顯示對應的值 -->
              <view class="show">{{currentValue.length>=index+1?currentValue[index]:''}}</view>
            </view>
          </block>
        </view>
        <!-- 隱藏的輸入框 -->
        <input type="text" value="{{currentValue}}" class='hidden-input' maxlength="{{inputLength}}" adjust-position="{{true}}"
          focus="{{inputFocus}}" catchinput="_setCurrentValue"></input>
      </view>

    </view>

    <view wx:if="{{alreadySend}}" class="text_countDown c_flex" bindtap="pleaseWait">重新發(fā)送（{{countDown}}s）</view>
    <view wx:else class="text_countDown c_flex" bindtap='reSendCode'>重新發(fā)送</view>

    <!-- 分割線 -->
    <view class="divider_line"></view>
    <view  class="btn-next {{currentValue.length==4?'btn-next-active':''}}" bindtap="tapConfirm">確定</view>
  </view>
</view>

dialog-vccode.wxss

.password-box .password-wrapper {
  margin-top: 20rpx;
  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;
  top: 0;
  left: 0;
  border: 1px solid #D8D8D8;
  box-sizing: border-box;
  width: 200%;
  height: 200%;
  border-radius: 4rpx;
  transform: scale(0.5);
  transform-origin: left top;
}
.password-box .password-item + .password-item {
  margin-left: 44rpx;
}
.password-box .password-wrapper .hidden {
  width: 14rpx;
  height: 14rpx;
  border-radius: 50%;
  background: #999;
}
.password-box .password-wrapper .show {
  color: #1a88f9;
}
.password-box .hidden-input {
  width: 1px;
  height: 0;
  min-height: 0;
}

.mask{
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  height: 100vh;
  width: 100vw;
  z-index: 1000;
}

.set-password {
  position: absolute;
  top:35vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 540rpx;
  padding-bottom: 20rpx;
  height: auto;
  background: #ffffff;
  border-radius: 10rpx;
}
.tip {
  position: relative;
  top: -80rpx;
  text-align: center;
  height: 43rpx;
  font-size: 32rpx;
  font-family: MicrosoftYaHeiSemibold;
  font-weight: 800;
  text-align: center;
  color: #333333;
  line-height: 43rpx;
}
.close_view_reverse{
  width:100%;
  display: flex;
  flex-direction: row-reverse;
}
.close_view{
  display: flex;
  flex-direction: row-reverse;
  height: 100rpx;
  width: 100rpx;
  padding:10rpx 10rpx 0 0;
}

.divider_line{
  position: relative;
  top:-20rpx;
  width: 540rpx;
  height: 1px;
  background-color: #f0f1f1;
}

.btn-next {
  background: #1a88f9;
  border-radius: 110rpx;
  box-shadow: 0px 4rpx 10rpx 0rpx rgba(0,0,0,0.1); 
  box-sizing: border-box;
  margin: 0 auto 0;
  width: 260rpx;
  height: 70rpx;
  line-height: 70rpx;
  text-align: center;
  color: #fff;
  background: #d8d8d8;
}
.btn-next-active {
  background: #1A88F9;
}

.verify-content{
  position: relative;
  top: -70rpx;
  text-align: center;
  height: 30rpx;
  font-size: 24rpx;
  color: #C5C5C5;
}
.text_countDown{
  position: relative;
  top: -50rpx;
  height: 30rpx;
  font-size: 22rpx;
  text-decoration: underline;
  text-align: center;
  color: #999999;
  line-height: 30rpx;
}
.c_flex{
  display: flex;
  align-items:center;
}

index中調(diào)用組件

index.wxml

<view class="c_flex_center">
  <button bindtap="getVCode">點擊獲取驗證碼</button>
</view>


<dialog-vccode id='dialogVCode' showMask="{{showMask}}" countDown="{{countDown}}" alreadySend="{{alreadySend}}" bind:confirm="verifyCodeConfirm"  bind:reSendCode='reSendCode' bind:closeMask="closeMask" />

index.json

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

index.js

//index.js
//獲取應用實例
const app = getApp()

Page({
  data: {
    showMask: false,
    countDown: 60,//倒計時時間s
    alreadySend: false,//驗證碼是否發(fā)送
    clearInterval: false,//釋放interval重置倒計時
    currentTimeStamp: 0,
    isDown: true,
  },
  onLoad: function () {

  },
  onShow: function () {
    this.dialogVCode = this.selectComponent('#dialogVCode')
  },
  //顯示驗證碼提示框
  getVCode: function () {
    //防止快速點擊
    let intervalTimeStamp=Date.now() - this.data.currentTimeStamp;
    if (this.data.currentTimeStamp&&intervalTimeStamp<=1000) {
      console.log('點擊獲取驗證碼按鈕時當前時間戳', this.data.currentTimeStamp)
      console.log('點擊間隔時間：', intervalTimeStamp+'毫秒')
      wx.showToast({
        title: '點擊的太快了',
      })
      return
    } 
    this.setData({
      currentTimeStamp: Date.now()
    })
    console.log('點擊獲取驗證碼按鈕時當前時間戳', this.data.currentTimeStamp)
    console.log('點擊間隔時間：', intervalTimeStamp+'毫秒')
    //顯示驗證碼框
    this.setData({
      showMask: true,
      countDown: 60,
      alreadySend: true,
      clearInterval: false
    })
    //開啟倒計時
    this.timer()
    //傳入手機號碼
    this.dialogVCode.showView({ phone: '18855556666' })
  },
  //驗證碼倒計時
  timer: function () {
    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({
              countDown: 60,
              alreadySend: false
            })
            resolve(setTimer)
          } else {
            //關(guān)閉驗證碼框后重新點擊按鈕時，釋放上一個正在執(zhí)行的setInterval
            if (this.data.clearInterval) {
              resolve(setTimer)
            }
          }
        }, 1000)
    })
    promise.then((setTimer) => {
      clearInterval(setTimer)
    })
  },
  //重新發(fā)送
  reSendCode: function (e) {
    console.log('重新發(fā)送驗證碼', e.detail.value)
    wx.showToast({
      title: '驗證碼已發(fā)送',
    })
    this.setData({
      alreadySend: e.detail.value,
      countDown: 60
    })
    this.timer()
    //調(diào)用發(fā)送驗證碼接口

  },
  //自定義驗證碼彈框的確定
  verifyCodeConfirm(e) {
    console.log('驗證碼彈框的確定', e.detail)
    //確定后重新計時
    this.setData({
      countDown: 60,
      clearInterval: true,
      alreadySend: false
    })
  },
  //關(guān)閉驗證碼提示框
  closeMask: function (e) {
    console.log('驗證碼關(guān)閉按鈕', e.detail.value)
    this.setData({
      showMask: e.detail.value,
      clearInterval: true
    })

  },
})

index.wxss

.c_flex_center{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
}

如果本篇文章能幫到您，那真是非常榮幸！