完成了登录模块
This commit is contained in:
142
pages/loginModule/forgetPwd/forgetPwd.js
Normal file
142
pages/loginModule/forgetPwd/forgetPwd.js
Normal file
@ -0,0 +1,142 @@
|
||||
// pages/loginModule/forgetPwd/forgetPwd.js
|
||||
const { baseUrl } = require('../../../request');
|
||||
const { validate } = require('../../../utils/validate');
|
||||
|
||||
Page({
|
||||
data: {
|
||||
phone: '',
|
||||
code: '',
|
||||
newPwd: '',
|
||||
confirmPwd: '',
|
||||
countdown: 0,
|
||||
codeButtonText: '发送验证码',
|
||||
_timer: null
|
||||
},
|
||||
|
||||
// 手机号输入
|
||||
onPhoneInput(e) {
|
||||
this.setData({ phone: e.detail.value });
|
||||
},
|
||||
// 验证码输入
|
||||
onCodeInput(e) {
|
||||
this.setData({ code: e.detail.value });
|
||||
},
|
||||
// 新密码输入
|
||||
onNewPwdInput(e) {
|
||||
this.setData({ newPwd: e.detail.value });
|
||||
},
|
||||
// 确认密码输入
|
||||
onConfirmPwdInput(e) {
|
||||
this.setData({ confirmPwd: e.detail.value });
|
||||
},
|
||||
|
||||
// 发送验证码
|
||||
getSmsCode() {
|
||||
const { phone } = this.data;
|
||||
// 1. 非空
|
||||
if (!validate(this.data, { phone: '请输入手机号' })) return;
|
||||
// 2. 格式
|
||||
if (!/^1\d{10}$/.test(phone)) {
|
||||
return wx.showToast({ title: '手机号格式不正确', icon: 'none' });
|
||||
}
|
||||
// 3. 请求验证码
|
||||
wx.request({
|
||||
url: baseUrl + '/userInfo/code',
|
||||
method: 'POST',
|
||||
data: { templateString: phone },
|
||||
success: () => {
|
||||
wx.showToast({ title: '验证码已发送', icon: 'none' });
|
||||
this._startCountdown(60);
|
||||
},
|
||||
fail: () => {
|
||||
wx.showToast({ title: '发送失败，请重试', icon: 'none' });
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 开始倒计时
|
||||
_startCountdown(seconds) {
|
||||
this.setData({
|
||||
countdown: seconds,
|
||||
codeButtonText: `${seconds}s后重试`
|
||||
});
|
||||
if (this.data._timer) return; // 已在倒计时中
|
||||
this.data._timer = setInterval(() => {
|
||||
let cd = this.data.countdown - 1;
|
||||
if (cd <= 0) {
|
||||
this._clearTimer();
|
||||
this.setData({
|
||||
countdown: 0,
|
||||
codeButtonText: '发送验证码'
|
||||
});
|
||||
} else {
|
||||
this.setData({
|
||||
countdown: cd,
|
||||
codeButtonText: `${cd}s后重试`
|
||||
});
|
||||
}
|
||||
}, 1000);
|
||||
},
|
||||
|
||||
// 清除定时器
|
||||
_clearTimer() {
|
||||
if (this.data._timer) {
|
||||
clearInterval(this.data._timer);
|
||||
this.data._timer = null;
|
||||
}
|
||||
},
|
||||
|
||||
// 重置密码
|
||||
resetPassword() {
|
||||
const { phone, code, newPwd, confirmPwd } = this.data;
|
||||
// 1. 非空校验
|
||||
if (!validate(this.data, {
|
||||
phone: '请输入手机号',
|
||||
code: '请输入验证码',
|
||||
newPwd: '请输入新密码',
|
||||
confirmPwd: '请再次输入新密码'
|
||||
})) return;
|
||||
// 2. 密码一致
|
||||
if (newPwd !== confirmPwd) {
|
||||
return wx.showToast({ title: '两次密码不一致', icon: 'none' });
|
||||
}
|
||||
// 3. 格式校验手机号
|
||||
if (!/^1\d{10}$/.test(phone)) {
|
||||
return wx.showToast({ title: '手机号格式不正确', icon: 'none' });
|
||||
}
|
||||
// 4. 发起重置请求
|
||||
wx.request({
|
||||
url: baseUrl + '/userInfo/mini/forgetPwd',
|
||||
method: 'POST',
|
||||
data: {
|
||||
phoneNumber: phone,
|
||||
verificationCode: code,
|
||||
newPassword: newPwd
|
||||
},
|
||||
success: res => {
|
||||
if (res.data.code === 1) {
|
||||
wx.showToast({ title: '重置成功', icon: 'success' });
|
||||
// 清理并跳登录
|
||||
this._clearTimer();
|
||||
setTimeout(() => {
|
||||
wx.navigateTo({ url: '/pages/login/login' });
|
||||
}, 800);
|
||||
} else {
|
||||
wx.showToast({ title: res.data.message||'重置失败', icon: 'none' });
|
||||
}
|
||||
},
|
||||
fail: () => {
|
||||
wx.showToast({ title: '网络错误，请重试', icon: 'none' });
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 点击“登录账号”回登录页
|
||||
gotoLogin() {
|
||||
wx.navigateTo({ url: '/pages/loginModule/pwdLogin/pwdLogin' });
|
||||
},
|
||||
|
||||
onUnload() {
|
||||
this._clearTimer();
|
||||
}
|
||||
});
|
||||
3
pages/loginModule/forgetPwd/forgetPwd.json
Normal file
3
pages/loginModule/forgetPwd/forgetPwd.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"usingComponents": {}
|
||||
}
|
||||
75
pages/loginModule/forgetPwd/forgetPwd.wxml
Normal file
75
pages/loginModule/forgetPwd/forgetPwd.wxml
Normal file
@ -0,0 +1,75 @@
|
||||
<view class="flex-col page">
|
||||
<image
|
||||
class="self-center image"
|
||||
src="https://ide.code.fun/api/image?token=6827630f4ae84d00122fd0c8&name=f8bf0cb3ec8201f89a31727a655c0709.png"
|
||||
/>
|
||||
<text class="self-center text">欢迎登陆—青橙校园</text>
|
||||
|
||||
<view class="flex-col self-stretch group">
|
||||
<text class="self-start font text_2">忘记密码</text>
|
||||
|
||||
<!-- 手机号 -->
|
||||
<view class="flex-col justify-start self-stretch relative section mt-20">
|
||||
<input
|
||||
class="flex-col justify-start items-start text-wrapper view input"
|
||||
placeholder="请输入手机号"
|
||||
maxlength="11"
|
||||
model:value="{{phone}}"
|
||||
bindinput="onPhoneInput"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="flex-col self-stretch group_2 mt-20">
|
||||
<!-- 验证码 + 发送 -->
|
||||
<view class="flex-row items-center self-stretch relative section_2">
|
||||
<input
|
||||
class="flex-col justify-start items-start text-wrapper_2 view_2 input_1"
|
||||
placeholder="请输入验证码"
|
||||
maxlength="6"
|
||||
model:value="{{code}}"
|
||||
bindinput="onCodeInput"
|
||||
/>
|
||||
<text
|
||||
class="flex-col justify-start items-center shrink-0 text-wrapper_3 ml-12 text_6 send-code {{ countdown>0 ? 'disabled' : '' }}"
|
||||
bindtap="{{ countdown>0 ? '' : 'getSmsCode' }}"
|
||||
>{{ codeButtonText }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 新密码 -->
|
||||
<view class="flex-col justify-start self-stretch relative section_1 mt-22">
|
||||
<input
|
||||
class="flex-col justify-start items-start text-wrapper text-wrapper_1 input_2"
|
||||
placeholder="请输入密码"
|
||||
password="true"
|
||||
model:value="{{newPwd}}"
|
||||
bindinput="onNewPwdInput"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 确认密码 -->
|
||||
<view class="flex-col justify-start self-stretch relative section_3 mt-22">
|
||||
<input
|
||||
class="flex-col justify-start items-start text-wrapper text-wrapper_5 input_3"
|
||||
placeholder="请再次输入密码"
|
||||
password="true"
|
||||
model:value="{{confirmPwd}}"
|
||||
bindinput="onConfirmPwdInput"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 登录账号 -->
|
||||
<text
|
||||
class="self-end text_9 mt-22 link"
|
||||
bindtap="gotoLogin"
|
||||
>登录账号</text>
|
||||
|
||||
<!-- 重置密码 按钮 -->
|
||||
<view
|
||||
class="flex-col justify-start items-center self-stretch text-wrapper_4 mt-22 reset-button"
|
||||
bindtap="resetPassword"
|
||||
>
|
||||
<text class="text_10">重置密码</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
131
pages/loginModule/forgetPwd/forgetPwd.wxss
Normal file
131
pages/loginModule/forgetPwd/forgetPwd.wxss
Normal file
@ -0,0 +1,131 @@
|
||||
.page {
|
||||
padding: 86.25rpx 46.2rpx 326.25rpx 49.89rpx;
|
||||
background-color: #ffffff;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
.image {
|
||||
width: 232.5rpx;
|
||||
height: 232.5rpx;
|
||||
}
|
||||
.text {
|
||||
margin-top: 37.8rpx;
|
||||
color: #1c2023;
|
||||
font-size: 37.5rpx;
|
||||
font-family: SourceHanSansCN;
|
||||
line-height: 35.18rpx;
|
||||
}
|
||||
.group {
|
||||
margin-top: 86.14rpx;
|
||||
}
|
||||
.font {
|
||||
font-size: 30rpx;
|
||||
font-family: SourceHanSansCN;
|
||||
line-height: 27.79rpx;
|
||||
color: #b3b3b3;
|
||||
}
|
||||
.text_2 {
|
||||
color: #1c2023;
|
||||
line-height: 28.09rpx;
|
||||
}
|
||||
.section {
|
||||
margin-left: 2.61rpx;
|
||||
margin-right: 4.42rpx;
|
||||
padding: 20.63rpx 0 18.75rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 9.38rpx;
|
||||
box-shadow: 0rpx 3.75rpx 11.25rpx #00000040;
|
||||
}
|
||||
.text-wrapper {
|
||||
margin-left: 16.88rpx;
|
||||
margin-right: 16.88rpx;
|
||||
}
|
||||
.view {
|
||||
padding: 15.92rpx 0 12.64rpx;
|
||||
background-color: #ffffff00;
|
||||
}
|
||||
.group_2 {
|
||||
padding-left: 2.61rpx;
|
||||
}
|
||||
.section_2 {
|
||||
margin-right: 4.42rpx;
|
||||
padding: 20.16rpx 16.88rpx 19.22rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 9.38rpx;
|
||||
box-shadow: 0rpx 3.75rpx 7.5rpx #00000040;
|
||||
}
|
||||
.text-wrapper_2 {
|
||||
flex: 1 1 0;
|
||||
}
|
||||
.view_2 {
|
||||
padding: 12.51rpx 0 15.96rpx;
|
||||
background-color: #ffffff00;
|
||||
height: 66.25rpx;
|
||||
}
|
||||
.text-wrapper_3 {
|
||||
margin-right: 18.77rpx;
|
||||
padding: 13.16rpx 0 10.93rpx;
|
||||
background-color: #ff8d1a;
|
||||
border-radius: 9.38rpx;
|
||||
width: 157.5rpx;
|
||||
height: 45rpx;
|
||||
}
|
||||
.text_6 {
|
||||
color: #ffffff;
|
||||
font-size: 22.5rpx;
|
||||
font-family: AlibabaPuHuiTi;
|
||||
line-height: 20.91rpx;
|
||||
}
|
||||
.section_1 {
|
||||
margin-right: 4.42rpx;
|
||||
padding: 21.56rpx 0 17.81rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 9.38rpx;
|
||||
box-shadow: 0rpx 3.75rpx 7.5rpx #00000040;
|
||||
}
|
||||
.text-wrapper_1 {
|
||||
padding: 13.84rpx 0 14.55rpx;
|
||||
background-color: #ffffff00;
|
||||
}
|
||||
.section_3 {
|
||||
margin-right: 4.42rpx;
|
||||
padding: 19.22rpx 0 20.16rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 9.38rpx;
|
||||
box-shadow: 0rpx 3.75rpx 7.5rpx #00000040;
|
||||
}
|
||||
.text-wrapper_5 {
|
||||
padding: 13.37rpx 0 14.87rpx;
|
||||
background-color: #ffffff00;
|
||||
}
|
||||
.text_9 {
|
||||
color: #1c2023;
|
||||
font-size: 26.25rpx;
|
||||
font-family: SourceHanSansCN;
|
||||
line-height: 24.23rpx;
|
||||
}
|
||||
.text-wrapper_4 {
|
||||
margin-right: 4.42rpx;
|
||||
padding: 36.04rpx 0 34.01rpx;
|
||||
background-color: #ff8d1a;
|
||||
border-radius: 9.38rpx;
|
||||
}
|
||||
.text_10 {
|
||||
color: #ffffff;
|
||||
font-size: 30rpx;
|
||||
font-family: AlibabaPuHuiTi;
|
||||
line-height: 27.45rpx;
|
||||
}
|
||||
.input {
|
||||
padding: 15rpx 16.26rpx 13.13rpx 16.26rpx;
|
||||
}
|
||||
.input_1 {
|
||||
padding: 13.13rpx 16.26rpx 16.88rpx 16.26rpx;
|
||||
}
|
||||
.input_2 {
|
||||
padding: 13.13rpx 16.26rpx 15rpx 16.26rpx;
|
||||
}
|
||||
.input_3 {
|
||||
padding: 13.13rpx 16.26rpx 15rpx 16.26rpx;
|
||||
}
|
||||
Reference in New Issue
Block a user