GCLS_Page_ROOT/src/components/login/LoginNav.vue

<template>
  <!-- 顶部登录导航 -->
  <div class="LoginNav" :style="{ color: type == 'Live' ? 'black' : 'white' }">
    <div class="logo">
      <!-- <span> logo </span> -->
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        text-color="#fff"
        active-text-color="#FF9900"
      >
        <el-menu-item index="1">首页</el-menu-item>
        <el-menu-item index="2">
          <el-dropdown trigger="click" @command="handleCommand">
            <span
              class="el-dropdown-link"
              :style="{ color: LoginNavIndex == 2 ? '#FF9900' : '#fff' }"
            >
              {{ projectName }}
              <!-- SYSTEM -->
              <img class="dropdownIcon" src="../../assets/login/dropdownIcon.png" alt="">
              <!-- <i class="el-icon-arrow-down el-icon--right"></i> -->
            </span>
            <el-dropdown-menu slot="dropdown" style="width: 300px">
              <el-dropdown-item
                v-for="(item, i) in projectList"
                :key="i"
                :command="i"
                :class="projectDownIndex == i ? 'downsele' : ''"
              >
                <img
                  style="position: relative; top: 5px; width: 24px"
                  :src="require('../../assets/login/' + item.img + '.png')"
                  alt=""
                />
                <span style="margin-left: 16px">
                  {{ item.name }}
                </span>
              </el-dropdown-item>
              <!-- <el-dropdown-item command="LEARING CENTER">
                Learning Center
              </el-dropdown-item>
              <el-dropdown-item command="TESTING CENTER"
                >Testing Center</el-dropdown-item
              >
              <el-dropdown-item command="TEACHER CENTER"
                >Teacher Center</el-dropdown-item
              > -->
            </el-dropdown-menu>
          </el-dropdown>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="userName">
      <!-- <div class="headPhoto"></div> -->
      <el-dropdown
        v-if="userMessage"
        style="margin-right: 16px"
        trigger="click"
        @command="changeLang"
      >
        <span class="el-dropdown-link" style="color: #fff; 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 v-if="!userMessage" class="selectLoginOrRegistration">
        <span @click="cutLoginReg('login')">登录</span>
        <span> | </span>
        <span @click="cutLoginReg('signin')">注册</span>
      </div>
      <!-- 用户头像和用户名 -->
      <div class="user" v-else>
        <!-- :src="
            userMessage.image_url
              ? userMessage.image_url
              : require('../../assets/login/Group3214.png')+
          " 
          src="../../assets/login/Group3214.png"
          -->
        <img
          @click="userShow = !userShow"
          class="headPhoto"
          :src="
            userMessage.image_url
              ? userMessage.image_url
              : require('../../assets/login/Group3214.png')
          "
          alt=""
        />
        <span @click="userShow = !userShow">{{
          userMessage.user_real_name
        }}</span>
        <div class="userShow" v-show="userShow">
          <p @click="gotoPersonalcenter">
            <img src="../../assets/login/project7.png" alt="" />
            个人中心
          </p>
          <p @click="QuitLogin">
            <img src="../../assets/login/Frame77.png" alt="" />
            退出登录
          </p>
        </div>
      </div>
      <!-- 消息 铃铛图片 -->
      <div class="message">
        <img
          @click="gotoPersonalcenter"
          src="../../assets/login/Vector2.png"
          alt=""
        />
        <!-- <span class="redDot"></span> -->
      </div>
    </div>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import { getAcsCode, getStaticContent, getContent } from "@/api/api";
import { setI18nLang } from "@/utils/i18n";
import { mapGetters } from "vuex";
import { getToken, removeToken } from "@/utils/auth";
export default {
  props: ["type", "changeLoginReg", "FatheruserMessage"],
  data() {
    return {
      activeIndex: "1",
      LoginNavIndex: "1",
      projectName: "",
      userMessage: null,
      userShow: false,
      projectDownIndex: 0,
      projectList: [
        {
          id: 0,
          name: "教学中心",
          img: "project1",
        },

        {
          id: 2,
          name: "教培中心",
          img: "project3",
        },
        {
          id: 3,
          name: "教研中心",
          img: "project6",
        },
        {
          id: 5,
          name: "学习中心",
          img: "project4",
        },
        {
          id: 6,
          name: "个人中心",
          img: "project7",
        },
        {
          id: 4,
          name: "考试中心",
          img: "project5",
        },
      ],
      teacherProList: [
        //普通教师
        {
          id: 0,
          name: "教学中心",
          img: "project1",
        },

        {
          id: 2,
          name: "教培中心",
          img: "project3",
        },
        {
          id: 3,
          name: "教研中心",
          img: "project6",
        },
        {
          id: 5,
          name: "学习中心",
          img: "project4",
        },

        {
          id: 6,
          name: "个人中心",
          img: "project7",
        },
      ],
      stuProList: [
        {
          id: 0,
          name: "教学中心",
          img: "project1",
        },
        {
          id: 5,
          name: "学习中心",
          img: "project4",
        },
        {
          id: 6,
          name: "个人中心",
          img: "project7",
        },
      ],
      language_list: [],
      lang: "",
    };
  },
  watch: {
    FatheruserMessage(newval, oldval) {
      this.userMessage = null;
      this.userMessage = newval;
      if (this.userMessage) {
        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 == 4) {
            this.LoginNavIndex = index;
          }
        });
      } else {
        this.projectList = this.teacherProList;
      }
    },
  },
  methods: {
    // 切换导航
    handleSelect(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 = "2";
      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 || !_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;
      console.log(lang_type);
      await setI18nLang(lang_type);
      this.$router.go(0);
    },
    // 切换登录的注册
    cutLoginReg(value) {
      this.changeLoginReg(value);
    },
    // 前往个人中心
    gotoPersonalcenter() {
      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) {
        this.$message.warning("请先登录");
        return;
      }
      let MethodName = "login_control-CreateAccessCode";
      let acsCode = "";
      getContent(MethodName, user_code, user_type, session_id).then((res) => {
        acsCode = res.access_code;
        location.href = `/GCLS-Personal/#/EnterSys?AccessCode=${acsCode}`;
      });
    },
    QuitLogin() {
      Cookies.remove("userMessage");
      Cookies.remove("session_id");
      Cookies.remove("user_code");
      Cookies.remove("user_type");
      removeToken();
      this.userShow = false;
      this.userMessage = null;
      this.changeLoginReg("", 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;
          }
        }
      });
    },
    handleProList(list) {
      let projectList = [];
      if (list.length == 0) {
        let arr = [
          {
            id: 2,
            name: "教培中心",
            img: "project3",
          },
          {
            id: 3,
            name: "教研中心",
            img: "project6",
          },
          {
            id: 5,
            name: "学习中心",
            img: "project4",
          },
          {
            id: 6,
            name: "个人中心",
            img: "project7",
          },
        ];
        projectList = arr;
      } else 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: "project2",
            });
          }
          if (code == 2000005) {
            projectList.push({
              id: 4,
              name: "考试中心",
              img: "project5",
            });
          }
        }
      } else {
        for (let i = 0; i < list.length; i++) {
          let code = list[i];
          if (code == 2000002) {
            projectList.push({
              id: 0,
              name: "教学管理系统",
              img: "project1",
            });
          } else if (code == 2000003) {
            projectList.push({
              id: 1,
              name: "教材管理系统",
              img: "project2",
            });
          } else if (code == 2000004) {
            projectList.push({
              id: 2,
              name: "教师培训中心",
              img: "project3",
            });
          } else if (code == 2000005) {
            projectList.push({
              id: 4,
              name: "考试中心",
              img: "project5",
            });
          } else if (code == 2000006) {
            projectList.push({
              id: 3,
              name: "教研中心",
              img: "project4",
            });
          }
        }
        projectList.push({
          id: 6,
          // Teacher training center
          name: "个人中心",
          img: "project7",
          text: "您收集和购买的所有资源都可以在这里轻松找到。",
        });
      }
      // 排序
      for (var i = 0; i < projectList.length - 1; i++) {
        for (var j = 0; j < projectList.length - 1 - i; j++) {
          // 相邻元素两两对比，元素交换，大的元素交换到后面
          if (projectList[j].id > projectList[j + 1].id) {
            var temp = projectList[j];
            projectList[j] = projectList[j + 1];
            projectList[j + 1] = temp;
          }
        }
      }
      this.projectName = projectList[0].name;
      return projectList;
    },
  },
  created() {
    let _this = this;
    if (this.FatheruserMessage) {
      _this.userMessage = this.FatheruserMessage;
    } else {
      _this.userMessage = null;
    }
    // let user = Cookies.get("userMessage");
    // if (user) {
    //   _this.userMessage = JSON.parse(user);
    //   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;
    //     }
    //   });
    // } else {
    //   _this.userMessage = null;
    //   this.projectName = this.projectList[0].name;
    // }
    this.projectName = this.projectList[0].name;
    _this.getLangList();
  },
};
</script>

<style lang="scss" scoped>
.LoginNav {
  height: 65px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 60px 0 40px;
  z-index: 999;
  font-family: "sourceR";
  .logo {
    display: flex;
    align-items: center;
    .el-menu-demo {
      background: rgba(0, 0, 0, 0);
      // margin-left: 100px;
      li:hover {
        background: none;
      }
      li {
        background: none;
      }
    }
    .dropdownIcon{
      margin-left: 8px;
      width: 8px;
      height: 4px;
    }
    // 取消组件默认的样式
    .el-menu.el-menu--horizontal {
      border-bottom: none;
    }
  }
  .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;
        cursor: pointer;
      }
      .redDot {
        width: 6px;
        height: 6px;
        position: absolute;
        display: inline-block;
        background: red;
        border-radius: 50%;
        right: 0;
      }
    }
    .selectLoginOrRegistration {
      display: flex;
      width: 161px;
      height: 32px;
      border: 1px solid #ffffff;
      box-sizing: border-box;
      border-radius: 4px;
      // justify-content: space-evenly;
      align-items: center;
      span {
        margin-left: 23px;
      }
      > :first-child {
        cursor: pointer;
      }
      > :last-child {
        cursor: pointer;
      }
    }
    .user {
      display: flex;
      align-items: center;
      cursor: pointer;
      position: relative;
      > img {
        width: 34px;
        height: 34px;
      }
      > span {
        padding-left: 10px;
      }
      .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: 0;
        color: black;
        img {
          width: 24px;
          height: 24px;
          margin-right: 10px;
        }
        p {
          height: 40px;
          display: flex;
          align-items: center;
          padding-left: 20px;
          margin: 0;
          margin-top: 5px;
        }
        > p:hover {
          background: #f2f2f2;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.downsele {
  background: #ff9900;
}
.LoginNav {
  .el-menu-item {
    font-size: 16px;
  }
  .is-active{
    font-weight: bold;
  }
  .el-menu-item i {
    color: white;
  }
}
</style>