<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>