tnbapp/src/components/layout/NavBarNoSearch.vue

<template>
  <el-row class="el-menu-demo">
    <el-col :md="2">
      <ul role="menubar" class="el-menu--horizontal el-menu">
        <li role="menuitem" class="el-menu-item">
          <a href="/" style="color: #007bff;text-decoration-line: none">
            <img src="@/assets/img/icon/logo.png" class="logo" alt="img">
            tnb
          </a>
        </li>
      </ul>
    </el-col>
    <el-col :md="8">
      <ul class="el-menu--horizontal el-menu">
        <li class="el-menu-item">
          <el-dropdown v-if="user">
            <img
              :src="user.avatarUrl"
              class="el-avatar--circle el-avatar--medium"
              alt=""
            >
            <el-dropdown-menu v-if="user" slot="dropdown" class="iconsize">
              <el-dropdown-item
                icon="el-icon-s-home"
                class="size"
                @click.native="goToUserHome"
              >我的主页</el-dropdown-item>
              <el-dropdown-item
                icon="el-icon-collection"
                class="size"
                @click.native="goToPlaylist"
              >播放列表</el-dropdown-item>
              <el-dropdown-item
                icon="el-icon-s-data"
                class="size"
                @click.native="goToHistory"
              >历史记录
              </el-dropdown-item>
              <el-dropdown-item
                icon="el-icon-menu"
                class="size"
                @click.native="goToBackground"
              >进入后台</el-dropdown-item>
              <el-dropdown-item
                icon="el-icon-error"
                class="size"
                @click.native="goToLogout"
              >登出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span
            v-else
            style="color: #007bff"
            @click="login"
          >登入</span>
        </li>
        <li class="el-menu-item" @click="goToTimeline">
          <el-badge class="item" :value="statusCount" :max="99">
            <span class="el-icon-view" style="color: #007bff">状态</span>
          </el-badge>
        </li>
        <li class="el-menu-item" @click="goToMessage">
          <el-badge class="item" :value="msgCount" :max="99">
            <span class="el-icon-bell" style="color: #007bff">消息</span>
          </el-badge>
        </li>
      </ul>
    </el-col>
  </el-row>
</template>

<script>
import { userMixin } from 'assets/js/mixin'
import { getAuthedUser } from '@/utils/auth'
import { getUnreadCount } from '@/api/user'

export default {
  name: 'NavBar',
  mixins: [userMixin],
  data() {
    return {
      user: null,
      activeIndex: '1',
      restaurants: [],
      searchType: '1',
      keyword: '',
      statusCount: 0,
      msgCount: 0
    }
  },
  created() {
    /* const userdata = Vue.$cookies.get('USERDATA')
    const userId = userdata.split(':')[0]*/
    const userInfo = getAuthedUser()
    if (userInfo !== null) {
      this.user = userInfo
      getUnreadCount().then(resp => {
        if (resp.code === 0) {
          this.msgCount = resp.data.total
        }
      })
    }
  },
  methods: {
    login() {
      const path = '/login'
      if (this.$route.path === path) {
        this.$router.go(0)
        return
      }
      this.$router.push(path)
    },
    register() {
      console.log('帐号注册')
    },
    // ****************************************************************************************************************
    goToUserHome() {
      const path = '/user/' + this.user.userIdStr
      if (this.$route.path === path) {
        this.$router.go(0)
        return
      }
      this.$router.push(path)
    },
    goToPlaylist() {
      const path = '/background/my/album'
      if (this.$route.path === path) {
        this.$router.go(0)
        return
      }
      this.$router.push(path)
    },
    goToHistory() {
      const path = '/background/my/history'
      if (this.$route.path === path) {
        this.$router.go(0)
        return
      }
      this.$router.push(path)
    },
    goToBackground() {
      const path = '/background'
      if (this.$route.path === path) {
        this.$router.go(0)
        return
      }
      this.$router.push(path)
    },
    goToTimeline() {
      const path = '/vod/timeline'
      if (this.$route.path === path) {
        this.$router.go(0)
        return
      }
      this.$router.push(path)
    },
    goToMessage() {
      const path = '/background/my/message'
      if (this.$route.path === path) {
        this.$router.go(0)
        return
      }
      this.$router.push(path)
    },
    goToPublish() {
      const path = '/background/post/video'
      if (this.$route.path === path) {
        this.$router.go(0)
        return
      }
      this.$router.push(path)
    }
  }
}
</script>

<style scoped>
@media screen and (max-width: 768px) {
}

.logo {
  width: 30px;
  position: relative;
}

.size {
  font-size: 16px;
}

.item {
  margin-top: 10px;
  margin-right: 10px;
}
</style>