E企盈营销工具技术服务商 热线:4006-838-530

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

E企盈直播平台营销卖货系统

首先上图,最终效果如下:实现关键点获取验证码按钮无边框: 可以用 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;}.jsimport 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 为Promiseclass 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    })  }

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序——实现发送验证码按钮效果
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏