GCLS_Page_ROOT/src/views/login/index.vue

<template>
  <div class="index">
    <template v-if="isPc">
      <div class="shadow" v-if="LoginOrRegistration != 'signin'">
        <LoginNav
          :changeLoginReg="changeLoginReg"
          :FatheruserMessage="userMessage"
          :language_list="language_list"
          :configInfor="configInfor"
          :projectList="projectList"
        />

        <div class="logoAndlogin">
          <div class="LogoAndText">
            <div class="logo">
              <img :src="configInfor.logo_image_url_home" class="logo-img" />
            </div>
            <div class="text">
              <p class="p1">{{ configInfor.title }}</p>
              <p class="p2">
                这里有丰富的教学资源、先进的教学方法，无论您是教师或学生都能在这里尽情汲取养分！
              </p>
            </div>
          </div>
          <div class="login" v-if="LoginOrRegistration == 'login'">
            <Login
              :ForgetType.sync="loginType"
              :changeLoginReg="changeLoginReg"
              :changeLoginType="changeLoginType"
              :getChildSysList="getChildSysList"
            />
          </div>
          <div
            v-if="LoginOrRegistration == 'Forget password'"
            class="ForgetPassword"
          >
            <ForgetPassword
              :changeLoginReg="changeLoginReg"
              :ForgetType.sync="loginType"
              :changeLoginType="changeLoginType"
            />
          </div>
          <div class="list" v-if="!LoginOrRegistration">
            <div
              :class="projectIndex == item.key ? 'Selectproject' : ''"
              @mousemove="projectMove(item)"
              @mouseout="projectOut"
              v-for="(item, i) in projectList"
              :key="i"
              @click="SelectProject(i)"
            >
              <div>
                <img
                  v-if="projectIndex == item.key"
                  :src="item.icon_url_home_selected"
                  alt=""
                />
                <img v-else :src="item.icon_url_home_default" alt="" />
                <p>{{ item.name }}</p>
              </div>
              <p>{{ item.desc }}</p>
            </div>
          </div>
        </div>
        <div class="bottom" v-if="LoginOrRegistration != 'signin'">
          <div>
            <span> About us </span>
            <span>
              <span style="margin-right: 16px"> Office: </span>

              hzmd@160.com
            </span>
            <span>
              <span style="margin-right: 16px"> Tell: </span>
              800-820-8820</span
            >
            <span>
              <span style="margin-right: 16px"> Site: </span>
              123 walton gorgla street town hall,beijing.CH</span
            >
          </div>
          <div>
            <span style="font-weight: bold"> Copyright </span>
            © 2010-2021 HugeMind All rights reserved.
          </div>
        </div>
      </div>
    </template>
    <template v-else>
      <div class="empty"><p>跳转中...</p></div>
    </template>
  </div>
</template>

<script>
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》from ‘《组件路径》';
import Login from "@/components/login/login";
import Registration from "@/components/login/registration";
import LoginNav2 from "@/components/login/LoginNav2";
import ForgetPassword from "@/components/login/ForgetPassword";
import LoginNav from "@/components/login/LoginNav";

import { getLogin, getContent, getAcsCode, getStaticContent } from "@/api/api";
import { updateWordPack } from "@/utils/i18n";
import { getToken, removeToken } from "@/utils/auth";

import { getConfigInfor } from "@/utils/index";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    Login,
    Registration,
    ForgetPassword,
    LoginNav,
    LoginNav2,
  },
  props: {},
  data() {
    //这里存放数据
    return {
      isPc: false,
      LoginOrRegistration: "", //注册 登录 忘记密码
      loginType: "teacher",
      projectList: [],
      projectList1: [
        {
          id: 0,
          name: "教学中心",
          img: "project1-1",
          selectImg: "project1-1-1",
          text: "帮助您快速完成课程及任务安排，快速清晰的完成学习任务。",
        },
        {
          id: 1,
          name: "教材中心",
          img: "project8-8",
          selectImg: "project1-1-1",
          text: "帮您快速定制生动、有趣、实用的数字教材。",
        },
        {
          id: 2,
          name: "教培中心",
          img: "project2-2-2",
          selectImg: "project2-2",
          text: "名师授课，丰富的课程体系，快速扎实帮您提升教学能力。",
        },
        {
          id: 3,
          name: "教研中心",
          img: "project6-6-6",
          selectImg: "project6-6",
          text: "丰富的教学资料和珍贵的文献可以在线查看或下载。",
        },
        //
        {
          id: 4,
          name: "考试中心",
          img: "project5-5-5",
          selectImg: "project5-5",
          text: "丰富的题库将帮助您快速编写实用、准确、全面的试卷。",
        },
        {
          id: 5,
          name: "学习中心",
          img: "project4-4-4",
          selectImg: "project4-4",
          text: "在这里可以很容易地找到数字教科书、学习材料和丰富的课程。",
        },
        {
          id: 6,
          // Teacher training center
          name: "个人中心",
          img: "project3-3-3",
          selectImg: "project3-3",
          text: "您收集和购买的所有资源都可以在这里轻松找到。",
        },
      ],
      teacherProList: [
        //普通教师
        {
          id: 0,
          name: "教学中心",
          img: "project1-1",
          selectImg: "project1-1-1",
          text: "帮助您快速完成课程及任务安排，快速清晰的完成学习任务。",
        },
        {
          id: 2,
          name: "教培中心",
          img: "project2-2-2",
          selectImg: "project2-2",
          text: "名师授课，丰富的课程体系，快速扎实帮您提升教学能力。",
        },
        {
          id: 3,
          name: "教研中心",
          img: "project6-6-6",
          selectImg: "project6-6",
          text: "丰富的教学资料和珍贵的文献可以在线查看或下载。",
        },
        {
          id: 4,
          name: "考试中心",
          img: "project5-5-5",
          selectImg: "project5-5",
          text: "丰富的题库将帮助您快速编写实用、准确、全面的试卷。",
        },
        {
          id: 5,
          name: "学习中心",
          img: "project4-4-4",
          selectImg: "project4-4",
          text: "在这里可以很容易地找到数字教科书、学习材料和丰富的课程。",
        },
        {
          id: 6,
          // Teacher training center
          name: "个人中心",
          img: "project3-3-3",
          selectImg: "project3-3",
          text: "您收集和购买的所有资源都可以在这里轻松找到。",
        },
      ],
      stuProList: [
        {
          id: 0,
          name: "教学中心",
          // name: this.$t("teaching"),
          img: "project1-1-1",
          selectImg: "project1-1",
          text: "帮助您快速完成课程及任务安排，快速清晰的完成学习任务。",
        },
        {
          id: 5,
          name: "学习中心",
          img: "project4-4-4",
          selectImg: "project4-4",
          text: "在这里可以很容易地找到数字教科书、学习材料和丰富的课程。",
        },
        {
          id: 6,
          // Teacher training center
          name: "个人中心",
          img: "project3-3-3",
          selectImg: "project3-3",
          text: "您收集和购买的所有资源都可以在这里轻松找到。",
        },
      ],
      projectIndex: null,
      userMessage: null,
      language_list: null,
      configInfor: null,
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中数据变化
  watch: {},
  //方法集合
  methods: {
    changeLoginReg(value, userMessage) {
      if (value == "signin") {
        this.$router.push("/Signup");
      } else {
        this.LoginOrRegistration = value;
      }
      this.userMessage = userMessage;
    },
    changeLoginType(value) {
      this.loginType = value;
    },
    // 鼠标进入
    projectMove(item) {
      this.projectIndex = item.key;
    },
    // 鼠标离开
    projectOut() {
      this.projectIndex = null;
    },
    async SelectProject(command) {
      let _this = this;
      _this.LoginNavIndex = command;
      let userInfor = getToken();
      let user_code = "",
        user_type = "",
        session_id = "";
      if (userInfor) {
        userInfor = JSON.parse(getToken());
        user_code = userInfor.user_code;
        user_type = userInfor.user_type;
        session_id = userInfor.session_id;
      }
      if (!session_id || !user_code || !user_type || !userInfor) {
        this.$message.warning("请先登录");
        this.projectName = this.projectList[0].name;
        return;
      }
      _this.projectName = this.projectList[command].name;
      let relative_path = this.projectList[command].relative_path;
      location.href = relative_path;
    },
    // 获取语言列表
    getLangList() {
      let MethodName = "language_manager-GetLanguageList";
      let data = {};
      getStaticContent(MethodName, data).then((res) => {
        this.language_list = res.language_list;
      });
    },
    // 验证用户是否登录
    Islogin() {
      let userInfor = getToken();
      let user_code = "",
        user_type = "",
        session_id = "";
      if (userInfor) {
        userInfor = JSON.parse(getToken());
        user_code = userInfor.user_code;
        user_type = userInfor.user_type;
        session_id = userInfor.session_id;
        let MethodName = "login_control-Is_Effective_User";
        getAcsCode(MethodName, {
          UserCode: user_code,
          SessionID: session_id,
          UserType: user_type,
        }).then((res) => {
          if (res.is_effective == "false") {
            this.userMessage = null;
            this.isPc = true;
            this.LoginOrRegistration = "login";
            removeToken();
          } else {
            this.userMessage = userInfor;

            if (
              userInfor.popedom_code_list.indexOf(2000001) > -1 ||
              userInfor.user_type == "STUDENT"
            ) {
              this.isPc = false;
              this.$message.warning("跳转中....");
              location.href = `/GCLS-Learn/#/EnterSys`;
            } else {
              this.isPc = true;
              this.LoginOrRegistration = "";
              this.getChildSysList();
            }
            this.getLangList();
            updateWordPack({
              word_key_list: ["teaching", "teaching"],
            });
          }
        });
      } else {
        this.isPc = true;
        this.LoginOrRegistration = "login";
      }
    },
    browserRedirect() {
      var sUserAgent = navigator.userAgent.toLowerCase();

      var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";

      var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";

      var bIsMidp = sUserAgent.match(/midp/i) == "midp";

      var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";

      var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";

      var bIsAndroid = sUserAgent.match(/android/i) == "android";

      var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";

      var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";

      if (
        bIsIpad ||
        bIsIphoneOs ||
        bIsMidp ||
        bIsUc7 ||
        bIsUc ||
        bIsAndroid ||
        bIsCE ||
        bIsWM
      ) {
        location.href = "/GCLS-Mobile-ROOT/#/EnterSys";
        console.log("移动端");
      } else {
        console.log("PC端");
        this._getConfig();
      }
    },
    getChildSysList() {
      let _this = this;
      let MethodName = "login_control-GetChildSysList_CanEnter_PC";
      let userInfor = getToken();
      let user_code = "",
        user_type = "",
        session_id = "";
      if (userInfor) {
        userInfor = JSON.parse(getToken());
        user_code = userInfor.user_code;
        user_type = userInfor.user_type;
        session_id = userInfor.session_id;
        getContent(MethodName, user_code, user_type, session_id, {})
          .then((res) => {
            if (res.child_sys_list && res.child_sys_list.length > 0) {
              this.projectList = res.child_sys_list;
            } else {
              this.$message.warning("您没有任何权限，请联系您所在机构的管理员");
            }
          })
          .catch((err) => {
            console.log();
          });
      }
    },
    async _getConfig() {
      this.configInfor = await getConfigInfor();
      let user_name = JSON.parse(localStorage.getItem("user_name"));
      if (user_name) {
        if (user_name.user_type == "TEACHER") {
          this.loginType = "teacher";
        } else {
          this.loginType = "student";
        }
      }
      this.Islogin();
      let type = this.$route.query.type;
      if (type && type == "login") {
        this.LoginOrRegistration = "login";
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.browserRedirect();
  },
  //生命周期-创建之前
  beforeCreated() {},
  //生命周期-挂载之前
  beforeMount() {},
  //生命周期-更新之前
  beforUpdate() {},
  //生命周期-更新之后
  updated() {},
  //生命周期-销毁之前
  beforeDestory() {},
  //生命周期-销毁完成
  destoryed() {},
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
};
</script>
<style lang="scss" scoped>
.index {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: url("../../assets/login/indexBG.png") no-repeat;
  background-size: cover;
  font-family: "sourceR";
  position: relative;
  min-width: 1260px;
  .empty {
    background: #fff;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    padding-top: 200px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    > p {
      color: #3182bd;
      font-size: 20px;
      font-weight: bold;
    }
  }
  .shadow {
    min-height: 100vh;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    .logoAndlogin {
      width: 1260px;
      margin: 0 auto;
      position: relative;
      // display: flex;
      .login {
        position: absolute;
        top: 0;
        right: 15px;
        z-index: 1;
      }
      .ForgetPassword {
        position: absolute;
        top: 0;
        right: 100px;
      }
    }
    .LogoAndText {
      // width: 700px;
      margin-top: 58px;
      margin-left: 30px;
      display: flex;
      .logo {
        width: 128px;
        height: 128px;
        background: #fff;
        border-radius: 24px;
        color: black;
        text-align: center;
        line-height: 128px;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        > img {
          max-height: 100%;
          max-width: 100%;
        }
      }
      .text {
        margin-left: 32px;
        color: white;
        p {
          width: 533px;
          margin: 0;
        }
        .p1 {
          font-weight: 600;
          font-size: 40px;
          line-height: 48px;
        }
        .p2 {
          width: 533px;
          margin-top: 32px;
          font-size: 20px;
          line-height: 28px;
        }
      }
    }
  }
  .bottom {
    position: absolute;
    bottom: -154px;
    width: 100%;
    background: #2c2c2c;
    height: 154px;
    padding-top: 40px;
    > div {
      text-align: center;
      font-size: 20px;
      color: rgb(180, 179, 179);
      > span {
        margin-left: 40px;
      }
    }
    > :first-child {
      // height: 80px;
      // line-height: 80px;
      margin-bottom: 24px;
      > :first-child {
        color: white;
      }
      > :first-child::before {
        content: "|";
        background: white;
        width: 6px;
        height: 20px;
        position: relative;
        right: 5px;
      }
    }
  }
  .signin {
    background: #e5e5e5;
    padding-bottom: 30px;
  }
  .list {
    width: 1248px;
    margin: 10px auto;
    display: flex;
    flex-wrap: wrap;
    > div {
      width: 368px;
      height: 161px;
      background: #ffffff;
      border-radius: 4px;
      // margin: 20px 50px 0 10px;
      margin: 10px 24px;
      cursor: pointer;
      > div {
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-weight: bold;
        font-size: 20px;
        color: #2c2c2c;
        padding: 20px 0 0 20px;
        img {
          width: 56px;
          height: 60px;
        }
        p {
          width: 250px;
        }
      }
      > p {
        width: 304px;
        margin: 16px auto;
        font-size: 14px;
        color: #666666;
        opacity: 0.7;
        text-align: left;
        line-height: 20px;
      }
    }
    .Selectproject {
      background: #ff9900;
      box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
    }
  }
}
</style>