<template>
|
<div class="login-form">
|
<div class="login-form-title"><span>登录</span></div>
|
<div class="login-form-main">
|
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" :inline="false" class="loginForm" @keydown.enter.native="handleSubmit">
|
<div class="login-form-main-user"><span>用户名</span></div>
|
<div class="login-form-main-user_input">
|
<el-form-item prop="username">
|
<el-input
|
v-model="loginForm.username"
|
placeholder="请输入用户名"
|
name="username"
|
type="text"
|
auto-complete="on"
|
/>
|
</el-form-item>
|
</div>
|
<div class="login-form-main-password"><span>密码</span></div>
|
<div class="login-form-main-password_input">
|
<el-row>
|
<el-col :span="21">
|
<el-form-item prop="password">
|
<el-input
|
v-model="loginForm.password"
|
:type="loginPasswordType"
|
placeholder="请输入密码"
|
name="password"
|
auto-complete="on"
|
@keyup.enter.native="handleSubmit"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="3">
|
<img src="../../../assets/icon_visible.png" style="margin:0 auto;padding-top: 9px;padding-left: 10px;" @click="showLoginPwd"></img>
|
</el-col>
|
</el-row>
|
</div>
|
</el-form>
|
</div>
|
<div class="login-form-button">
|
<el-button class="login-form-login-button" :loading="logingLoading" type="primary" @click.native.prevent="handleSubmit">
|
<span>
|
登录
|
</span>
|
</el-button>
|
</div>
|
</div>
|
<!-- <el-form ref="loginForm" :model="loginForm" :rules="loginRules" :inline="false" class="loginForm" @keydown.enter.native="handleSubmit">-->
|
<!-- <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-->
|
<!-- v-model="loginForm.username"-->
|
<!-- placeholder="请输入用户名"-->
|
<!-- name="username"-->
|
<!-- type="text"-->
|
<!-- auto-complete="on"-->
|
<!-- />-->
|
<!-- </el-form-item>-->
|
<!-- <el-form-item prop="password">-->
|
<!-- <span class="svg-container">-->
|
<!-- <svg-icon icon-class="password" />-->
|
<!-- </span>-->
|
<!-- <el-input-->
|
<!-- v-model="loginForm.password"-->
|
<!-- :type="loginPasswordType"-->
|
<!-- placeholder="请输入密码"-->
|
<!-- name="password"-->
|
<!-- auto-complete="on"-->
|
<!-- @keyup.enter.native="handleSubmit"-->
|
<!-- />-->
|
<!-- <span class="show-pwd" @click="showLoginPwd">-->
|
<!-- <svg-icon :icon-class="loginPasswordType === 'password' ? 'eye' : 'eye-open'" />-->
|
<!-- </span>-->
|
<!-- </el-form-item>-->
|
<!-- <div style="text-align:center;">-->
|
<!-- <el-button :loading="logingLoading" class="login-button" type="primary" @click.native.prevent="handleSubmit">-->
|
<!-- 登录-->
|
<!-- </el-button>-->
|
<!-- <br>-->
|
<!-- </div>-->
|
<!-- </el-form>-->
|
</template>
|
<script>
|
import Cookies from "js-cookie";
|
|
export default {
|
name: 'LoginForm',
|
props: {
|
logingLoading: {
|
type: Boolean,
|
default: false
|
}
|
},
|
watch:{
|
// loginForm: {
|
// handler(newName, oldName) {
|
// debugger
|
// let store = localStorage.getItem('loginForm')
|
// if(store === undefined || store === null){
|
// }else{
|
// if(newName.username === JSON.parse(store).username && newName.password === JSON.parse(store).password){
|
// this.loginForm.authcode = JSON.parse(localStorage.getItem('loginForm')).authcode
|
// }else{
|
// // this.loginForm.authcode = ''
|
// }
|
// }
|
// },
|
// immediate:true,
|
// deep:true
|
// }
|
},
|
data() {
|
return {
|
loginForm: {
|
username: '',
|
password: '',
|
},
|
loginRules: {
|
username: [{ required: true, trigger: 'blur', message: '用户名不能为空' }],
|
password: [{ required: true, trigger: 'blur', message: '登录密码不能为空' }],
|
},
|
loginPasswordType: 'password'
|
}
|
},
|
computed: {
|
|
},
|
created(){
|
},
|
methods: {
|
showLoginPwd() {
|
if (this.loginPasswordType === 'password') {
|
this.loginPasswordType = ''
|
} else {
|
this.loginPasswordType = 'password'
|
}
|
},
|
handleSubmit() {
|
this.$refs.loginForm.validate((valid) => {
|
if (valid) {
|
this.$emit('on-success-valid', this.loginForm)
|
}
|
})
|
},
|
initLoginDataForm() {
|
this.loginForm = {
|
username: '',
|
password: ''
|
}
|
},
|
handleChangeToRegister() {
|
this.initLoginDataForm()
|
// this.$nextTick(() => {
|
// this.$refs['loginForm'].clearValidate()
|
// })
|
this.$emit('on-register-handle')
|
},
|
// giveKey(){
|
// let login = JSON.parse(Cookies.get('loginForm'))
|
// this.loginForm.authcode = login.authcode
|
// }
|
}
|
}
|
</script>
|
|
<style scoped>
|
.login-form{
|
min-height: 100%;
|
width:100%;
|
}
|
.login-form-main{
|
margin-left:50px;
|
}
|
.login-form-title{
|
width: 60px;
|
height: 143px;
|
font-size: 30px;
|
font-family: PingFangSC-Medium, PingFang SC;
|
font-weight: 600;
|
color: #1851DC;
|
line-height: 42px;
|
padding-top: 53px;
|
margin:0 auto;
|
}
|
.login-form-main-user{
|
height: 20px;
|
font-size: 16px;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 500;
|
color: #333333;
|
line-height: 20px;
|
}
|
.login-form-main-password{
|
height: 20px;
|
font-size: 16px;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 500;
|
color: #333333;
|
line-height: 20px;
|
margin-top: 24px;
|
}
|
/deep/.el-input__inner{
|
height: 40px;
|
border:0px;
|
background: #F0F0F0;
|
}
|
.login-form-main-user_input{
|
margin-top: 8px;
|
width: 364px;
|
height: 40px;
|
background: #FFFFFF !important;
|
border-radius: 4px;
|
border: 0px solid;
|
}
|
.login-form-main-password_input{
|
margin-top: 8px;
|
width: 364px;
|
height: 40px;
|
background: #F0F0F0;
|
border-radius: 4px;
|
border: 0px solid;
|
}
|
.login-form-button{
|
width:100%;
|
text-align: center;
|
padding-top: 40px;
|
}
|
.login-form-login-button {
|
width: 364px;
|
height: 48px;
|
background: #4778FF;
|
border-radius: 4px;
|
}
|
</style>
|