微信小程序實現手機獲取驗證碼倒計時60s

本文實例為大傢分享瞭微信小程序實現手機獲取驗證碼倒計時的具體代碼,供大傢參考,具體內容如下

功能展示:

WXML:

<view class="all">
  <!-- 手機 -->
  <view class="tel">
    <!-- 手機圖標 -->
    <view class="icon_tel">
      <image class="tel_image" src="https://image.flaticon.com/icons/svg/660/660439.svg"></image>
      <text class="tel_words">手機</text>
    </view>
    <!-- 內容 -->
    <view class="content_tel">
      <view class="adress">
        <text>+86</text>
      </view>
      <view class="sign">
        <text>▼</text>
      </view>
      <view>
        <input class="input_tel" placeholder="請輸入手機號" focus="{{focus}}"  value="{{tel}}" bindinput="watchTel"/>
      </view>
    </view>
    <!-- 下劃線 -->
    <view class="line_adress"></view>
    <view class="line_input"></view>
  </view>
 
  <!-- 驗證碼 -->
  <view class="VerificationCode ">
    <!-- 驗證碼圖標 -->
    <view class="icon_VerificationCode">
      <image class="tel_image" src="https://image.flaticon.com/icons/png/128/179/179640.png"></image>
      <text class="tel_words">驗證碼</text>
    </view>
 
    <!-- 內容 -->
    <view class="content_VerificationCode">
      <view>
        <input class="input_VerificationCode" placeholder="請輸入驗證碼" focus="{{focus}}"  value="{{VerificationCode}}" bindinput="watchVerificationCode"/>
      </view>
    </view>
    <!-- 點擊獲取驗證碼 -->
    <view>
      <button class="button_VerificationCode" size="mini" style="background-color:{{color}}" disabled="{{disabled}}" bindtap="bindButtonTap">
        <view class="world">
          <text class="button_world">{{text}}</text>
        </view>
      </button> 
    </view>
    <!-- 下劃線 -->
    <view class="line_VerificationCode"></view>
  </view>
 
  <!-- 提交按鈕 -->
  <view>
    <button class="button_submission" type="primary" size="default" bindtap="ChangeTel">
      <text class="button_submissionWorld">提交</text>
    </button>
</view>

WXSS:

.all{
  height: 100vh;
  width: 100vw;
  /* border: 2rpx solid blue; */
}
 
.tel{
  position: relative;
  top: 10vh;
  left: 10vw;
  height: 16vh;
  width: 80vw;
  /* border: 2rpx solid red; */
}
 
.icon_tel{
  position: absolute;
  top: 1vh;
  left: 2vh;
  height: 6vh;
  width: 24vw;
  /* border: 2rpx solid red; */
}
 
.tel_image{
  position: absolute;
  height: 6vh;
  width: 7vw;
  /* border: 2rpx solid red; */
}
 
.tel_words{
  position: absolute;
  left: 9vw;
  height: 6vh;
  width: 15vw;
  top: 1vh;
  /* border: 2rpx solid red; */
}
 
.content_tel{
  position: absolute;
  top: 8vh;
  left: 2vw;
  height: 6vh;
  width: 75vw;
  /* border: 2rpx solid blue; */
}
 
.line_adress{
  position: absolute;
  height: 3rpx;
  width: 21vw;
  left: 2vw;
  bottom: 0.5vh;
  background:gainsboro;
}
 
.line_input{
  position: absolute;
  height: 3rpx;
  width: 47vw;
  left: 25vw;
  bottom: 0.5vh;
  background:gainsboro;
}
 
.line_VerificationCode{
  position: absolute;
  height: 3rpx;
  width: 47vw;
  left: 2vw;
  bottom: 0.5vh;
  background:gainsboro;
}
 
.adress{
  position: absolute;
  top: 1vh;
  height: 5vh;
  width: 20vw;
  /* border: 2rpx solid gold; */
  text-align: center;
}
 
.sign{
  position: absolute;
  height: 5vh;
  width: 4vw;
  top: 2vh;
  left: 20vw;
  /* border: 2rpx solid greenyellow; */
  text-align: center;
  align-items: center;
  font-size: 22rpx;
}
 
.input_tel{
  position: absolute;
  height: 6vh;
  width: 47vw;
  left: 28vw;
  /* border: 2rpx solid red; */
}
 
.input_VerificationCode{
  position: absolute;
  height: 6vh;
  width: 47vw;
  left: 2vw;
}
 
.VerificationCode{
  position: relative;
  top: 15vh;
  left: 10vw;
  height: 16vh;
  width: 80vw;
  /* border: 2rpx solid red; */
}
 
.icon_VerificationCode{
  position: absolute;
  top: 1vh;
  left: 3vh;
  height: 6vh;
  width: 24vw;
  /* border: 2rpx solid red; */
}
 
.content_VerificationCode{
  position: absolute;
  top: 8vh;
  left: 2vw;
  height: 6vh;
  width: 47vw;
  /* border: 2rpx solid blue; */
}
 
.button_VerificationCode{
  /* border: 2rpx solid red; */
  position: absolute;
  top: 7.5vh;
  left: 50vw;
  height: 8vh;
  width: 32vw;
  border-radius:60rpx;
  background: red;
}
 
.world{
  position: absolute;
  height: 70rpx;
  width: 160rpx;
  top: 10rpx;
  left: 40rpx;
}
 
.button_world{
  font-size: 31rpx;
  text-align: center;
  align-items: center;
  color: white;
}
 
.button_submission{
  position: absolute;
  height: 7vh;
  width: 60vw;
  top: 55vh;
  left: 20vw;
  /* border: 2rpx solid red; */
}
 
.button_submissionWorld{
  position: absolute;
  left: 26vw;
  font-size: 35rpx;
  /* border: 2rpx solid red; */
  top: -2rpx;
}

JS:

var qcloud = require('../../vendor/wafer2-client-sdk/index')
var config = require('../../config')
var util = require('../../utils/util.js')
 
Page({
  data: {
    VerificationCode: '',
    text:'獲取驗證碼',//按鈕文字
    currentTime: 61, //倒計時
    disabled: false, //按鈕是否禁用
    tel: '' //獲取到的手機欄中的值
  },
 
  // 手機號監聽輸入
  watchTel: function (event) {
    console.log(event);
    this.data.tel = event.detail.value
    this.setData({
      tel: event.detail.value
    })
  },
 
  // 驗證碼監聽輸入
  watchVerificationCode: function (event) {
    console.log(event);
    this.data.VerificationCode = event.detail.value
    this.setData({
      VerificationCode: event.detail.value
    })
  },
 
  //提交修改密碼表單
  ChangeTel: function () {
    var that = this
    if (this.data.VerificationCode != 10086) {
      wx.showToast({
        icon: 'none',
        title: '驗證碼輸入錯誤!'
      })
    }
    else {
      util.showBusy('請求中...')
      that.data.userpwd = that.data.renewpwd
      qcloud.request({
        url: `${config.service.host}/weapp/UserChangeTel`,
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        method: "POST",
        data: {
          tel: that.data.tel
        },
        login: false,
        success(result) {
          util.showSuccess('請求成功完成')
          that.setData({
            requestResult: JSON.stringify(result.data)
          })
          console.log(result);
        },
        fail(error) {
          util.showModel('請求失敗', error);
          console.log('request fail', error);
        }
      }),
        that.setData({
          tel: '',
          VerificationCode: ''
        })
    }
  },
 
  //獲取驗證碼按鈕
  bindButtonTap: function () {
    var that = this;
    that.setData({
      disabled: true, //隻要點擊瞭按鈕就讓按鈕禁用 (避免正常情況下多次觸發定時器事件)
      color: 'grey',
    })
    var tel = that.data.tel;
    var currentTime = that.data.currentTime
    //把手機號跟倒計時值變例成js值
    var warn = null;
    //warn為當手機號為空或格式不正確時提示用戶的文字,默認為空
    if (tel == '') {
      warn = "號碼不能為空";
    }
    else if (tel.trim().length != 11 || !/^1[3|4|5|6|7|8|9]\d{9}$/.test(tel)) {
      warn = "手機號格式不正確";
    }
    else {
      //當手機號正確的時候提示用戶短信驗證碼已經發送
      wx.showToast({
        title: '短信驗證碼已發送',
        icon: 'none',
        duration: 2000
      });
      //設置一分鐘的倒計時
      var interval = setInterval(function () {
        currentTime--;
        //每執行一次讓倒計時秒數減一
        that.setData({
          text: currentTime + 's', //按鈕文字變成倒計時對應秒數
        })
        //如果當秒數小於等於0時 停止計時器 且按鈕文字變成重新發送 且按鈕變成可用狀態 倒計時的秒數也要恢復成默認秒數 即讓獲取驗證碼的按鈕恢復到初始化狀態隻改變按鈕文字
        if (currentTime <= 0) {
          clearInterval(interval)
          that.setData({
            text: '重新發送',
            currentTime: 61,
            disabled: false,
            color: 'red'
          })
        }
      }, 1000);
    };
    //判斷 當提示錯誤信息文字不為空 即手機號輸入有問題時提示用戶錯誤信息 並且提示完之後一定要讓按鈕為可用狀態 因為點擊按鈕時設置瞭隻要點擊瞭按鈕就讓按鈕禁用的情況
    if (warn != null) {
      wx.showModal({
        title: '提示',
        content: warn
      })
      that.setData({
        disabled: false,
        color: 'red'
      })
      return;
    };
  },
 
})

以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。

推薦閱讀: