You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
263 lines
6.1 KiB
263 lines
6.1 KiB
<template> |
|
<div class="login-container"> |
|
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left"> |
|
|
|
<div class="title-container"> |
|
<h3 class="title">系统登入</h3> |
|
</div> |
|
|
|
<el-form-item prop="username"> |
|
<span class="svg-container"> |
|
<svg-icon icon-class="user" /> |
|
</span> |
|
<el-input |
|
ref="username" |
|
v-model="loginForm.username" |
|
placeholder="用户名" |
|
name="用户名" |
|
type="text" |
|
tabindex="1" |
|
auto-complete="on" |
|
/> |
|
</el-form-item> |
|
|
|
<el-form-item prop="password"> |
|
<span class="svg-container"> |
|
<svg-icon icon-class="password" /> |
|
</span> |
|
<el-input |
|
:key="passwordType" |
|
ref="password" |
|
v-model="loginForm.password" |
|
:type="passwordType" |
|
placeholder="密码" |
|
name="密码" |
|
tabindex="2" |
|
auto-complete="on" |
|
@keyup.enter.native="handleLogin" |
|
/> |
|
<span class="show-pwd" @click="showPwd"> |
|
<svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" /> |
|
</span> |
|
</el-form-item> |
|
|
|
<el-button class="bt_login" :loading="loading" type="primary" @click.native.prevent="handleLogin">登入</el-button> |
|
<el-button class="bt_rest bt_login" @click="resetForm('loginForm')">重置</el-button> |
|
|
|
<!-- <div class="tips"> |
|
<span style="margin-right:20px;">username: admin</span> |
|
<span> password: any</span> |
|
</div> --> |
|
</el-form> |
|
</div> |
|
|
|
</template> |
|
|
|
<style lang="scss"> |
|
|
|
$bg:#283443; |
|
$light_gray:#fff; |
|
$cursor: #3c3535; |
|
|
|
// @supports (-webkit-mask: none) and (not (cater-color: $cursor)) { |
|
// .login-container .el-input input { |
|
// color: $cursor; |
|
// } |
|
// } |
|
|
|
/* reset element-ui css */ |
|
.login-container { |
|
.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: #000; |
|
height: 47px; |
|
caret-color: $cursor; |
|
|
|
&:-webkit-autofill { |
|
box-shadow: 0 0 0px 1000px $bg inset !important; |
|
-webkit-text-fill-color: $cursor !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 lang="scss" scoped> |
|
|
|
.login-container { |
|
min-height: 100%; |
|
width: 100%; |
|
background-color: #FFF; |
|
overflow: hidden; |
|
|
|
.bt_login{width:100%;margin:0 0 16px 0;} |
|
.bt_rest{margin:0;} |
|
.login-form { |
|
position: relative; |
|
width: 520px; |
|
max-width: 100%; |
|
padding:0 35px 0 35px; |
|
margin: 160px auto 0 auto; |
|
overflow: hidden; |
|
} |
|
|
|
// .tips { |
|
// font-size: 14px; |
|
// color: #000; |
|
// margin-bottom: 10px; |
|
|
|
// span { |
|
// &:first-of-type { |
|
// margin-right: 16px; |
|
// } |
|
// } |
|
// } |
|
|
|
.svg-container { |
|
padding: 6px 5px 6px 15px; |
|
color: #000; |
|
vertical-align: middle; |
|
width: 30px; |
|
display: inline-block; |
|
} |
|
|
|
.title-container { |
|
position: relative; |
|
|
|
.title { |
|
font-size: 26px; |
|
color: #000; |
|
margin: 0px auto 40px auto; |
|
text-align: center; |
|
font-weight: bold; |
|
} |
|
} |
|
|
|
.show-pwd { |
|
position: absolute; |
|
right: 10px; |
|
top: 7px; |
|
font-size: 16px; |
|
color: #000; |
|
cursor: pointer; |
|
user-select: none; |
|
} |
|
} |
|
</style> |
|
|
|
<script> |
|
//import { validUsername } from '@/utils/validate' |
|
import axios from 'axios' |
|
export default { |
|
|
|
data() { |
|
const validateUsername = (rule, value, callback) => { |
|
if (value.length < 3) { |
|
callback(new Error('请输入正确的用户名')) |
|
} else { |
|
callback() |
|
} |
|
} |
|
const validatePassword = (rule, value, callback) => { |
|
if (value.length < 6) { |
|
callback(new Error('请输入正确的密码')) |
|
} else { |
|
callback() |
|
} |
|
} |
|
return { |
|
loginForm: { |
|
username: '', |
|
password: '' |
|
}, |
|
loginRules: { |
|
username: [ |
|
{ required: true, trigger: 'blur', validator: validateUsername } |
|
], |
|
|
|
password: [{ required: true, trigger: 'blur', validator: validatePassword }] |
|
}, |
|
loading: false, |
|
passwordType: 'password', |
|
redirect: undefined |
|
} |
|
}, |
|
watch: { |
|
$route: { |
|
handler: function(route) { |
|
this.redirect = route.query && route.query.redirect |
|
}, |
|
immediate: true |
|
} |
|
}, |
|
methods: { |
|
showPwd() { |
|
if (this.passwordType === 'password') { |
|
this.passwordType = 'text' |
|
} else { |
|
this.passwordType = 'password' |
|
} |
|
this.$nextTick(() => { |
|
this.$refs.password.focus() |
|
}) |
|
}, |
|
handleLogin() { |
|
this.$refs.loginForm.validate(valid => { |
|
// console.log(valid); |
|
if (valid) { |
|
this.loading = true |
|
let thiss = this; |
|
// axios.post('/api/mkdir', { |
|
// firstName: 'Fred', |
|
// lastName: 'Flintstone' |
|
// }) |
|
// .then(function (response) { |
|
// console.log(thiss.$router) |
|
// thiss.$router.push({ path: '/usermange'}) |
|
// console.log(response + 'ffef'); |
|
// }) |
|
// .catch(function (error) { |
|
// console.log(error); |
|
// }); |
|
// this.$message({ |
|
// showClose: true, |
|
// message: '错了哦,这是一条错误消息', |
|
// type: 'error' |
|
// }); |
|
this.$store.dispatch('user/login', this.loginForm).then(() => { |
|
this.$router.push({ path: this.redirect || '/' }) |
|
this.loading = false |
|
}).catch(() => { |
|
this.loading = false |
|
}) |
|
|
|
} else { |
|
console.log('error submit!!') |
|
return false |
|
} |
|
}) |
|
}, |
|
|
|
resetForm(formName) { |
|
this.$refs[formName].resetFields(); |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
|