update

src/api/user.js

@@ -7,7 +7,7 @@ import { request, getRequestParams } from '@/utils/request';
 export function login(data) {
   return request({
     method: 'post',
-    url: process.env.VUE_APP_LearnWebSI + '?MethodName=login_control-Login',
+    url: process.env.VUE_APP_FileServer + '?MethodName=login_control-Login',
     data
   });
 }
@@ -27,18 +27,6 @@ export function updateLanguageType(data) {
   });
 }
 
-/**
- * 根据身份通行码得到用户登录信息
- * @param {Object} data { access_code 身份通行码 }
- */
-export function GetLoginInfoByAccessCode(data) {
-  return request({
-    method: 'post',
-    url: process.env.VUE_APP_FileServer + '?MethodName=login_control-GetLoginInfoByAccessCode',
-    data
-  });
-}
-
 export function GetUserListByIDList(data) {
   let params = getRequestParams('user_manager-GetUserListByIDList');
 

src/layouts/components/LayoutHeader.vue

@@ -1,59 +1,105 @@
 <template>
-  <div class="header">
-    <div class="header-container">
-      <div class="header-container-left">
-        <span class="logo">LOGO</span>
-        <router-link to="/" class="home">主页</router-link>
-        <span class="menu">
-          <el-dropdown placement="top">
-            <span class="el-dropdown-link">
-              <span class="el-dropdown-current-name">{{ curDropdown }}</span>
-              <i class="el-icon-arrow-down el-icon--right"></i>
-            </span>
-            <el-dropdown-menu slot="dropdown">
-              <template v-for="item in dropdownList">
-                <router-link :key="item.id" :to="item.link">
-                  <el-dropdown-item>
-                    <svg-icon :icon-class="item.icon" /><span>{{ item.name }}</span>
-                  </el-dropdown-item>
-                </router-link>
-              </template>
-            </el-dropdown-menu>
-          </el-dropdown>
+  <!-- 顶部登录导航 -->
+  <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; cursor: pointer"
+        trigger="click"
+        @command="changeLang"
+      >
+        <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
+            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>
-      <div class="header-container-right">
-        <!-- <el-dropdown @command="setI18nLang">
-            <span class="el-dropdown-link">
-              切换语言<i class="el-icon-arrow-down el-icon--right"></i>
-            </span>
-            <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item
-                v-for="list in languageList"
-                :key="list.language_type"
-                :command="list.language_type"
-              >
-                {{ list.language_name }}
-              </el-dropdown-item>
-            </el-dropdown-menu>
-          </el-dropdown> -->
-        <!-- <el-input prefix-icon="el-icon-search" placeholder="输入关键字搜索" /> -->
-        <el-avatar icon="el-icon-user" :src="$store.state.user.image_url" />
-        <el-dropdown class="header-container-right-name" placement="bottom">
-          <span>{{ realName }} </span>
-          <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item @click.native="signOut">退出</el-dropdown-item>
-          </el-dropdown-menu>
-        </el-dropdown>
-        <el-badge :is-dot="isDot" class="header-container-right-bell">
-          <i class="el-icon-bell"></i>
-        </el-badge>
+      <!-- 用户头像和用户名 -->
+      <div v-else class="user">
+        <img
+          class="headPhoto"
+          src="../../assets/login/Group3214.png"
+          alt=""
+          @click="userShow = !userShow"
+        />
+        <span @click="userShow = !userShow">{{ userMessage.user_real_name }}</span>
+        <div v-show="userShow" class="userShow">
+          <p @click="gopresonal">
+            <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 src="../../assets/login/Vector.png" alt="" />
+        <span 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';
 
@@ -61,107 +107,533 @@ export default {
   name: 'LayoutHeader',
   data() {
     return {
-      curDropdown: '教学管理系统',
-      dropdownList: [
+      activeIndex: '2', // 主导航索引
+      LoginNavIndex: 0, // 下拉框导航索引
+      projectName: '教学中心',
+      projectList: [
+        {
+          id: 0,
+          name: '教学中心',
+          img: 'project1-1',
+          selectImg: 'project1-1-1'
+        },
         {
           id: 1,
-          name: '教学管理系统',
-          icon: 'teaching-manager',
-          link: '/'
+          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'
         }
       ],
-      isDot: false,
-      languageList: []
+      userMessage: null,
+      userShow: false,
+      language_list: [],
+      lang: ''
     };
   },
   computed: {
-    realName() {
-      let user = this.$store.state.user;
-      return user.user_real_name ? user.user_real_name : 'NAME';
-    }
+    ...mapGetters(['language_type'])
   },
-  mounted() {
-    GetLanguageList().then(data => {
-      this.languageList = data.language_list;
-    });
+  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();
   },
   methods: {
-    async signOut() {
-      await this.$store.dispatch('user/signOut');
-      this.$router.push(`/login?redirect=${this.$route.fullPath}`);
+    // 切换导航
+    handleSelect(key, keyPath) {
+      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;
     },
-    async setI18nLang(lang) {
-      await setI18nLang(lang);
-      // 为了触发 created 生命周期的获取单词列表事件
+    gopresonal() {
+      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 => {
+          return 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">
-.header {
-  height: $header-h;
-  line-height: $header-h;
+<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;
-  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.15);
-  background-color: #fff;
+  z-index: 999;
+  background: #fff;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
+  font-family: 'sourceR';
 
-  &-container {
-    height: $header-h;
+  .logo {
     display: flex;
-    justify-content: space-between;
+    align-items: center;
 
-    .logo {
-      font-size: 30px;
+    &-img {
+      font-style: normal;
       font-weight: 600;
-      margin: 30px;
+      font-size: 30px;
+      font-variant: small-caps;
+      color: #000;
+      margin-right: 29px;
+      line-height: 74px;
     }
 
-    .home {
-      vertical-align: top;
-      margin-right: 24px;
+    .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;
     }
+  }
 
-    .menu {
-      @extend .home;
+  .userName {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
 
-      .el-dropdown {
-        height: 48px;
+    .seek {
+      margin-right: 100px;
+      position: relative;
 
-        &-current-name {
-          color: $basicColor;
-        }
+      img {
+        left: 10px;
+        top: 11px;
+        position: absolute;
       }
     }
 
-    &-right {
-      .el-input {
-        width: 300px;
-        margin-right: 40px;
+    .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;
+      margin-left: 23px;
+
+      img {
+        width: 18px;
+        height: 24px;
       }
 
-      .el-avatar {
-        vertical-align: middle;
+      .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;
 
-      &-name {
-        height: 48px;
-        vertical-align: top;
-        margin-left: 8px;
+      > span {
         cursor: pointer;
+        font-size: 16px;
+        color: #fff;
+      }
+    }
+
+    .user {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      position: relative;
+
+      > img {
+        width: 34px;
+        height: 34px;
+      }
+
+      > span {
+        font-size: 20px;
+        padding-left: 10px;
       }
 
-      & > &-bell {
-        margin-left: 26px;
+      .userShow {
+        position: absolute;
+        width: 156px;
+        height: 96px;
+        background: #fff;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+        border-radius: 8px;
+        bottom: -100px;
+        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">
+.LoginNav {
+  .el-dropdown-menu__item {
+    line-height: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 
-<style lang="scss" scoped>
-.el-dropdown-menu .svg-icon {
-  margin-right: 18px;
+    > span {
+      font-family: 'sourceR';
+      font-size: 16px;
+    }
+  }
+
+  .el-menu--horizontal > .el-menu-item {
+    height: 74px;
+    line-height: 78px;
+  }
+
+  .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: #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>

src/permission.js

@@ -25,7 +25,7 @@ router.beforeEach(async (to, from, next) => {
     next();
   } else {
     // 其他无权访问的页面将重定向到登录页面
-    next(`/login?redirect=${to.path}`);
+    next('/login');
     NProgress.done();
   }
 });

src/router/index.js

@@ -2,17 +2,14 @@ import Vue from 'vue';
 import VueRouter from 'vue-router';
 
 import Layout from '@/layouts';
-import Login from '@/views/login';
 import store from '@/store';
 
-import { Loading } from 'element-ui';
-
 Vue.use(VueRouter);
 
 const routes = [
   {
     path: '/login',
-    component: Login
+    component: () => import('@/views/login')
   },
   {
     path: '/404',
@@ -22,18 +19,13 @@ const routes = [
   {
     path: '/EnterSys',
     beforeEnter: (to, from, next) => {
-      let loadingInstance = Loading.service({
-        text: '跳转中...'
-      });
       store
-        .dispatch('user/enterSys', { access_code: to.query.AccessCode })
+        .dispatch('user/enterSys')
         .then(() => {
-          loadingInstance.close();
           next('/');
         })
         .catch(() => {
           store.dispatch('user/signOut');
-          loadingInstance.close();
           next('/login');
         });
     }

src/store/modules/user.js

@@ -1,7 +1,7 @@
 import { setToken, getToken, removeToken } from '@/utils/auth';
 import { user } from '@/store/mutation-types';
 import { resetRouter } from '@/router';
-import { login, updateLanguageType, GetLoginInfoByAccessCode } from '@/api/user';
+import { login, updateLanguageType } from '@/api/user';
 
 const getDefaultSate = () => {
   const { token, isHas } = getToken();
@@ -36,8 +36,11 @@ const mutations = {
     state.language_type = language_type || 'ZH';
   },
   [user.UPDATE_LANGUAGE_TYPE]: (state, language_type) => {
-    localStorage.setItem('language_type', language_type);
-    state.language_type = language_type;
+    const { token, isHas } = getToken();
+    if (isHas) {
+      token['language_type'] = language_type;
+      setToken(token);
+    }
   }
 };
 
@@ -58,21 +61,6 @@ const actions = {
     });
   },
 
-  // 根据身份通行码得到用户登录信息
-  enterSys({ commit }, access_code) {
-    return new Promise((reslove, reject) => {
-      GetLoginInfoByAccessCode(access_code)
-        .then(response => {
-          setToken(response);
-          commit(user.SET_USER_INFO, response);
-          reslove();
-        })
-        .catch(error => {
-          reject(error);
-        });
-    });
-  },
-
   // 用户退出
   signOut({ commit }) {
     return new Promise(resolve => {
@@ -105,7 +93,7 @@ const actions = {
     });
   },
 
-  resetState({ commit }) {
+  enterSys({ commit }) {
     return new Promise(reslove => {
       commit(user.RESET_STATE);
       reslove();

src/utils/request.js

@@ -12,7 +12,7 @@ axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest';
 const service = axios.create({
   baseURL: process.env.VUE_APP_BASE_API,
   // withCredentials: true, // 跨域请求时发送 cookies
-  timeout: 5000
+  timeout: 10000
 });
 
 // 请求拦截器
@@ -60,7 +60,7 @@ service.interceptors.response.use(
       });
 
       store.dispatch('user/resetSessionID').then(() => {
-        location.reload();
+        window.location.href = '/';
       });
 
       return Promise.reject(new Error(res.error || 'Error'));

src/views/course_details/index.vue

@@ -11,7 +11,11 @@
           <!-- 机构名称 -->
           <p>{{ CourseData.org_name }}</p>
           <p>
-            {{ CourseData.teacher_list.length > 0 ? CourseData.teacher_list[0].teacher_name : '' }}
+            <template v-if="CourseData.teacher_list.length > 0">
+              <span v-for="item in CourseData.teacher_list" :key="item.teacher_id">
+                {{ item.teacher_name }}
+              </span>
+            </template>
           </p>
           <p class="intro">
             {{ CourseData.intro }}

vue.config.js

@@ -5,7 +5,7 @@ function resolve(dir) {
   return path.join(__dirname, './', dir);
 }
 
-const name = '全球中文学习系统 教学系统 Web端';
+const name = '全球汉语教学平台';
 
 const NODE_ENV = process.env.NODE_ENV;