oa-system/src/components/Login.vue

<template>
    <div class="login-all">
        <div class="login-haed">
            <div class="img-logo">
                <div class="logos">
                    <img src="../assets/logo2.png" />
                </div>
                <div class="names">PAN-AMEPICAN INTERNATIONAL</div>
            </div>
            <div class="help-box">
                <div class="help-title">没有企业账户？</div>
                <router-link class="help-btn" :to="{path:'/Enroll'}">去注册</router-link>
                <!-- <div class="help-btn">去注册</div> -->
            </div>
        </div>
        <div class="login-dominant">
            <div class="login-box">
                <div class="login-title">泛美国际 - AI智能办公系统</div>
                <div class="login-input">
                    <el-input @keyup.enter.native="Login()" class="accounts" placeholder="请输入您的账户" v-model="usernum">
                        <i slot="prefix" class="iconfont el-input__icon icon-zhanghu"></i>
                    </el-input>
                    <el-input @keyup.enter.native="Login()" class="passwords" placeholder="请输入您的密码" show-password v-model="password">
                        <i slot="prefix" class="iconfont el-input__icon icon-mima"></i>
                    </el-input>
                    <div class="el-input remembers">
                        <div class="el-input-box">
                            <input id="ckxjz" v-model="msgs" type="checkbox">
                            <span class="two" @click="ckxclick"></span>
                            <label for="ckxjz">记住账户</label>
                        </div>
                        <div class="fotger-pass">
                            忘记密码？
                        </div>
                    </div>
                    <div class="loginbtn-box">
                        <el-button  @click="Login()" class="loginbtn"
                            v-loading.fullscreen.lock="fullscreenLoading" round>登 录</el-button>
                    </div>
                </div>
                <div></div>
            </div>
        </div>
        <div class="fout-box">
            PAN AMEPICAN INTERNATIONAL OA AI SYSTEM<br>
            © 2023 PAN AMEPICAN INTERNATIONAL CORPOPATION.ALL Rights Reserved.
        </div>
    </div>
</template>

<script>
import Vuex from 'vuex';
import { mapMutations, mapActions } from 'vuex'

export default {
    ...mapMutations(['setphone']),//引入保存phone数据方法
    data() {
        return {
            usernum: '',
            password: '',
            msgs: false,
            fullscreenLoading: false
        }
    },
    methods: {
        ...mapActions(['vlogin']),
        //记住账户click
        ckxclick() {
            if (this.msgs == true) {
                this.msgs = false;
            } else {
                this.msgs = true;
            }
        },
        //记住密码存cookie
        setUserInfo() {
            var vm = this;
            // 判断用户是否勾选记住密码，如果勾选，向cookie中储存登录信息，
            // 如果没有勾选，储存的信息为空
            console.log(vm.msgs)
            if (vm.msgs) {
                vm.$cookie.set("userName", vm.usernum,7);
                vm.$cookie.set("userPwd", vm.password,7);
                vm.$cookie.set("checked", vm.msgs,7);
            } else {
                vm.$cookie.set("userName", "");
                vm.$cookie.set("userPwd", "");
                vm.$cookie.set("checked","");
            }
        },
         //记住密码存cookie
         getUserInfo() {
            this.usernum=this.$cookie.get('userName');
            this.password=this.$cookie.get('userPwd');
            this.msgs=this.$cookie.get('checked');
        },
        keyd(e){
            let that = this
            e = window.event || e
            //保证是在登录页面发出的enter事件
            if (e.code === 'Enter' || e.code === 'enter' || e.code === 'NumpadEnter') {
                //调用登录函数
                that.Login();
            }
           
        },
        //登录
        Login() {
            var homepage = "";
            if (this.usernum == "" || this.password == "") {
                this.$message({
                    message: "请填写账号密码！",
                    type: 'warning'
                });
                return false;
            }
            this.fullscreenLoading = true;
            var url = "/api/login"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                data: {
                    number: this.usernum,
                    password: this.password
                }
            }).then(function (res) {
                console.log(res);
                if (res.data.code == 200) {
                    window.removeEventListener('keydown',that.keyd,false);
                    localStorage.setItem('userinif', JSON.stringify(res.data.data));
                    localStorage.setItem('unReadCount', JSON.stringify(res.data.data.unReadCount));
                    that.fullscreenLoading = false;
                    for (var l = 0; l < res.data.data.authData.length; l++) {
                        if (res.data.data.authData[l].modulName == '主页') {
                            homepage = res.data.data.authData[l].pageList[0].webUrl
                            localStorage.setItem("indexs", res.data.data.authData[l].modulid + '-' + res.data.data.authData[l].pageList[0].pageid);
                            localStorage.setItem("innhtml", res.data.data.authData[l].pageList[0].pageName);
                        }
                    }
                    that.$router.push({ path: "/home" + homepage });
                    that.setUserInfo();
                    console.log("/home" + homepage);
                    // that.$router.push('/home/index');
                } else {
                    that.fullscreenLoading = false;
                    that.$message({
                        message: res.data.msg,
                        type: 'warning'
                    });
                }
            })
        }
    },
    mounted() {
        console.log(process.env.API_HOST);
        document.querySelector(".login-all").style.height = window.innerHeight + "px";
        
        this.getUserInfo();
        window.addEventListener('keydown',this.keyd);
    }
}
</script>
<style scoped>
.fout-box {
    width: 100%;
    text-align: center;
    background-color: #0008;
    padding: 20px;
    color: #fff;
    line-height: 34px;
    position: fixed;
    bottom: 0;
    font-size: 14px;
}

#ckxjz {
    cursor: pointer;
    opacity: 0;
}

#ckxjz[type=checkbox]+span {
    display: inline-block;
    border-radius: 2px;
    width: 15px;
    height: 15px;
    border: 1px solid #FFF;
    background-color: transparent;
    position: absolute;
    left: 0px;
    top: 3px;
    cursor: pointer;
}

#ckxjz[type=checkbox]:checked+span::after {
    content: '\2714';
    color: #fff;
    position: absolute;
    font-size: 20px;
    left: 2px;
    bottom: -2px;
}

.login-all {
    background-image: url("../assets/back.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.login-haed {
    padding: 50px 100px;
    display: flex;
    justify-content: space-between;
}

.img-logo {
    display: flex;
    align-items: center;
}

.logos {
    color: #fff;
    font-size: 48px;
    font-weight: 600;
    font-family: fangsong;
    width: 80px;
    height: 80px;
}

.logos img {
    width: 100%;
}

.names {
    color: #fff;
    margin-left: 20px;
    font-size: 24px;
    font-weight: 600;
    font-family: fangsong;
}

.help-box {
    display: flex;
    align-items: center;
}

.help-title {
    color: #fff;
}

.help-btn {
    margin-left: 20px;
    color: #1DA3D8;
}

.login-box {
    width: 400px;
    height: 300px;
    background-color: rgba(26, 30, 42, 0.7);
    /*background-color: rgba(42,53,88);*/
    margin: 0 auto;
    border-radius: 20px;
    padding: 20px 50px;
    margin-top: 120px;
}

.login-title {
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 20px;
}

.icon-mima {
    font-weight: 600;

}

.icon-zhanghu {
    color: #1DA3D8;
}

.icon-mima {
    color: #1DA3D8;

}

.remembers {
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.fotger-pass {
    color: #1DA3D8;
}

.loginbtn {
    background-color: transparent;
    color: #1DA3D8;
    border: 1px solid #1DA3D8;
}

.loginbtn-box {
    text-align: center;
    padding: 25px;
}
</style>
<style >
body {
    margin: 0;
    padding: 0;

}

.login-input .el-input input {
    border-radius: 20px;
    background-color: transparent;
    color: #fff;
}

.loginbtn-box .el-button.is-round {
    border-radius: 25px;
    padding: 12px 50px;
    font-size: 20px;
}

.login-input .el-input {
    margin-top: 20px;
}

.el-input label {
    color: #fff;
}

.login-input .el-input__prefix {
    width: 40px;
}

.login-input .el-input--prefix .el-input__inner {
    padding-left: 50px;
}

/*.accounts{
        position: relative;
    }
    .accounts::after{
        content: "请输入您的账户";
        display: inline-block;
        position: absolute;
        color: #fff;
        left: 50px;
        top: -10px;
        background-color: rgba(42,53,88);
        /*background-image: url("../assets/zhedang.png");
    }
    .passwords{
        position: relative;
    }
    .passwords::after{
        content: "请输入您的密码";
        display: inline-block;
        position: absolute;
        color: #fff;
        left: 50px;
        top: -10px;
        background-color: rgba(42,53,88);
        /*background-image: url("../assets/zhedang.png");
    }*/
</style>