GCLS_Page_Learn/src/layouts/components/LayoutHeader.vue

<template>
  <!-- 顶部登录导航 -->
  <div class="LoginNav">
    <div class="logo">
      <span class="logo-img"> logo </span>
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        text-color="#000"
        active-text-color="#F90"
        @select="handleSelect"
      >
        <el-menu-item index="1">主页</el-menu-item>
        <el-menu-item index="2">
          <template v-if="projectList.length > 1">
            <el-dropdown trigger="click" @command="handleCommand">
              <span
                class="el-dropdown-link"
                :style="{ color: activeIndex === '2' ? '#F90' : '#000' }"
              >
                {{ projectName }}
                <!-- SYSTEM -->
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown" style="min-width: 278px">
                <el-dropdown-item
                  v-for="(item, i) in projectList"
                  :key="i"
                  :class="i === LoginNavIndex ? 'menuActive' : ''"
                  :command="i"
                  class="projectList"
                >
                  <img
                    style="position: relative; width: 24px"
                    :src="require('../../assets/login/' + item.img + '.png')"
                    alt=""
                  />
                  <span style="margin-left: 16px">
                    {{ item.name }}
                  </span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
          <template v-else>{{ projectList.length > 0 && projectList[0].name }}</template>
        </el-menu-item>
      </el-menu>
    </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"></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 v-if="!userMessage" class="selectLoginOrRegistration">
        <span @click="cutLoginReg">登录</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 : '../../assets/login/Group3214.png'
            "
          />
          <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>个人中心</span>
          </el-dropdown-item>
          <el-dropdown-item @click.native="QuitLogin">
            <img src="../../assets/login/Frame77.png" /><span>退出登录</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"></span>
      </div>
    </div>
  </div>
</template>

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

export default {
  name: 'LayoutHeader',
  data() {
    return {
      activeIndex: '2', // 主导航索引
      LoginNavIndex: 0, // 下拉框导航索引
      projectName: '教学中心',
      projectList: [
        {
          id: 0,
          name: '教学中心',
          img: 'project1-1',
          selectImg: 'project1-1-1'
        },
        {
          id: 1,
          name: '教材管理系统',
          img: 'project1-1',
          selectImg: 'project1-1-1'
        },
        {
          id: 2,
          name: '教培中心',
          img: 'project2-2-2',
          selectImg: 'project2-2'
        },
        {
          id: 3,
          name: '教研中心',
          img: 'project6-6-6',
          selectImg: 'project6-6'
        },
        {
          id: 4,
          name: '考试中心',
          img: 'project6-6-6',
          selectImg: 'project6-6'
        },
        {
          id: 5,
          name: '学习中心',
          img: 'project4-4-4',
          selectImg: 'project4-4'
        },
        {
          id: 6,
          name: '个人中心',
          img: 'project3-3-3',
          selectImg: 'project3-3'
        }
      ],
      teacherProList: [
        // 普通教师
        {
          id: 0,
          name: '教学中心',
          img: 'project1'
        },
        {
          id: 2,
          name: '教培中心',
          img: 'project3'
        },
        {
          id: 3,
          name: '教研中心',
          img: 'project4'
        },
        {
          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: [],
      isNotRead: false,
      lang: ''
    };
  },
  computed: {
    ...mapGetters(['language_type'])
  },
  created() {
    let { token, isHas } = getToken();
    if (isHas) {
      this.userMessage = token;
      let popedom_code_list = this.userMessage.popedom_code_list;
      if (this.userMessage.user_type === 'TEACHER') {
        this.projectList = this.handleProList(popedom_code_list);
      } else if (this.userMessage.user_type === 'STUDENT') {
        this.projectList = this.stuProList;
      }
      this.projectList.forEach((item, index) => {
        if (item.id === 0) {
          this.LoginNavIndex = index;
        }
      });
    }
    this.getLangList();
    setInterval(() => {
      IsExistMyMessage_NotRead().then(({ is_exist }) => {
        this.isNotRead = JSON.parse(is_exist);
      });
    }, 10000);
  },
  methods: {
    // 切换导航
    handleSelect(key) {
      this.activeIndex = key;
      if (this.activeIndex === '1') {
        window.location.href = '/';
      }
    },
    // 切换项目
    handleCommand(command) {
      this.LoginNavIndex = command;
      if (!this.userMessage) {
        this.$message.warning('请先登录');
        this.projectName = '教学中心';
        window.location.href = '/';
        return;
      }
      this.projectName = this.projectList[command].name;
      let id = this.projectList[command].id;
      let url = '';
      if (id === 0) {
        // 教学管理系统
        url = `/GCLS-Learn/#/EnterSys`;
      } else if (id === 1) {
        // 教材管理系统
        url = `/GCLS-Book/#/EnterSys`;
      } else if (id === 2) {
        // 教培中心
        url = `/GCLS-TRC/#/EnterSys`;
      } else if (id === 3) {
        // 教研中心
        url = `/GCLS-TC/#/EnterSys`;
      } else if (id === 4) {
        // 考试中心
        url = `/GCLS-Test/#/EnterSys`;
      } else if (id === 5) {
        // 学习中心
        url = `/GCLS-LC/#/EnterSys`;
      } else {
        // 个人中心
        url = `/GCLS-Personal/#/EnterSys`;
      }
      window.location.href = url;
    },
    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);
    },
    handleProList(list) {
      let projectList = [];
      if (list.length === 0) {
        let arr = [
          {
            id: 2,
            name: '教培中心',
            img: 'project2-2-2',
            selectImg: 'project2-2'
          },
          {
            id: 3,
            name: '教研中心',
            img: 'project6-6-6',
            selectImg: 'project6-6'
          },
          {
            id: 5,
            name: '学习中心',
            img: 'project4-4-4',
            selectImg: 'project4-4'
          },
          {
            id: 6,
            name: '个人中心',
            img: 'project3-3-3',
            selectImg: 'project3-3'
          }
        ];
        projectList = arr;
      }
      if (list.includes(2000001)) {
        projectList = JSON.parse(JSON.stringify(this.teacherProList));
        for (let i = 0; i < list.length; i++) {
          let code = list[i];
          if (code === 2000003) {
            projectList.push({
              id: 1,
              name: '教材管理系统',
              img: 'project1-1',
              selectImg: 'project1-1-1'
            });
          }
          if (code === 2000005) {
            projectList.push({
              id: 4,
              name: '考试中心',
              img: 'project5-5-5',
              selectImg: 'project5-5'
            });
          }
        }
      } else {
        for (let i = 0; i < list.length; i++) {
          let code = list[i];
          if (code === 2000002) {
            projectList.push({
              id: 0,
              name: '教学管理系统',
              img: 'project1-1-1',
              selectImg: 'project1-1'
            });
          } else if (code === 2000003) {
            projectList.push({
              id: 1,
              name: '教材管理系统',
              img: 'project1-1',
              selectImg: 'project1-1-1'
            });
          } else if (code === 2000004) {
            projectList.push({
              id: 2,
              name: '教师培训中心',
              img: 'project2-2-2',
              selectImg: 'project2-2'
            });
          } else if (code === 2000005) {
            projectList.push({
              id: 4,
              name: '考试中心',
              img: 'project5-5-5',
              selectImg: 'project5-5'
            });
          } else if (code === 2000006) {
            projectList.push({
              id: 3,
              name: '教研中心',
              img: 'project4-4-4',
              selectImg: 'project4-4'
            });
          }
        }
        projectList.push({
          id: 6,
          name: '个人中心',
          img: 'project3-3-3',
          selectImg: 'project3-3'
        });
      }
      // 排序
      for (let i = 0; i < projectList.length - 1; i++) {
        for (let j = 0; j < projectList.length - 1 - i; j++) {
          // 相邻元素两两对比，元素交换，大的元素交换到后面
          if (projectList[j].id > projectList[j + 1].id) {
            let temp = projectList[j];
            projectList[j] = projectList[j + 1];
            projectList[j + 1] = temp;
          }
        }
      }
      return projectList;
    }
  }
};
</script>

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

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

    &-img {
      font-style: normal;
      font-weight: 600;
      font-size: 30px;
      font-variant: small-caps;
      color: #000;
      margin-right: 29px;
      line-height: 74px;
    }

    .el-menu-demo {
      background: rgba(0, 0, 0, 0);

      li {
        font-size: 16px;
        background: none;

        &:hover {
          background: none;
        }
      }
    }
    // 取消组件默认的样式
    .el-menu.el-menu--horizontal {
      border-bottom: none;
    }
  }

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

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

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

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

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

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

      img {
        width: 18px;
        height: 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 #fff;
      box-sizing: border-box;
      border-radius: 4px;
      justify-content: space-evenly;
      align-items: center;
      padding: 0 16px;

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

    .user {
      cursor: pointer;

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

<style lang="scss">
.LoginNav {
  .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: 74px;
    line-height: 78px;
  }

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

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

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

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

    > img {
      top: 0;
    }

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

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

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

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

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

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