<template>
|
<view class="container">
|
<view class="wrapper">
|
<view class="welcome">
|
忘记密码
|
</view>
|
<view class="input-content">
|
<view class="input-item">
|
<text class="tit">手机号</text>
|
<input type="text" v-model="phone" placeholder="请输入手机号" maxlength="11" @input="onPhoneInput" />
|
</view>
|
<view class="input-item">
|
<text class="tit">验证码</text>
|
<view class="input-with-button">
|
<input type="text" v-model="code" placeholder="请输入验证码" maxlength="6" />
|
<u-button style="width: 200upx;" @click="sendCode">{{ codeButtonText }}</u-button>
|
</view>
|
</view>
|
<view class="input-item">
|
<text class="tit">新密码</text>
|
<input type="password" v-model="newPassword" placeholder="6-20位大小写字母数字特殊符号组成" maxlength="20" />
|
</view>
|
<view class="input-item">
|
<text class="tit">确认密码</text>
|
<input type="password" v-model="confirmPassword" placeholder="请再次输入新密码" maxlength="20" />
|
</view>
|
</view>
|
<u-button class="confirm-btn" @click="resetPassword" :loading="resetting" :disabled="resetting">重置密码</u-button>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
phone: '13613904912',
|
code: '',
|
newPassword: '',
|
confirmPassword: '',
|
canSendCode: false,
|
codeButtonText: '获取',
|
countdown: 60,
|
resetting: false
|
}
|
},
|
methods: {
|
onPhoneInput() {
|
// 检查手机号是否合法
|
const phoneRegex = /^1[3-9]\d{9}$/;
|
this.canSendCode = phoneRegex.test(this.phone);
|
},
|
sendCode() {
|
if (!this.canSendCode){
|
this.$msg('请输入正确的手机号');
|
return;
|
}
|
|
// 发送验证码逻辑
|
this.codeButtonText = `${this.countdown}秒`;
|
this.canSendCode = false;
|
let timer = setInterval(() => {
|
this.countdown--;
|
this.codeButtonText = `${this.countdown}秒`;
|
if (this.countdown <= 0) {
|
clearInterval(timer);
|
this.codeButtonText = '获取';
|
this.canSendCode = true;
|
this.countdown = 60;
|
}
|
}, 1000);
|
|
// 发送验证码请求
|
this.$http.post('/User/SendSms', { phoneNumber: this.phone })
|
.then(res => {
|
if (res.Check) {
|
this.$msg('验证码已发送');
|
} else {
|
this.$msg('验证码发送失败');
|
}
|
})
|
.catch(error => {
|
console.error(error);
|
this.$msg('验证码发送失败');
|
});
|
},
|
resetPassword() {
|
if (this.newPassword !== this.confirmPassword) {
|
this.$msg('两次输入的密码不一致');
|
return;
|
}
|
|
const passwordRegex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*]).{6,20}$/;
|
if (!passwordRegex.test(this.newPassword)) {
|
this.$msg('密码不符合要求');
|
return;
|
}
|
|
this.resetting = true;
|
// 调用重置密码接口
|
const data = {
|
phone: this.phone,
|
code: this.code,
|
newPassword: this.newPassword
|
};
|
|
this.$http.post('/User/ResetPassword', data)
|
.then(res => {
|
if (res.Check) {
|
this.$msg('密码重置成功');
|
// 重置成功后跳转到登录页面
|
uni.navigateTo({
|
url: '/pages/login/login'
|
});
|
} else {
|
this.$msg('密码重置失败');
|
}
|
})
|
.catch(error => {
|
console.log(error);
|
this.$msg('密码重置失败');
|
})
|
.finally(() => {
|
this.resetting = false;
|
});
|
}
|
}
|
}
|
</script>
|
|
<style lang='scss' scoped>
|
page {
|
background: #fff;
|
}
|
|
.container {
|
padding-top: 115px;
|
position: relative;
|
width: 100vw;
|
height: 100vh;
|
overflow: hidden;
|
background: #fff;
|
}
|
|
.wrapper {
|
position: relative;
|
z-index: 90;
|
background: #fff;
|
padding-bottom: 40upx;
|
}
|
|
.welcome {
|
position: relative;
|
left: 50upx;
|
top: -90upx;
|
font-size: 46upx;
|
color: #555;
|
text-shadow: 1px 0px 1px rgba(0, 0, 0, .3);
|
}
|
|
.input-content {
|
padding: 0 60upx;
|
}
|
|
.input-item {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 0 30upx;
|
background: #f8f8f8;
|
height: 120upx;
|
border-radius: 4px;
|
margin-bottom: 50upx;
|
|
&:last-child {
|
margin-bottom: 0;
|
}
|
|
.tit {
|
width: 150upx!important;
|
height: 50upx;
|
line-height: 56upx;
|
font-size: 30upx;
|
color: #333;
|
margin-right: 2upx;
|
}
|
|
input {
|
height: 60upx;
|
font-size: 32upx;
|
color: #333;
|
width: 100%;
|
}
|
|
.input-with-button {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
width: 100%;
|
|
input {
|
width: calc(100% - 230upx); /* 减去按钮的宽度 */
|
margin-right: 20upx;
|
}
|
|
button {
|
height: 60upx;
|
line-height: 60upx;
|
font-size: 30upx;
|
color: #fff;
|
background: $uni-color-primary;
|
border: none;
|
border-radius: 4px;
|
}
|
}
|
}
|
|
.confirm-btn {
|
width: 630upx;
|
height: 76upx;
|
line-height: 76upx;
|
border-radius: 50px;
|
margin-top: 70upx;
|
background: $uni-color-primary;
|
color: #fff;
|
font-size: 32upx;
|
|
&:after {
|
border-radius: 100px;
|
}
|
}
|
</style>
|
