front/src/views/login.vue

<template>
    <div style="overflow:hidden;width:100%">
        <div style="background: #fff6e8;">
            <div style="max-width:1400px;margin:0 auto">
                <top v-if="topLoadin" @userNavTo="userTo"></top>
            </div>
        </div>
        <div style="min-width: 1400px;background: #fff6e8;overflow:hidden;width:100%">
            <div style=" position:absolute;width:100%;z-index: 999;">
                <div style="max-width:1400px;margin:0 auto;padding: 30px; ">
                    <el-row :gutter="24">
                        <el-col :span="9" :xs="24">
                            <img src="@/assets/images/login_img_logo.png" />
                            <div style="width: 400px; background: #fff; padding: 30px; margin: 100px auto;">
                                <img style="width: 60%;margin-left:20%;" src="@/assets/images/login_logo.png" />
                                <div style="color: #47C6A2;text-align: center; margin-top: 20px;font-size: 18px;font-weight: bold;letter-spacing: 10px;margin-bottom: 40px;">WELCOME</div>

                                <el-form v-if="!isLogin" ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" style="width: auto;">
                                    <el-form-item prop="username">
                                        <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
                                            <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
                                        </el-input>
                                    </el-form-item>
                                    <el-form-item prop="password">
                                        <el-input
                                            v-model="loginForm.password"
                                            type="password"
                                            auto-complete="off"
                                            placeholder="密码"
                                            @keyup.enter.native="handleLogin"
                                        >
                                            <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
                                        </el-input>
                                    </el-form-item>
                                    <!-- <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox> -->
                                    <div class="mx-forget-pwd">
                                        <label @click="forgetDialogVisiable=true">忘记密码?</label>
                                    </div>
                                    <el-form-item style="width:100%;">
                                        <el-button :loading="loading" size="medium" type="primary" style="width:100%;" @click.native.prevent="handleLogin">
                                            <span v-if="!loading">登 录</span>
                                            <span v-else>登 录 中...</span>
                                        </el-button>
                                    </el-form-item>
                                </el-form>
                                <div v-if="isLogin">
                                    <div class="text-center">
                                        <div class="user-info-head">
                                            <img src="@/assets/images/profile.jpg" tclass="img-circle img-lg" style="border-radius:50%;width:80px;" />
                                        </div>
                                    </div>
                                    <div style="padding-bottom:10px;">
                                        <div class="text-center" style="font-weight:both;margin-top:20px;margin-bottom:10px">{{currentUser.userName}}</div>
                                        <p class="text-center" style="color:#999;font-size:14px">
                                            <span>{{currentUser.nickName}} {{currentSchoolName}}</span>
                                        </p>
                                    </div>
                                    <div class="list-group-item" style="margin-top:20px;border:none">
                                        <span style="display:inline-block;width:33%;text-align:center;cursor:pointer">
                                            <img style="width: 16px;position: relative;top: 2px;margin-right: 5px;" src="@/assets/images/icon_jifen.png" alt />
                                            {{currentUser.points || 0}}积分
                                        </span>
                                        <span @click="userTo()" style="display:inline-block;width:33%;text-align:center;color:#4055F7;cursor:pointer">
                                            <img style="width: 16px;position: relative;top: 2px;margin-right: 5px;" src="@/assets/images/icon_user.png" alt />个人中心
                                        </span>
                                        <span @click="logout" style="display:inline-block;width:33%;text-align:center;color:#C93C3C;cursor:pointer">
                                            <img style="width: 16px;position: relative;top: 2px;margin-right: 5px;" src="@/assets/images/icon_back.png" alt />退出
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="15" :xs="24">
                            <div>
                                <div v-for="(item,idx) in visibleRouters" :key="idx" style="float:left;margin-right:40px;line-height: 50px;">
                                    <el-link @click="to(item)" style="color:#fff;font-size: 16px;">
                                        <svg-icon :icon-class="item.meta.icon" style="margin-right:5px" />
                                        {{item.meta.title}}
                                    </el-link>
                                </div>
                                <!-- <div style="float:left;margin-right:50px; ">
                  <el-link @click="to('/user/profile')"
                    style="color:#fff;font-size: 16px;border-radius:24px;border:1px solid #fff;padding:5px 20px;    margin-top: 7px;">
                    <i class="el-icon-user-solid" style="magin-right:5px"></i>个人中心
                  </el-link>
                                </div>-->
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>

            <!--      <img style="width: 100%;" src="@/assets/images/home_banner.png"/>-->
            <img style="width: 100%;" src="https://mingxuejingbang.oss-cn-beijing.aliyuncs.com/mingxueMainImgs/home_banner.png" />

            <div class="special-class-container hidden-course percent-count">
                <div class="text-center" style="margin:70px;font-size:52px;font-weight: bold;">名学助力 金榜提名</div>
                <ul>
                    <li>
                        <div class="transition-box">
                            <div class="gifts-icon">
                                <span class="start-bg"></span>
                                <em class="main-bg"></em>
                            </div>
                            <span class="gifts-title">优质师资</span>
                            <p class="gifts-desc">专业教师主讲</p>
                        </div>
                    </li>
                    <li>
                        <div class="transition-box">
                            <div class="gifts-icon">
                                <span class="start-bg"></span>
                                <em class="main-bg"></em>
                            </div>
                            <span class="gifts-title">单题微课</span>
                            <p class="gifts-desc">实时录制 精准教学</p>
                        </div>
                    </li>
                    <li>
                        <div class="transition-box">
                            <div class="gifts-icon">
                                <span class="start-bg"></span>
                                <em class="main-bg"></em>
                            </div>
                            <span class="gifts-title">三库联动</span>
                            <p class="gifts-desc">发现最合适的资源</p>
                        </div>
                    </li>
                    <li>
                        <div class="transition-box">
                            <div class="gifts-icon">
                                <span class="start-bg"></span>
                                <em class="main-bg"></em>
                            </div>
                            <span class="gifts-title">学乐园</span>
                            <p class="gifts-desc">快乐学习 快乐提升</p>
                        </div>
                    </li>
                </ul>

                <!-- <div class="text-center" style="margin-top:70px;font-size:28px;font-weight: bold;">在线答题 实时阅卷</div> -->
                <div>
                    <!--          <img src="@/assets/images/wdpc.png" style="width:100%;display:block" alt="">-->
                    <!--          <img src="@/assets/images/zxdt.png" style="width:100%;display:block" alt="">-->
                    <!--          <img src="@/assets/images/dwdbb.png" style="width:100%;display:block" alt="">-->
                    <!--          <img src="@/assets/images/skld.png" style="width:100%;display:block" alt="">-->

                    <img src="https://mingxuejingbang.oss-cn-beijing.aliyuncs.com/mingxueMainImgs/wdpc.png" style="width:100%;display:block" alt />
                    <img src="https://mingxuejingbang.oss-cn-beijing.aliyuncs.com/mingxueMainImgs/zxdt.png" style="width:100%;display:block" alt />
                    <img src="https://mingxuejingbang.oss-cn-beijing.aliyuncs.com/mingxueMainImgs/dwdbb.png" style="width:100%;display:block" alt />
                    <img src="https://mingxuejingbang.oss-cn-beijing.aliyuncs.com/mingxueMainImgs/skld.png" style="width:100%;display:block" alt />
                </div>
                <div style="clear:both"></div>
            </div>

            <!-- <img :src="topImg" style="width: 30px;height: 30px;" alt=""> -->
        </div>
        <el-dialog v-if="dialogVisible" title :visible.sync="dialogVisible" width="850px">
            <complete-profile @completed="handleProfileCompleted" style="margin-left:250px; padding:0 30px"></complete-profile>
        </el-dialog>
        <el-dialog v-if="forgetDialogVisiable" :visible.sync="forgetDialogVisiable" title="忘记密码" width="650px" style="height:600px">
            <forget-password @resetPwdSuccess="forgetDialogVisiable=false"></forget-password>
        </el-dialog>
        <bottom-p></bottom-p>
    </div>
</template>

<script>
import store from "@/store";
import router from "@/router";
import { mapGetters, mapActions } from "vuex";
import auth from "@/utils/auth";
import {
    getUserInfoByAgentcode,
    getFrontInitialRouters,
} from "@/api/system/user";
import * as gradeAxios from "@/api/webApi/grade";
import * as loginAxios from "@/api/login";
import * as system from "@/api/webApi/system";
import forgetPassword from "./components/forget-pwd.vue";
import CompleteProfile from "./components/complete-profile.vue";
export default {
    components: {
        forgetPassword,
        CompleteProfile,
    },
    data() {
        return {
            forgetDialogVisiable: false,
            topLoadin: true,
            isLogin: auth.getToken(),
            loginObj: {},
            loading: false,
            gradeLoading: false,
            navList: [],
            loginForm: {
                username: "",
                password: "",
                // rememberMe: false,
                // code: "",
                // uuid: "",
                relation: 1,
                grade: 2,
                year: "",
            },
            loginRules: {
                relation: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "请选择学生端或者老师端",
                    },
                ],
                grade: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "请选择学校类别",
                    },
                ],
                username: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "用户名不能为空",
                    },
                ],
                password: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "密码不能为空",
                    },
                ],
                code: [
                    {
                        required: true,
                        trigger: "change",
                        message: "验证码不能为空",
                    },
                ],
            },
            options: {
                img: store.getters.avatar, //裁剪图片的地址
            },
            submitLoading: false,
            schoolData: [],
            gradeData: [],
            classData: [],
            areaSchoolAndYears: {},
            isSecd: false,
            times: 120,
            form: {
                username: "",
                phoneNumber: "",
                code: "",
                schoolId: "",
                gradeId: [],
                clazzId: [],
            },
            subjectData: [],
            dialogVisible: false,
            id: 0,
            props: {
                lazy: true,
                lazyLoad(node, resolve) {
                    const { level } = node;
                    setTimeout(() => {
                        const nodes = Array.from({
                            length: level + 1,
                        }).map((item) => {
                            let a = "";
                            if (level == "0") {
                                a = "省";
                            } else if (level == "1") {
                                a = "市";
                            } else {
                                a = "区";
                            }
                            return {
                                value: 1212,
                                label: `选项${a} `,
                                leaf: level >= 2,
                            };
                        });
                        // 通过调用resolve将子节点数据返回，通知组件数据加载完成
                        resolve(nodes);
                    }, 1000);
                },
            },
        };
    },
    computed: {
        ...mapGetters([
            "isFrontStudent",
            "isFrontTeacher",
            "isFrontMaster",
            "currentUser",
        ]),
        visibleRouters() {
            return this.navList.filter((r) => r.meta?.title && !r.hidden);
        },
        currentSchoolName() {
            return this.currentUser.busiSchool?.first()?.schoolName;
        },
    },
    created() {
        let u = navigator.userAgent;
        let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1;
        if (isAndroid) {
            let url = this.$route.fullPath.split("?")[1];
            if (url && !this.isLogin) {
                let urlData = url.split("&");
                for (let i = 0; i < urlData.length; i++) {
                    this.loginObj[urlData[i].split("=")[0]] =
                        urlData[i].split("=")[1];
                }
                if (this.loginObj.username && this.loginObj.password) {
                    // 直接发起登录
                    this.loading = true;
                    this.Login(this.loginObj)
                        .then(() => {
                            this.isLogin = true;
                            this.loading = false;
                            this.getUser();
                            this.getNav();
                            // this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
                        })
                        .catch(() => {
                            this.loading = false;
                        });
                }
            }
        } else {
            this.getUser();
            this.getNav();
        }
    },
    methods: {
        ...mapActions(["GenerateRoutes", "Login", "LogOut", "GetInfo"]),
        getNav() {
            console.log(
                "getNav called",
                "real menu=" + !!(this.islogin && this.currentUser.isBind),
                this.currentUser,
                this.isLogin
            );
            if (this.isLogin) {
                this.GenerateRoutes().then((accessRoutes) => {
                    console.log("GenerateRoutes accessRoutes", accessRoutes);
                    router.addRoutes(accessRoutes); // 动态添加可访问路由表
                    this.navList = JSON.parse(
                        JSON.stringify(
                            this.$store.state.permission.topbarRouters
                        )
                    );
                });
            } else {
                getFrontInitialRouters().then((res) => {
                    this.navList = res.data.map((r) => ({
                        path: r.path,
                        meta: r.meta,
                    }));
                });
            }
        },
        gouAction(data) {
            if (data && data.length > 0) {
                if (data[0].children && data[0].children.length > 0) {
                    if (
                        data[0].children[0].children &&
                        data[0].children[0].children.length > 0
                    ) {
                        return data[0].children[0].children.path;
                    } else {
                        return data[0].path + "/" + data[0].children[0].path;
                    }
                } else {
                    return data[0].path;
                }
            } else {
                return "";
            }
        },
        handleClick(data) {
            let item = JSON.parse(JSON.stringify(data));
            let routes = []; //三级菜单
            let second = []; //二级
            let routesTo = [];
            if (item.children) {
                //有二级菜单
                item.children.forEach((item2) => {
                    if (item2.children) {
                        item2.children.forEach((item3) => {
                            item3.path =
                                item.path + "/" + item2.path + "/" + item3.path;
                        });
                        if (routes.length == 0 && item2.children.length) {
                            //一级菜单下面第一个有3个菜单的二级菜单
                            routes = item2.children;
                            routesTo = item2.children;
                        }
                    } else {
                        routesTo = item.children;
                    }
                    item2.path = item.path + "/" + item2.path;
                    item2.level = 2;
                    second.push(item2);
                });
                let fal = false;
                second.forEach((item) => {
                    if (!fal && item.children && item.children.length > 0) {
                        auth.setActiveMenu(item.path);
                        fal = true;
                    }
                });

                auth.setMenuTab(second);
                this.three = true;
                this.$store.commit("SET_SIDEBAR_ROUTERS", routes);
            } else {
                //没有二级菜单
                this.$store.commit("SET_SIDEBAR_ROUTERS", []);
                this.$router.push({
                    path: item.path,
                });
            }
            let path = this.gouAction(routesTo);
            if (path) {
                this.$router.push({
                    path: path,
                });
                auth.setMenuListAction(path);
            } else {
            }
            auth.setMenuList(routes);
        },
        logout() {
            this.$confirm("确定注销并退出系统吗？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.LogOut().then(() => {
                    this.isLogin = false;
                    this.getNav();
                    this.topLoadin = false;
                    this.loginObj = {};
                    setTimeout(() => {
                        this.topLoadin = true;
                        this.$router.push({ path: "/login" });
                    }, 10);
                });
            });
        },
        getUser() {
            if (!this.isLogin) return;
            this.GetInfo().then((response) => {
                this.dialogVisible = !this.currentUser.isBind;
                this.topLoadin = false;
                setTimeout(() => {
                    this.topLoadin = true;
                }, 10);
            });
        },
        userTo() {
            //跳转至个人中心
            if (this.isLogin && !this.currentUser.isBind) {
                this.dialogVisible = true;
                this.$message.error("请先完善信息！");
                return;
            }
            const pcRouter = this.navList.find((r) => r.path == "/user");
            if (pcRouter) this.to(pcRouter);
        },
        to(url) {
            console.log("will go to", url);
            auth.removeMenuTab();
            auth.removeMenuList();
            if (this.isLogin && this.currentUser.isBind) {
                if (url == "/login") {
                    window.location.reload();
                    return;
                }
                if (
                    url ==
                    "/index?type=http://8.134.76.179/index.php?m=login&token=94c750ea0f7f41d7753327792e937589"
                ) {
                    window.open(
                        "http://8.134.76.179/index.php?m=login&token=" +
                            this.currentUser.code
                    );
                } else if (url == "/user/profile") {
                    this.$router.push({
                        path: url,
                    });
                } else {
                    this.handleClick(url);
                }
            } else if (this.isLogin && this.currentUser.isBind) {
                this.dialogVisible = true;
                this.$message.error("请先完善信息！");
            } else {
                this.$message.error("请先登陆！");
            }
        },
        handleLogin() {
            this.$refs.loginForm.validate((valid) => {
                if (valid) {
                    this.loading = true;
                    this.Login(this.loginForm)
                        .then(() => {
                            this.isLogin = true;
                            this.loading = false;
                            this.getUser();
                            this.getNav();
                            // this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
                        })
                        .catch(() => {
                            this.loading = false;
                        });
                }
            });
        },
        handleProfileCompleted() {
            this.dialogVisible = !this.currentUser.isBind;
            this.getNav(); //重新获取菜单
        },
    },
};
</script>

<style scoped>
.mx-forget-pwd {
    display: flex;
    justify-content: flex-end;
    color: #999999;
    font-size: 14px;
    margin-bottom: 20px;
}

.mx-forget-pwd label {
    cursor: pointer;
}

/deep/.el-input-group__append button.el-button {
    background: #e6a23c;
    color: #fff;
}

/deep/.el-dialog {
    background: url("../assets/images/img_bg1.png") no-repeat;
    /* background-size: 100% 100%;
    height: 580px; */
    max-height: 520px;
    width: 800px;
}

/deep/.el-card__body {
    padding: 0;
}

/deep/.el-form-item {
    margin-bottom: 15px;
}

.header-h {
    background: #47c6a2;
}

/deep/.el-dialog__close {
    color: #999999;
}

p {
    margin: 0;
}

.special-class-container {
    background: #fff6e8;
}

.special-class-container .title,
.special-class-container ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.title-info-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    color: #333;
    font-size: 40px;
    line-height: 56px;
    font-weight: 700;
}

.special-class-container ul {
    margin: 0 auto;
    width: 1400px;
    height: 215px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
}

.special-class-container ul li {
    position: relative;
    width: 260px;
    height: 215px;
    -webkit-border-radius: 6px 20px 6px 20px;
    border-radius: 6px 20px 6px 20px;
    list-style-type: none;
}

.special-class-container ul li .transition-box {
    position: absolute;
    left: 0;
    top: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    width: 260px;
    height: 215px;
    background: #fff;
    -webkit-border-radius: 6px 20px 6px 20px;
    border-radius: 6px 20px 6px 20px;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.special-class-container ul li .gifts-icon {
    position: relative;
    margin-top: 40px;
    width: 52px;
    height: 52px;
    -webkit-border-radius: 6px 20px 6px 20px;
    border-radius: 6px 20px 6px 20px;
    background: -o-linear-gradient(
        225deg,
        rgba(94, 232, 193, 0.2) 0,
        rgba(71, 198, 162, 0.2) 100%
    );
    background: linear-gradient(
        225deg,
        rgba(94, 232, 193, 0.2),
        rgba(71, 198, 162, 0.2)
    );
}

.special-class-container ul li .start-bg {
    top: -5px;
    left: 21px;
    width: 10px;
    height: 20px;
    background: url(data:image/png;base64,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)
        no-repeat 50%;
    background-size: contain;
}

.special-class-container ul li .main-bg,
.special-class-container ul li .start-bg {
    position: absolute;
    display: inline-block;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.special-class-container ul li .main-bg,
.special-class-container ul li .start-bg {
    position: absolute;
    display: inline-block;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.special-class-container ul li .main-bg {
    right: 0;
    top: 0;
}

.special-class-container ul li:first-of-type .main-bg {
    width: 35px;
    height: 41px;
    background: url(data:image/png;base64,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)
        no-repeat 50%;
    background-size: 100% 100%;
}

.special-class-container.hidden-course ul li:first-of-type .main-bg {
    background: url("../assets/images/icon_zhinengceping.png") no-repeat 50%;
    background-size: 100% 100%;
    height: 39px;
    right: -2px;
}

.special-class-container.hidden-course ul li:nth-of-type(2) .main-bg {
    width: 38px;
    height: 44px;
    background-size: 100% 100%;
    background: url("../assets/images/icon_dantiweike.png") no-repeat 50%;
}

.special-class-container ul li:nth-of-type(3) .main-bg {
    width: 38px;
    height: 44px;
    background: url("../assets/images/icon_sankuliandong.png") no-repeat 50%;
    background-size: 100% 100%;
}

.special-class-container ul li:nth-of-type(4) .main-bg {
    width: 42px;
    height: 42px;
    background: url("../assets/images/icon_kuailejinsai.png") no-repeat 50%;
    background-size: 100% 100%;
}

.special-class-container ul li .gifts-title {
    color: #333;
    font-size: 28px;
    line-height: 40px;
    font-weight: 700;
    margin: 19px 0 6px;
    -webkit-transition: color forwards 2s;
    -o-transition: color 2s forwards;
    transition: color forwards 2s;
}

.special-class-container ul li .gifts-desc {
    color: #666;
    font-size: 14px;
    line-height: 20px;
}

.special-class-container ul li:hover .transition-box {
    top: -10px;
    -webkit-box-shadow: 0 8px 18px 0 #ffefd7;
    box-shadow: 0 8px 18px 0 #ffefd7;
}

.special-class-container ul li:hover .gifts-icon {
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    background: -o-linear-gradient(225deg, #5ee8c1 0, #47c6a2 100%);
    background: linear-gradient(225deg, #5ee8c1, #47c6a2);
}

.special-class-container ul li:hover .start-bg {
    width: 87px;
    height: 53px;
    top: -28px;
    left: -16px;
}

.special-class-container.hidden-course ul li:hover:first-of-type .main-bg {
    right: 6px;
}

.special-class-container ul li:hover .gifts-title {
    color: #47c6a2;
    -webkit-transition: color forwards 2s;
    -o-transition: color 2s forwards;
    transition: color forwards 2s;
}
</style>