FE_occupationlab_client/src/layouts/header/index.vue

<template>
    <div class="header">
        <a class="logo" @click="toIndex">
          <template v-if="isIndex">
            <img v-if="!isZxy" src="@/assets/img/logo.png" alt="">
            <img v-else src="@/assets/img/zxy/logo.png" alt="">
          </template>
          <template v-else>
              <img :src="logoUrl" height="50" />
              <span class="title">{{title}}</span>
          </template>
        </a>
        <div class="inner">
            <navbar class="nav-wrap" ref="nav"></navbar>
            <div class="right">
              <template v-if="token || serverToken">
                <div class="user-wrap">
                  <el-dropdown size="medium" @command="menuChange">
                    <div class="user">
                      <el-avatar :size="35" :src="avatar"></el-avatar>
                      <span class="username">{{ customerName || cName || userName }}</span>
                    </div>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item v-if="isIndex" command="index">前往{{ serverToken ? '教学' : '学习' }}</el-dropdown-item>
                      <el-dropdown-item v-if="!customerName && !serverToken" command="info">个人中心</el-dropdown-item>
                      <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
              </template>
              <div v-else class="login" @click="toNew('/login')">
                  <img src="@/assets/img/user.png" alt="">
                  <span>登录</span>
              </div>
              <el-button v-if="isZxy && isIndex" class="trial" type="primary" @click="toTrial">免费试用</el-button>
            </div>
        </div>
    </div>
</template>
<script>
import { mapState, mapMutations, mapActions } from "vuex";
import Setting from "@/setting";
import util from "@/libs/util";
import navbar from "../navbar";
import axios from 'axios'
export default {
    data() {
        return {
          token: util.local.get(Setting.tokenKey), // 学生端token
          serverToken: util.local.get('oc_server_token'), // 教师端token
          cName: util.cookies.get('customerName'),
          isIndex: Setting.whiteList.find(e => e === this.$route.path), // 是否是在白名单页面
          isZxy: Setting.isZxy
        };
    },
    components: {
        navbar
    },
    computed: {
        ...mapState("user", [
            "title", "logoUrl", "avatar", "userName", 'customerName'
        ])
    },
    mounted() {
      if (this.token) {
        this.getSystemDetail();
        this.getUserInfo();
      }
    },
    methods: {
        ...mapMutations("user", [
            'SET_CUSTOMERNAME'
        ]),
        ...mapActions("user", [
            "logout", "setTitle", "setLogoUrl", "setAvatar", "setUserName"
        ]),
        // 获取logo和平台名
        getSystemDetail () {
            this.$get(this.api.logoDetail).then(({ data }) => {
                if (data) {
                    this.setTitle(data.title);
                    this.setLogoUrl(data.logoUrl);
                }
            }).catch(res => {});
        },
        // 获取用户信息
        getUserInfo() {
            this.$get(this.api.queryUserInfoDetails).then(res => {
                const {userAvatars, userName} = res.result.hrUserInfo || {}
                userAvatars && this.setAvatar(userAvatars);
                this.setUserName(userName);
                if (!userName && !this.customerName) {
                    this.$get(this.api.isClient).then(res => {
                        res.customerName && this.SET_CUSTOMERNAME(res.customerName)
                    }).catch(res => {})
                }
            }).catch(err => {})
        },
        // 用户名下拉回调
        menuChange(e) {
          if (e === 'index') {
            this.toNew('/station')
          } else if (e === 'info') {
            window.open(this.$router.resolve('/setting/person').href)
          } else if (e === 'logout') {
            this.logout()
          }
        },
        // 前往首页
        toIndex() {
            this.$refs.nav.jump({
                index: this.isIndex ? '/index/list' : '/station/list'
            })
        },
        // 打开新tab
        toNew(path) {
          // 如果缓存里有教师端的标识，则前往教师端，否则，打开学生端
          if (util.cookies.get('serverLogin') === 'true' && util.local.get('oc_server_token')) {
            const defaultPath = '/station/list' // 默认路径
            // 查询教师端的权限
            axios.get(`${this.api.getUserRolesPermissionMenu}?platformId=1`, {
              headers: {
                token: this.serverToken
              }
            }).then(({ data }) => {
              const list = data.permissionMenu[0].children
              const route = list.find(e => e.path === defaultPath) ? defaultPath : list[0].path // 如果有默认路由的权限，则跳转到默认路由，否则跳转到第一个
              window.open(process.env.NODE_ENV === 'development' ?
                `http://192.168.31.125:8081/#${route}` :
                `${location.origin}/admin/#${route}`)
            }).catch(err => {})
          } else {
            window.open(this.$router.resolve(path).href)
          }
        },
        // 免费试用
        toTrial() {
          window.open('https://www.wjx.top/vm/wFCPCFp.aspx')
        },
    }
};
</script>
<style scoped lang="scss">
$height: 64px;
.header {
    z-index: 10;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-width: $min-width;
    height: $height;
    background-color: #fff;
    box-shadow: 0px 0px 6px 0px rgba(178, 178, 178, 0.32);
    .inner{
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-width: $min-width;
        padding: 0 80px 0 10px;
        margin: 0 auto;
    }
    .logo{
        position: absolute;
        top: 0;
        left: 40px;
        font-size: 28px;
        color: #568DF2;
        line-height: $height;
        cursor: pointer;
        img {
            margin-right: 10px;
        }
    }
    .title {
        font-size: 18px;
        font-weight: bold;
    }
    .nav-wrap {
        height: 64px;
    }
    .right {
      display: inline-flex;
      align-items: center;
    }
    .user-wrap {
        display: inline-flex;
        align-items: center;
    }
    .user {
        display: inline-flex;
        align-items: center;
        cursor: pointer;
    }
    .el-divider--vertical {
        width: 2px;
        height: 15px;
        margin-left: 15px;
        background-color: #D8D8D8;
    }
    .username {
        margin-left: 10px;
        font-size: 12px;
    }
    .logout {
        margin-left: 5px;
        font-size: 12px;
        color: #666;
        cursor: pointer;
    }
    .login{
        display: inline-flex;
        align-items: center;
        cursor: pointer;
        &:hover{
            opacity: .9;
        }
        span{
            margin-left: 5px;
            color: #666;
            font-size: 14px;
        }
    }
    .trial {
      margin-left: 28px;
      border-radius: 6px;
    }
}
@media (max-width: 1430px) {
    .header {
        .logo {
            left: 20px;
        }
        .inner {
            padding-right: 20px;
        }
    }
}
</style>