GCLS_Page_ROOT/src/components/login/LoginNav2.vue

<template>
  <!-- 顶部登录导航 -->
  <div class="LoginNav">
    <div class="logo" @click="goHome">
      <img :src="configInfor.logo_image_url_home" class="logo-img" />
      <p class="p1">{{ configInfor.title }}</p>
    </div>
    <div class="userName">
      <el-dropdown trigger="click" @command="changeLang">
        <span class="el-dropdown-link" style="cursor: pointer">
          {{ lang ? lang : "中文"
          }}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown" style="width: 200px">
          <el-dropdown-item
            v-for="item in language_list"
            :key="item.language_type"
            :command="item"
            >{{ item.language_name }}</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
      <div class="selectLoginOrRegistration" style="margin: 0 16px">
        <!-- 登录 -->
        <span @click="cutLoginReg('login')">{{ $t("Key9") }}</span>
      </div>
      <div class="message">
        <img src="../../assets/login/Vector.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import { getAcsCode, getStaticContent, getContent } from "@/api/api";
import { getToken } from "@/utils/auth";

export default {
  props: ["type", "changeLoginReg", "configInfor"],
  data() {
    return {
      activeIndex: "",
      LoginNavIndex: "1",
      projectName: "教学中心",
      projectDownIndex: 0,
      language_list: [],
      lang: "",
    };
  },

  methods: {
    // 切换导航
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      this.LoginNavIndex = key;
      if (this.LoginNavIndex == "1") {
        this.$router.push("/");
      } else {
        let ulobj = document.getElementsByClassName("el-dropdown-menu")[0];
        ulobj.classList.add("LoginNavSeleProject");
      }
    },
    // 切换项目
    handleCommand(command) {
      let _this = this;
      _this.LoginNavIndex = command;
      let userInfor = JSON.parse(getToken());
      let user_code = "",
        user_type = "",
        session_id = "";
      if (userInfor) {
        user_code = userInfor.user_code;
        user_type = userInfor.user_type;
        session_id = userInfor.session_id;
      }
      if (!session_id || !user_code || !user_type || !_this.userMessage) {
        this.$message.warning("请先登录");
        this.projectName = "教学中心";
        // window.location.href = "/";
        return;
      }
      this.projectDownIndex = command;
      let MethodName = "login_control-CreateAccessCode";
      let acsCode = null;
      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}`;
        }
      });
    },
    // 切换语言
    async changeLang(command) {
      this.lang = command.language_name;
      let lang_type = command.language_type;
      //await setI18nLang(lang_type);
      localStorage.setItem("language_type", lang_type);
      this.$router.go(0);
    },
    // 切换登录的注册
    cutLoginReg(value) {
      if (value == "login") {
        this.$router.push({ path: "/", query: { type: "login" } });
      } else {
        this.$router.go(0);
      }
    },
    getLangList() {
      let MethodName = "language_manager-GetLanguageList";
      let data = {};
      getStaticContent(MethodName, data).then((res) => {
        this.language_list = res.language_list;
        for (let i = 0; i < this.language_list.length; i++) {
          let item = this.language_list[i];
          if (item.language_type == this.language_type) {
            this.lang = item.language_name;
            break;
          }
        }
      });
    },
    goHome() {
      this.$router.go(-1);
    },
  },
  created() {
    let _this = this;
    let language_type = localStorage.getItem("language_type");
    if (language_type) {
      _this.language_type = language_type;
    }
    _this.getLangList();
  },
};
</script>

<style lang="scss" scoped>
.LoginNav {
  height: 65px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 45px 0 40px;
  z-index: 999;
  background: white;
  .logo {
    display: flex;
    align-items: center;
    cursor: pointer;
    .el-menu-demo {
      background: rgba(0, 0, 0, 0);
      // margin-left: 100px;
      li:hover {
        background: none;
      }
      li {
        background: none;
      }
    }
    // 取消组件默认的样式
    .el-menu.el-menu--horizontal {
      border-bottom: none;
    }
    .logo-img {
      width: 48px;
      height: 48px;
    }
    .p1 {
      font-size: 18px;
      line-height: 26px;
      color: #000;
      margin: 0 10px;
    }
  }
  .userName {
    display: flex;
    align-items: center;
    .seek {
      margin-right: 100px;
      position: relative;
      img {
        left: 10px;
        top: 11px;
        position: absolute;
      }
    }
    .flag {
      position: relative;
      top: 5px;
    }
    .headPhoto {
      width: 50px;
      height: 50px;
      // background: url("../assets/teacherTrain/image 4.png") no-repeat 100% 100%;
      // background-size: 100%;
      border-radius: 50%;
      margin-right: 10px;
    }
    .message {
      position: relative;
      margin-left: 16px;
      img {
        width: 32px;
        height: 32px;
      }
      .redDot {
        width: 6px;
        height: 6px;
        position: absolute;
        display: inline-block;
        background: red;
        border-radius: 50%;
        right: 0;
      }
    }
    .selectLoginOrRegistration {
      display: flex;

      height: 32px;
      border: 1px solid black;
      box-sizing: border-box;
      border-radius: 4px;
      // justify-content: space-evenly;
      align-items: center;
      color: black;
      span {
        min-width: 64px;
        padding: 0 8px;
        text-align: center;
        cursor: pointer;
      }
    }
  }
}
</style>
<style lang="scss">
.LoginNavSeleProject {
  .el-dropdown-menu__item:hover {
    background: #ff9900 !important;
    color: black !important;
  }
}
</style>