header

src/components/Header.vue

@@ -1,19 +1,19 @@
 <template>
   <!-- 顶部登录导航 -->
-  <div class="LoginNav1">
-    <div class="logo" v-if="configInfor">
-      <img
-        v-if="configInfor.logo_image_url"
-        :src="configInfor.logo_image_url"
-        alt=""
-      />
-      <span class="logo-img" v-else>logo</span>
+  <div class="LoginNav">
+    <div class="logo">
+      <template v-if="configInfor">
+        <img :src="configInfor.logo_image_url" alt="logo" class="logo-image" />
+      </template>
+      <template v-else>
+        <span class="logo-img"> logo </span>
+      </template>
       <el-menu
         :default-active="activeIndex"
         class="el-menu-demo"
         mode="horizontal"
         @select="handleSelect"
-        text-color="#fff"
+        text-color="#000"
         active-text-color="#FF9900"
       >
         <el-menu-item index="1">主页</el-menu-item>
@@ -22,16 +22,11 @@
             <el-dropdown trigger="click" @command="handleCommand">
               <span
                 class="el-dropdown-link"
-                :style="{ color: activeIndex == 2 ? '#FF9900' : '#fff' }"
+                :style="{ color: activeIndex == '2' ? '#FF9900' : '#000' }"
               >
                 {{ projectName }}
                 <!-- SYSTEM -->
-                <img
-                  v-if="activeIndex == 2"
-                  src="../assets/login/headerDownlod.png"
-                  alt=""
-                />
-                <img v-else src="../assets/login/headerDownlod2.png" alt="" />
+                <i class="el-icon-arrow-down el-icon--right"></i>
               </span>
               <el-dropdown-menu slot="dropdown" style="min-width: 278px">
                 <el-dropdown-item
@@ -60,15 +55,14 @@
       </el-menu>
     </div>
     <div class="userName">
-      <template>
+      <template v-if="1 == 2">
         <el-dropdown
           style="margin-right: 16px; cursor: pointer"
           trigger="click"
           @command="changeLang"
         >
-          <span class="el-dropdown-link" style="color: #fff">
-            {{ lang }}
-            <img src="../assets/login/headerDownlod2.png" alt="" />
+          <span class="el-dropdown-link" style="color: #000">
+            {{ lang }}<i class="el-icon-arrow-down el-icon--right"></i>
           </span>
           <el-dropdown-menu slot="dropdown" style="width: 200px">
             <el-dropdown-item
@@ -99,7 +93,7 @@
           userMessage.user_real_name
         }}</span>
         <div class="userShow" v-show="userShow">
-          <p @click="gotoPersonalcenter">
+          <p @click="gopresonal">
             <img src="../assets/login/project7.png" alt="" />
             个人中心
           </p>
@@ -110,12 +104,8 @@
         </div>
       </div>
       <!-- 消息 铃铛图片 -->
-      <div class="message">
-        <img
-          @click="gotoPersonalcenter"
-          src="../assets/login/Vector2.png"
-          alt=""
-        />
+      <div class="message" @click="gopresonal">
+        <img src="../assets/login/Vector.png" alt="" />
         <span class="redDot" v-if="is_exist == 'true'"></span>
       </div>
     </div>
@@ -124,20 +114,25 @@
 
 <script>
 import { mapGetters } from "vuex";
-import { getToken, removeToken } from "@/utils/auth";
-import { getLogin, getStaticContent, getLearnWebContent } from "@/api/ajax";
-import { setI18nLang } from "@/utils/i18n";
-import { getConfig } from "@/utils/auth";
+import { getToken, removeToken, getConfig } from "@/utils/auth";
+import Cookies from "js-cookie";
+import { getConfigInfor } from "@/utils/index";
+import {
+  getLearnWebContent,
+  getStaticContent,
+  getContentFile,
+} from "@/api/ajax";
+//import { setI18nLang } from "@/utils/i18n";
 import { saveSession, getSession, removeSession } from "@/utils/role";
 export default {
   name: "LayoutHeader",
   props: [],
   data() {
     return {
+      configInfor: null,
       activeIndex: "2", // 主导航索引
       LoginNavIndex: 0, //下拉框导航索引
-      projectName: "教师培训中心",
-      is_exist: "false",
+      projectName: "",
       projectList: [],
       teacherProList: [
         //普通教师
@@ -146,7 +141,6 @@ export default {
           name: "教学中心",
           img: "project1",
         },
-
         {
           id: 2,
           name: "教培中心",
@@ -158,16 +152,16 @@ export default {
           img: "project4",
         },
         {
-          id: 5,
-          name: "学习中心",
-          img: "project6",
-        },
-        {
           id: 4,
           name: "考试中心",
           img: "project5",
         },
         {
+          id: 5,
+          name: "学习中心",
+          img: "project6",
+        },
+        {
           id: 6,
           name: "个人中心",
           img: "project7",
@@ -194,8 +188,8 @@ export default {
       userShow: false,
       language_list: [],
       lang: "",
+      is_exist: "false",
       headTimer: null,
-      configInfor: null,
     };
   },
   watch: {},
@@ -203,30 +197,12 @@ export default {
     ...mapGetters(["language_type"]),
   },
   methods: {
-    // 前往个人中心
-    gotoPersonalcenter() {
-      if (!this.userMessage) {
-        this.$message.warning("请先登录");
-        return;
-      }
-      location.href = `/GCLS-Personal/#/EnterSys`;
-    },
-
     // 切换导航
     handleSelect(key, keyPath) {
       this.activeIndex = key;
-      if (this.activeIndex == 1) {
+      console.log(this.activeIndex);
+      if (this.activeIndex == "1") {
         window.location.href = "/";
-        // let token = getToken();
-        // if (token) {
-        //   if (JSON.parse(token).popedom_code_list.indexOf(2000006) != -1) {
-        //     this.$router.push("/teacherEduEnteringIndex");
-        //     // window.location.href = "/teacherEduEnteringIndex";
-        //   } else {
-        //     this.$router.push({ path: "/" });
-        //     // window.location.href = "/";
-        //   }
-        // }
       }
     },
     // 切换项目
@@ -234,25 +210,32 @@ export default {
       let _this = this;
       _this.LoginNavIndex = command;
       if (!_this.userMessage) {
-        this.$message.warning("请先登录");
-        this.projectName = "教培中心";
+        this.$message.warning("请重新登录");
         window.location.href = "/";
         return;
       }
-      _this.projectName = _this.projectList[command].name;
+
+      _this.projectName = this.projectList[command].name;
       let relative_path = _this.projectList[command].relative_path;
       location.href = relative_path;
     },
+    gopresonal() {
+      window.location.href = `/GCLS-Personal/#/EnterSys`;
+    },
     // 切换登录的注册
     cutLoginReg() {
       window.location.href = "/";
     },
     QuitLogin() {
-      window.location.href = "/";
-      removeSession("SysList");
       removeToken();
+      removeSession("SysList");
+      Cookies.remove("userMessage");
+      Cookies.remove("session_id");
+      Cookies.remove("user_code");
+      Cookies.remove("user_type");
       this.userShow = false;
       this.userMessage = null;
+      window.location.href = "/";
     },
     getLangList() {
       let MethodName = "language_manager-GetLanguageList";
@@ -268,30 +251,17 @@ export default {
         }
       });
     },
-    async changeLang(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;
-      });
-    },
-
     getChildSysList() {
       let _this = this;
       let MethodName = "login_control-GetChildSysList_CanEnter_PC";
-      getLogin(MethodName, {})
+      getContentFile(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) => {
-              _this.LoginNavIndex = index;
+              if (item.key == "GCLS-Book") {
+                _this.LoginNavIndex = index;
+              }
             });
           }
         })
@@ -299,27 +269,45 @@ export default {
           console.log(err);
         });
     },
+    //是否存在我未阅读的消息
+    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();
+    },
   },
   created() {
     let _this = this;
+    let config = getConfig();
+    if (config) {
+      _this.configInfor = JSON.parse(config);
+    } else {
+      _this._getConfig();
+    }
     _this.getChildSysList();
-    console.log("v2021.09.09.17:38");
   },
   mounted() {
     let _this = this;
     let user = getToken();
     if (user) {
       _this.userMessage = JSON.parse(user);
+      let popedom_code_list = _this.userMessage.popedom_code_list;
+      if (popedom_code_list.indexOf(2000003) > -1) {
+        _this.projectName = "教材管理系统";
+      } else {
+        _this.projectName = "学习中心";
+      }
+      _this.getNotReadMessage();
+      _this.headTimer = setInterval(() => {
+        _this.getNotReadMessage();
+      }, 120000);
     }
-    let config = getConfig();
-    if (config) {
-      _this.configInfor = JSON.parse(config);
-    }
-    _this.getLangList();
-    // _this.headTimer = _this.getNotReadMessage();
-    // setInterval(() => {
-    //   _this.getNotReadMessage();
-    // }, 120000);
+    //_this.getLangList();
   },
   beforeDestroy() {
     if (this.headTimer) {
@@ -331,8 +319,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.LoginNav1 {
-  // height: 74px;
+.LoginNav {
   height: 64px;
   position: relative;
   display: flex;
@@ -341,30 +328,20 @@ export default {
   box-sizing: border-box;
   padding: 0px 24px;
   z-index: 999;
-  // background: #ffffff;
-  // box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.15);
+  background: #ffffff;
+  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.15);
   font-family: "sourceR";
-  height: 64px;
-  background: #424141;
-  .el-dropdown-link {
-    img {
-      width: 8px;
-      height: 4px;
-      vertical-align: middle;
-    }
-  }
   .logo {
-    > img {
-      width: 188px;
-      height: 64px;
+    &-image {
+    //   width: 188px;
+      height: 50px;
     }
     &-img {
       font-style: normal;
       font-weight: 600;
       font-size: 30px;
       font-variant: small-caps;
-      // color: #000000;
-      color: #fff;
+      color: #000000;
       margin-right: 29px;
       line-height: 64px;
     }
@@ -379,8 +356,6 @@ export default {
       li {
         font-size: 16px;
         background: none;
-        height: 64px;
-        line-height: 64px;
       }
     }
     // 取消组件默认的样式
@@ -420,9 +395,10 @@ export default {
       justify-content: center;
       align-items: center;
       margin-left: 23px;
+      cursor: pointer;
       img {
-        width: 24px;
-        cursor: pointer;
+        width: 18px;
+        height: 24px;
       }
       .redDot {
         position: absolute;
@@ -455,7 +431,6 @@ export default {
       align-items: center;
       cursor: pointer;
       position: relative;
-      color: #fff;
       > img {
         width: 34px;
         height: 34px;
@@ -472,8 +447,8 @@ export default {
         box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
         border-radius: 8px;
         bottom: -100px;
-        left: -5px;
         color: black;
+        z-index: 9999;
         img {
           width: 24px;
           height: 24px;
@@ -497,7 +472,7 @@ export default {
 }
 </style>
 <style lang="scss">
-.LoginNav1 {
+.LoginNav {
   .el-dropdown-menu__item {
     line-height: 40px;
     display: flex;
@@ -509,8 +484,8 @@ export default {
     }
   }
   .el-menu--horizontal > .el-menu-item {
-    height: 60px;
-    line-height: 60px;
+    height: 64px;
+    line-height: 68px;
   }
   .el-dropdown {
     display: block;
@@ -519,9 +494,6 @@ export default {
       font-size: 16px;
     }
   }
-  .el-menu-item.is-active i {
-    color: white;
-  }
 }
 .projectList {
   &.el-dropdown-menu__item {
@@ -538,10 +510,8 @@ export default {
     }
   }
   &:hover {
-    background: #ff9900 !important;
-    // background: rgba(255, 153, 0, 0.1) !important;
+    background: rgba(255, 153, 0, 0.1) !important;
     color: #000 !important;
-    // color: #fff;
   }
   &.menuActive {
     background: #ff9900;