// pages/register/register.js
Page({
/**
* 頁面的初始數據
*/
data: {
text: '獲取驗證碼', //按鈕文字
currentTime: 61, //倒計時
disabled: false, //按鈕是否禁用
phone: '', //獲取到的手機欄中的值
VerificationCode: '',
Code: '',
NewChanges: '',
NewChangesAgain: '',
success: false,
state: '0',
url: ''
},
/**
* 獲取驗證碼
*/
return_home: function (e) {
wx.navigateTo({
url: '/pages/register/register',
})
},
handleInputPhone: function (e) {
this.setData({
phone: e.detail.value
})
},
handleVerificationCode: function (e) {
console.log(e);
this.setData({
Code: e.detail.value
})
},
handleNewChanges: function (e) {
console.log(e);
this.setData({
NewChanges: e.detail.value
})
},
handleNewChangesAgain: function (e) {
console.log(e);
this.setData({
NewChangesAgain: e.detail.value
})
},
doGetCode: function () {
var that = this;
that.setData({
disabled: true, //只要點擊了按鈕就讓按鈕禁用 （避免正常情況下多次觸發定時器事件）
color: '#ccc',
})
var phone = that.data.phone;
var currentTime = that.data.currentTime //把手機號跟倒計時值變例成js值
var warn = null; //warn爲當手機號爲空或格式不正確時提示用戶的文字，默認爲空
wx.request({
url: 'http://192.168.41.40:8002/isExist', //後端判斷是否已被註冊， 已被註冊返回1 ，未被註冊返回0
method: "GET",
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: function (res) {
that.setData({
state: res.data
})
if (phone == '') {
warn = "號碼不能爲空";
} else if (phone.trim().length != 11 || !/^1[3|4|5|6|7|8|9]\d{9}$/.test(phone)) {
warn = "手機號格式不正確";
} //手機號已被註冊提示信息
else if (that.data.state == 1) { //判斷是否被註冊
warn = "手機號已被註冊";
}
else {
wx.request({
url: 'http://192.168.41.40:8002/sendCode', //填寫發送驗證碼接口
method: "POST",
data: {
coachid: that.data.phone
},
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: function (res) {
console.log(res.data)
that.setData({
VerificationCode: res.data.verifycode
})
//當手機號正確的時候提示用戶短信驗證碼已經發送
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: '#33FF99'
})
}
}, 100);
}
})
};
//判斷 當提示錯誤信息文字不爲空 即手機號輸入有問題時提示用戶錯誤信息 並且提示完之後一定要讓按鈕爲可用狀態 因爲點擊按鈕時設置了只要點擊了按鈕就讓按鈕禁用的情況
if (warn != null) {
wx.showModal({
title: '提示',
content: warn
})
that.setData({
disabled: false,
color: '#33FF99'
})
return;
}
}
})
},
submit: function (e) {
var that = this
if (this.data.Code == '') {
wx.showToast({
title: '請輸入驗證碼',
image: '/images/error.png',
duration: 2000
})
return
} else if (this.data.Code != this.data.VerificationCode) {
wx.showToast({
title: '驗證碼錯誤',
image: '/images/error.png',
duration: 2000
})
return
}
else if (this.data.NewChanges == '') {
wx.showToast({
title: '請輸入密碼',
image: '/images/error.png',
duration: 2000
})
return
} else if (this.data.NewChangesAgain != this.data.NewChanges) {
wx.showToast({
title: '兩次密碼不一致',
image: '/images/error.png',
duration: 2000
})
return
} else {
var that = this
var phone = that.data.phone;
wx.request({
url: 'http://192.168.41.40:8002/register',
method: "POST",
data: {
coachid: phone,
coachpassword: that.data.NewChanges
},
header: {
"content-type": "application/x-www-form-urlencoded"
},
success: function (res) {
wx.showToast({
title: '提交成功~',
icon: 'loading',
duration: 2000
})
console.log(res.data)
that.setData({
success: true,
url: res.data
})
}
})
}
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function () {
}
})
{
"usingComponents": {},
"navigationBarTitleText": "註冊頁面"
}
<!--pages/register/register.wxml-->
<view wx:if="{{!success}}">
<view class="login-icon">
<image class="login-img" src="/images/loginLog.jpg"></image>
</view>
<view class='row'>
<view class='info'>
<input class= 'info-input1' bindinput="handleInputPhone" placeholder="請輸入你的手機號" />
</view>
<button class='button' bindtap='doGetCode' disabled='{{disabled}}' style="background-color:{{color}}" >{{text}}</button>
</view>
<view class='row'>
<view class='info'>
<input class= 'info-input' bindinput="handleVerificationCode" placeholder="請輸入你的驗證碼" />
</view>
</view>
<view class='row'>
<view class='info'>
<input type='password' class= 'info-input' bindinput="handleNewChanges" placeholder="請輸入你的密碼" />
</view>
</view>
<view class='row'>
<view class='info'>
<input type='password' class= 'info-input' bindinput="handleNewChangesAgain" placeholder="請重新輸入你的密碼" />
</view>
</view>
<button class='submit' bindtap='submit'>提交</button>
</view>
<view class = 'success' wx:if="{{success}}">
<web-view src="{{url}}"></web-view>
</view>
/* pages/register/register.wxss */
page{
background: #F0F0F0 ;
}
/*登錄圖片*/
.login-icon{
flex: none;
}
.login-img{
width: 750rpx;
}
.row{
margin-top: 20rpx;
overflow: hidden;
line-height: 100rpx;
border-bottom: 1rpx solid #ccc;
margin-left: 20rpx;
margin-right: 20rpx;
color: #777;
background: #fff;
}
.info-input{
height: 100rpx;
margin-left: 50rpx;
color: #777;
float: left;
}
.info-input1{
height: 100rpx;
margin-left: 50rpx;
color: #777;
float: left;
width: 420rpx;
}
.button{
width: 200rpx;
height: 70rpx;
line-height: 70rpx;
font-size: 28rpx;
background: #33FF99;
float: left;
margin-left: 10rpx;
margin-top: 15rpx;
color: #FFFFFF;
}
.submit{
margin-top: 50rpx;
margin-left: 20rpx;
margin-right: 20rpx;
background: rgb(44, 156, 10);
color: #FFFFFF;
}
.success{
background: #ffffff;
}
.cheer{
text-align: center;
line-height: 400rpx;
font-size: 60rpx;
position: relative;
}
.return{
margin: 20rpx;
}
最後完成效果圖
