GCLS_Page_ROOT/src/views/login/index.vue

<template>
  <div class="index" v-if="isData && configInfor" v-loading="loading">
    <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">
                {{ $t("Key1") }}
                <!-- 这里有丰富的教学资源、先进的教学方法，无论您是教师或学生都能在这里尽情汲取养分！ -->
              </p>
            </div>
          </div>
          <div
            :class="['login', language_type == 'AR' ? 'left' : '']"
            v-if="LoginOrRegistration == 'login'"
          >
            <Login
              :ForgetType.sync="loginType"
              :changeLoginReg="changeLoginReg"
              :changeLoginType="changeLoginType"
              :getChildSysList="getChildSysList"
              :changeEmailTips="changeEmailTips"
            />
          </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>
            © 2010-2021 Beijing Language and Culture University Press All rights
            reserved.
          </div>
          <div>
            <a target="_blank" href="https://www.blcup.com"
              ><img
                src="../../assets/login/icon-logo.jpg"
              />https://www.blcup.com</a
            >
          </div>
          <div>
            <img src="../../assets/login/icon-email.png" />shuzichuban@blcup.com
          </div>
        </div>
      </div>
    </template>
    <template v-else>
      <div class="empty">
        <p>{{ $t("Key247") }}...</p>
      </div>
    </template>
    <div class="emailTipsBox" v-if="emailTipShow">
      <div class="emailTipsBox-innder">
        <img
          src="../../assets/login/close-forget.png"
          class="close-win"
          @click="closeEmailTip"
        />
        <h2>提示</h2>
        <b>您已{{ emailTipDay }}天未修改密码，为了账户安全，请更改密码。</b>
        <a @click="changeLoginReg('Forget password')">好的</a>
      </div>
    </div>
    <el-dialog
      :visible.sync="showOrgList"
      width="494px"
      append-to-body
      :show-close="false"
      :close-on-click-modal="false"
      class="login-org-list"
    >
      <div class="org-list-box">
        <h3>请选择你所在的学校</h3>
        <h4>Please select your school</h4>
        <div class="org-list">
          <el-select
            v-model="org_id"
            :placeholder="'点击选择'"
            v-loadmore="SelectScroll"
            v-loading="SelectLoading"
          >
            <el-option
              v-for="item in institutionList.org_list"
              :key="item.id"
              :value="item.id"
              :label="item.name"
            ></el-option>
          </el-select>
          <el-button type="primary" @click="getLoginClever(code, 'orgId')"
            >确定</el-button
          >
        </div>
      </div>
    </el-dialog>
  </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, setToken } from "@/utils/auth";

import { getConfigInfor } from "@/utils/index";
import { mapGetters } from "vuex";
import { setI18nLang } from "@/utils/i18n";
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,
      isData: false,
      emailTipShow: false,
      emailTipDay: 0,
      loading: false,
      org_id: "",
      showOrgList: false,
      SelectLoading: false,
      institutionList: {
        org_list: [],
      }, //机构列表
      inPage: 1,
      inPageSize: 100,
      code: "",
    };
  },
  //计算属性 类似于data概念
  computed: {
    ...mapGetters(["language_type"]),
  },
  //监控data中数据变化
  watch: {},
  //方法集合
  methods: {
    changeLoginReg(value, userMessage) {
      if (value == "signin") {
        this.$router.push("/Signup");
      } else {
        this.LoginOrRegistration = value;
      }
      this.userMessage = userMessage;
      this.emailTipShow = false;
    },
    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.$t("Key573"));
        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;
      });
    },
    // 验证用户是否登录
    async 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(this.$t("Key247") + "....");
              location.href = `/GCLS-Learn/#/EnterSys`;
            } else {
              this.isPc = true;
              this.LoginOrRegistration = "";
              this.getChildSysList();
            }
            this.getLangList();
          }
        });
      } 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/#/";
      } else {
        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("您没有任何权限，请联系您所在机构的管理员");
              this.$message.warning(this.$t("Key652"));
            }
          })
          .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";
      }
    },
    changeEmailTips(data) {
      this.emailTipShow = true;
      this.emailTipDay = data;
    },
    closeEmailTip() {
      this.emailTipShow = false;
      this.browserRedirect();
    },
    // clever登录
    getLoginClever(code, type) {
      if (type && !this.org_id) {
        return;
      }
      this.loading = true;

      let data = {
        code: code,
        is_first_login: type ? "false" : "true",
        org_id: type ? this.org_id : "",
      };
      getLogin("login_control-Login_Clever", data)
        .then((res) => {
          this.loading = false;
          if (res.status == -5) {
            this.$message.error(res.error);
            return;
          }
          if (res.is_new_email && res.is_new_email === "true") {
            this.showOrgList = true;
            return;
          } else {
            this.showOrgList = false;
          }
          setToken(res);
          let isShare = this.$route.query.temporary_link
            ? decodeURIComponent(this.$route.query.temporary_link)
            : "";
          this.$message.success(this.$t("Key442"));
          setI18nLang(this.language_type).then(() => {
            if (isShare) {
              location.href = isShare;
            } else if (localStorage.getItem("testLink")) {
              location.href = localStorage.getItem("testLink");
              localStorage.removeItem("testLink");
            } else if (
              res.popedom_code_list.indexOf(2000001) > -1 ||
              res.user_type == "STUDENT"
            ) {
              this.$message.warning(this.$t("Key247") + "....");
              location.href = `/GCLS-Learn/#/EnterSys`;
            } else {
              this.LoginOrRegistration = "";
              this.getChildSysList();
            }
          });
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    // 滚动加载
    SelectScroll() {
      if (
        this.institutionList.org_list.length == this.institutionList.total_count
      ) {
        // this.$message.warning("No more data");
        return;
      }
      this.SelectLoading = true;
      this.inPage++;
      let MethodName = "org_manager-PageQueryOrgIndexList_OpenQuery";
      let data = {
        name: "",
        page_capacity: this.inPageSize,
        cur_page: this.inPage,
      };
      getLogin(MethodName, data).then((res) => {
        res.org_list.forEach((item) => {
          this.institutionList.org_list.push(item);
        });
        this.SelectLoading = false;
      });
    },
    // 获取机构列表
    getinstitutionList() {
      this.loading = true;
      let MethodName = "org_manager-PageQueryOrgIndexList_OpenQuery";
      let data = {
        name: "",
        page_capacity: this.inPageSize,
        cur_page: this.inPage,
      };
      getLogin(MethodName, data).then((res) => {
        this.loading = false;
        this.institutionList = res;
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  async created() {
    await updateWordPack({
      word_key_list: [
        "Key1",
        "Key9",
        "Key10",
        "Key11",
        "Key12",
        "Key13",
        "Key14",
        "Key16",
        "Key17",
        "Key18",
        "Key19",
        "Key20",
        "Key21",
        "Key22",
        "Key32",
        "Key34",
        "Key35",
        "Key36",
        "Key37",
        "Key38",

        "Key39",
        "Key82",
        "Key85",
        "Key93",
        "Key121",
        "Key208",
        "Key247",
        "Key442",
        "Key494",
        "Key501",
        "Key539",
        "Key542",
        "Key543",
        "Key544",
        "Key545",
        "Key546",
        "Key573",
        "Key655",
        "Key654",
        "Key653",
        "Key652",
        "Key656",
      ],
    });
    this.isData = true;
    this.code = window.location.search.split("?")[1]?.split("=")[1]; // 获取识别码
    // this.code = this.$route.query.code;
    if (this.code) {
      this.getLoginClever(this.code);
    }
    this.getinstitutionList();
  },
  //生命周期 - 挂载完成（可以访问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") center bottom no-repeat;
  background-size: cover;
  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);
    padding-bottom: 54px;
    .logoAndlogin {
      width: 1260px;
      margin: 0 auto;
      position: relative;
      min-height: 600px;
      // display: flex;
      .login {
        position: absolute;
        top: 0;
        right: 15px;
        z-index: 1;
        &.left {
          left: 15px;
          right: auto;
        }
      }
      .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: 100px 32px 0 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: 0px;
    width: 100%;
    background: #2c2c2c;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    > div {
      text-align: center;
      font-size: 14px;
      line-height: 22px;
      color: rgba(255, 255, 255, 0.7);
      margin: 0 20px;
      display: flex;
      align-items: center;
      a {
        display: flex;
        align-items: center;
        &:hover {
          text-decoration: underline;
        }
      }
      img {
        width: 16px;
        height: 16px;
        margin-right: 4px;
        border-radius: 2px;
      }
    }
    > :first-child {
      // height: 80px;
      // line-height: 80px;
      > :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);
    }
  }
  .emailTipsBox {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.19);
    box-sizing: border-box;
    overflow: hidden;
    overflow-y: auto;
    .emailTipsBox-innder {
      width: 395px;
      min-height: 234px;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -186px;
      margin-top: -117px;
      background: #ffffff;
      border-radius: 8px;
      padding: 32px 60px;
      text-align: center;
      img {
        width: 14px;
        height: 14px;
        position: absolute;
        right: 9px;
        top: 9px;
        cursor: pointer;
      }
      h2 {
        font-weight: 700;
        font-size: 20px;
        line-height: 29px;
        color: #ff9900;
      }
      b {
        font-weight: 400;
        font-size: 16px;
        line-height: 150%;
        color: #2c2c2c;
        display: block;
      }
      a {
        height: 44px;
        padding: 12px;
        min-width: 80px;
        background: #ff9900;
        border-radius: 4px;
        font-weight: 700;
        font-size: 16px;
        line-height: 20px;
        color: #ffffff;
        display: inline-block;
        margin-top: 32px;
      }
    }
  }
}
</style>
<style lang="scss">
.login-org-list {
  .el-dialog__header {
    padding: 0;
  }
  .el-dialog__body {
    text-align: center;
    padding: 40px;
  }
  h3 {
    color: #000;
    font-size: 24px;
    font-weight: 500;
    line-height: 32px; /* 133.333% */
    margin: 0;
  }
  h2 {
    color: #000;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px; /* 150% */
    margin: 8px 0 24px 0;
  }
  .org-list {
    display: flex;
    column-gap: 16px;
    .el-select {
      flex: 1;
    }
    .el-button--primary {
      background-color: #165dff;
      border-color: #165dff;
    }
  }
}
</style>