FE_occupationlab_client/src/layouts/navbar/index.vue

<template>
  <div>
    <ul class="nav">
      <li v-for="(item, i) in menus"
          :key="i"
          :class="{active: active == item.index}"
          @click="jump(item)">
        {{item.title}}
        <ul :class="['children']"
            v-if="item.index === '/preInfo/list' || item.index === '/info/list'">
          <li v-for="(column, i) in columns"
              :key="i"
              :class="{active: columnActive === column.id}"
              @click="toInfo($event, column)">{{ column.name }}</li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
import Setting from "@/setting"
import util from "@/libs/util"
import { mapActions } from "vuex";
export default {
  data () {
    return {
      token: util.local.get(Setting.tokenKey),
      isTourist: false,
      active: '/' + this.$route.path.split('/')[1] + '/list',
      // 登录后的菜单
      loginedMenu: [
        {
          index: "/station/list",
          title: "实验台"
        },
        {
          index: "/appraisal/list",
          title: "能力测评"
        },
        {
          index: "/record/list",
          title: "实验记录"
        },
        {
          index: "/ass/list",
          title: "考核列表"
        },
        {
          index: "/course/list",
          title: "课程学习"
        },
        {
          index: "/info/list",
          title: "最新资讯"
        },
        {
          index: "/match/list",
          title: "线上赛事"
        },
        {
          index: "/activity/list",
          title: "创业活动"
        },
        {
          index: "/screen",
          title: "数据看板"
        }
      ],
      // 游客菜单
      touristMenu: [
        {
          index: "/index/list",
          title: "首页"
        },
        {
          index: "/touristMatch/list",
          title: "大赛资讯"
        },
        {
          index: "/preCourse/list",
          title: "精品课程"
        },
        {
          index: "/preInfo/list",
          title: "最新资讯"
        },
        {
          index: 'data',
          title: "数据科研"
        },
        {
          index: "/log/list",
          title: "更新日志"
        },
        {
          index: "/screen",
          title: "数据看板"
        }
        // {
        //     index: "trial",
        //     title: "试用申请"
        // }
      ],
      menus: [],
      columns: [
        {
          id: 0,
          name: '平台资讯'
        }
      ], // 资讯一级栏目
      columnActive: this.$route.query.parentId
    };
  },
  watch: {
    "$route" (to, from) {
      let actives = this.actives;
      for (let i in this.actives) {
        if (actives[i].includes(this.$route.name)) this.active = `/${i}/list`;
      }
      let arr = this.$route.path.split("/");
      let name = `/${arr[1]}/list`
      this.active = name;
    }
  },
  mounted () {
    const path = this.$route.path
    this.isTourist = !!Setting.whiteList.find(e => e === path)
    // 如果当前页面是在白名单页面，则用游客菜单
    if (this.isTourist) {
      // 如果是智信云的网站，则显示产品服务
      const menus = this.touristMenu
      if (Setting.isZxy) {
        menus[0].index = '/index/zxy'
        menus.splice(1, 0, {
          index: '/product',
          title: '产品服务'
        })
      }
      this.menus = menus
    } else {
      this.menus = this.loginedMenu
    }
    this.isTourist || this.getColumns()
  },
  methods: {
    ...mapActions("info", [
      "setColumnId"
    ]),
    // 跳转
    jump (item) {
      const { index } = item
      // 数据科研点击后打开新窗口去到数据平台
      if (index === 'data') {
        window.open(Setting.isDev
          ? `http://192.168.31.125:8092/#/`
          : Setting.isTest
            ? location.origin
            : `https://www.dataforward.cn`)
      } else if (index === 'trial') {
        // 申请试用
        // window.open('https://www.wjx.cn/vm/wB0RcMm.aspx')
      } else if (index === '/screen') {
        // 数据看板
        window.open(this.$router.resolve('/screen').href)
      } else {
        const token = util.local.get(Setting.tokenKey)
        // 如果未登录且跳转的是登录后才有的菜单
        if (!token && this.loginedMenu.find(e => e.index === index)) {
          location.reload()
        } else {
          this.active = index
          this.columnActive = ''
          this.setColumnId('')
          index === '/preInfo/list' || index === '/info/list' || this.$router.push(index).catch(err => { })
          token !== this.token && location.reload() // 如果登录后再返回该页面，浏览器里会存有token，但是这个页面里的token是刚进到页面时获取的，应该是空，如果是这个情况，则刷新，否则右上角还会显示为登录按钮
        }
      }
    },
    // 获取资讯一级栏目
    getColumns () {
      this.$get(this.api.queryAllColumns).then(({ columnTree }) => {
        this.columns.push(...columnTree)
      }).catch(res => { })
    },
    // 一级栏目点击回调
    toInfo (e, column) {
      e.stopPropagation()
      const { id } = column
      const path = this.isTourist ? 'preInfo' : 'info'
      this.active = `/${path}/list`
      this.columnActive = id
      this.$router.push(`/${path}/list?parentId=${id || ''}&name=${column.name}`)
    }
  }
};
</script>

<style lang="scss" scoped>
.nav {
    position: absolute;
    top: 0;
    left: 50%;
    display: flex;
    transform: translateX(-50%);
    & > li {
        position: relative;
        padding: 0 15px;
        margin: 0 20px;
        font-size: 16px;
        line-height: 60px;
        color: #3f3f3f;
        white-space: nowrap;
        cursor: pointer;
        border-bottom: 4px solid transparent;
        &.active {
            color: $main-color;
            border-bottom-color: $main-color;
        }
        &:hover {
            .children {
                display: flex;
            }
        }
    }
    .children {
        position: absolute;
        top: 64px;
        left: 50%;
        display: none;
        background-color: #fff;
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
        box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.15);
        transform: translateX(-50%);
        &.show {
            display: flex;
        }
        & > li {
            padding: 0 20px;
            margin: 0 20px;
            color: #333;
            line-height: 64px;
            cursor: pointer;
            &:before {
                content: '';
                display: inline-block;
                width: 3px;
                height: 3px;
                margin-right: 10px;
                vertical-align: middle;
                background-color: #333;
            }
            &.active {
                color: $main-color;
                &:before {
                    background-color: $main-color;
                }
            }
        }
    }
}
@media (max-width: 1870px) {
    .nav {
        left: 55%;
        & > li {
            margin: 0 10px;
        }
    }
}
@media (max-width: 1380px) {
    .nav {
        left: 58%;
        & > li {
            padding: 0 10px;
        }
    }
}
</style>