<!--GY歌谣控制登录页面的功能-->
<template><div class="main"><div><h1> <img src="./geyao.png" style="width: 29px;height: 29px;margin-right: 10px;line-height: 29px" alt="">星传经管系统</h1></div><!-- <h1>欢迎登录</h1>--><div class="login-head"><div class="login-form"><!--登录的用户名--><el-form :model="form" label-width="40px"><el-form-item label="用户"><el-input v-model="form.account" /></el-form-item><!--登录的密码--><el-form-item label="密码" ><el-input v-model="form.password" show-password/></el-form-item><el-form-item><!--登录按钮 登录的时候调用方法--><el-buttontype="primary"style="display: block; width: 100%"@click="login">登录</el-button></el-form-item></el-form></div></div><mode-selection-dialog ref="mode" @select="modeSelected" /></div>
</template><script>
import Vue from "vue";
/*状态管理*/
import store from "@/store";
/*引入调用的方法*/
import { postAction } from "@/api";
import {ACCESS_MODE, ACCESS_TOKEN} from "@/store/KeyConstants";
import { HOME_PATH } from "@/router/staticRoutes";import { SET_USER, SET_DEPARTMENT, SET_MODE } from "@/store/mutation-types";
/*引入封装的组件 登录框组件*/
import ModeSelectionDialog from "./ModeSelectionDialog";
export default {name: "Login",components: { ModeSelectionDialog },data() {return {/*登录界面存储账号和密码*/form: {/*存储账号*/account: "",/*存储密码*/password: ""},url: {login: "/user/login"}};},created() {},methods: {/*登录的方法*/login() {/*第一个参数传入要跳转的链接地址 第一个传入数据参数*/postAction(this.url.login, this.form).then(res => {if (res.code === 0) {/* /!*设置token令牌*!/*/Vue.ls.set(ACCESS_TOKEN, res.data.access_token);/*Vue.ls.set(ACCESS_MODE, res.data.mode);*//* /!*获取user的数据*!/*/const user = res.data.user;const dept = user.department;const properties = dept.property.split(",");/* 所有的状态开始存储到vuex*/store.commit(SET_USER, {name: user.name,role: user.role});store.commit(SET_DEPARTMENT, {id: dept.id,name: dept.name,property: properties});// select modeif (!properties || properties.length === 0) {this.$message.error("请设定部门属性！");} else if (properties.length === 1) {this.modeSelected(properties[0]);} else if (properties.length === 2) {this.$refs["mode"].show();} else {this.$message.error("部门属性错误！");console.error(res);}} else {this.$message.warning("用户名或密码错误！");}}).catch(error => {console.log(error);});},modeSelected(mode) {/* if(mode==0){store.commit(SET_MODE, mode);this.$router.push(HOME_PATH);Vue.ls.set(ACCESS_MODE,mode);}else{store.commit(SET_MODE, mode);this.$router.push(HOME_PATH);Vue.ls.set(ACCESS_MODE,mode);}*//*只使用一个路由*/store.commit(SET_MODE, mode);this.$router.push(HOME_PATH);Vue.ls.set(ACCESS_MODE,mode);},}
};
</script>
<style lang="scss" scoped>
.main {position: fixed;left: 0;top: 0;right: 0;bottom: 0;display: flex;justify-content: center;align-items: center;flex-direction: column;background: url("./login_bg.jpg") no-repeat;background-size: cover;.login-form{background-color: #F5F5F5;padding: 50px;min-width: 300px;}
}</style>
初始样式
