<template>
<div id="login">
<img src="@/assets/img/bg.png" alt="" id="bg">
<img src="@/assets/img/logo.png" alt="" id="logo">
<div class="inps">
<h2>班主任后台登录</h2>
<ul>
<li>
<el-input
placeholder="请输入账号"
prefix-icon="el-icon-mobile-phone"
maxlength="11"
show-word-limit
type="text"
v-model="account">
</el-input>
</li>
<li>
<el-input
placeholder="请输入密码"
prefix-icon="el-icon-edit"
show-password
v-model="password">
</el-input>
</li>
<li style="margin-top:-10px;">
<el-checkbox v-model="self_motion">下次自动登录</el-checkbox>
</li>
<li @click="getLogin">
<el-button type="primary">登录</el-button>
</li>
</ul>
<div class="forget" @click="registerShow">忘记密码</div>
</div>
<!-- 新增课程 && 查看详情 -->
<div class="customer" v-if="register_show">
<register @closeRegist='closeRegist'></register>
</div>
</div>
</template>
<script>
import register from '@/components/login/register/register'
export default {
name: 'login',
data: function() {
return {
account:'',
password:'',
self_motion:false,
register_show:false,
}
},
components:{
register
},
methods: {
getLogin(){
// 判断账号
const telReg = /^1[3-9][0-9]d{8}$/;
if(!telReg.test(this.account)){
this.$message({
message: '请输入正确账号',
type: 'warning',
duration:1500
});
return;
}
// 判断密码
if(!this.password){
this.$message({
message: '请输入密码',
type: 'warning',
duration:1500
});
return;
}
this.$http.post(this.baseUrlStaff+'/api/v1/staff/login',{
"loginType": "PASSWORD",
"password": this.password,
"phoneNumber": this.account,
"smsCode": "string",
"systemNumber": 1
}).then((res)=>{
if(res.errorMsg == "success"){
this.setCookie('directorToken',res.data.token,14)
if(this.self_motion){
this.setCookie('directorAutoLogin',true,14)
}
this.$router.push('/management')
}else{
this.$message({
message: res.errorMsg,
type: 'warning',
duration:1500
});
}
})
},
// 点击忘记密码
registerShow(){
this.register_show = true;
},
// 关闭注册框
closeRegist(){
this.register_show = false;
}
}
}
</script>
<style scoped lang='scss'>
@import '../../common/css/childBg.css';
#login{
100vw;
height: 100vh;
overflow: hidden;
#bg{
100%;
height: 100%;
}
#logo{
position: absolute;
20%;
top: 20%;
left: 50%;
margin-left: -10%;
}
.inps{
position: absolute;
z-index: 999;
top: 36%;
20%;
left: 50%;
margin-left: -10%;
h2{
font-size: 24px;
color: white;
margin-bottom: 25px;
}
li{
margin-bottom: 25px;
}
.forget{
text-align: right;
color: white;
margin-top: -10px;
cursor: pointer;
font-size: 14px;
}
}
}
</style>
<style lang='scss'>
#login {
.el-checkbox__label{
color: white;
}
.el-button--primary{
100%;
}
}
</style>