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

<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 baseUrl = '.......'; return new Promise((resolve, reject) => {  let access_token = wx.getStorageSync('access_token');  wx.request({  method: param.type || 'get',  url: baseUrl+ 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({  title: msg,  duration: duration,  icon: icon }) }