效果图
wxml
<input class=‘input-pwd‘ placeholder="新密码" placeholder-style=‘color: #000‘ password focus bindconfirm=‘getPwd‘/> <input class=‘input-tel‘ type=‘number‘ placeholder="手机号" placeholder-style=‘color: #000‘ maxlength=‘11 confirm-type=‘done‘ /> <input class=‘input-verify‘ type=‘number‘ placeholder-style=‘color: #000‘ placeholder=‘手机验证码‘></input> <button class=‘verify-btn‘ disabled=‘{{disabled}}‘ bindtap="getVerificationCode">{{time}}</button> <button class=‘confirm-btn‘ bindtap=‘confirm_btn‘>确认修改</button>
wxss
/* pages/forgetpwd/forgetpwd.wxss */ input{ padding-left: 20rpx; border-bottom: 1rpx solid #ccc; height: 80rpx; line-height: 80rpx; width: 95%; margin: 0 auto; font-size: 28rpx; } .input-verify{ width: 67%; margin-left: 10rpx; float: left; } .verify-btn{ width: 26%; height: 65rpx; float: right; line-height: 65rpx; background: #fff; color: #5FD79D; margin: 20rpx 10rpx; font-size: 28rpx; } .confirm-btn{ width: 80%; height: 90rpx; margin: 150rpx auto; background: #5FD79D; color: #fff; }
js
// pages/forgetpwd/forgetpwd.js var interval = null //倒计时函数 Page({ /** * 页面的初始数据 */ data: { time: ‘获取验证码‘, //倒计时 currentTime: 60 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, getPwd:function(e){ console.log(e.detail.value) }, /** * 确认修改 */ confirm_btn:function(){ wx.redirectTo({ url: ‘/pages/login/login‘, }) }, getCode: function (options){ var that = this; var currentTime = that.data.currentTime interval = setInterval(function () { currentTime--; that.setData({ time: currentTime+‘秒‘ }) if (currentTime <= 0) { clearInterval(interval) that.setData({ time: ‘重新发送‘, currentTime:60, disabled: false }) } }, 1000) }, getVerificationCode(){ this.getCode(); var that = this that.setData({ disabled:true }) }, })