<template>
|
<div class="body-bg">
|
<div class="login-main">
|
<h2 class="site-title">{{site_title}}</h2>
|
<el-form ref="login" :model="login" size="medium" :rules="loginRules" class="login-form" label-position="left" >
|
<el-form-item style="margin-bottom:18px;" prop="username">
|
<el-input v-model="login.username" type="text" placeholder="用户名" prefix-icon="el-icon-user" autocomplete="off" clearable />
|
</el-form-item>
|
<el-form-item style="margin-bottom:18px;" prop="password">
|
<el-input v-model="login.password" type="text" placeholder="密码" prefix-icon="el-icon-lock" @keyup.enter.native="handleLogin" autocomplete="off" clearable show-password/>
|
</el-form-item>
|
<el-form-item style="margin-bottom:18px;" prop="verify" v-if="verify_status">
|
<el-col :span="13">
|
<el-input v-model="login.verify" type="text" placeholder="验证码" prefix-icon="el-icon-picture" @keyup.enter.native="handleLogin" autocomplete="off" clearable/>
|
</el-col>
|
<el-col :span="11">
|
<el-image :src="verifySrc" alt="验证码" title="点击刷新验证码" @click="refeshVerifySrc" style="width:108px;height:35px; margin-top:3px;float:right" />
|
</el-col>
|
</el-form-item>
|
</el-form>
|
<el-button :loading="loading" size="small" type="primary" style="width:100%;" @click.native.prevent="handleLogin">
|
<span v-if="!loading">登 录</span>
|
<span v-else>登 录 中...</span>
|
</el-button>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data: function() {
|
return {
|
loading: false,
|
login:{
|
username:'',
|
password:'',
|
verify:'',
|
key:'',
|
},
|
site_title:'',
|
success_url:'',
|
loginRules: {
|
username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
|
password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
|
captcha: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
|
},
|
verify_status:true,
|
verifySrc:'',
|
}
|
},
|
mounted(){
|
this.captch()
|
},
|
methods:{
|
captch(){
|
this.$axios.post('/admin/Login/verify').then(res => {
|
if(res.data.status == 200){
|
this.site_title = res.data.site_title
|
this.success_url = res.data.success_url
|
this.verifySrc = res.data.data.base64
|
this.login.key = res.data.data.key
|
this.verify_status = res.data.verify_status
|
}else{
|
this.$message.error('验证码获取失败!')
|
}
|
})
|
},
|
refeshVerifySrc() {
|
this.captch()
|
},
|
handleLogin(){
|
this.$refs['login'].validate(valid => {
|
if(valid){
|
this.loading = true
|
this.$store.dispatch('login',this.login).then(()=>{
|
this.$router.push(this.success_url)
|
this.loading = false
|
}).catch(() => {
|
this.loading = false
|
this.captch()
|
})
|
}
|
})
|
}
|
},
|
}
|
</script>
|
|
<style scoped>
|
.body-bg{
|
position: absolute;
|
height: 100%;
|
width: 100%;
|
top:0;
|
left: 0;
|
overflow-y: auto;
|
background:url(../../../assets/images/denglu.png) top center ;
|
align-items: center;
|
background-size: cover;
|
}
|
|
.login-main{
|
z-index: 1;
|
background-color: #FFF;
|
border-radius: 1em;
|
border: 1px solid #fff;
|
width: 320px;
|
margin: 150px auto;
|
padding: 10px 20px 30px 20px;
|
}
|
|
.site-title{
|
font-weight: bold;
|
font-size: 18px;
|
text-align: center;
|
color:#707070;
|
margin-bottom: 20px;
|
padding-top: 30px;
|
}
|
|
|
</style>
|
