1、wxml代码
<view class='main'>
<!--手机号-->
<view class='mobile-view'>
<text class='label'>手机号</text>
<!--<view class='qh'><Select prop-array='{{selectArray}}' new-class="new-selectBox" bind:myget='getDate'></Select></view>-->
<input type='mobile' value='{{phone}}' bindinput="handleInputPhone" class='mobile' placeholder='请输入手机号' maxlength='11'></input>
</view>
<view class='code-view'>
<text class='label'>验证码</text>
<input type='number' maxlength="6" class="code" value='{{Code}}' bindinput="handleVerificationCode" placeholder='请输入验证码'></input>|
<button class='sendcode' bindtap='doGetCode' disabled='{{disabled}}'>{{text}}</button>
</view>
<button class='red-button' bindtap='bindmobile'>确认绑定</button>
</view>
2、wxss代码
page{background:#f7f7f7;}
.main{padding:0 30rpx;width:100%; box-sizing:border-box;}
.mobile-view{width:100%;height:118rpx;border-bottom:1px solid #e6e6e6;line-height:118rpx;box-sizing:border-box;
display:flex;flex-direction:row;justify-content:flex-start;}
.mobile-view .label{margin-right:20rpx;font-size:32rpx;}
.qh .new-selectBox{border:0;background:none;margin-top:30rpx;}
.mobile{font-size:32rpx;padding:43rpx 10rpx;height:32rpx; line-height:32rpx;margin-left:10rpx;color:#000;}
.code-view{width:100%;height:118rpx;border-bottom:1px solid #e6e6e6;line-height:118rpx;box-sizing:border-box;
display:flex;flex-direction:row;justify-content:flex-start;color:#dedede;}
.code-view .label{color:#000;font-size:32rpx;margin-right:20rpx;}
.code-view .code{width:35%;font-size:32rpx;padding:43rpx 10rpx;height:32rpx; line-height:32rpx;margin-left:10rpx;color:#000;}
.code-view .sendcode{font-size:28rpx; line-height: 118rpx;color:#f8aca9}
.code-view button.button-hover{background:none;}
.red-button{width:90%;height:98rpx; line-height:98rpx;background:#f84438;color:#fff;font-size:32rpx;margin-top:100rpx;border-radius:49rpx;}
3、js代码
//首先是data里面
data: {
text: "获取验证码",
currentTime: 61,//倒计时时长
disabled: false,//按钮是否可点
phone: '',//手机号
Code: '',//验证码
},
//获取手机号
handleInputPhone: function (e) {
//console.log("手机号：" + e.detail.value);
this.setData({
phone: e.detail.value
})
},
//获取验证码
handleVerificationCode: function (e) {
//console.log("验证码：" + e.detail.value);
this.setData({
Code: e.detail.value
})
},
doGetCode: function () {
var that = this;
that.setData({
disabled: true, //只要点击了按钮就让按钮禁用 （避免正常情况下多次触发定时器事件）
color: '#fff',
})
var phone = that.data.phone;
var currentTime = that.data.currentTime //把手机号跟倒计时值变例成js值
var warn = null; //warn为当手机号为空或格式不正确时提示用户的文字，默认为空
//console.log(qh+phone);
if (phone == '') {
warn = "手机号码不能为空";
} else if (phone.trim().length != 11 || !/^1[3|4|5|6|7|8|9]\d{9}$/.test(phone)) {
warn = "手机号格式不正确";
}
if (warn != null) {
wx.showModal({
title: '提示',
content: warn
})
that.setData({
disabled: false,
color: '#f1f1f1'
})
return;
}
wx.request({
header: { 'Authorization': 'Bearer' + wx.getStorageSync("token") },
url: app.globalData.host + '/user/message', //填写发送验证码接口
method: "POST",
data: {
mobile: phone,
type:'1'
},
success: function (res) {
//当手机号正确的时候提示用户短信验证码已经发送
wx.showToast({
title: '短信验证码已发送',
icon: 'none',
duration: 2000
});
//设置一分钟的倒计时
var interval = setInterval(function () {
currentTime--; //每执行一次让倒计时秒数减一
that.setData({
text: currentTime + 's后可再次发送', //按钮文字变成倒计时对应秒数
})
//如果当秒数小于等于0时 停止计时器 且按钮文字变成重新发送 且按钮变成可用状态 倒计时的秒数也要恢复成默认秒数 即让获取验证码的按钮恢复到初始化状态只改变按钮文字
if (currentTime <= 0) {
clearInterval(interval)
that.setData({
text: '重新发送',
currentTime: 61,
disabled: false,
color: '#66ccff'
})
}
}, 1000);
}
})
//判断 当提示错误信息文字不为空 即手机号输入有问题时提示用户错误信息 并且提示完之后一定要让按钮为可用状态 因为点击按钮时设置了只要点击了按钮就让按钮禁用的情况
if (warn != null) {
wx.showModal({
title: '提示',
content: warn
})
that.setData({
disabled: false,
color: '#33FF99'
})
return;
}
},
bindmobile: function (e) {
var that = this;
if (this.data.Code == '') {
wx.showToast({
title: '请输入验证码',
icon: 'none',
duration: 2000
})
return
} else {
var phone = that.data.phone;
var phone_code = that.data.Code;
wx.request({
header: { 'Authorization': 'Bearer' + wx.getStorageSync("token")},
url: app.globalData.host + '/user/bindPhone',//绑定手机号接口
method: "POST",
data: {
mobile: phone,
code: phone_code
},
success: function (res) {
console.log(res);
if (res.data.status_code == 200) {
wx.showToast({
title: res.data.message,
duration: 2000
})
setTimeout(function () {
wx.reLaunch({
url: '/pages/index/index?isbindmb=true',
})
}, 2000)
} else {
wx.showToast({
title: res.data.message,
icon: 'none',
duration: 2000
})
}
}
})
}
},
