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

首先上图，最终效果如下：

实现关键点

• 获取验证码按钮无边框： 可以用 button::after{ border: none; } 来去除边框，或者直接用view绑定点击事件。本例子中没有使用button
• 点击发送后，60秒内按钮处于disable状态
• 点击发送后，text分为剩余秒数和后缀两部分
• .form_group 使用 flex 布局

代码

.wxml

    <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>

.wxss

.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;
}

.js

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','请输入正确的手机号码。');       
    }
  },

sign-up.service.js

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

http.js: 封装wx.request 为Promise

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;

util.js

  // 验证手机号码是否有效
  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
    })
  }