首先上图，最终效果如下：
实现关键点
获取验证码按钮无边框： 可以用 button::after{ border: none; } 来去除边框，或者直接用view绑定点击事件。本例子中没有使用button
点击发送后，60秒内按钮处于disable状态
点击发送后，text分为剩余秒数和后缀两部分
.form_group 使用 flex 布局
代码
.wxml
<view> <input type="text" placeholder="手机号码" placeholder-class="placeholder_style" data-name="data_phone" value="{{data_phone}}" bindinput='getInputKey' /> </view> <view> <input type="text" placeholder="短信验证码" data-name="data_code" value="{{data_code}}" placeholder-class="placeholder_style" bindinput='getInputKey' /> <view 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 }) }