129 lines
3.3 KiB
Vue
129 lines
3.3 KiB
Vue
<template>
|
|
<el-form ref="loginForm" :model="form" :rules="rules" label-width="0" size="large" @keyup.enter="login">
|
|
<el-form-item prop="email" style="margin-bottom: 25px;">
|
|
<el-input v-model="form.email" prefix-icon="el-icon-message" clearable
|
|
placeholder="邮箱号">
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="code" style="margin-bottom: 20px;">
|
|
<div class="login-msg-yzm">
|
|
<el-input v-model="form.code" prefix-icon="el-icon-unlock" clearable
|
|
placeholder="验证码"></el-input>
|
|
<el-button @click="getCode" :disabled="disabled">获取验证码<span v-if="disabled">
|
|
({{ time }})</span></el-button>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" style="width: 100%;" :loading="islogin" @click="login">登录
|
|
</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
redirect: undefined,
|
|
form: {
|
|
email: "",
|
|
code: "",
|
|
},
|
|
rules: {
|
|
email: [
|
|
{ required: true, message: "请输入邮箱号" },
|
|
{
|
|
validator: (rule, value, callback) => {
|
|
let reg = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
|
|
if (reg.test(value)) {
|
|
callback();
|
|
} else {
|
|
callback(new Error('请输入正确的邮箱号'));
|
|
}
|
|
}
|
|
}
|
|
],
|
|
code: [
|
|
{ required: true, message: "请输入验证码" }
|
|
]
|
|
},
|
|
disabled: false,
|
|
time: 0,
|
|
islogin: false,
|
|
}
|
|
},
|
|
mounted() {
|
|
|
|
},
|
|
watch: {
|
|
$route: {
|
|
handler: function (route) {
|
|
this.redirect = route.query && route.query.redirect;
|
|
},
|
|
immediate: true,
|
|
},
|
|
},
|
|
methods: {
|
|
async getCode() {
|
|
let that = this;
|
|
var validate = await this.$refs.loginForm.validateField("email").catch(() => { })
|
|
if (!validate) { return false }
|
|
this.$API.auth.email_code.req({ email: that.form.email }).then(res => {
|
|
this.$message.success('验证码已发送')
|
|
this.disabled = true;
|
|
this.time = 60
|
|
var t = setInterval(() => {
|
|
this.time -= 1
|
|
if (this.time < 1) {
|
|
clearInterval(t)
|
|
this.disabled = false
|
|
this.time = 0
|
|
}
|
|
}, 1000)
|
|
}).catch(err => {
|
|
this.disabled = false;
|
|
this.$message.warning(err)
|
|
})
|
|
},
|
|
async login() {
|
|
let that = this;
|
|
this.$refs.loginForm.validate(async (valid) => {
|
|
if (valid) {
|
|
this.$API.auth.login_email_code.req(that.form).then(res => {
|
|
that.$TOOL.data.set("TOKEN", res.access);
|
|
that.$TOOL.data.set("TOKEN_REFRESH", res.refresh);
|
|
that.$TOOL.data.set("TOKEN_TIME", new Date().getTime());
|
|
that.$API.auth.info.get().then(async res1 => {
|
|
that.$TOOL.data.set("USER_INFO", res1);
|
|
that.$TOOL.data.set("PERMISSIONS", Object.keys(res1.perms));
|
|
let base_dashboard = this.$TOOL.data.get('BASE_INFO').base.base_dashboard;
|
|
|
|
if (base_dashboard == null || base_dashboard == undefined || base_dashboard == '') {
|
|
base_dashboard = '/dashboard'
|
|
}
|
|
if(this.$TOOL.data.get('BASE_INFO').base.base_menucate=='dynamic'){
|
|
try{
|
|
var res = await that.$API.system.user.routers.req({})
|
|
this.$TOOL.data.set("MENU",res)
|
|
console.log(res)
|
|
} catch (err) {
|
|
}
|
|
}
|
|
this.$router.replace({
|
|
path: base_dashboard,
|
|
});
|
|
|
|
})
|
|
}).catch(err => {
|
|
this.disabled = false;
|
|
this.$message.warning(err)
|
|
})
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style></style>
|