FE_kd_server/src/components/page/Login.vue

<template>
    <div class="login-wrap">
        <div class="header">
            <div class="logo">
                <img src="../../assets/img/logo.png">
            </div>
        </div>

        <div class="ms-login">
            <div class="ms-title">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="账号登录" name="0">
                        <el-form :model="param" :rules="rules" ref="param" label-width="0px" style="margin-top: 40px">
                            <el-form-item prop="username">
                                <el-input v-model="param.username" placeholder="请输入账号"></el-input>
                            </el-form-item>
                            <el-form-item prop="password">
                                <el-input
                                    type="password"
                                    placeholder="请输入密码"
                                    v-model="param.password"
                                    @keyup.enter.native="submitForm('param')"
                                >
                                </el-input>
                            </el-form-item>
                            <!-- <el-button type="text" class="forget">忘记密码?</el-button> -->
                            <div class="login-btn">
                                <el-button type="primary" @click="submitForm('param')">马上登录</el-button>
                            </div>
                            <!-- <p class="login-tips">使用第三方账号直接登录</p>
                            <p class="thirdParty">
                                <i class="icon-weixin"></i>
                                <i class="icon-qq"></i>
                            </p> -->
                        </el-form>
                    </el-tab-pane>

                    <el-tab-pane label="手机号/邮箱登录" name="1">
                        <el-form :model="phoneParam" :rules="phoneRules" ref="phoneParam" label-width="0px" style="margin-top: 40px">
                            <el-form-item prop="userphone">
                                <el-input v-model="phoneParam.userphone" placeholder="请输入手机号/邮箱"></el-input>
                            </el-form-item>
                            <el-form-item prop="phonePassword">
                                <el-input
                                    type="password"
                                    placeholder="请输入密码"
                                    v-model="phoneParam.phonePassword"
                                    @keyup.enter.native="submitForm('phoneParam')"
                                >
                                </el-input>
                            </el-form-item>
                            <!-- <el-button type="text" class="forget">忘记密码?</el-button> -->
                            <div class="login-btn">
                                <el-button type="primary" @click="submitForm('phoneParam')">马上登录</el-button>
                            </div>
                        </el-form>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>
</template>

<script>
import addRoutes from '@/libs/route/addRoutes'
export default {
    data: function() {
        return {
            param: {
                username: 'admin',
                password: 'admin'
            },
            rules: {
                username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
                password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
            },
            phoneParam: {
                userphone: '',
                phonePassword: ''
            },
            phoneRules: {
                userphone: [{ required: true, message: '请输入手机号/邮箱', trigger: 'blur' }],
                phonePassword: [{ required: true, message: '请输入密码', trigger: 'blur' }],
            },
            activeName: '0'
        };
    },
    methods: {
        submitForm(form) {
            this.$refs[form].validate(valid => {
                if (valid) {
                    let data = {
                        account: this.activeName == '0' ? this.param.username : this.phoneParam.userphone,
                        password: this.activeName == '0' ? this.param.password : this.phoneParam.phonePassword,
                        source: this.activeName
                    }
                    this.$get(this.api.logins,data).then(res => {
                        let data = res.message.retvalue
                        // if(data.roleId == 1 || data.roleId == 2 || data.roleId == 3){
                        //     this.$post(this.api.updateLogInNumber,{userId: data.userId}).then(res => {}).catch(res => {});
                            res.message.listValue && this.$config.dynamicRoute && addRoutes(res.message.listValue)
                            this.$message.success('登录成功');
                            sessionStorage.setItem('kd_server_username', this.param.username);
                            res.message.retvalue.userAvatars && this.$store.commit("userPhoto", { avatar : res.message.retvalue.userAvatars})
                            this.$store.commit("userLoginData", { userLogin_id : data.userId,userRole_id: data.roleId,schoolId: data.schoolId,token: data.token,userName: data.userName});

                            let redirect = decodeURIComponent(this.$route.query.redirect || '/dashboard')
                            this.$router.replace(redirect)
                        // }else{
                        //     this.$message.error('该用户没有权限');
                        // }
                    }).catch(res => {});
                } else {
                    this.$message.error('请输入账号和密码');
                    return false;
                }
            });
        },
        handleClick(tab, event) {
            console.log(tab, event);
        }
    },
};
</script>

<style scoped>
.login-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url(../../assets/img/login-bg.png);
    background-size: 100%;
}
.ms-title {
    width: 548px;
    position: absolute;
    left: 50%;
    top: 50px;
    transform: translate(-50%,0);
}
.ms-login {
    position: absolute;
    left: 50%;
    top: 42px;
    transform: translate(-50%,0);
    width: 1200px;
    height: 82%;
    /* height: 884px; */
    margin-top: 60px;
    background-image: url(../../assets/img/login-input.png);
    box-shadow:0px 0px 79px 0px rgba(11,15,65,0.36);
    overflow: hidden;
}
.login-btn {
    text-align: center;
}
.login-btn button {
    width: 100%;
    height: 88px;
    margin-bottom: 50px;
    font-weight: bold;
    background:linear-gradient(90deg,rgba(94,206,253,1),rgba(91,67,231,1));
    box-shadow:0px 7px 27px 0px rgba(50,129,255,0.51);
    border-radius:10px;
}
.login-tips {
    text-align: center;
    color: #999;
    font-weight:bold;
}
.forget{
    width: 100%;
    margin-bottom: 28px;
    text-align: right;
    color: #999;
    font-weight:bold;
}
.thirdParty{
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 33px;
}

/* 头部 */
.header{
    width: 100%;
    height: 60px;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
}
.logo{
    width: 171px;
    height: 40px;
    margin-left: 20px;
}
img{
    width: 100%;
    height: 100%;
}
.header_title{
    width: 33%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header_title a{
    cursor: pointer;
}
.header_title a:hover{
    color: blueviolet;
}
.nul{
    width:80px;
    margin-right: 30px;
}
</style>