<template>
<div class="login_page">
<img src="../assets/img/login.png" />
<van-form @submit="onSubmit">
<van-cell-group inset>
<van-field v-model="username" name="用户名" label="用户名" placeholder="工号" clearable
:rules="[{ required: true, message: '请输入用户名' }]" />
<van-field label-class="phone-input" v-model="password" :right-icon="!passwordStatus?'closed-eye':'eye'"
:type="!passwordStatus?'password':'text'" name="密码" label="密码"
@click-right-icon="passwordStatus=!passwordStatus" placeholder="请输入密码" />
</van-cell-group>
<div style="margin: 16px;">
<van-button round block type="primary" native-type="submit">
登录
</van-button>
</div>
</van-form>
</div>
</template>
<script>
// import Cookies from 'js-cookie'
import {
newLogin
} from '../api/base.js'
export default {
data() {
return {
passwordStatus: false,
username: '',
password: '',
}
},
methods: {
keyDown(e) {
//如果是回车则执行登录方法
if (e.keyCode == 13) {
this.onSubmit();
}
},
onSubmit() {
this.$toast.loading({
duration: 0,
message: "登录中..."
});
let obj = {
employeeNo: this.username,
password: this.password
}
newLogin(obj).then(res => {
// this.$store.state.app.token = res.data.data.token
// this.$store.state.app.tokenTime = res.data.data.expires - new Date()
if (res.data.state == 0) {
let copy = Object.assign({}, res.data.data)
// delete copy.token
sessionStorage.setItem('user', JSON.stringify(copy));
this.$router.push('/index');
} else {
this.$toast.loading('登录失败')
this.$message.error(res.data.message);
}
this.$toast.clear(); // 关闭加载
}).catch((err) => {
})
},
},
destroyed() {
window.removeEventListener('keydown', this.keyDown, false);
}
}
</script>
<style scoped>
.login_page img {
margin: 1rem 0;
}
/* 整体背景 */
.login_page {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background: #dbf3d6;
background-size: cover;
position: fixed;
top: 0;
left: 0;
100%;
height: 100%;
/* background: url(../assets/img/login_bg.png); */
/* background: url(../assets/img/1.jpg); */
background-size: 100% 100%;
background-position: center center;
overflow: auto;
}
</style>