front/src/components/Top/index.vue

<template>
  <div class="fx-row fx-bet-cen pl12 pr12 relative" style="line-height: 40px;">
    <div v-if="$route.path=='/login'" class="fx-row fx-sta-cen">
      <img class="icon16" src="../../assets/images/icon_tel2.png"/>
      <span class="pl8">服务热线：400-1797-985</span>
      <img class="icon16 ml20" src="../../assets/images/icon_phone.png"/>
      <div class="relative" id="app_download" @mouseover="app=true" @mouseleave="app=false">
        <a href="javascript:void(0);">APP下载</a>
        <div id="appQrcode" v-show="app">
          <img style="width:110px;height:110px;" src="../../assets/images/app.png"/>
          <p style="width:110px;color:#000;font-size:12px;margin-top:5px;">扫描下载APP</p>
        </div>
      </div>
      <el-link v-if="showPay()" href="/pay" type="warning" class="ml20" underline style="font-size: 16px;">
        在线购卡
      </el-link>
    </div>
    <div v-else class="fx-row fx-sta-cen">
      <span @click="$router.push('/')" class="mr20 pointer">首页</span>
      <span v-for="(item, index) in visibleMenus" :key="index" class="mr20 pointer"
            :class="{'f-primary':item.path == activeMenu}" @click="handleMenuClick(item)">{{ item.meta.title }}</span>
    </div>
    <div v-if="isLogin" class="fx-row fx-end-cen">
      <!--您好！-->
      <span style="color:#FFA400;">{{ currentUser.nickName }}{{ currentUser.userName }}
        [{{ currentUser.provinceName }} {{ currentUser.schoolName }}]</span>
      <!--，欢迎登录铭学百优-->
      <el-dropdown v-if="roleList.length > 1" @command="handleRoleExchange">
        <span class="el-dropdown-link pointer">[{{ currentRole.roleName }}]</span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item disabled class="role-change-title">
            角色切换
            <i class="el-icon-refresh"></i>
          </el-dropdown-item>
          <el-dropdown-item v-for="(r,i) in roleList" :key="i" :disabled="r==currentRole" :command="r.roleId"
                            :divided="i==0">{{ r.roleName }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

      <img class="icon16" :src="currentUser.avatar"/>
      <a href="javascript:void(0)" @click="handleGoUserCenter">个人中心</a>
      <a style="padding-left:30px;color:#FB731F;" @click="LogOut">退出登录</a>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import { changeRole } from '@/api/login.js'
import loginCheckMixin from '@/views/index/blocks/index-login-interceptor-mixin'

export default {
  mixins: [loginCheckMixin],
  data() {
    return {
      app: false
    }
  },
  computed: {
    ...mapGetters(['isLogin', 'currentUser', 'currentRole', 'roleList', 'topbarRouters']),
    // 过滤默认不显示的路由当顶部菜单
    visibleMenus() {
      return this.topbarRouters.filter((m) => !m.hidden)
    },
    activeMenu() {
      return this.$store.getters.activeTopPath
    }
  },
  methods: {
    ...mapActions(['LogOut', 'AccessDeepMenu']),
    showPay() {
      return false // 22.11.21 暂不开放
      // return !this.isLogin
    },
    handleMenuClick(item) {
      this.AccessDeepMenu(item)
    },
    handleRoleExchange(roleId) {
      changeRole(roleId).then((_) => {
        // IMPORTANT: 此处会触发GetInfo/GetRouters
        //window.location.reload();
        window.location.href = '/login'
      })
    },
    async handleGoUserCenter() {
      await this.loginCheck()
      this.$router.push('/user/info/userinfo')
    }
  }
}
</script>

<style scoped>
.page-header-box > .layui-row {
  width: 1184px;
  margin: 0 auto;
  padding: 8px 0;
  font-size: 14px;
}

.page-header-box .header-icon {
  height: 16px;
  vertical-align: middle;
}

img {
  border: none;
}

.p-l-small {
  padding-left: 8px;
}

.page-header-box .header-left > span {
  display: inline-block;
  vertical-align: middle;
}

#appQrcode {
  background: #fff;
  border: 1px solid #cdcdcd;
  box-shadow: 0 0 8px #cdcdcd;
  border-radius: 3px;
  padding: 10px;
  position: absolute;
  left: 0;
  top: 40px;
  z-index: 9999;
  text-align: center;
}

.pos-r {
  position: relative;
}

.m-l {
  margin-left: 16px;
}

.color-orange {
  color: #47c6a2;
}

.role-change-title {
  color: #666666;
  font-size: 12px;
  font-weight: bold;
}
</style>