426 lines
11 KiB
Vue
426 lines
11 KiB
Vue
|
<template>
|
|||
|
|
<view class="flex-col page">
|
|||
|
|
<!-- <image src="/static/common/img/16530269846087107196.png" class="image"/> -->
|
|||
|
|
<u-navbar title="重置密码"></u-navbar>
|
|||
|
|
<view class="flex-col group" v-if="state === 1">
|
|||
|
|
<text class="text">重置密码</text>
|
|||
|
|
<view class="flex-col group_7">
|
|||
|
|
<view class="flex-col">
|
|||
|
|
<!-- <text class="text_1">手机号</text> -->
|
|||
|
|
<view class="text-wrapper flex-row view">
|
|||
|
|
<u-input
|
|||
|
|
v-model="phone"
|
|||
|
|
:disabled="disabled"
|
|||
|
|
placeholder="请输入手机号"
|
|||
|
|
type="text"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="flex-col group_6">
|
|||
|
|
<!-- <text class="text_1">短信验证码</text> -->
|
|||
|
|
<view class="text-wrapper flex-row view" style="padding: 0">
|
|||
|
|
<u-input
|
|||
|
|
v-model="code"
|
|||
|
|
placeholder="请输入短信验证码"
|
|||
|
|
type="text"
|
|||
|
|
/>
|
|||
|
|
<u-button
|
|||
|
|
:disabled="!(send == '发送验证码')"
|
|||
|
|
class="custom-style"
|
|||
|
|
style="background: transparent"
|
|||
|
|
@click="sendCode"
|
|||
|
|
>{{ send }}
|
|||
|
|
</u-button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- <navigator class="text_6" url="/pages/login/login/login">登录</navigator> -->
|
|||
|
|
<u-button
|
|||
|
|
class="flex-col items-center text-wrapper_1"
|
|||
|
|
shape="circle"
|
|||
|
|
type="primary"
|
|||
|
|
@click="login"
|
|||
|
|
>
|
|||
|
|
<text class="text_7">重置密码</text>
|
|||
|
|
</u-button>
|
|||
|
|
</view>
|
|||
|
|
<view class="flex-col group" v-if="state === 2">
|
|||
|
|
<text class="text">遇见身边的校友</text>
|
|||
|
|
<view class="flex-col group_7">
|
|||
|
|
<view class="flex-col">
|
|||
|
|
<u-input
|
|||
|
|
v-model="passWord"
|
|||
|
|
class="view text-wrapper"
|
|||
|
|
placeholder="请输入新密码"
|
|||
|
|
type="password"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
<view class="flex-col group_6">
|
|||
|
|
<u-input
|
|||
|
|
v-model="passWordTwo"
|
|||
|
|
class="view text-wrapper"
|
|||
|
|
placeholder="请确认新密码"
|
|||
|
|
type="password"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="tips">
|
|||
|
|
<image src="/static/common/img/infoCircle.png"></image>
|
|||
|
|
提示：密码长度应该大于5，必须包含字母、数字、特殊字符，且不能包含中文!
|
|||
|
|
</view>
|
|||
|
|
<u-button
|
|||
|
|
class="flex-col items-center text-wrapper_1"
|
|||
|
|
shape="circle"
|
|||
|
|
throttle-time="1000"
|
|||
|
|
type="primary"
|
|||
|
|
@click="login"
|
|||
|
|
>
|
|||
|
|
<text class="text_7">立即重置</text>
|
|||
|
|
</u-button>
|
|||
|
|
<u-button
|
|||
|
|
class="flex-col items-center text-wrapper_1"
|
|||
|
|
shape="circle"
|
|||
|
|
style=" margin-top: 10px"
|
|||
|
|
type="primary"
|
|||
|
|
@click="state = 1"
|
|||
|
|
>
|
|||
|
|
<text class="text_7">返回</text>
|
|||
|
|
</u-button>
|
|||
|
|
</view>
|
|||
|
|
<u-top-tips ref="uTips" :navbar-height="0"></u-top-tips>
|
|||
|
|
<u-toast ref="uToast"/>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
<script>
|
|||
|
|
import md5 from "js-md5";
|
|||
|
|
import {aesEncrypt} from "@/utils/encrypt.js";
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
show: false,
|
|||
|
|
phone: "",
|
|||
|
|
passWord: "",
|
|||
|
|
code: "",
|
|||
|
|
passWordTwo: "",
|
|||
|
|
agreement: false,
|
|||
|
|
disabled: false,
|
|||
|
|
send: "发送验证码",
|
|||
|
|
state: 1,
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
onLoad(e) {
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 提示
|
|||
|
|
tips(title, type, time) {
|
|||
|
|
this.$refs.uToast.show({
|
|||
|
|
title: title ? title : "",
|
|||
|
|
type: type ? type : "success",
|
|||
|
|
duration: time ? time + "" : "1500",
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 发送验证码
|
|||
|
|
sendCode() {
|
|||
|
|
var reg = new RegExp("^[1][3,4,5,6,7,8,9][0-9]{9}$", "g"); //手机号
|
|||
|
|
if (this.phone === "" || !reg.test(this.phone)) {
|
|||
|
|
// this.$tips("请输入正确的手机号码", "error");
|
|||
|
|
this.$refs.uToast.show({
|
|||
|
|
title: '请输入正确的手机号码',
|
|||
|
|
type: 'error',
|
|||
|
|
})
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const timestamp = Date.now();
|
|||
|
|
const base64Key = btoa('xiaoyout!#@12345');
|
|||
|
|
const signStr = this.phone + timestamp + base64Key;
|
|||
|
|
const sign = md5(signStr);
|
|||
|
|
|
|||
|
|
this.$u.apiList
|
|||
|
|
.GetAppValidateCode({
|
|||
|
|
phone: this.phone,
|
|||
|
|
t: timestamp.toString(),
|
|||
|
|
sign: sign,
|
|||
|
|
type: 2,
|
|||
|
|
})
|
|||
|
|
.then((res) => {
|
|||
|
|
//中间数字加密
|
|||
|
|
// let result =this.userName.replace(this.userName.substring(3,7),"****")
|
|||
|
|
// this.userName = result
|
|||
|
|
this.disabled = true;
|
|||
|
|
// this.$tips("发送成功");
|
|||
|
|
this.$refs.uToast.show({
|
|||
|
|
title: '发送成功',
|
|||
|
|
type: 'success',
|
|||
|
|
})
|
|||
|
|
var second = 60;
|
|||
|
|
this.send = second + "秒后重试";
|
|||
|
|
var time = setInterval(() => {
|
|||
|
|
this.send = second + "秒后重试";
|
|||
|
|
second--;
|
|||
|
|
if (second <= 0) {
|
|||
|
|
this.disabled = false;
|
|||
|
|
this.send = "发送验证码";
|
|||
|
|
clearInterval(time);
|
|||
|
|
}
|
|||
|
|
}, 1000);
|
|||
|
|
})
|
|||
|
|
.catch((err) => {
|
|||
|
|
// this.$tips(err.error, "error");
|
|||
|
|
this.$refs.uToast.show({
|
|||
|
|
title: err.error,
|
|||
|
|
type: 'error',
|
|||
|
|
})
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
login() {
|
|||
|
|
if (this.state == 1) {
|
|||
|
|
if (this.phone === "") {
|
|||
|
|
return this.tips("请输入手机号", "error");
|
|||
|
|
}
|
|||
|
|
if (this.code === "") {
|
|||
|
|
return this.tips("请输入验证码", "error");
|
|||
|
|
}
|
|||
|
|
this.$u.apiList.ForgotPasswordValidate({
|
|||
|
|
phone: this.phone,
|
|||
|
|
code: this.code,
|
|||
|
|
}).then((res) => {
|
|||
|
|
console.info("🚀 ~ file:ForgetPassword method: line:189 -----", res)
|
|||
|
|
this.state = 2;
|
|||
|
|
}).catch((err) => {
|
|||
|
|
this.tips(err.error, "error");
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
if (this.state == 2) {
|
|||
|
|
if (this.passWord === "") {
|
|||
|
|
return this.tips("请输入新密码", "error");
|
|||
|
|
}
|
|||
|
|
let reg = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[\W_]).{5,}$/;
|
|||
|
|
if (!reg.test(this.passWord)) {
|
|||
|
|
/* return this.$tips(
|
|||
|
|
"密码必须包含字母、数字、特殊字符，且不能包含中文!",
|
|||
|
|
"error"
|
|||
|
|
); */
|
|||
|
|
return this.$refs.uToast.show({
|
|||
|
|
title: "密码必须包含字母、数字、特殊字符，且不能包含中文!",
|
|||
|
|
type: 'error',
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
if (this.passWordTwo === "") {
|
|||
|
|
return this.tips("请确认新密码", "error");
|
|||
|
|
}
|
|||
|
|
if (this.passWord != this.passWordTwo) {
|
|||
|
|
return this.tips("请检查两次密码是否一致", "error");
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
const req = {
|
|||
|
|
phone: this.phone,
|
|||
|
|
code: this.code,
|
|||
|
|
newPassWord: aesEncrypt(this.passWord),
|
|||
|
|
};
|
|||
|
|
console.log(req, "res-");
|
|||
|
|
// return
|
|||
|
|
this.$u.apiList
|
|||
|
|
.ForgotPassword(req)
|
|||
|
|
.then((res) => {
|
|||
|
|
console.log(res, "res---");
|
|||
|
|
uni.showToast({
|
|||
|
|
title: "重置成功",
|
|||
|
|
duration: 2000,
|
|||
|
|
});
|
|||
|
|
setTimeout(() => {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: "/",
|
|||
|
|
});
|
|||
|
|
}, 2000);
|
|||
|
|
})
|
|||
|
|
.catch((err) => {
|
|||
|
|
console.log(err, "err---");
|
|||
|
|
// this.$tips(err.error, "error");
|
|||
|
|
this.$refs.uToast.show({
|
|||
|
|
title: err.error,
|
|||
|
|
type: 'error',
|
|||
|
|
})
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.custom-style {
|
|||
|
|
color: #3cb5fb !important;
|
|||
|
|
padding: 0 !important;
|
|||
|
|
height: 70rpx !important;
|
|||
|
|
line-height: 60rpx !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.custom-style::after {
|
|||
|
|
border: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.page {
|
|||
|
|
padding-bottom: 0.015rem;
|
|||
|
|
background-color: rgb(255, 255, 255);
|
|||
|
|
overflow-y: auto;
|
|||
|
|
width: 100%;
|
|||
|
|
overflow-x: hidden;
|
|||
|
|
height: 100%;
|
|||
|
|
|
|||
|
|
.image {
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
align-self: flex-start;
|
|||
|
|
width: 102%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.group {
|
|||
|
|
padding: 1.0rem 0.29rem;
|
|||
|
|
|
|||
|
|
.text {
|
|||
|
|
align-self: left;
|
|||
|
|
// color: rgb(46, 155, 255);
|
|||
|
|
color: #000;
|
|||
|
|
font-size: 0.22rem;
|
|||
|
|
font-family: PingFang;
|
|||
|
|
line-height: 0.17rem;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.group_7 {
|
|||
|
|
margin-top: 0.29rem;
|
|||
|
|
|
|||
|
|
.text-wrapper {
|
|||
|
|
border: solid 2rpx #dcdfe6;
|
|||
|
|
border-radius: 100rpx;
|
|||
|
|
background: #f6f8fa;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.group_6 {
|
|||
|
|
margin-top: 0.2rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text_1 {
|
|||
|
|
margin-left: 0.01rem;
|
|||
|
|
align-self: flex-start;
|
|||
|
|
color: rgb(51, 51, 51);
|
|||
|
|
font-size: 0.15rem;
|
|||
|
|
font-family: PingFang;
|
|||
|
|
line-height: 0.14rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.view {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
padding: 20rpx 50rpx !important;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text_6 {
|
|||
|
|
width: 100%;
|
|||
|
|
text-align: right;
|
|||
|
|
margin-left: 0.01rem;
|
|||
|
|
margin-top: 0.2rem;
|
|||
|
|
align-self: flex-start;
|
|||
|
|
color: #1F2232;
|
|||
|
|
font-size: 0.13rem;
|
|||
|
|
font-family: PingFang;
|
|||
|
|
line-height: 0.13rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text-wrapper_1 {
|
|||
|
|
margin: 50rpx 0rpx 40rpx;
|
|||
|
|
padding: 50rpx 0 50rpx;
|
|||
|
|
// background-image: linear-gradient(90deg, rgb(135, 230, 254) 0%, rgb(91, 192, 254) 52%, rgb(46, 155, 255) 100%);
|
|||
|
|
background: #3cb4fb;
|
|||
|
|
box-shadow: 0px 6rpx 9rpx rgba(38, 122, 199, 0.34);
|
|||
|
|
border-radius: 100rpx;
|
|||
|
|
|
|||
|
|
.text_7 {
|
|||
|
|
color: rgb(255, 255, 255);
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-family: PingFang;
|
|||
|
|
line-height: 32rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.group_1 {
|
|||
|
|
margin-top: 0.12rem;
|
|||
|
|
|
|||
|
|
.text_8 {
|
|||
|
|
color: rgb(102, 102, 102);
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
font-family: PingFang;
|
|||
|
|
line-height: 0.13rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text_9 {
|
|||
|
|
margin-left: 0.035rem;
|
|||
|
|
color: rgb(25, 140, 255);
|
|||
|
|
font-size: 0.14rem;
|
|||
|
|
font-family: PingFang;
|
|||
|
|
line-height: 0.13rem;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.group_2 {
|
|||
|
|
margin-top: 0.36rem;
|
|||
|
|
justify-content: center;
|
|||
|
|
|
|||
|
|
.section_1 {
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
width: 0.17rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.group_3 {
|
|||
|
|
margin-left: 0.11rem;
|
|||
|
|
height: 0.18rem;
|
|||
|
|
line-height: 0.18rem;
|
|||
|
|
font-size: 0;
|
|||
|
|
|
|||
|
|
.text_10 {
|
|||
|
|
color: rgb(153, 153, 153);
|
|||
|
|
font-size: 0.11rem;
|
|||
|
|
font-family: PingFang;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text_11 {
|
|||
|
|
color: rgb(25, 140, 255);
|
|||
|
|
font-size: 0.11rem;
|
|||
|
|
font-family: PingFang;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text_12 {
|
|||
|
|
color: rgb(102, 102, 102);
|
|||
|
|
font-size: 0.11rem;
|
|||
|
|
font-family: PingFang;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text_13 {
|
|||
|
|
color: rgb(25, 140, 255);
|
|||
|
|
font-size: 0.11rem;
|
|||
|
|
font-family: PingFang;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tips {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #EF3920;
|
|||
|
|
display: flex;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
|
|||
|
|
image {
|
|||
|
|
width: 32rpx;
|
|||
|
|
height: 32rpx;
|
|||
|
|
margin-right: 10rpx;
|
|||
|
|
margin-top: 5rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|