GCLS_Page_ROOT/src/views/login/index.vue

<template>
  <div class="index" v-if="isData && configInfor">
    <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"
            />
          </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> -->
  </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";
import { mapGetters } from "vuex";
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
    };
  },
  //计算属性 类似于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-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("您没有任何权限，请联系您所在机构的管理员");
              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();
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  async created() {
    await updateWordPack({
      word_key_list: [
        "Key1",
        "Key9",
        "Key10",
        "Key11",
        "Key12",
        "Key13",
        "Key14",
        "Key16",
        "Key17",
        "Key18",
        "Key19",
        "Key20",
        "Key21",
        "Key22",
        "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;
  },
  //生命周期 - 挂载完成（可以访问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>