parent
50d877f2f3
commit
76bde18c5a
@ -0,0 +1,235 @@ |
|||||||
|
<template> |
||||||
|
<el-container> |
||||||
|
<div style="margin: 10px 0 10px 0 ;position:absolute;right:20px;top:auto;"> |
||||||
|
<el-button round icon="el-icon-arrow-left" @click="$router.go(-1)"/> |
||||||
|
<el-button round icon="el-icon-s-home" @click="$router.push({name:'FirIndex'})"/> |
||||||
|
|
||||||
|
</div> |
||||||
|
<el-header> |
||||||
|
<div> |
||||||
|
<span>忘记密码</span> |
||||||
|
</div> |
||||||
|
|
||||||
|
</el-header> |
||||||
|
<el-main> |
||||||
|
<el-form ref="form" :model="form"> |
||||||
|
<el-form-item> |
||||||
|
<el-input v-model="form.email" prefix-icon="el-icon-user" placeholder="邮箱" autofocus |
||||||
|
clearable/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item style="height: 40px" v-if="cptch.cptch_image"> |
||||||
|
<el-row style="height: 40px"> |
||||||
|
<el-col :span="16"> |
||||||
|
<el-input placeholder="请输入验证码" v-model="form.authcode" maxlength="6" |
||||||
|
@keyup.enter.native="onSubmit" clearable/> |
||||||
|
</el-col> |
||||||
|
<el-col :span="8"> |
||||||
|
<el-image |
||||||
|
style="margin:0 4px;border-radius:4px;cursor:pointer;height: 40px" |
||||||
|
:src="cptch.cptch_image" |
||||||
|
fit="contain" @click="get_auth_code"> |
||||||
|
</el-image> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item> |
||||||
|
<div id="captcha" ref="captcha"></div> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item style="margin-top: 30px"> |
||||||
|
<el-button type="danger" :disabled="login_disable" @click="onSubmit">发送重置密码邮件</el-button> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item style="margin-top: 30px"> |
||||||
|
<el-button type="primary" @click="onLogin">我是老用户,要登录</el-button> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item v-if="register_enable" style="margin-top: 30px"> |
||||||
|
<el-button type="primary" @click="onRegister" plain>注册</el-button> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
</el-form> |
||||||
|
|
||||||
|
|
||||||
|
</el-main> |
||||||
|
|
||||||
|
|
||||||
|
</el-container> |
||||||
|
|
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import {loginFun} from "@/restful"; |
||||||
|
import {checkEmail, geetest} from "@/utils"; |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "FirResetPwd", |
||||||
|
data() { |
||||||
|
return { |
||||||
|
form: { |
||||||
|
email: '', |
||||||
|
password: '', |
||||||
|
authcode: '' |
||||||
|
}, |
||||||
|
cptch: {"cptch_image": '', "cptch_key": '', "length": 8}, |
||||||
|
activeName: 'username', |
||||||
|
allow_ways: {}, |
||||||
|
rutitle: '', |
||||||
|
rctitle: '', |
||||||
|
register_enable: false, |
||||||
|
login_disable: false, |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
is_cptch() { |
||||||
|
let cptch_flag = this.form.authcode.length === this.cptch.length; |
||||||
|
if (this.cptch.cptch_key === '' || !this.cptch.cptch_key) { |
||||||
|
cptch_flag = true |
||||||
|
} |
||||||
|
return cptch_flag |
||||||
|
}, |
||||||
|
onSubmit() { |
||||||
|
let email = this.form.email; |
||||||
|
let authcode = this.form.authcode; |
||||||
|
let cptch_flag = this.form.authcode.length === this.cptch.length; |
||||||
|
if (this.cptch.cptch_key === '' || !this.cptch.cptch_key) { |
||||||
|
cptch_flag = true |
||||||
|
} |
||||||
|
if (cptch_flag) { |
||||||
|
let checke = checkEmail(this.form.email); |
||||||
|
if (!checke) { |
||||||
|
this.$message({ |
||||||
|
message: '邮箱输入有误', |
||||||
|
type: 'error' |
||||||
|
}); |
||||||
|
return |
||||||
|
} |
||||||
|
let params = { |
||||||
|
"username": email, |
||||||
|
"authcode": authcode, |
||||||
|
"cptch_key": this.cptch.cptch_key, |
||||||
|
"login_type": 'reset', |
||||||
|
}; |
||||||
|
this.login_disable = true; |
||||||
|
if (this.cptch.geetest) { |
||||||
|
geetest(this, params, (n_params) => { |
||||||
|
this.do_login(n_params); |
||||||
|
}) |
||||||
|
} else { |
||||||
|
this.do_login(params) |
||||||
|
} |
||||||
|
|
||||||
|
} else { |
||||||
|
this.$message({ |
||||||
|
message: '验证码有误', |
||||||
|
type: 'warning' |
||||||
|
}); |
||||||
|
} |
||||||
|
}, |
||||||
|
do_login(params) { |
||||||
|
loginFun(data => { |
||||||
|
if (data.code === 1000) { |
||||||
|
this.$message({ |
||||||
|
message: '密码重置成功,请登录邮箱查看邮件', |
||||||
|
type: 'success' |
||||||
|
}); |
||||||
|
|
||||||
|
} else { |
||||||
|
this.$message({ |
||||||
|
message: data.msg, |
||||||
|
type: 'error' |
||||||
|
}); |
||||||
|
this.get_auth_code(); |
||||||
|
} |
||||||
|
this.login_disable = false; |
||||||
|
}, { |
||||||
|
"methods": "POST", |
||||||
|
"data": params |
||||||
|
}); |
||||||
|
}, |
||||||
|
onRegister() { |
||||||
|
this.$router.push({name: 'FirRegist'}) |
||||||
|
}, |
||||||
|
onLogin() { |
||||||
|
this.$router.push({name: 'FirLogin'}) |
||||||
|
}, |
||||||
|
get_auth_code() { |
||||||
|
loginFun(data => { |
||||||
|
if (data.code === 1000) { |
||||||
|
this.cptch = data.data; |
||||||
|
this.register_enable = data.data.register_enable; |
||||||
|
this.form.authcode = ''; |
||||||
|
} else { |
||||||
|
this.$message({ |
||||||
|
message: data.msg, |
||||||
|
type: 'error' |
||||||
|
}); |
||||||
|
} |
||||||
|
}, { |
||||||
|
"methods": "GET", |
||||||
|
"data": {} |
||||||
|
}); |
||||||
|
}, |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.get_auth_code(); |
||||||
|
}, created() { |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
|
||||||
|
.el-container { |
||||||
|
margin: 10px auto; |
||||||
|
width: 1266px; |
||||||
|
} |
||||||
|
|
||||||
|
.el-header { |
||||||
|
margin-top: 13%; |
||||||
|
} |
||||||
|
|
||||||
|
.el-form { |
||||||
|
max-width: 360px; |
||||||
|
margin: 0 auto; |
||||||
|
} |
||||||
|
|
||||||
|
.el-form-item .el-button { |
||||||
|
max-width: 360px; |
||||||
|
/*padding: 16px 20px;*/ |
||||||
|
width: 100%; |
||||||
|
position: relative; |
||||||
|
height: 50px; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.el-header { |
||||||
|
text-align: center; |
||||||
|
overflow: hidden; |
||||||
|
margin-bottom: 50px |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.el-header div span { |
||||||
|
font-size: 24px; |
||||||
|
display: inline-block; |
||||||
|
vertical-align: middle; |
||||||
|
padding: 8px 40px |
||||||
|
} |
||||||
|
|
||||||
|
.el-header div:before, .el-header div:after { |
||||||
|
content: ' '; |
||||||
|
display: inline-block; |
||||||
|
vertical-align: middle; |
||||||
|
width: 50%; |
||||||
|
height: 1px; |
||||||
|
background-color: #babfc3; |
||||||
|
margin: 0 0 0 -50% |
||||||
|
} |
||||||
|
|
||||||
|
.el-header div { |
||||||
|
text-align: center |
||||||
|
} |
||||||
|
|
||||||
|
.el-header div:after { |
||||||
|
margin: 0 -50% 0 0 |
||||||
|
} |
||||||
|
</style> |
Loading…
Reference in new issue