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