<template>
|
<div class="container">
|
<div class="title_img">
|
<img
|
src="../assets/img/loginLogo.png"
|
alt=""
|
/>
|
</div>
|
<div class="main_img">
|
<img
|
src="../assets/img/loginMain.png"
|
alt=""
|
/>
|
</div>
|
<div class="login">
|
<div class="login_title">
|
<span>用户登录</span>
|
</div>
|
<!-- <el-form ref="form" :model="form" :rules="rules" class="loginForm">
|
<el-form-item prop="username">
|
<el-input placeholder="请输入用户名" v-model="form.username">
|
<i slot="prefix" class="el-icon-user"></i>
|
</el-input>
|
</el-form-item>
|
<el-form-item prop="password">
|
<el-input
|
show-password
|
placeholder="请输入密码"
|
v-model="form.password"
|
@keyup.enter.native="onSubmit"
|
>
|
<i slot="prefix" class="el-icon-lock"></i>
|
</el-input>
|
</el-form-item>
|
<el-form-item required>
|
<el-col :span="18">
|
<el-form-item prop="validCode">
|
<el-input
|
v-model="form.validCode"
|
style="width: 280px"
|
placeholder="输入验证码（忽略大小写）"
|
class="nobr"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
|
<el-col :span="6" align="right">
|
<validCode
|
v-model="validCode"
|
ref="refresh"
|
@sendData="getCode"
|
></validCode>
|
</el-col>
|
</el-form-item>
|
<el-form-item>
|
<img src="../assets/img/zhengshu.png" alt="" /><span
|
>证书安装与添加信任站点</span
|
>
|
</el-form-item>
|
<el-form-item>
|
<img src="../assets/img/document.png" alt="" /><span
|
>使用帮助文档</span
|
>
|
</el-form-item>
|
<el-form-item>
|
<el-button
|
type="warning"
|
@click="onSubmit"
|
style="
|
width: 384px;
|
height: 50px;
|
margin-top: 55px;
|
background: #3b4d6e;
|
border-radius: 5px;
|
"
|
>登录</el-button
|
>
|
</el-form-item>
|
</el-form> -->
|
|
<el-form
|
:model="loginForm"
|
:rules="rules"
|
ref="loginForm"
|
class="loginForm"
|
>
|
<el-form-item prop="uid">
|
<el-input
|
v-model="loginForm.uid"
|
placeholder="输入您的账号或手机号"
|
class="nobr"
|
size="meddle"
|
autocomplete="off"
|
>
|
<i
|
slot="prefix"
|
class="el-icon-user"
|
></i>
|
</el-input>
|
</el-form-item>
|
|
<el-form-item prop="pwd">
|
<el-input
|
show-password
|
v-model="loginForm.pwd"
|
placeholder="输入您的密码"
|
class="nobr"
|
autocomplete="off"
|
>
|
<i
|
slot="prefix"
|
class="el-icon-lock"
|
></i>
|
</el-input>
|
</el-form-item>
|
|
<el-form-item required>
|
<el-col :span="18">
|
<el-form-item prop="validCode">
|
<el-input
|
v-model="loginForm.validCode"
|
placeholder="输入验证码（忽略大小写）"
|
class="nobr"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
|
<el-col
|
:span="6"
|
align="right"
|
>
|
<validCode
|
v-model="validCode"
|
ref="refresh"
|
@sendData="getCode"
|
></validCode>
|
</el-col>
|
</el-form-item>
|
<el-form-item>
|
<img
|
src="../assets/img/zhengshu.png"
|
alt=""
|
/><span>证书安装与添加信任站点</span>
|
</el-form-item>
|
<el-form-item>
|
<img
|
src="../assets/img/document.png"
|
alt=""
|
/><span>使用帮助文档</span>
|
</el-form-item>
|
<el-form-item>
|
<el-button
|
type="primary"
|
class="nobr"
|
style="
|
width: 384px;
|
height: 50px;
|
background: #3b4d6e;
|
border-radius: 5px;
|
"
|
:loading="loading"
|
@click="submitForm('loginForm')"
|
>登录</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { getPerms } from '../api/api';
|
import validCode from './verificationCode.vue';
|
import { mapActions } from 'vuex';
|
import moment from 'moment';
|
|
export default {
|
components: { validCode },
|
data() {
|
let validUserName = (rule, value, callback) => {
|
if (!value) {
|
return callback(new Error('用户名不能为空'));
|
} else {
|
callback();
|
}
|
};
|
|
let validPassword = (rule, value, callback) => {
|
if (!value) {
|
return callback(new Error('密码不能为空'));
|
} else {
|
callback();
|
}
|
};
|
|
const checkValidCode = (rule, value, callback) => {
|
|
if (!value) {
|
callback(new Error('请输入验证码'));
|
} else if (value.toUpperCase() !== this.validCode.toUpperCase()) {
|
callback(new Error('验证码不正确'));
|
} else {
|
callback();
|
}
|
};
|
|
return {
|
validCode: '',
|
loading: false,
|
loginForm: {
|
uid: 'admin',
|
pwd: 'Admin@123',
|
},
|
rules: {
|
uid: [{ validator: validUserName, trigger: 'blur' }],
|
pwd: [{ validator: validPassword, trigger: 'blur' }],
|
validCode: [{ validator: checkValidCode, trigger: 'blur' }],
|
},
|
};
|
},
|
mounted() {
|
this.getpublickey();
|
},
|
methods: {
|
// 获取vuex中Actions里的方法
|
...mapActions(['login', 'getpublickey']),
|
getCode(data) {
|
|
this.validCode = data; //在data中定义一个 validCode:'',用来记录验证码。
|
},
|
|
submitForm(formName) {
|
this.$refs[formName].validate((valid) => {
|
if (valid) {
|
this.loading = true;
|
this.login(this.loginForm)
|
.then((response) => {
|
if (response.code != 200) {
|
this.loading = false
|
Message({
|
message: response.msg,
|
type: 'error',
|
duration: 5 * 1000,
|
});
|
return
|
}
|
this.setCookies(response);
|
getPerms().then((res) => {
|
if (res.code == 200) {
|
this.$store.commit('getPermsEntity', res.result);
|
|
if (res.result.length != 0) {
|
this.$router.push('/');
|
}
|
this.loading = false
|
} else {
|
this.loading = false
|
console.log('error submit!!');
|
}
|
});
|
|
this.loading = false;
|
//调用录接口
|
})
|
.catch((response) => {
|
this.loading = false;
|
});
|
//如果登录失败，需要刷新验证码的
|
this.$refs.refresh.createdCode();
|
this.validCode = ''; //清空验证码输入框的内容
|
} else {
|
this.loading = false
|
console.log('error submit!!');
|
return false;
|
}
|
});
|
},
|
setCookies(res) {
|
var timeData = moment(res.result.expire).format('YYYY-MM-DD HH:mm:ss');
|
var LfPrems = {
|
token: res.result.token,
|
uname: res.result.uname,
|
time: timeData,
|
};
|
LfPrems = JSON.stringify(LfPrems);
|
localStorage.setItem('LFToken', LfPrems);
|
},
|
},
|
created() { },
|
};
|
</script>
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
<style scoped>
|
.container {
|
width: 100%;
|
height: 100%;
|
position: fixed;
|
top: 0px;
|
left: 0px;
|
right: 0px;
|
bottom: 0px;
|
background-color: #1c78e0;
|
background-size: 100% 100%;
|
}
|
.title_img {
|
position: absolute;
|
left: 10%;
|
top: 10%;
|
/* transform: translateX(-50%); */
|
}
|
.title_img img {
|
width: 100%;
|
}
|
.main_img {
|
position: absolute;
|
left: 17%;
|
top: 12%;
|
/* transform: translateX(-50%); */
|
}
|
.main_img img {
|
width: 100%;
|
}
|
.login {
|
width: 472px;
|
height: 571px;
|
position: absolute;
|
left: 80%;
|
top: 50%;
|
transform: translate(-50%, -40%);
|
background-color: rgb(255, 255, 255);
|
border-radius: 8px;
|
}
|
|
.login_title {
|
margin-top: 47px;
|
margin-left: 48px;
|
font-size: 25px;
|
font-family: Microsoft YaHei;
|
font-weight: bold;
|
color: #3b4d6e;
|
/* background-color: #bfa; */
|
}
|
.loginForm {
|
margin-top: 61px;
|
margin-left: 48px;
|
/* background-color: #bfa; */
|
width: 385px;
|
}
|
.el-form-item {
|
/* margin-bottom: 12px; */
|
height: 41px;
|
}
|
.el-input /deep/ .el-input__inner {
|
/* background: rgba(80, 152, 255, 0.24); */
|
border-color: rgba(0, 0, 0, 0.1);
|
color: #000;
|
}
|
.el-input /deep/ .el-input-group__prepend {
|
border: 0;
|
padding: 0 !important;
|
}
|
</style>
|
