GCLS_Page_ROOT/src/views/login/index.vue

<template>
  <div class="index">
    <div class="shadow" v-if="LoginOrRegistration != 'signin'">
      <LoginNav
        :changeLoginReg="changeLoginReg"
        :FatheruserMessage="userMessage"
        :language_list="language_list"
      />
      <!-- <LayoutHeader /> -->
      <div class="logoAndlogin">
        <div class="LogoAndText">
          <div class="logo">logo</div>
          <div class="text">
            <p class="p1">欢迎来到全球汉语教学平台</p>
            <p class="p2">
              这里有丰富的教学资源、先进的教学方法，无论您是教师或学生都能在这里尽情汲取养分！
            </p>
          </div>
        </div>
        <div class="login" v-if="LoginOrRegistration == 'login'">
          <Login
            :changeLoginReg="changeLoginReg"
            :changeLoginType="changeLoginType"
          />
        </div>
        <div
          v-if="LoginOrRegistration == 'Forget password'"
          class="ForgetPassword"
        >
          <ForgetPassword
            :changeLoginReg="changeLoginReg"
            :ForgetType.sync="loginType"
          />
        </div>
        <div class="list" v-if="!LoginOrRegistration">
          <div
            :class="projectIndex == item.id ? 'Selectproject' : ''"
            @mousemove="projectMove(item)"
            @mouseout="projectOut"
            v-for="(item, i) in projectList"
            :key="i"
            @click="SelectProject(i)"
          >
            <div>
              <img
                v-if="projectIndex == item.id"
                :src="require('../../assets/login/' + item.selectImg + '.png')"
                alt=""
              />
              <img
                v-else
                :src="require('../../assets/login/' + item.img + '.png')"
                alt=""
              />
              <p>{{ item.name }}</p>
            </div>
            <p>{{ item.text }}</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>
    <!-- <div v-if="LoginOrRegistration == 'signin'" class="signin">
      <LoginNav2
        :changeLoginReg="changeLoginReg"
        :language_list="language_list"
      />
      <Registration :changeLoginReg="changeLoginReg" />
    </div> -->
  </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 Cookies from "js-cookie";
import { getLogin, getContent, getAcsCode, getStaticContent } from "@/api/api";
import LayoutHeader from "@/components/login/LayoutHeader";
import { updateWordPack } from "@/utils/i18n";
import { getToken, removeToken } from "@/utils/auth";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    Login,
    Registration,
    ForgetPassword,
    LoginNav,
    LoginNav2,
    LayoutHeader,
  },
  props: {},
  data() {
    //这里存放数据
    return {
      LoginOrRegistration: "login", //注册 登录 忘记密码
      loginType: "teacher",
      projectList: [
        {
          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: 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,
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中数据变化
  watch: {},
  //方法集合
  methods: {
    changeLoginReg(value, userMessage) {
      if (value == "signin") {
        this.$router.push("/Signup");
      } else {
        this.LoginOrRegistration = value;
      }
      this.userMessage = userMessage ? userMessage : null;
      if (this.userMessage) {
        let _this = this;
        let popedom_code_list = _this.userMessage.popedom_code_list;
        if (_this.userMessage.user_type == "TEACHER") {
          _this.projectList = _this.handleProList(popedom_code_list);
        } else if (_this.userMessage.user_type == "STUDENT") {
          _this.projectList = _this.stuProList;
        }
        _this.projectList.forEach((item, index) => {
          if (item.id == 4) {
            _this.LoginNavIndex = index;
          }
        });
      } else {
        this.projectList = this.teacherProList;
      }
    },
    changeLoginType(value) {
      this.loginType = value;
    },
    // 鼠标进入
    projectMove(item) {
      this.projectIndex = item.id;
    },
    // 鼠标离开
    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;
        // window.location.href = "/";
        return;
      }
      let acsCode = null;
      let MethodName = "login_control-CreateAccessCode";

      getContent(MethodName, user_code, user_type, session_id).then((res) => {
        acsCode = res.access_code;
        _this.projectName = this.projectList[command].name;
        let id = this.projectList[command].id;
        if (id == 0) {
          // 教学管理系统
          location.href = `/GCLS-Learn/#/EnterSys?AccessCode=${acsCode}`;
        } else if (id == 1) {
          // 教材管理系统
          location.href = `/GCLS-Book/#/EnterSys?AccessCode=${acsCode}`;
        } else if (id == 2) {
          // 教培中心
          location.href = `/GCLS-TRC/#/EnterSys?AccessCode=${acsCode}`;
        } else if (id == 3) {
          // 教研中心
          location.href = `/GCLS-TC/#/EnterSys?AccessCode=${acsCode}`;
        } else if (id == 4) {
          // 考试中心
          location.href = `/GCLS-Test/#/EnterSys?AccessCode=${acsCode}`;
        } else if (id == 5) {
          // 学习中心
          location.href = `/GCLS-LC/#/EnterSys?AccessCode=${acsCode}`;
        } else {
          // 个人中心
          location.href = `/GCLS-Personal/#/EnterSys?AccessCode=${acsCode}`;
        }
      });
    },
    // 获取语言列表
    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;
        } else {
          let userMessage = getToken();
          if (userMessage) {
            userMessage = JSON.parse(userMessage);
            this.changeLoginReg("", userMessage);
          }
        }
      });
    },
    handleProList(list) {
      console.log(list);
      let projectList = [];
      if (list.length == 0) {
        let arr = [
          {
            id: 2,
            name: "教培中心",
            img: "project2-2-2",
            selectImg: "project2-2",
            text: "名师授课，丰富的课程体系，快速扎实帮您提升教学能力。",
          },
          {
            id: 3,
            name: "教研中心",
            img: "project6-6-6",
            selectImg: "project6-6",
            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: "您收集和购买的所有资源都可以在这里轻松找到。",
          },
        ];
        projectList = arr;
      } else if (list.includes(2000001)) {
        projectList = JSON.parse(JSON.stringify(this.teacherProList));
        for (let i = 0; i < list.length; i++) {
          let code = list[i];
          if (code == 2000003) {
            projectList.push({
              id: 1,
              name: "教材管理系统",
              img: "project8-8",
              selectImg: "project8-8-8",
              text: "帮您快速定制生动、有趣、实用的数字教材。",
            });
          }
          if (code === 2000005) {
            projectList.push({
              id: 4,
              name: "考试中心",
              img: "project5-5-5",
              selectImg: "project5-5",
              text: "丰富的题库将帮助您快速编写实用、准确、全面的试卷。",
            });
          }
        }
      } else {
        for (let i = 0; i < list.length; i++) {
          let code = list[i];
          if (code == 2000002) {
            projectList.push({
              id: 0,
              name: "教学中心",
              img: "project1-1",
              selectImg: "project1-1-1",
              text: "帮助您快速完成课程及任务安排，快速清晰的完成学习任务。",
            });
          } else if (code == 2000003) {
            projectList.push({
              id: 1,
              name: "教材管理系统",
              img: "project8-8",
              selectImg: "project8-8-8",
              text: "帮您快速定制生动、有趣、实用的数字教材。",
            });
          } else if (code == 2000004) {
            projectList.push({
              id: 2,
              name: "教师培训中心",
              img: "project2-2-2",
              selectImg: "project2-2",
              text: "名师授课，丰富的课程体系，快速扎实帮您提升教学能力。",
            });
          } else if (code == 2000005) {
            projectList.push({
              id: 4,
              name: "考试中心",
              img: "project5-5-5",
              selectImg: "project5-5",
              text: "丰富的题库将帮助您快速编写实用、准确、全面的试卷。",
            });
          } else if (code == 2000006) {
            projectList.push({
              id: 3,
              name: "教研中心",
              img: "project4-4-4",
              selectImg: "project4-4",
              text: "丰富的教学资料和珍贵的文献可以在线查看或下载。",
            });
          }
        }
        projectList.push({
          id: 6,
          // Teacher training center
          name: "个人中心",
          img: "project3-3-3",
          selectImg: "project3-3",
          text: "您收集和购买的所有资源都可以在这里轻松找到。",
        });
      }
      // 排序
      for (var i = 0; i < projectList.length - 1; i++) {
        for (var j = 0; j < projectList.length - 1 - i; j++) {
          // 相邻元素两两对比，元素交换，大的元素交换到后面
          if (projectList[j].id > projectList[j + 1].id) {
            var temp = projectList[j];
            projectList[j] = projectList[j + 1];
            projectList[j + 1] = temp;
          }
        }
      }
      console.log(projectList);
      return projectList;
    },
    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
      ) {
        // window.location.href = "手机站链接";
        console.log("移动端");
      } else {
        // window.location = "PC站链接";
        console.log("PC端");
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getLangList();
    this.Islogin();
    updateWordPack({
      word_key_list: ["teaching", "teaching"],
    });
    let type = this.$route.query.type;
    if (type) {
      if (type == "login") {
        this.LoginOrRegistration = "login";
      }
    }
    this.browserRedirect();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //生命周期-创建之前
  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;
  .shadow {
    min-height: 100vh;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    .logoAndlogin {
      width: 1248px;
      margin: 0 auto;
      position: relative;
      // display: flex;
      .login {
        position: absolute;
        top: 0;
        right: 30px;
        z-index: 1;
      }
      .ForgetPassword {
        position: absolute;
        top: 0;
        right: 100px;
      }
    }
    .LogoAndText {
      // width: 700px;
      margin-top: 58px;
      margin-left: 30px;
      display: flex;
      .logo {
        width: 136px;
        height: 136px;
        background: #c4c4c4;
        border-radius: 25px;
        color: black;
        text-align: center;
        line-height: 136px;
      }
      .text {
        margin-left: 40px;
        color: white;
        p {
          width: 700px;
          margin: 0;
        }
        .p1 {
          font-weight: 600;
          font-size: 40px;
        }
        .p2 {
          margin-top: 32px;
          font-size: 20px;
          line-height: 30px;
        }
      }
    }
  }
  .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>