404 lines
11 KiB
Vue
404 lines
11 KiB
Vue
<template>
|
|
<!-- 重置密码 -->
|
|
<div class="main-content">
|
|
<div class="top-content">
|
|
<span>智慧工地云</span>
|
|
<div @click="backRouter">返回</div>
|
|
</div>
|
|
<div class="center-title">
|
|
<div>
|
|
<span>重置密码</span>
|
|
</div>
|
|
<div>
|
|
<el-steps :active="stepActive" align-center>
|
|
<el-step
|
|
title="验证账号"
|
|
:status="stepActive == 1 ? 'process' : 'finish'"
|
|
></el-step>
|
|
<el-step
|
|
title="重置密码"
|
|
:status="
|
|
stepActive == 2 ? 'process' : stepActive == 3 ? 'finish' : 'wait'
|
|
"
|
|
></el-step>
|
|
<el-step
|
|
title="完成"
|
|
:status="
|
|
stepActive == 2 ? 'wait' : stepActive == 3 ? 'finish' : 'wait'
|
|
"
|
|
></el-step>
|
|
</el-steps>
|
|
</div>
|
|
</div>
|
|
<div class="center-form" v-if="stepActive != 3">
|
|
<el-form
|
|
v-if="[1, 2].includes(stepActive)"
|
|
:model="resetForm"
|
|
ref="resetForm"
|
|
:rules="resetFormRules"
|
|
label-width="100px"
|
|
style="width: 30%;"
|
|
>
|
|
<el-form-item
|
|
label="账号"
|
|
prop="account"
|
|
v-if="[1].includes(stepActive)"
|
|
>
|
|
<el-input v-model="resetForm.account" placeholder="请输入"></el-input>
|
|
</el-form-item>
|
|
<el-form-item
|
|
label="图形验证码"
|
|
prop="imgCode"
|
|
v-if="[1].includes(stepActive) && !firstNext"
|
|
>
|
|
<div class="imgCodeBox">
|
|
<el-input
|
|
v-model="resetForm.imgCode"
|
|
placeholder="请输入图形验证码"
|
|
></el-input>
|
|
<img :src="codeImgData.img" @click="getImgCode" alt="" />
|
|
</div>
|
|
</el-form-item>
|
|
<!-- 找回方式 -->
|
|
<el-form-item
|
|
label="邮箱"
|
|
prop="backEmail"
|
|
v-if="[1].includes(stepActive) && firstNext"
|
|
>
|
|
<el-input
|
|
disabled
|
|
v-model="resetForm.backEmail"
|
|
placeholder="请输入"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item
|
|
label="邮箱验证码"
|
|
prop="emailCode"
|
|
v-if="[1].includes(stepActive) && firstNext"
|
|
>
|
|
<div class="imgCodeBox">
|
|
<el-input
|
|
v-model="resetForm.emailCode"
|
|
placeholder="请输入"
|
|
></el-input>
|
|
<el-button
|
|
type="primary"
|
|
size="medium"
|
|
:disabled="sendDisabled"
|
|
@click="sendBtn"
|
|
style="margin-left: 15px;"
|
|
>{{ sendTimeTitle }}
|
|
<span v-show="!showSendTime" class="count"
|
|
>发送验证码({{ count }}s)</span
|
|
></el-button
|
|
>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item
|
|
label="新密码"
|
|
prop="newPassword"
|
|
v-if="[2].includes(stepActive)"
|
|
>
|
|
<el-input
|
|
v-model="resetForm.newPassword"
|
|
placeholder="请输入"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item
|
|
label="确认密码"
|
|
prop="comfirmPassword"
|
|
v-if="[2].includes(stepActive)"
|
|
>
|
|
<el-input
|
|
v-model="resetForm.comfirmPassword"
|
|
placeholder="请输入"
|
|
></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<div class="center-reset-finished" v-else>
|
|
<span>用户账号{{ resetForm.account }}密码已重置,请返回登录</span>
|
|
</div>
|
|
<div class="center-footer" style="text-align: center">
|
|
<el-button
|
|
type="primary"
|
|
@click="firstChange"
|
|
style="width: 22%;"
|
|
v-if="[1].includes(stepActive) && !firstNext"
|
|
>继续
|
|
</el-button>
|
|
<el-button
|
|
type="primary"
|
|
@click="next"
|
|
style="width: 22%;"
|
|
v-if="[1, 2, 3].includes(stepActive) && firstNext"
|
|
>继续
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import {
|
|
getImgCodeApi,
|
|
imgCodeCheckAccountApi,
|
|
getEmailByAccountApi,
|
|
sendEmailCodeApi,
|
|
checkEmailCodeApi,
|
|
resetPasswordApi
|
|
} from "@/assets/js/api/loginSign";
|
|
const TIME_COUNT = 60; // 邮箱验证码发送间隔时间
|
|
export default {
|
|
data() {
|
|
return {
|
|
sendDisabled: false, // 默认倒计时的时候禁用发送
|
|
sendTimeTitle: "发送验证码", // 验证码button的title名字
|
|
showSendTime: true, // 启动倒计时
|
|
count: "", // 初始化次数
|
|
stepActive: 1,
|
|
resetForm: {
|
|
account: "",
|
|
imgCode: "",
|
|
backEmail: "",
|
|
emailCode: "",
|
|
newPassword: "",
|
|
comfirmPassword: "",
|
|
},
|
|
resetFormRules: {
|
|
account: [{ required: true, message: "请输入", trigger: "blur" }],
|
|
imgCode: [{ required: true, message: "请输入", trigger: "blur" }],
|
|
backEmail: [{ required: true, message: "请输入", trigger: "blur" }],
|
|
emailCode: [{ required: true, message: "请输入", trigger: "blur" }],
|
|
newPassword: [
|
|
{ required: true, message: "请输入", trigger: "blur" },
|
|
{
|
|
pattern: /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[!@#$%^&*()_+~`\-={}[\]:";'<>?,./])[a-zA-Z\d!@#$%^&*()_+~`\-={}[\]:";'<>?,./]{8,}$/,
|
|
message:
|
|
"密码必须包含至少一个字母、一个数字、一个特殊字符以及长度至少为8位数",
|
|
trigger: "blur",
|
|
},
|
|
],
|
|
comfirmPassword: [
|
|
{ required: true, message: "请输入", trigger: "blur" },
|
|
{
|
|
pattern: /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[!@#$%^&*()_+~`\-={}[\]:";'<>?,./])[a-zA-Z\d!@#$%^&*()_+~`\-={}[\]:";'<>?,./]{8,}$/,
|
|
message:
|
|
"密码必须包含至少一个字母、一个数字、一个特殊字符以及长度至少为8位数",
|
|
trigger: "blur",
|
|
},
|
|
],
|
|
},
|
|
codeImgData: {
|
|
img: "",
|
|
graphValidateCodeUuid: "",
|
|
},
|
|
firstNext: false,
|
|
emailCodeData: {
|
|
uuid: ""
|
|
}
|
|
};
|
|
},
|
|
created() {
|
|
this.getImgCode();
|
|
},
|
|
// 销毁前清除计时器
|
|
beforeDestroy() {
|
|
clearInterval(this.timer);
|
|
},
|
|
methods: {
|
|
// 发送验证码函数
|
|
sendCodeFn(){
|
|
sendEmailCodeApi({account: this.resetForm.account, type: 1}).then(res => {
|
|
if(res.code == 200){
|
|
this.$message.success("发送成功");
|
|
}
|
|
})
|
|
},
|
|
// 发送验证码按钮点击
|
|
sendBtn() {
|
|
this.sumitDisabled = true;
|
|
// 调用发送验证码接口
|
|
this.sendCodeFn();
|
|
if (!this.timer) {
|
|
this.count = TIME_COUNT;
|
|
this.showSendTime = false;
|
|
this.sendTimeTitle = "";
|
|
this.sendDisabled = true;
|
|
this.timer = setInterval(() => {
|
|
if (this.count > 0 && this.count <= TIME_COUNT) {
|
|
this.count--;
|
|
} else {
|
|
this.showSendTime = true;
|
|
clearInterval(this.timer); // 清除定时器
|
|
this.count = TIME_COUNT;
|
|
this.timer = null;
|
|
this.sendTimeTitle = "发送验证码";
|
|
this.sendDisabled = false; // 可以重新发送验证码
|
|
}
|
|
}, 1000);
|
|
}
|
|
},
|
|
// 根据账号获取邮箱
|
|
getEmailByAccount() {
|
|
getEmailByAccountApi({ account: this.resetForm.account }).then((res) => {
|
|
console.log(res, "我的邮箱");
|
|
this.resetForm.backEmail = res.result.email;
|
|
});
|
|
},
|
|
backRouter() {
|
|
this.$router.back();
|
|
},
|
|
getImgCode() {
|
|
let requestData = {};
|
|
getImgCodeApi(requestData).then((res) => {
|
|
if (res.result) {
|
|
// this.replyData = res.result;
|
|
for (let i in this.codeImgData) {
|
|
this.codeImgData[i] = res.result[i];
|
|
}
|
|
}
|
|
});
|
|
},
|
|
// 第一步切换
|
|
firstChange() {
|
|
this.$refs.resetForm.validate((valid) => {
|
|
if (valid) {
|
|
let requestData = {
|
|
account: this.resetForm.account,
|
|
graphValidateCode: this.resetForm.imgCode,
|
|
graphValidateCodeUuid: this.codeImgData.graphValidateCodeUuid,
|
|
};
|
|
imgCodeCheckAccountApi(requestData).then((res) => {
|
|
if (res.code == 200) {
|
|
this.firstNext = true;
|
|
this.getEmailByAccount();
|
|
}
|
|
});
|
|
this.getImgCode();
|
|
}
|
|
});
|
|
},
|
|
next() {
|
|
if(this.stepActive == 3){
|
|
this.$router.push("/login")
|
|
return;
|
|
}
|
|
this.$refs.resetForm.validate((valid) => {
|
|
if (valid) {
|
|
if(this.stepActive == 1){
|
|
let requestData = {
|
|
account: this.resetForm.account,
|
|
code: this.resetForm.emailCode
|
|
};
|
|
checkEmailCodeApi(requestData).then((res) => {
|
|
if (res.code == 200) {
|
|
this.emailCodeData.uuid = res.result.uuid;
|
|
this.stepActive = this.stepActive + 1;
|
|
}
|
|
});
|
|
} else if(this.stepActive == 2){
|
|
if(this.resetForm.newPassword.trim() != this.resetForm.comfirmPassword.trim()){
|
|
this.$message.error("两次输入的密码不一致");
|
|
return;
|
|
}
|
|
let requestData = {
|
|
account: this.resetForm.account,
|
|
password: this.resetForm.comfirmPassword,
|
|
uuid: this.emailCodeData.uuid
|
|
};
|
|
resetPasswordApi(requestData).then((res) => {
|
|
if (res.code == 200) {
|
|
this.$message.success("操作成功");
|
|
this.stepActive = this.stepActive + 1;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.flex() {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.main-content {
|
|
.top-content {
|
|
.flex();
|
|
height: 60px;
|
|
background: url("../../assets/images/login_bg.png") 100% 29% no-repeat;
|
|
span {
|
|
color: white;
|
|
font-size: 20px;
|
|
margin-left: 30px;
|
|
margin-right: auto;
|
|
}
|
|
div {
|
|
padding: 4px 8px;
|
|
color: white;
|
|
border: 1px solid white;
|
|
border-radius: 4px;
|
|
margin-right: 30px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.center-title {
|
|
margin-top: 70px;
|
|
> div {
|
|
.flex();
|
|
justify-content: center;
|
|
}
|
|
> div:nth-child(1) {
|
|
margin-bottom: 40px;
|
|
span {
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 22px;
|
|
color: #272d45;
|
|
}
|
|
}
|
|
> div:nth-child(2) {
|
|
/deep/.el-steps {
|
|
width: 45%;
|
|
}
|
|
}
|
|
}
|
|
.center-form {
|
|
.flex();
|
|
justify-content: center;
|
|
margin-top: 35px;
|
|
// /deep/.el-input {
|
|
// width: 92%;
|
|
// }
|
|
.imgCodeBox {
|
|
.flex();
|
|
justify-content: space-between;
|
|
// .sendDisabledStyle {
|
|
// background-color: #ddd;
|
|
// // color: #57a3f3;
|
|
// color: #909399;
|
|
// cursor: not-allowed; // 鼠标变化
|
|
// line-height: 0px;
|
|
// padding: 2px;
|
|
// }
|
|
// .verificationScanCode-closeBtn {
|
|
// background: #ffffff;
|
|
// border-radius: 4px 4px 4px 4px;
|
|
// opacity: 1;
|
|
// border: 1px solid #e6e9f0;
|
|
// line-height: 0px;
|
|
// }
|
|
}
|
|
}
|
|
.center-reset-finished{
|
|
.flex();
|
|
justify-content: center;
|
|
margin-top: 35px;
|
|
}
|
|
.center-footer {
|
|
margin-top: 30px;
|
|
}
|
|
}
|
|
</style>
|