<div class="login-wrap">
<div class="ms-login">
<div class="ms-title">新人后台管理系统</div>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="ms-content">
<el-form-item prop="username">
<el-input v-model="ruleForm.username" placeholder="请输入用户名">
<el-button slot="prepend" ><i class="fa fa-user-o" aria-hidden="true"></i> </el-button>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" placeholder="请输入密码" v-model="ruleForm.password" @keyup.enter.native="submitForm('ruleForm')">
<el-button slot="prepend" ><i class="fa fa-key" aria-hidden="true"></i></el-button>
</el-input>
</el-form-item>
<!-- <el-form-item prop="code" class="item">
<el-input placeholder="请输入验证码" v-model="ruleForm.code" >
</el-input>
</el-form-item>
<img id="verify" :src="url" @click="updateImg()" /> -->
<div class="login-btn">
<el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
</div>
<!-- <p class="login-tips">Tips : 用户名和密码随便填。</p> -->
</el-form>
</div>
</div>
</template>
<script>
import { setTimeout } from 'timers';
export default {
data: function(){
return {
ruleForm: {
username: '',
password: '',
// code:''
},
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' }
],
// code:[
// { required: true, message: '请输入验证码', trigger: 'blur' }
// ],
}
}
},
computed:{
// url(){
// return Url+"/admin/login/checkVerify";
// }
},
methods: {
submitForm(formName) {//登录验证
var that =this;
this.$refs[formName].validate((valid) => {
if (valid) {
this.$axios({
url:Url+'/api/login',
method:'post',
data:{
username:this.ruleForm.username,
password:this.ruleForm.password,
code:this.ruleForm.code
}
}).then((res)=>{
console.log(res)
if(res.data.code==200){
this.$message.success({
message:'登录成功',
duration:1000
});
sessionStorage.setItem('ms_username',this.ruleForm.username);
sessionStorage.setItem('role_id',res.data.data)
setTimeout(function(){
that.$router.push('/');
},1000)
}else{
this.$message.error({
message:res.data.msg,
duration:2000
});
// that.updateImg()
}
})
} else {
console.log('error submit!!');
return false;
}
});
}
// updateImg(){
// $('#verify').attr('src',Url+'/admin/login/checkVerify?tm='+Math.random());
// }
}
}
</script>
<style scoped>
.login-wrap{
position: relative;
width:100%;
height:100%;
background-image: url(../../assets/img/banner.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
}
.ms-title{
width:100%;
line-height: 50px;
text-align: center;
font-size:20px;
color: #fff;
border-bottom: 1px solid #ddd;
}
.ms-login{
position: absolute;
left:50%;
top:50%;
width:350px;
margin:-190px 0 0 -175px;
border-radius: 5px;
background: rgba(255,255,255, 0.3);
overflow: hidden;
}
.ms-content{
padding: 30px 30px;
}
.login-btn{
text-align: center;
}
.login-btn button{
width:100%;
height:36px;
margin-bottom: 10px;
}
.login-tips{
font-size:12px;
line-height:30px;
color:#fff;
}
.item /deep/{
display: inline-block;
width: 180px;
}
#verify{
/* margin-top: 10px; */
float: right;
}
</style>
