微信小程序实现发送验证码按钮效果

<view class=\"form_group\">
   <input type=\"text\" placeholder=\"手机号码\" placeholder-class=\"placeholder_style\" data-name=\"data_phone\" value=\"{{data_phone}}\" bindinput=\'getInputKey\' />
  </view>
  <view class=\"form_group\">
   <input type=\"text\" class=\"sendmsg_input\" placeholder=\"短信验证码\" data-name=\"data_code\" value=\"{{data_code}}\" placeholder-class=\"placeholder_style\" bindinput=\'getInputKey\' />
   <view class=\'vertificate\' bindtap=\"getVerificationCode\">{{time}}
    <text>{{suffix}}</text>
   </view>
  </view>

.form_group {
 display: flex;
 flex-direction: row;
 justify-content: space-between;
}

.form_group input, .form_group picker {
 width: 676rpx;
 border-bottom: 1px solid #ddd;
 height: 121rpx;
 padding-left: 20rpx;
 font-family: PingFangSC-Regular;
 font-size: 32rpx;
 letter-spacing: 0;
 line-height: 121rpx;
}

.form_group .sendmsg_input {
 width: 370rpx;
}

.form_group .vertificate {
 width: 326rpx;
 border-bottom: 1px solid #ddd;
 height: 121rpx;
 padding-left: 20rpx;
 font-family: PingFangSC-Regular;
 font-size: 32rpx;
 letter-spacing: 0;
 line-height: 121rpx;
 text-align: center;
 color: #34c9c3;
}

.vertificate text {
 color: gray;
}

.placeholder_style {
 font-family: PingFangSC-Regular;
 font-size: 32rpx;
 color: #dbdbdb;
 letter-spacing: 0;
}

import SignupService from \'../service/sign-up.service.js\';
import HTTP from \'../../../utils/http.js\';
import Util from \'../../../utils/util.js\';

let _signupService = new SignupService();
let _http = new HTTP();
let _util = new Util();

Page({
 data: {
  time: \"获取验证码\",
  currentTime: 61,
  disabled:false,
  suffix:\'\',
  data_phone:\'\',
  data_code:\'\',
 },
 
 ...
 
 // 获取输入框的值
 getInputKey(e) {
  let key = e.currentTarget.dataset.name;
  let value = e.detail.value;
  this.setData({
   [key]: value
  })
 },

 // 获取验证码
 getVerificationCode() {
  let _this = this;
  if (!_this.data.disabled) {
   _this.getCode();
  }
 },

 getCode() {
  let _this = this;
  let phone = _this.data.data_phone;
  if (_util.isPhoneAvailable(phone)) {
   _signupService.getCode(phone).then(res=>{   // 调用后端API，获取手机验证码
    _util.showToast(\'success\',\"已发送\");
    _this.setData({
     disabled: true
    })
   },err=>{
    _util.showToast(\'none\',\"发送失败\")
   });
   
   // 设置发送验证码按钮样式
   let interval = null;
   let currentTime = _this.data.currentTime;

   interval = setInterval(function() {
    currentTime--;
    _this.setData({
     time: currentTime,
     suffix: \'秒后可重新获取\'
    })
    if (currentTime <= 0) {
     clearInterval(interval)
     _this.setData({
      time: \'重新发送\',
      suffix: \'\',
      currentTime: 61,
      disabled: false
     })
    }
   }, 1000)
  } else {
   _util.showToast(\'none\',\'请输入正确的手机号码。\');    
  }
 },

//获取手机验证码
 getCode(phone){
  return _http.request({
   type: \'post\',
   url: \'/account/validate-codes\',
   data: {
    phone:phone
   }
  })
 }

class HTTP {
 request(param){
  let _this = this;
  let  Url = \'.......\';
  return new Promise((resolve, reject) => {
   let access_token = wx.getStorageSync(\'access_token\');
   wx.request({
    method: param.type || \'get\',
    url:  Url+ param.url || \'\',
    data: param.data || null,
    header: access_token ? {
     \'content-type\': \'application/x-www-form-urlencoded\',
     \"Authorization\": `Bearer ${access_token}`
    } : {
      \'content-type\': \'application/x-www-form-urlencoded\',
    },
    success: (res => {
     if (res.statusCode === 200 || res.statusCode === 201) {
      //200: 服务端业务处理正常结束
      resolve(res.data)
     } else {
      //其它错误，提示用户错误信息
       
      /*** 
       * 需要根据接口文档改！！！
      */
      reject(res)
     }
    }),
    fail: (err => {
     if(err.responseJSON){
      reject(err.responseJSON.message)
     }else{
      reject(err);
     }
    })
   });
  });
 }
}

export default HTTP;

 // 验证手机号码是否有效
 isPhoneAvailable(phone) {
  var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
  if (!myreg.test(phone)) {
   return false;
  } else {
   return true;
  }
 }
 
//小程序弹框提示
 showToast(icon,msg,duration=2000){
  wx.showToast({
    : msg,
   duration: duration,
   icon: icon
  })
 }