GCLS_Page_Learn/src/layouts/components/LayoutHeader.vue

<template>
  <!-- 顶部登录导航 -->
  <div class="LoginNav">
    <div class="logo">
      <span class="logo-img">
        <el-image :src="$store.state.app.config.logo_image_url" />
      </span>
      <ul class="logo-projectlist">
        <li
          v-for="({ name }, i) in projectList"
          :key="i"
          :class="i === LoginNavIndex ? 'active' : ''"
          @click="handleCommand(i)"
        >
          {{ name }}
        </li>
      </ul>
    </div>
    <div class="userName">
      <el-dropdown style="margin-right: 16px" trigger="click" @command="changeLang">
        <span class="el-dropdown-link"> {{ lang }}<i class="el-icon-arrow-down el-icon--right" /> </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 v-if="!userMessage" class="selectLoginOrRegistration">
        <span @click="cutLoginReg">{{ $t('Key9') }}</span>
      </div>
      <!-- 用户头像和用户名 -->
      <el-dropdown v-else style="margin-right: 16px" trigger="click" class="user">
        <span class="el-dropdown-link">
          <img
            class="headPhoto"
            :src="userMessage.image_url ? userMessage.image_url : require('../../assets/login/Group3214.png')"
            alt="head portrait"
          >
          <span class="real_name">{{ userMessage.user_real_name }}</span>
        </span>
        <el-dropdown-menu slot="dropdown" class="user-menu">
          <el-dropdown-item @click.native="goPersonal">
            <img src="../../assets/login/project7.png"><span>{{ $t('Key8') }}</span>
          </el-dropdown-item>
          <el-dropdown-item @click.native="QuitLogin">
            <img src="../../assets/login/Frame77.png"><span>{{ $t('Key39') }}</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <!-- 消息 铃铛图片 -->
      <div class="message" @click="goPersonal">
        <img src="../../assets/login/Vector.png">
        <span v-show="isNotRead" class="redDot" />
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import { getToken, removeToken } from '@/utils/auth';
import { GetLanguageList, GetChildSysList_CanEnter_PC } from '@/api/app';
import { setI18nLang } from '@/utils/i18n';
import { IsExistMyMessage_NotRead } from '@/api/user';

export default {
  name: 'LayoutHeader',
  data() {
    return {
      activeIndex: '2', // 主导航索引
      loginNav: 'GCLS-Learn',
      LoginNavIndex: 0, // 下拉框导航索引
      projectName: '教学中心',
      projectList: [],
      userMessage: null,
      userShow: false,
      language_list: [],
      isNotRead: false,
      lang: ''
    };
  },
  computed: {
    ...mapGetters(['language_type'])
  },
  created() {
    this.getChildSysList();
    this.updateWordPack({
      word_key_list: ['Key2', 'Key8', 'Key9', 'Key39', 'Key573']
    });
    const { token, isHas } = getToken();
    if (isHas) {
      this.userMessage = token;

      let interval = setInterval(() => {
        IsExistMyMessage_NotRead()
          .then(({ is_exist }) => {
            this.isNotRead = JSON.parse(is_exist);
          })
          .catch(() => {
            clearInterval(interval);
          });
      }, 120000);

      this.getLangList();
    }
  },
  methods: {
    // 切换导航
    handleSelect(key) {
      this.activeIndex = key;
      if (this.activeIndex === '1') {
        window.location.href = '/';
      }
    },
    // 改变下拉框导航索引
    changeLoginNavIndex(key) {
      console.log(key);
      if (!key) return;
      console.log(this.LoginNavIndex);
      console.log(this.projectList);
      this.loginNav = key;
      this.LoginNavIndex = this.projectList.findIndex(item => item.key === key);
      console.log(this.LoginNavIndex);
    },
    // 切换项目
    handleCommand(command) {
      this.LoginNavIndex = command;
      if (!this.userMessage) {
        this.$message.warning(this.$i18n.t('Key573'));
        this.projectName = this.$i18n.t('Key2');
        window.location.href = '/';
        return;
      }
      this.projectName = this.projectList[command].name;
      let relative_path = this.projectList[command].relative_path;
      location.href = relative_path;
    },
    goPersonal() {
      window.location.href = `/GCLS-Personal/#/EnterSys`;
    },
    // 切换登录的注册
    cutLoginReg() {
      window.location.href = '/';
    },
    QuitLogin() {
      removeToken();
      this.userShow = false;
      this.userMessage = null;
      window.location.href = '/';
    },
    getLangList() {
      GetLanguageList().then(({ language_list }) => {
        this.language_list = language_list;
        let curLang = language_list.find(el => el.language_type === this.language_type);
        this.lang = curLang ? curLang.language_name : '中文';
      });
    },
    async changeLang({ language_name, language_type }) {
      this.lang = language_name;
      await setI18nLang(language_type);
      this.$router.go(0);
    },
    getChildSysList() {
      GetChildSysList_CanEnter_PC()
        .then(({ child_sys_list }) => {
          if (child_sys_list && child_sys_list.length > 0) {
            this.projectList = child_sys_list;
            if (this.LoginNavIndex) return;
            this.projectList.forEach((item, index) => {
              if (item.key === this.loginNav) {
                this.LoginNavIndex = index;
              }
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.LoginNav {
  position: relative;
  z-index: 999;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: $header-h;
  padding: 0 24px;
  font-family: 'sourceR';
  background: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 15%);

  .logo {
    display: flex;
    align-items: center;

    &-img {
      min-width: 242px;
    }

    &-projectlist {
      display: flex;
      height: 64px;
      padding: 0 24px;

      li {
        padding: 0 12px;
        font-weight: 500;
        line-height: $header-h;
        color: rgba(0, 0, 0, 45%);
        white-space: nowrap;
        cursor: pointer;

        &:hover {
          background: #f6f6f6;
        }

        &.active {
          color: $basic-color;
          background: #ffefd6;
        }
      }
    }
  }

  .userName {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .seek {
      position: relative;
      margin-right: 100px;

      img {
        position: absolute;
        top: 11px;
        left: 10px;
      }
    }

    .flag {
      position: relative;
      top: 5px;
    }

    .headPhoto {
      width: 34px;
      height: 34px;
      border-radius: 50%;
    }

    .message {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      margin-left: 23px;

      img {
        width: 18px;
        height: 24px;
      }

      .redDot {
        position: absolute;
        top: 2px;
        right: -2px;
        display: inline-block;
        width: 6px;
        height: 6px;
        background-color: #f00;
        border-radius: 50%;
      }
    }

    .selectLoginOrRegistration {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      height: 32px;
      padding: 0 16px;
      border: 1px solid #fff;
      border-radius: 4px;

      > span {
        font-size: 16px;
        color: #fff;
        cursor: pointer;
      }
    }

    .user {
      cursor: pointer;

      .real_name {
        display: inline-block;
        padding-left: 10px;
        font-size: 20px;
        vertical-align: super;
      }
    }
  }
}
</style>

<style lang="scss">
.LoginNav {
  .el-dropdown-menu__item {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 40px;

    > span {
      font-family: 'sourceR';
      font-size: 16px;
    }
  }

  .el-menu--horizontal > .el-menu-item {
    height: $header-h;
    line-height: $header-h;
  }

  .el-dropdown-link {
    color: #000;
  }

  .el-dropdown {
    display: block;
    cursor: pointer;

    > span {
      font-family: 'sourceR';
      font-size: 16px;
    }
  }
}

.projectList {
  &.el-dropdown-menu__item {
    display: flex;
    align-items: center;
    line-height: 40px;
    color: #000;

    > img {
      top: 0;
    }

    > span {
      font-family: 'sourceR';
      line-height: 40px;
    }
  }

  &:hover {
    color: #000 !important;
    background: rgba(255, 153, 0, 10%) !important;
  }

  &.menuActive {
    background: #f90;
  }
}
</style>

<style lang="scss">
.user-menu {
  min-width: 156px;

  .el-dropdown-menu__item {
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #000;

    img {
      width: 24px;
      height: 24px;
      margin-right: 10px;
    }
  }
}
</style>