GCLS_Page_LC/src/components/Header.vue

<template>
  <!-- 顶部登录导航 -->
  <div class="LoginNav1">
    <div class="logo" v-if="configInfor">
      <img
        v-if="configInfor.logo_image_url"
        :src="configInfor.logo_image_url"
        alt=""
        class="logo-image"
        @click="handleSelect"
      />
      <span class="logo-img" v-else>logo</span>
      <ul class="logo-projectlist">
        <li
          v-for="(itemI, indexI) in projectList"
          :key="indexI"
          :class="indexI == LoginNavIndex ? 'active' : ''"
          @click="handleCommand(indexI)"
        >
          {{ itemI.name }}
        </li>
      </ul>
    </div>
    <div class="userName">
      <template>
        <el-dropdown
          style="cursor: pointer"
          trigger="click"
          @command="changeLang"
        >
          <span class="el-dropdown-link" style="color: #000000">
            {{ 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>
      </template>
      <div v-if="!userMessage" class="selectLoginOrRegistration">
        <span @click="cutLoginReg">{{ $t("Key9") }}</span>
      </div>
      <!-- 用户头像和用户名 -->
      <div class="user" v-else>
        <img
          @click="userShow = !userShow"
          class="headPhoto"
          :src="
            userMessage.image_url
              ? userMessage.image_url
              : require('../assets/login/Group3214.png')
          "
          alt=""
        />
        <span
          @click="userShow = !userShow"
          :class="[language_type == 'AR' ? 'languageAR' : '']"
          >{{ userMessage.user_real_name }}</span
        >
        <div class="userShow" v-show="userShow">
          <p @click="gotoPersonalcenter">
            <img src="../assets/login/project7.png" alt="" />
            <!-- 个人中心 -->
            {{ $t("Key38") }}
          </p>
          <p @click="QuitLogin">
            <img src="../assets/login/Frame77.png" alt="" />
            <!-- 退出登录 -->
            {{ $t("Key39") }}
          </p>
        </div>
      </div>
      <!-- 消息 铃铛图片 -->
      <div class="message">
        <img
          @click="gotoPersonalcenter"
          src="../assets/login/Vector.png"
          alt=""
        />
        <span class="redDot" v-if="is_exist == 'true'"></span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getToken, removeToken } from "@/utils/auth";
import Cookies from "js-cookie";
import { getContent, getStaticContent, getLearnWebContent } from "@/api/api";
import { setI18nLang } from "@/utils/i18n";
import { getConfig } from "@/utils/auth";
import { saveSession, getSession, removeSession } from "@/utils/role";

export default {
  name: "LayoutHeader",
  props: [],
  data() {
    return {
      activeIndex: "2", // 主导航索引
      LoginNavIndex: 0, //下拉框导航索引
      projectName: "学习中心",
      is_exist: "false",
      projectList: [],
      teacherProList: [
        //普通教师
        {
          id: 0,
          name: "教学中心",
          img: "project1",
        },

        {
          id: 2,
          name: "教培中心",
          img: "project3",
        },
        {
          id: 3,
          name: "教研中心",
          img: "project4",
        },
        {
          id: 4,
          name: "考试中心",
          img: "project5",
        },
        {
          id: 5,
          name: "学习中心",
          img: "project6",
        },
        {
          id: 6,
          name: "个人中心",
          img: "project7",
        },
      ],
      stuProList: [
        {
          id: 0,
          name: "教学中心",
          img: "project1",
        },
        {
          id: 5,
          name: "学习中心",
          img: "project6",
        },
        {
          id: 6,
          name: "个人中心",
          img: "project7",
        },
      ],
      userMessage: null,
      userShow: false,
      language_list: [],
      lang: "",
      headTimer: null,
      configInfor: null,
    };
  },
  watch: {},
  computed: {
    ...mapGetters(["language_type"]),
  },
  methods: {
    // 前往个人中心
    gotoPersonalcenter() {
      if (!this.userMessage) {
        this.$message.warning(this.$t("Key573"));
        return;
      }
      // let MethodName = "login_control-CreateAccessCode";
      // let acsCode = "";
      // getContent(MethodName, UserCode, UserType, SessionID).then((res) => {
      //   acsCode = res.access_code;
      location.href = `/GCLS-Personal/#/EnterSys`;
      // });
    },
    // 切换导航
    handleSelect(key, keyPath) {
      window.location.href = "/";
    },
    // 切换项目
    handleCommand(command) {
      let _this = this;
      _this.LoginNavIndex = command;
      if (!_this.userMessage) {
        this.$message.warning(this.$t("Key573"));
        this.projectName = "学习中心";
        window.location.href = "/";
        return;
      }
      _this.projectName = _this.projectList[command].name;
      let relative_path = _this.projectList[command].relative_path;
      location.href = relative_path;
    },
    // 切换登录的注册
    cutLoginReg() {
      window.location.href = "/";
    },
    QuitLogin() {
      localStorage.removeItem("useragent_root_close");
      window.location.href = "/";
      removeToken();
      removeSession("SysList");
      Cookies.remove("JSESSIONID");
      this.userShow = false;
      this.userMessage = null;
    },
    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;
          }
        }
      });
    },
    async changeLang(command) {
      console.log(command);
      this.lang = command.language_name;
      let lang_type = command.language_type;
      await setI18nLang(lang_type);
      this.$router.go(0);
    },

    getNotReadMessage() {
      let MethodName = "message-message_manager-IsExistMyMessage_NotRead";
      let data = {};
      getLearnWebContent(MethodName, data).then((res) => {
        this.is_exist = res.is_exist;
      });
    },
    // async _getConfig() {
    //   this.configInfor = await getConfigInfor();
    // },
    getChildSysList() {
      let _this = this;
      let MethodName = "login_control-GetChildSysList_CanEnter_PC";
      getContent(MethodName, {})
        .then((res) => {
          if (res.child_sys_list && res.child_sys_list.length > 0) {
            _this.projectList = res.child_sys_list;
            _this.projectList.forEach((item, index) => {
              if (item.key == "GCLS-LC") {
                _this.LoginNavIndex = index;
              }
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  created() {
    let _this = this;
    _this.getChildSysList();
  },
  mounted() {
    let _this = this;
    let user = getToken();
    if (user) {
      _this.userMessage = JSON.parse(user);
    }
    let config = getConfig();
    if (config) {
      _this.configInfor = JSON.parse(config);
    }
    _this.getLangList();
    _this.headTimer = _this.getNotReadMessage();
    setInterval(() => {
      _this.getNotReadMessage();
    }, 120000);
  },
  beforeDestroy() {
    if (this.headTimer) {
      //如果定时器还在运行 或者直接关闭，不用判断
      clearInterval(this.headTimer); //关闭
    }
  },
};
</script>

<style lang="scss" scoped>
.LoginNav1 {
  height: 64px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0px 24px;
  z-index: 999;
  background: #ffffff;
  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.15);
  font-family: "sourceR";
  .logo {
    > img {
      // width: 188px;
      height: 48px;
      cursor: pointer;
    }
    &-img {
      font-style: normal;
      font-weight: 600;
      font-size: 30px;
      font-variant: small-caps;
      color: #000000;
      // color: #fff;
      margin-right: 29px;
      line-height: 64px;
    }
    display: flex;
    align-items: center;
    .logo-projectlist {
      display: flex;
      padding: 0 24px;
      height: 64px;
      list-style: none;
      li {
        padding: 0 12px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        line-height: 64px;
        font-weight: 500;
        cursor: pointer;
        &:hover {
          background: #f6f6f6;
        }
        &.active {
          color: #ff9900;
          background: #ffefd6;
        }
      }
    }
  }
  .el-dropdown-link {
    img {
      width: 8px;
      height: 4px;
      vertical-align: middle;
    }
  }
  .userName {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    color: #000000;
    .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 {
      height: 100%;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      img {
        width: 24px;
      }
      .redDot {
        position: absolute;
        top: 2px;
        right: 2px;
        width: 6px;
        height: 6px;
        display: inline-block;
        background: red;
        border-radius: 50%;
      }
    }
    .selectLoginOrRegistration {
      display: flex;
      height: 32px;
      border: 1px solid #ffffff;
      box-sizing: border-box;
      border-radius: 4px;
      justify-content: space-evenly;
      align-items: center;
      padding: 0 16px;
      > span {
        cursor: pointer;
        font-size: 16px;
        color: #000000;
      }
    }
    .user {
      display: flex;
      align-items: center;
      cursor: pointer;
      position: relative;
      color: #000000;
      margin: 0 23px 0 16px;
      > img {
        width: 34px;
        height: 34px;
      }
      > span {
        color: #000000;
        font-size: 16px;
        padding-left: 10px;
        &.languageAR {
          padding: 0 10px 0 0;
        }
      }
      .userShow {
        position: absolute;
        width: 156px;
        height: 96px;
        background: #ffffff;
        box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
        border-radius: 8px;
        bottom: -100px;
        left: -5px;
        color: black;
        img {
          width: 24px;
          height: 24px;
          margin-right: 10px;
        }
        p {
          font-size: 16px;
          height: 40px;
          display: flex;
          align-items: center;
          padding-left: 20px;
          margin: 0;
          margin-top: 5px;
        }
        > p:hover {
          background: #f2f2f2;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.LoginNav1 {
  .el-dropdown-menu__item {
    line-height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    > span {
      font-family: "sourceR";
      font-size: 16px;
    }
  }
  .el-menu--horizontal > .el-menu-item {
    height: 60px;
    line-height: 60px;
  }
  .el-dropdown {
    display: block;
    > span {
      font-family: "sourceR";
      font-size: 16px;
    }
  }
}
.projectList {
  &.el-dropdown-menu__item {
    line-height: 40px;
    display: flex;
    align-items: center;
    color: #000000;
    > img {
      top: 0;
    }
    > span {
      line-height: 40px;
      font-family: "sourceR";
    }
  }
  &:hover {
    background: #ff9900 !important;
    // background: rgba(255, 153, 0, 0.1) !important;
    color: #000 !important;
    // color: #fff;
  }
  &.menuActive {
    background: #ff9900;
  }
}
</style>