BusinessBenchmark/src/views/Login.vue

<template>
  <div class="loginPic">
        <!-- <div class="login_left">
            <p>Welcome!</p>
            <p class="title">光耀集中式风电功率预测系统</p>
        </div> -->
        <div class="login_right">
            <img class="titleIcon" src="../assets/loginImage/logo.png" alt="">
            <div class="loginCom" style="margin-bottom: 30px">
                <img class="userIcon" src="../assets/loginImage/userIcon.png" alt="">
                <el-input v-model="inputUser" placeholder="请输入用户名" />
            </div>
            <div class="loginCom" style="margin-bottom: 16px">
                <img class="passwordIcon" src="../assets/loginImage/passwordIcon.png" alt="">
                <el-input type="password" v-model="inputMima" placeholder="请输入密码" />
            </div>
            <div class="remeber">
                <el-checkbox v-model="ememberMe" @change="changeBox">记住密码</el-checkbox>
            </div>
             <!-- v-if="!loginLoading"  v-else -->
            <div class="loginBtn" @click="handleLogin" v-if="!loginLoading">
                <span class="loginSpan">登录</span>
            </div>
            <div class="loginBtn" v-else>
                <div class="loading">
                    <el-icon color="#fff"><Loading /></el-icon>
                    <span class="loadingSpan">登录</span>
                </div>
            </div>
        </div>
        <!--  底部  -->
            <!-- <div class="loginFooter">
                <span>Copyright © 2021-2022 GuangYaoDianLi All Rights Reserved.</span>
            </div> -->
  </div>
</template>

<script>
import { setToken } from '@/api/auth'
import { ElMessage } from "element-plus";
import { loginApi, apiGetCodeByToken, apiGetUserMsg, apiGetPrivilegesOfCurrentUserAll } from '../api/api'
export default {
    data() {
        return {
            inputUser:'',
            // inputUser:'testrsadmin',Gddl!#%135
            inputMima:'',
            codeUrl:'',
            ememberMe:false,
            loading:false,
            loginText: '',
            loginLoading: false
        }
    },
    created() {
        if (window.localStorage.getItem('userData')) {
            let userData = JSON.parse(window.localStorage.getItem('userData'))
            this.inputUser = userData.user
            this.inputMima = userData.password
            this.ememberMe = true
        } else {
            this.ememberMe = false
        }
    },
    methods:{
        handleLogin() {
            if (this.inputUser !== '' && this.inputMima !== '') {
                this.loginLoading = true
                if (this.ememberMe) {
                    this.changeBox(this.ememberMe)
                }
                this.getLogin(this.inputUser, this.inputMima)
            } else {
                ElMessage.error('请输入账号或密码');
            }
        },
        changeBox(val) {
            if (val) {
                if (this.inputUser !== '' && this.inputMima !== '') {
                    let obj = {
                        user: this.inputUser,
                        password: this.inputMima
                    }
                    window.localStorage.setItem('userData', JSON.stringify(obj))
                }
            } else {
                window.localStorage.removeItem('userData')
            }
        },
        //登录接口
        getLogin(userName, password) {
            // setToken('userMsg', params)
            let that = this
            loginApi(userName, password).then(datas=>{
                if (datas) {
                    if (datas.success) {
                        setToken('token', datas.data.access_token)
                        that.getTokenCode(datas.data.access_token)
                    } else {
                        ElMessage.error(datas.message);
                        that.loginLoading = false
                    }
                }
            }).catch(e =>{
                that.loading = false
            })
        },
        // 根据token获取code
        getTokenCode(val) {
            let that = this
            apiGetCodeByToken(val).then(datas =>{
                if (datas && datas.data) {
                    setToken('code', datas.data)
                    that.getUserMsg(datas.data)
                }
            })
        },
        getUserMsg(val) {
            let that = this
            apiGetUserMsg(val).then(datas =>{
                if (datas && datas.data) {
                    // setToken('user', JSON.stringify(datas.data))
                    let obj = {
                        name: datas.data.name,
                        id: datas.data.id
                    }
                    window.sessionStorage.setItem('user', JSON.stringify(obj))
                    that.getApprverData()
                }
            })
        },
        getApprverData() {
            let that = this
            apiGetPrivilegesOfCurrentUserAll().then(datas =>{
                if (datas && datas.data) {
                    setToken('purview', JSON.stringify(datas.data.data))
                    that.$router.push({ path: "/home"})
                }
            })
        }
    }
}
</script>


<style lang="scss">
@media screen and (max-width: 1200px) {
    .loginPic{
        .login_left {
            display: none;
        }
    }
}
.loginPic{
    position: relative;
    width: 100%;
    height:1080px;
    background-image: url('../assets/loginImage/logindefBak.png');
    background-position: 0 0;
    background-repeat: no-repeat;
    display: flex;
    .login_left{
        position: fixed;
        left: 15%;
        top: 35%;
        p{
            margin-bottom: 0px;
            font-size: 32px;
            color: #fff;
            margin-top: 10px;
        }
        .title{
            letter-spacing: 5px;
        }
    }
    .login_right{
        width: 470px;
        height:680px;
        background: rgba(0,0,0,0.4);
        position: fixed;
        right: 15%;
        top: 15%;
        .titleIcon{
            margin: 100px 0px 43px 95px;
        }
        .loginCom{
            margin: 0 30px 0px 43px;
            width: 384px;
            height: 56px;
            background: #1B1A1F;
            border-radius: 5px;
            display: flex;     
            .userIcon {
                width: 24px;
                height: 24px;
                margin: 16px;
            }   
            .passwordIcon {
                width: 24px;
                height: 24px;
                margin: 16px;
            }
            .el-input{
                border: 0 solid transparent;
                .el-input__wrapper{
                    background: transparent;
                    box-shadow: none;
                    .el-input__inner, .el-input__inner:focus{
                        background: none;
                        border: none !important;
                        color: #fff;
                        height: 30px;
                        width: 100%;
                        font-size: 14px;
                    }
                }
            }
        }
        .remeber{
            margin: 0 0 0 50px;
            .el-checkbox{
                .el-checkbox__label{
                    color: #fff;
                    font-size: 12px;
                    padding-left:6px;
                }
            }
        }
        .loginBtn{
            margin: 48px 0 0 43px;
            width: 384px;
            height: 56px;
            background-image: url('../assets/loginImage/loginBtn.png');
            cursor: pointer;
            .loginSpan{
                position: relative;
                top: 27%;
                left: 45%;
                font-size: 18px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #FFFFFF;
            }
            .loading{
                display: flex;
                justify-content: center;
                padding-top: 13px;
                .loadingSpan{
                    position: relative;
                    top: 2px;
                    left: -9px;
                    font-size: 18px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #FFFFFF;
                }
                .el-icon{
                    position: relative;
                    top: 7px;
                    left: -12px;
                }
            }
        }
        input::-webkit-input-placeholder{ /*WebKit browsers*/
            color: #fff;
        }
        input::-moz-input-placeholder{ /*Mozilla Firefox*/
            color: #fff;
        }
        input::-ms-input-placeholder{ /*Internet Explorer*/
            color: #fff;
        }
    }
    .loginFooter{
        height: 40px;
        line-height: 40px;
        position: fixed;
        bottom: 0;
        width: 100%;
        text-align: center;
        color: #fff;
        font-family: Arial;
        font-size: 12px;
        letter-spacing: 1px;
    }
}
</style>