init
This commit is contained in:
294
front/src/views/login/index.vue
Normal file
294
front/src/views/login/index.vue
Normal file
@@ -0,0 +1,294 @@
|
||||
<template>
|
||||
<div class="Login" style="background-color:#FFF;">
|
||||
<div>
|
||||
<img :src="imgTitle" height="100px" alt="" />
|
||||
</div>
|
||||
<div class="background" style="margin-bottom:110px;margin-top:110px;background-color:#2d3a4b;">
|
||||
<img :src="imgBack" width="70%" height="80%" alt="" />
|
||||
</div>
|
||||
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on"
|
||||
label-position="left" style="float:right">
|
||||
<h3 class="title">{{ title }}</h3>
|
||||
<el-form-item prop="idcard">
|
||||
<span class="svg-container">
|
||||
<svg-icon icon-class="user" />
|
||||
</span>
|
||||
<el-input v-model="loginForm.idcard" name="idcard" type="text" auto-complete="on" placeholder="idcard" />
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<span class="svg-container">
|
||||
<svg-icon icon-class="password" />
|
||||
</span>
|
||||
<el-input :type="pwdType" v-model="loginForm.password" name="password" auto-complete="on"
|
||||
placeholder="password" />
|
||||
<span class="show-pwd" @click="showPwd">
|
||||
<svg-icon icon-class="eye" />
|
||||
</span>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" style="width:100%;margin-right: 5px;" @click.native.prevent="handleLogin(1)">
|
||||
登录
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { isvalidUsername } from '@/utils/validate'
|
||||
import store from "../../store"
|
||||
import user from '@/api/user'
|
||||
import systemInfo from '@/api/systemInfo'
|
||||
|
||||
|
||||
export default {
|
||||
name: 'Login',
|
||||
data() {
|
||||
const validatePass = (rule, value, callback) => {
|
||||
if (value.length < 5) {
|
||||
callback(new Error('密码不能小于5位'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
return {
|
||||
title: '',
|
||||
imgBack: '',
|
||||
imgTitle: '',
|
||||
loginForm: {
|
||||
idcard: '',
|
||||
password: ''
|
||||
},
|
||||
loginRules: {
|
||||
idcard: [{ required: true, trigger: 'blur' }],
|
||||
password: [{ required: true, trigger: 'blur', validator: validatePass }]
|
||||
},
|
||||
// loading: false,
|
||||
pwdType: 'password',
|
||||
redirect: undefined
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
watch: {
|
||||
$route: {
|
||||
handler: function (route) {
|
||||
this.redirect = route.query && route.query.redirect
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getImgUrlList() {
|
||||
systemInfo.getImgUrl().then(res => {
|
||||
const urlList = res.data.data
|
||||
urlList.forEach((item, index) => {
|
||||
switch (item.name) {
|
||||
case 'login_back':
|
||||
this.imgBack = item.value
|
||||
break
|
||||
case 'login_title':
|
||||
this.imgTitle = item.value
|
||||
break
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
async setIco() {
|
||||
var link = document.querySelector("link[rel~='icon']")
|
||||
if (!link) {
|
||||
link = document.createElement('link')
|
||||
link.rel = 'icon'
|
||||
document.head.appendChild(link)
|
||||
}
|
||||
let ico = store.getters.favicon
|
||||
if (ico === '') {
|
||||
let res = await systemInfo.getImgUrlByName({ name: 'favicon' })
|
||||
let ico = res.data.data
|
||||
console.log('http获取icon:', ico)
|
||||
store.commit('SET_FAVICON', ico)
|
||||
}
|
||||
link.href = ico
|
||||
},
|
||||
async setLoginTitle() {
|
||||
let title = store.getters.title
|
||||
if (title === '') {
|
||||
let res = await systemInfo.getTitle()
|
||||
let title = res.data.data
|
||||
console.log('http获取title:', title)
|
||||
store.commit('SET_TITLE', title)
|
||||
}
|
||||
document.title = title
|
||||
this.title = title
|
||||
},
|
||||
showPwd() {
|
||||
if (this.pwdType === 'password') {
|
||||
this.pwdType = ''
|
||||
} else {
|
||||
this.pwdType = 'password'
|
||||
}
|
||||
},
|
||||
handleLogin(level) {
|
||||
this.$refs.loginForm.validate(valid => {
|
||||
if (valid) {
|
||||
// user.login(this.loginForm).then((res) => {
|
||||
// if (res.data.success) {
|
||||
// console.log('登陆成功');
|
||||
// localStorage.setItem('token', res.data.data.token);
|
||||
// this.$router.push({ path: this.redirect || "/dashboard" }).catch(() => { });
|
||||
// this.$router.push({ path: '/dashboard' });
|
||||
// } else {
|
||||
// this.$message({
|
||||
// type: 'error',
|
||||
// message: '账号或密码错误!'
|
||||
// });
|
||||
// }
|
||||
// }).catch((err) => {
|
||||
// console.log(err);
|
||||
// });
|
||||
this.loginForm.level = level
|
||||
this.$store.dispatch('LoginByUsername', this.loginForm).then((res) => {
|
||||
// console.log(res);
|
||||
// 删除权限
|
||||
// console.log('路由权限----------');
|
||||
// console.log(level);
|
||||
const routes = this.$router.options.routes
|
||||
// for (let i = this.$router.options.routes.length - 1; i >= 0; i--) {
|
||||
// let item = this.$router.options.routes[i];
|
||||
// // console.log("--------------" + i + item.meta.name);
|
||||
// // console.log(item.meta.level);
|
||||
// if (item.meta.level > level) {
|
||||
// this.$router.options.routes.splice(i, 1);
|
||||
// }
|
||||
// }
|
||||
// localStorage.setItem('token', res.data.data.token);
|
||||
localStorage.setItem('routers', this.$router.options.routes);
|
||||
this.$router.push({ path: '/dashboard' })
|
||||
}).catch(() => {
|
||||
// this.loading = false
|
||||
})
|
||||
} else {
|
||||
console.log('error submit!!')
|
||||
// return false
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.setLoginTitle()
|
||||
this.setIco()
|
||||
this.getImgUrlList()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss">
|
||||
$bg: #2d3a4b;
|
||||
$light_gray: #eee;
|
||||
|
||||
.background {
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/**宽高100%是为了图片铺满屏幕 */
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/* reset element-ui css */
|
||||
.Login {
|
||||
.el-input {
|
||||
display: inline-block;
|
||||
height: 47px;
|
||||
width: 85%;
|
||||
|
||||
input {
|
||||
background: transparent;
|
||||
border: 0px;
|
||||
-webkit-appearance: none;
|
||||
border-radius: 0px;
|
||||
padding: 12px 5px 12px 15px;
|
||||
color: $light_gray;
|
||||
height: 47px;
|
||||
|
||||
&:-webkit-autofill {
|
||||
-webkit-box-shadow: 0 0 0px 1000px $bg inset !important;
|
||||
-webkit-text-fill-color: #fff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 5px;
|
||||
color: #454545;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
$bg: #FFFFFF;
|
||||
$dark_gray: #889aa4;
|
||||
$light_gray: #333;
|
||||
|
||||
.Login {
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: #FFF;
|
||||
|
||||
.login-form {
|
||||
position: absolute;
|
||||
|
||||
right: 50px;
|
||||
width: 520px;
|
||||
max-width: 100%;
|
||||
padding: 35px 35px 15px 35px;
|
||||
margin: 120px auto;
|
||||
border: 1px solid #FFF
|
||||
}
|
||||
|
||||
.tips {
|
||||
font-size: 14px;
|
||||
color: #FFF;
|
||||
margin-bottom: 10px;
|
||||
|
||||
span {
|
||||
&:first-of-type {
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.svg-container {
|
||||
padding: 6px 5px 6px 15px;
|
||||
color: #FFF;
|
||||
vertical-align: middle;
|
||||
width: 30px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 26px;
|
||||
font-weight: 400;
|
||||
color: #FFF;
|
||||
margin: 0px auto 40px auto;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.show-pwd {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 7px;
|
||||
font-size: 16px;
|
||||
color: $dark_gray;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user