<template>
|
<div class="auth-page">
|
<div class="title"></div>
|
<div class="container">
|
<h1 class="text-xs-center">用户登录</h1>
|
<div class="loginbody">
|
<el-form :model="user" ref="formName" status-icon :rules="rules">
|
<!-- 用户账号 -->
|
<span class="input">用户名：</span>
|
<el-form-item prop="username">
|
<el-input
|
v-model="user.username"
|
prefix-icon="el-icon-user"
|
placeholder="请输入您的用户名"
|
autocomplete="off"
|
></el-input>
|
</el-form-item>
|
<!-- 用户密码 -->
|
<span class="input">密码：</span>
|
<el-form-item prop="password">
|
<el-input
|
type="password"
|
v-model="user.password"
|
prefix-icon="el-icon-lock"
|
placeholder="请输入您密码"
|
autocomplete="off"
|
></el-input>
|
</el-form-item>
|
<!-- 登录按钮 -->
|
<el-form-item>
|
<el-button type="primary" @click.enter="onLogin(user)">登 录</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import nprogress from 'nprogress'
|
import md5 from 'js-md5'
|
import axios from 'axios'
|
import * as auth from '@/utils/auth'
|
import { EventBus } from '../../eventBus/event-bus'
|
|
export default {
|
name: 'AppRegister',
|
data () {
|
return {
|
user: {
|
username: '',
|
password: ''
|
},
|
rules: {
|
username: [
|
{ required: true, message: '用户名不能为空', trigger: 'blur' },
|
{
|
min: 3,
|
max: 10,
|
message: '用户账号长度在3~10个字符之间',
|
trigger: 'blur'
|
}
|
],
|
password: [
|
{ required: true, message: '密码不能为空', trigger: 'blur' },
|
{
|
min: 3,
|
max: 10,
|
message: '用户密码长度在3~10个字符之间',
|
trigger: 'blur'
|
}
|
]
|
},
|
errors: null,
|
newAxios: null
|
}
|
},
|
created () {
|
//跳转到统一登录页
|
window.location.replace('http://dev.jxpskj.com:8020/ncny/login.html')
|
var that = this
|
|
this.newAxios = axios.create({
|
baseURL: 'http://dev.jxpskj.com:8020/api',
|
timeout: 600000,
|
headers: {
|
Authorization: 'Basic c2FiZXI6c2FiZXJfc2VjcmV0',
|
'Tenant-Id': '000000'
|
}
|
})
|
|
document.onkeydown = (e) => {
|
const _key = window.event.keyCode
|
if (_key === 13) {
|
that.onLogin(that.user)
|
}
|
}
|
},
|
methods: {
|
onLogin ({ username, password }) {
|
this.$refs.formName.validate((valid) => {
|
if (valid) {
|
nprogress.start()
|
|
this.newAxios({
|
method: 'POST',
|
url: '/blade-auth/oauth/token',
|
params: {
|
username: username,
|
password: md5(password),
|
tenantId: '000000'
|
}
|
}).then((res) => {
|
if (res.data.access_token) {
|
this.$store.commit('setUser', res.data)
|
auth.setToken(res.data.access_token)
|
window.localStorage.setItem('userName', res.data.nick_name)//赋值
|
this.$router.push({ path: '/' })
|
} else {
|
this.$message({
|
type: 'warning',
|
message: '用户名或密码不正确，请重新输入'
|
})
|
}
|
nprogress.done()
|
})
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.auth-page {
|
position: fixed;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
background-image: url(../../../public/img/bg/group16@2x.png);
|
background-size: 100% 100%;
|
margin: 0;
|
padding: 0;
|
|
.title {
|
width: 1389px;
|
height: 115px;
|
background-image: url(../../../public/img/bg/login_title@2x.png);
|
background-size: 100% 100%;
|
margin: 99px 264px 0px 266px;
|
}
|
.container {
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
margin: 317px auto;
|
width: 653px;
|
height: 552px;
|
background-image: url(../../../public/img/bg/rectangle11@2x.png);
|
background-size: 100% 100%;
|
border-radius: 10px;
|
letter-spacing: 100;
|
|
h1 {
|
margin: 54px 244px 0px 243px;
|
width: 166px;
|
text-align: left;
|
width: 176px;
|
height: 30px;
|
font-size: 42px;
|
font-family: PangMenZhengDao;
|
font-weight: 400;
|
color: #ffffff;
|
line-height: 30px;
|
letter-spacing: 2px;
|
}
|
|
.loginbody {
|
position: absolute;
|
top: 120px;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
width: 72%;
|
// margin: auto;
|
margin-left: 51px;
|
|
.el-form-item {
|
text-align: center;
|
|
/deep/.el-input__inner {
|
width: 548px;
|
height: 59px;
|
background: #0c2d49;
|
opacity: 0.5;
|
margin-bottom: 15px;
|
font-size: 21px;
|
}
|
/deep/.el-input--prefix .el-input__inner {
|
padding-left: 40px;
|
}
|
/deep/.el-input__inner:focus {
|
border: 2px solid #22b4cb;
|
opacity: 0.8;
|
color: #fff;
|
}
|
/deep/.el-form-item__error {
|
color: #f00;
|
line-height: 0;
|
font-size: 15px;
|
opacity: 0.8;
|
letter-spacing: 2px;
|
font-weight: 700;
|
}
|
/deep/.el-input__icon {
|
height: 91%;
|
width: 34px;
|
}
|
/deep/.el-icon-user::before,
|
/deep/.el-icon-lock::before {
|
font-size: 22px;
|
}
|
/deep/.el-form-item.is-error,
|
/deep/.el-input__validateIcon {
|
font-size: 22px;
|
}
|
/deep/.el-input__suffix {
|
right: -48px;
|
}
|
/deep/.el-input input::-webkit-input-placeholder {
|
color: #ffffff;
|
font-size: 21px;
|
opacity: 0.5;
|
line-height: 27px;
|
}
|
/deep/.el-input input::-moz-input-placeholder {
|
color: #ffffff;
|
font-size: 21px;
|
opacity: 0.5;
|
}
|
/deep/.el-input input::-ms-input-placeholder {
|
color: #ffffff;
|
font-size: 21px;
|
opacity: 0.5;
|
line-height: 27px;
|
}
|
|
.el-button {
|
width: 548px;
|
height: 59px;
|
background: linear-gradient(
|
90deg,
|
rgba(0, 249, 247, 0.54),
|
rgba(0, 182, 249, 0.54)
|
);
|
box-shadow: 0px 2px 20px 1px rgba(1, 25, 70, 0.46);
|
font-size: 29px;
|
margin-top: 25px;
|
}
|
}
|
|
.input {
|
display: inline-block;
|
width: 100px;
|
height: 23px;
|
font-size: 24px;
|
font-family: PingFang SC;
|
color: #ffffff;
|
margin-bottom: 21px;
|
}
|
}
|
}
|
}
|
</style>
|
