You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
297 lines
10 KiB
Vue
297 lines
10 KiB
Vue
<template>
|
|
<div style="overflow: auto; height: 100%; margin: 0 auto">
|
|
<el-card
|
|
class="el-card"
|
|
style="
|
|
width: 60%;
|
|
margin-top: 35px;
|
|
margin-left:20%;
|
|
margin-bottom: 35px;
|
|
text-align: center;
|
|
"
|
|
>
|
|
<div slot="header" style="font-weight: bold">
|
|
<span>忘记密码</span>
|
|
</div>
|
|
<el-form
|
|
:model="inputQuery"
|
|
:rules="rules"
|
|
ref="inputQuery"
|
|
style="margin-left: 20%"
|
|
>
|
|
<el-row :gutter="20">
|
|
<el-col :span="4">
|
|
<div class="register-text">
|
|
<span>用户账号: </span>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="10">
|
|
<el-form-item prop="nickName">
|
|
<el-input
|
|
size="small"
|
|
placeholder="请输入登录用户账号"
|
|
v-model="inputQuery.userName"
|
|
@input="change()"
|
|
></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :span="4">
|
|
<div class="register-text">
|
|
<span>新密码: </span>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="10">
|
|
<el-form-item prop="password">
|
|
<el-input
|
|
size="small"
|
|
placeholder="请输入密码"
|
|
type="password"
|
|
v-model="inputQuery.password"
|
|
@input="change()"
|
|
></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="20">
|
|
<el-col :span="4">
|
|
<div class="register-text">
|
|
<span>确认密码: </span>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="10">
|
|
<el-form-item prop="confirmPassword">
|
|
<el-input
|
|
size="small"
|
|
type="password"
|
|
placeholder="请确认密码"
|
|
v-model="inputQuery.confirmPassword"
|
|
@input="change()"
|
|
></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="20">
|
|
<el-col :span="4">
|
|
<div class="register-text">
|
|
<span>手机号: </span>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="7">
|
|
<el-form-item prop="mobile">
|
|
<el-input
|
|
size="small"
|
|
placeholder="请输入手机号"
|
|
v-model="inputQuery.mobile"
|
|
@input="change()"
|
|
></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="3">
|
|
<el-button
|
|
type="primary"
|
|
size="small"
|
|
icon="search"
|
|
:disabled="isTimer"
|
|
style="margin-top: 3.5px"
|
|
@click="getCheckCode"
|
|
>
|
|
<span>{{ btnTitle }}</span>
|
|
</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :span="4">
|
|
<div class="register-text">
|
|
<span>手机验证码: </span>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="10">
|
|
<el-form-item prop="checkCode">
|
|
<el-input
|
|
size="small"
|
|
placeholder="请输入手机验证码"
|
|
v-model="inputQuery.checkCode"
|
|
@input="change()"
|
|
></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<div style="width: 100%">
|
|
<el-form-item>
|
|
<el-button
|
|
type="primary"
|
|
size="small"
|
|
icon="search"
|
|
style="margin-top: 20px; "
|
|
@click="onSubmit('inputQuery')"
|
|
>重置密码
|
|
</el-button
|
|
>
|
|
|
|
<el-button type="primary" icon="search" @click="intentBack" style="margin-right: 130px"
|
|
>返回
|
|
</el-button
|
|
>
|
|
</el-form-item>
|
|
</div>
|
|
</el-form>
|
|
</el-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {getCheckcode, register, resetPasswd} from "@/api/auth/register";
|
|
import {
|
|
provinceAndCityData,
|
|
regionData,
|
|
provinceAndCityDataPlus,
|
|
regionDataPlus,
|
|
CodeToText,
|
|
TextToCode,
|
|
} from "element-china-area-data";
|
|
|
|
export default {
|
|
data() {
|
|
let validatePass2 = (rule, value, callback) => {
|
|
if (value === "") {
|
|
callback(new Error("请再次输入密码"));
|
|
} else if (value !== this.inputQuery.password) {
|
|
callback(new Error("两次输入密码不一致!"));
|
|
} else {
|
|
callback();
|
|
}
|
|
};
|
|
return {
|
|
inputQuery: {
|
|
password: "",
|
|
mobile: "",
|
|
confirmPassword: "",
|
|
checkCode: "",
|
|
userName: "",
|
|
},
|
|
isTimer: false,
|
|
btnTitle: "获取验证码",
|
|
options: regionDataPlus,
|
|
selectedOptions: [],
|
|
|
|
rules: {
|
|
password: [{required: true, message: "请输入密码", trigger: "blur"}],
|
|
|
|
mobile: [{required: true, message: "请输入手机号", trigger: "blur"}],
|
|
confirmPassword: [
|
|
{required: true, message: "请确认密码", trigger: "blur"},
|
|
{validator: validatePass2, trigger: "blur"},
|
|
],
|
|
checkCode: [
|
|
{required: true, message: "请输入手机验证码", trigger: "blur"},
|
|
],
|
|
},
|
|
};
|
|
},
|
|
created() {
|
|
this.getData();
|
|
},
|
|
methods: {
|
|
onSubmit(formName) {
|
|
this.$refs[formName].validate((valid) => {
|
|
if (valid) {
|
|
this.loading = true;
|
|
resetPasswd(this.inputQuery).then((response) => {
|
|
if (response.code === 20000) {
|
|
this.loading = false;
|
|
this.$alert("密码重置成功，点击确定即可登录", "密码重置", {
|
|
confirmButtonText: "确定",
|
|
callback: (action) => {
|
|
this.$router.push({path: "../login"});
|
|
},
|
|
});
|
|
} else {
|
|
this.$message.error(response.message);
|
|
}
|
|
});
|
|
} else {
|
|
return false;
|
|
}
|
|
});
|
|
},
|
|
|
|
getData() {
|
|
this.loading = true;
|
|
getCompany().then((response) => {
|
|
this.loading = false;
|
|
this.inputQuery = response.data;
|
|
});
|
|
},
|
|
|
|
getCheckCode(mobile) {
|
|
let tquery = {
|
|
phoneNum: this.inputQuery.mobile,
|
|
userName: this.inputQuery.userName,
|
|
};
|
|
getCheckcode(tquery).then((response) => {
|
|
if (response.code === 20000) {
|
|
this.validateBtn();
|
|
} else {
|
|
this.$message.error(response.message);
|
|
}
|
|
});
|
|
},
|
|
intentBack() {
|
|
// this.$router.push({path:'../readme/detail',query:{id:row.corpOrderId}});
|
|
this.$router.go(-1);
|
|
},
|
|
validateBtn() {
|
|
//倒计时
|
|
let time = 60;
|
|
let timer = setInterval(() => {
|
|
if (time === 0) {
|
|
clearInterval(timer);
|
|
this.isTimer = false;
|
|
this.btnTitle = "获取验证码";
|
|
} else {
|
|
this.btnTitle = time + "秒后重试";
|
|
this.isTimer = true;
|
|
time--;
|
|
}
|
|
}, 1000);
|
|
},
|
|
|
|
handleChange(value) {
|
|
this.inputQuery.area =
|
|
CodeToText[value[0]] + CodeToText[value[1]] + CodeToText[value[2]];
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style>
|
|
.register-text {
|
|
width: 100%;
|
|
font-size: 13px;
|
|
font-family: "Microsoft YaHei";
|
|
float: left;
|
|
text-align: left;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.el-card {
|
|
margin-right: 20px;
|
|
margin-top: 15px;
|
|
/*transition: all .5s;*/
|
|
}
|
|
|
|
.el-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.el-col {
|
|
border-radius: 4px;
|
|
flex-wrap: wrap;
|
|
}
|
|
</style>
|