1吵护、wxml代碼
<view class='main'>
? ? <!--手機(jī)號(hào)-->
? ? <view class='mobile-view'>
? ? ? ? <text class='label'>手機(jī)號(hào)</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='請(qǐng)輸入手機(jī)號(hào)' maxlength='11'></input>
? ? </view>
? ? <view class='code-view'>
? ? ? <text class='label'>驗(yàn)證碼</text>
? ? ? <input type='number' maxlength="6" class="code"? value='{{Code}}' bindinput="handleVerificationCode" placeholder='請(qǐng)輸入驗(yàn)證碼'></input>|
? ? ? <button class='sendcode'? bindtap='doGetCode' disabled='{{disabled}}'>{{text}}</button>
? ? </view>
? ? <button class='red-button' bindtap='bindmobile'>確認(rèn)綁定</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: "獲取驗(yàn)證碼",
? ? currentTime: 61,//倒計(jì)時(shí)時(shí)長(zhǎng)
? ? disabled: false,//按鈕是否可點(diǎn)
? ? phone: '',//手機(jī)號(hào)
? ? Code: '',//驗(yàn)證碼
? },
//獲取手機(jī)號(hào)
? handleInputPhone: function (e) {
? ? //console.log("手機(jī)號(hào)：" + e.detail.value);
? ? this.setData({
? ? ? phone: e.detail.value
? ? })
? },
? //獲取驗(yàn)證碼
? handleVerificationCode: function (e) {
? ? //console.log("驗(yàn)證碼：" + e.detail.value);
? ? this.setData({
? ? ? Code: e.detail.value
? ? })
? },
? doGetCode: function () {
? ? var that = this;
? ? that.setData({
? ? ? disabled: true, //只要點(diǎn)擊了按鈕就讓按鈕禁用 （避免正常情況下多次觸發(fā)定時(shí)器事件）
? ? ? color: '#fff',
? ? })
? ? var phone = that.data.phone;
? ? var currentTime = that.data.currentTime //把手機(jī)號(hào)跟倒計(jì)時(shí)值變例成js值
? ? var warn = null; //warn為當(dāng)手機(jī)號(hào)為空或格式不正確時(shí)提示用戶的文字馅而，默認(rèn)為空
? ? //console.log(qh+phone);
? ? if (phone == '') {
? ? ? warn = "手機(jī)號(hào)碼不能為空";
? ? } else if (phone.trim().length != 11 || !/^1[3|4|5|6|7|8|9]\d{9}$/.test(phone)) {
? ? ? warn = "手機(jī)號(hào)格式不正確";
? ? }
? ? 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', //填寫發(fā)送驗(yàn)證碼接口
? ? ? method: "POST",
? ? ? data: {
? ? ? ? mobile: phone,
? ? ? ? type:'1'
? ? ? },
? ? ? success: function (res) {
? ? ? ? //當(dāng)手機(jī)號(hào)正確的時(shí)候提示用戶短信驗(yàn)證碼已經(jīng)發(fā)送
? ? ? ? wx.showToast({
? ? ? ? ? title: '短信驗(yàn)證碼已發(fā)送',
? ? ? ? ? icon: 'none',
? ? ? ? ? duration: 2000
? ? ? ? });
? ? ? ? //設(shè)置一分鐘的倒計(jì)時(shí)
? ? ? ? var interval = setInterval(function () {
? ? ? ? ? currentTime--; //每執(zhí)行一次讓倒計(jì)時(shí)秒數(shù)減一
? ? ? ? ? that.setData({
? ? ? ? ? ? text: currentTime + 's后可再次發(fā)送', //按鈕文字變成倒計(jì)時(shí)對(duì)應(yīng)秒數(shù)
? ? ? ? ? })
? ? ? ? ? //如果當(dāng)秒數(shù)小于等于0時(shí) 停止計(jì)時(shí)器 且按鈕文字變成重新發(fā)送 且按鈕變成可用狀態(tài) 倒計(jì)時(shí)的秒數(shù)也要恢復(fù)成默認(rèn)秒數(shù) 即讓獲取驗(yàn)證碼的按鈕恢復(fù)到初始化狀態(tài)只改變按鈕文字
? ? ? ? ? if (currentTime <= 0) {
? ? ? ? ? ? clearInterval(interval)
? ? ? ? ? ? that.setData({
? ? ? ? ? ? ? text: '重新發(fā)送',
? ? ? ? ? ? ? currentTime: 61,
? ? ? ? ? ? ? disabled: false,
? ? ? ? ? ? ? color: '#66ccff'
? ? ? ? ? ? })
? ? ? ? ? }
? ? ? ? }, 1000);
? ? ? }
? ? })
? ? //判斷 當(dāng)提示錯(cuò)誤信息文字不為空 即手機(jī)號(hào)輸入有問題時(shí)提示用戶錯(cuò)誤信息 并且提示完之后一定要讓按鈕為可用狀態(tài) 因?yàn)辄c(diǎn)擊按鈕時(shí)設(shè)置了只要點(diǎn)擊了按鈕就讓按鈕禁用的情況
? ? 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: '請(qǐng)輸入驗(yàn)證碼',
? ? ? ? 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',//綁定手機(jī)號(hào)接口
? ? ? ? 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
? ? ? ? ? ? })
? ? ? ? ? }
? ? ? ? }
? ? ? })
? ? }
? },
