|
|
|
|
@ -8,7 +8,12 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="login-mian">
|
|
|
|
|
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
|
|
|
|
|
<el-form
|
|
|
|
|
ref="loginForm"
|
|
|
|
|
:model="loginForm"
|
|
|
|
|
:rules="loginRules"
|
|
|
|
|
class="login-form"
|
|
|
|
|
>
|
|
|
|
|
<h3 class="title">外汇模拟交易系统</h3>
|
|
|
|
|
<el-form-item prop="username">
|
|
|
|
|
<el-input
|
|
|
|
|
@ -17,7 +22,11 @@
|
|
|
|
|
auto-complete="off"
|
|
|
|
|
placeholder="账号"
|
|
|
|
|
>
|
|
|
|
|
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
|
|
|
|
|
<svg-icon
|
|
|
|
|
slot="prefix"
|
|
|
|
|
icon-class="user"
|
|
|
|
|
class="el-input__icon input-icon"
|
|
|
|
|
/>
|
|
|
|
|
</el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item prop="password">
|
|
|
|
|
@ -28,23 +37,29 @@
|
|
|
|
|
placeholder="密码"
|
|
|
|
|
@keyup.enter.native="handleLogin"
|
|
|
|
|
>
|
|
|
|
|
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
|
|
|
|
|
<svg-icon
|
|
|
|
|
slot="prefix"
|
|
|
|
|
icon-class="password"
|
|
|
|
|
class="el-input__icon input-icon"
|
|
|
|
|
/>
|
|
|
|
|
</el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item style="width:100%;">
|
|
|
|
|
<el-form-item style="width: 100%">
|
|
|
|
|
<el-button
|
|
|
|
|
:loading="loading"
|
|
|
|
|
size="medium"
|
|
|
|
|
type="primary"
|
|
|
|
|
style="width:100%;"
|
|
|
|
|
style="width: 100%"
|
|
|
|
|
@click.native.prevent="handleLogin"
|
|
|
|
|
>
|
|
|
|
|
<span v-if="!loading">登 录</span>
|
|
|
|
|
<span v-else>登 录 中...</span>
|
|
|
|
|
</el-button>
|
|
|
|
|
<div v-if="register" style="float: right;">
|
|
|
|
|
<router-link class="link-type" :to="'/register'">立即注册</router-link>
|
|
|
|
|
<div v-if="register" style="float: right">
|
|
|
|
|
<router-link class="link-type" :to="'/register'"
|
|
|
|
|
>立即注册</router-link
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
@ -58,49 +73,52 @@
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
// import { getCodeImg } from "@/api/login";
|
|
|
|
|
import Cookies from 'js-cookie'
|
|
|
|
|
import { encrypt, decrypt } from '@/utils/jsencrypt'
|
|
|
|
|
|
|
|
|
|
import Cookies from "js-cookie";
|
|
|
|
|
import { encrypt, decrypt } from "@/utils/jsencrypt";
|
|
|
|
|
import { getRouters } from "@/api/menu";
|
|
|
|
|
import { getroleId } from "@/utils/auth";
|
|
|
|
|
export default {
|
|
|
|
|
name: 'Login',
|
|
|
|
|
name: "Login",
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
codeUrl: '',
|
|
|
|
|
codeUrl: "",
|
|
|
|
|
loginForm: {
|
|
|
|
|
username: '',
|
|
|
|
|
password: '',
|
|
|
|
|
username: "",
|
|
|
|
|
password: "",
|
|
|
|
|
rememberMe: false,
|
|
|
|
|
code: '',
|
|
|
|
|
uuid: ''
|
|
|
|
|
code: "",
|
|
|
|
|
uuid: "",
|
|
|
|
|
},
|
|
|
|
|
loginRules: {
|
|
|
|
|
username: [
|
|
|
|
|
{ required: true, trigger: 'blur', message: '请输入您的账号' }
|
|
|
|
|
{ required: true, trigger: "blur", message: "请输入您的账号" },
|
|
|
|
|
],
|
|
|
|
|
password: [
|
|
|
|
|
{ required: true, trigger: 'blur', message: '请输入您的密码' }
|
|
|
|
|
{ required: true, trigger: "blur", message: "请输入您的密码" },
|
|
|
|
|
],
|
|
|
|
|
code: [{ required: true, trigger: 'change', message: '请输入验证码' }]
|
|
|
|
|
code: [{ required: true, trigger: "change", message: "请输入验证码" }],
|
|
|
|
|
},
|
|
|
|
|
loading: false,
|
|
|
|
|
// 验证码开关
|
|
|
|
|
captchaEnabled: true,
|
|
|
|
|
// 注册开关
|
|
|
|
|
register: false,
|
|
|
|
|
redirect: undefined
|
|
|
|
|
}
|
|
|
|
|
redirect: undefined,
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
|
$route: {
|
|
|
|
|
handler: function(route) {
|
|
|
|
|
this.redirect = route.query && route.query.redirect
|
|
|
|
|
handler: function (route) {
|
|
|
|
|
this.redirect = route.query && route.query.redirect;
|
|
|
|
|
},
|
|
|
|
|
immediate: true
|
|
|
|
|
}
|
|
|
|
|
immediate: true,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
Cookies.remove("Admin-Token");
|
|
|
|
|
localStorage.removeItem("limitsRoutes");
|
|
|
|
|
// this.getCode();
|
|
|
|
|
this.getCookie()
|
|
|
|
|
this.getCookie();
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
getCode() {
|
|
|
|
|
@ -113,46 +131,78 @@ export default {
|
|
|
|
|
// });
|
|
|
|
|
},
|
|
|
|
|
getCookie() {
|
|
|
|
|
const username = Cookies.get('username')
|
|
|
|
|
const password = Cookies.get('password')
|
|
|
|
|
const username = Cookies.get("username");
|
|
|
|
|
const password = Cookies.get("password");
|
|
|
|
|
|
|
|
|
|
this.loginForm = {
|
|
|
|
|
username: username === undefined ? this.loginForm.username : username,
|
|
|
|
|
password: password === undefined ? this.loginForm.password : decrypt(password)
|
|
|
|
|
}
|
|
|
|
|
password:
|
|
|
|
|
password === undefined ? this.loginForm.password : decrypt(password),
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
handleLogin() {
|
|
|
|
|
this.$refs.loginForm.validate(valid => {
|
|
|
|
|
this.$refs.loginForm.validate((valid) => {
|
|
|
|
|
if (valid) {
|
|
|
|
|
this.loading = true
|
|
|
|
|
this.loading = true;
|
|
|
|
|
if (this.loginForm.rememberMe) {
|
|
|
|
|
Cookies.set('username', this.loginForm.username, { expires: 30 })
|
|
|
|
|
Cookies.set('password', encrypt(this.loginForm.password), { expires: 30 })
|
|
|
|
|
Cookies.set("username", this.loginForm.username, { expires: 30 });
|
|
|
|
|
Cookies.set("password", encrypt(this.loginForm.password), {
|
|
|
|
|
expires: 30,
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
Cookies.remove('username')
|
|
|
|
|
Cookies.remove('password')
|
|
|
|
|
Cookies.remove("username");
|
|
|
|
|
Cookies.remove("password");
|
|
|
|
|
}
|
|
|
|
|
const username = Cookies.get('username')
|
|
|
|
|
const password = Cookies.get('password')
|
|
|
|
|
const username = Cookies.get("username");
|
|
|
|
|
const password = Cookies.get("password");
|
|
|
|
|
const loginForm = {
|
|
|
|
|
username: username === undefined ? this.loginForm.username : username,
|
|
|
|
|
passwordEncode: password === undefined ? encrypt(this.loginForm.password) : password
|
|
|
|
|
}
|
|
|
|
|
this.$store.dispatch('Login', loginForm).then(() => {
|
|
|
|
|
console.log('loginForm', loginForm)
|
|
|
|
|
this.$router.push({ path: this.redirect || '/' })
|
|
|
|
|
}).catch(() => {
|
|
|
|
|
console.log('dsdsdsd')
|
|
|
|
|
this.loading = false
|
|
|
|
|
// if (this.captchaEnabled) {
|
|
|
|
|
// this.getCode();
|
|
|
|
|
// }
|
|
|
|
|
})
|
|
|
|
|
username:
|
|
|
|
|
username === undefined ? this.loginForm.username : username,
|
|
|
|
|
passwordEncode:
|
|
|
|
|
password === undefined
|
|
|
|
|
? encrypt(this.loginForm.password)
|
|
|
|
|
: password,
|
|
|
|
|
};
|
|
|
|
|
this.$store
|
|
|
|
|
.dispatch("Login", loginForm)
|
|
|
|
|
.then(() => {
|
|
|
|
|
console.log("loginForm", loginForm);
|
|
|
|
|
// this.getRouterList();
|
|
|
|
|
getRouters().then((res) => {
|
|
|
|
|
if (res.data?.length) {
|
|
|
|
|
localStorage.setItem("limitsRoutes", res.data);
|
|
|
|
|
if (getroleId() == 4) {
|
|
|
|
|
this.$router.push({
|
|
|
|
|
path: this.redirect || "/student/index",
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
this.$router.push({ path: this.redirect || "/teacher" });
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
localStorage.setItem("limitsRoutes",['/teacher']);
|
|
|
|
|
if (getroleId() == 4) {
|
|
|
|
|
this.$router.push({
|
|
|
|
|
path: this.redirect || "/student/index",
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
this.$router.push({ path: this.redirect || "/teacher" });
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
console.log("res111", localStorage.getItem("limitsRoutes"));
|
|
|
|
|
});
|
|
|
|
|
})
|
|
|
|
|
.catch(() => {
|
|
|
|
|
console.log("dsdsdsd");
|
|
|
|
|
this.loading = false;
|
|
|
|
|
// if (this.captchaEnabled) {
|
|
|
|
|
// this.getCode();
|
|
|
|
|
// }
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style rel="stylesheet/scss" lang="scss">
|
|
|
|
|
@ -167,43 +217,42 @@ export default {
|
|
|
|
|
background-size: cover;
|
|
|
|
|
// transform: translate(10%,10%);
|
|
|
|
|
}
|
|
|
|
|
.login-header{
|
|
|
|
|
.login-header {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
// height: 80px;
|
|
|
|
|
background: #3c76df;
|
|
|
|
|
width: 100%;
|
|
|
|
|
.login-centen{
|
|
|
|
|
.login-centen {
|
|
|
|
|
width: 50%;
|
|
|
|
|
height: 80px;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
.logo{
|
|
|
|
|
width: 180px;
|
|
|
|
|
height: 80px;
|
|
|
|
|
a{
|
|
|
|
|
display: block;
|
|
|
|
|
width: 177px;
|
|
|
|
|
height: 48px;
|
|
|
|
|
background: url("../assets/logo/login-logo.png") no-repeat;
|
|
|
|
|
background-size: cover;
|
|
|
|
|
transform: translate(1%, 30%);;
|
|
|
|
|
}
|
|
|
|
|
.logo {
|
|
|
|
|
width: 180px;
|
|
|
|
|
height: 80px;
|
|
|
|
|
a {
|
|
|
|
|
display: block;
|
|
|
|
|
width: 177px;
|
|
|
|
|
height: 48px;
|
|
|
|
|
background: url("../assets/logo/login-logo.png") no-repeat;
|
|
|
|
|
background-size: cover;
|
|
|
|
|
transform: translate(1%, 30%);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.title {
|
|
|
|
|
margin: 0px auto 30px auto;
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: #707070;
|
|
|
|
|
}
|
|
|
|
|
.login-mian{
|
|
|
|
|
.login-mian {
|
|
|
|
|
width: 50%;
|
|
|
|
|
// height: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: end;
|
|
|
|
|
align-content: center;
|
|
|
|
|
|
|
|
|
|
justify-content: end;
|
|
|
|
|
align-content: center;
|
|
|
|
|
}
|
|
|
|
|
.login-form {
|
|
|
|
|
border-radius: 6px;
|
|
|
|
|
|
qinzhenpen
2 years ago