import { login } from '@/api/login'const state = {userInfo: null,
}const getters = {get_userInfo (state) {let userInfo = state.userInfoif (!userInfo) {userInfo = window.localStorage.getItem('userInfo')}return JSON.parse(userInfo)}
}const mutations = {set_userInfo (state, data) {state.userInfo = datawindow.localStorage.setItem('userInfo', state.userInfo)}
}const actions = {Login (context, {username, password}) {return new Promise((resolve, reject) => {login(username, password).then(response => {context.commit('set_userInfo', response.data.rtnInfo)resolve(response)}, error => {reject(error)})})}
}export default {state,getters,mutations,actions
}

<template><div id="login"><img class="login-icon01" src="../../static/images/login02.png"><el-form class="login-form" :model="ruleForm" ref="ruleForm"><el-form-item><el-input type="text" placeholder="用户名" v-model="ruleForm.username" prefix-icon="iconfont icon-user" clearable auto-complete="off"></el-input></el-form-item><el-form-item><el-input type="password" placeholder="密码" v-model="ruleForm.password" prefix-icon="iconfont icon-password" clearable auto-complete="off"></el-input></el-form-item><el-form-item><el-button class="login-btn" type="primary" :loading="loading" @click="submitForm(ruleForm)">登录</el-button></el-form-item></el-form><img class="login-icon03" src="../../static/images/login01.png"></div>
</template><script>
export default {data () {return {loading: false,// urlIbest: this.$store.state.User.urlIbest,
      ruleForm: {username: '',password: ''}}},methods: {submitForm (formName) {this.loading = trueif (formName.username === '' || formName.password === '') {this.$message.error('用户名或密码不能为空')this.loading = false} else {// 登录this.$store.dispatch('Login', {'username': formName.username, 'password': formName.password}).then(response => {if (response.data && response.data.rtnCode === '00000000') {this.loading = falsethis.$router.push('/home')} else {this.$message.error(response.data.rtnMsg)this.loading = false}})}}}
}
</script><style lang="less" scoped>#login {background-color: #2f329f;position: fixed;top:0;left:0;right:0;bottom:0;margin:auto;.login-form{width: 80%;padding: 30px 10%;background: rgba(47,50,159,.3);position: absolute;z-index: 8;top: 120px;.el-input__inner{padding-top:8px;padding-bottom:8px;background-color:transparent!important;color:#fff;}.login-btn{width:100%;background-color:#fff;color:#2f329f;border:none;margin-top:20px;}}.login-icon01{position: absolute;width: 20%;right: 15%;top: 60px;z-index: 10;}.login-icon02{position: absolute;width: 50%;bottom:20px;left:0;right:0;margin:auto;z-index:2;}.login-icon03{position: absolute;width: 110%;left: 0;right: 0;bottom: 0;margin-left: -5%;z-index: 1;}}
</style>