xzrkz-web/src/common/components/Header.vue

<template>
  <div>
    <div class="top-line">
      <div class="top-line-content">
        <span>您好，欢迎访问内蒙古文化云！</span>
        <div class="login-register-btn" v-if="isLogin">
          <router-link to="/personCenter">
            <img :src="'http://192.168.0.113:7001/usercenter/route/file/downloadfile/false/' + userInfo.avatar" alt="" v-if="hasAvatar" class="user-avatar">
            <img src="@/assets/images/avatar.png" alt="" class="user-avatar" v-else>
            {{userInfo.name}}
          </router-link>
          <button @click="doLogout">退出登录</button>
        </div>
        <div class="login-register-btn" v-else>
          <router-link to="/login" class="login" >登录</router-link>
          <router-link to="/register" >注册</router-link>
        </div>
      </div>
    </div>
    <div class="header">
      <div class="logo-search">
        <router-link to="/" class="logo">
          <img src="@/assets/images/logo.png" alt="" class="logo-img">
        </router-link>
        <div class="search">
          <input type="text" class="search-input" placeholder="查找你感兴趣的内容" @keyup.enter="doSearch" v-model="keywords">
          <button class="search-btn" @click="doSearch">确定</button>
        </div>
      </div>
      <div class="nav">
        <ul class="nav-container">
          <li :class="{active: this.$route.path == '/'}">
            <router-link to="/" >
              首页
            </router-link>
          </li>
          <li :class="{active: this.$route.path == '/dynamics' || this.$route.path == '/dynamicsDetail/' + this.$route.params.id}">
            <router-link to="/dynamics" >
              文化动态
            </router-link>
          </li>
          <li :class="{active: this.$route.path == '/cultureActivity' || this.$route.path == '/cultureActivityDetail/' + this.$route.params.id}">
            <router-link to="/cultureActivity" >
              文化活动
            </router-link>
          </li>
          <li :class="{active: this.$route.path == '/cultureVenue' || this.$route.path == '/cultureVenueDetail/' + this.$route.params.id}">
            <router-link to="/cultureVenue" >
              文化场馆
            </router-link>
          </li>
          <li :class="{active: this.$route.path == '/artTrain' || this.$route.path == '/artTrainDetail/' + this.$route.params.id}">
            <router-link to="/artTrain" >
              艺术培训
            </router-link>
          </li>
          <!--<li :class="{active: this.$route.path == '/distribution' || this.$route.path == '/distributionDetail/' + this.$route.params.id}">-->
            <!--<router-link to="/distribution" >-->
              <!--预约配送-->
            <!--</router-link>-->
          <!--</li>-->
          <li :class="{active: this.$route.path == '/broadcast' || this.$route.path == '/broadcastDetail/' + this.$route.params.id}">
            <router-link to="/broadcast" >
              共享直播
            </router-link>
          </li>
          <li :class="{active: this.$route.path == '/resource' || this.$route.path == '/resourceDetail/' + this.$route.params.id}">
            <router-link to="/resource" >
              民间文学
            </router-link>
          </li>
          <li :class="{active: this.$route.path == '/volunteer' || this.$route.path == '/volunteerDetail/' + this.$route.params.id}">
            <router-link to="/volunteer" >
              志愿服务
            </router-link>
          </li>
          <li :class="{active: this.$route.path == '/exhibition' || this.$route.path == '/exhibitionDetail/' + this.$route.params.id}">
            <router-link to="/exhibition" >
              展览展示
            </router-link>
          </li>
          <li :class="{active: this.$route.path == '/travel' || this.$route.path == '/travelDetail/' + this.$route.params.id}">
            <router-link to="/travel" >
              文化旅游
            </router-link>
          </li>
          <li :class="{active: this.$route.path == '/intangibleHeritage' || this.$route.path == '/intangibleHeritageDetail/' + this.$route.params.id}">
            <router-link to="/intangibleHeritage" >
              非遗清单
            </router-link>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'Header',
  data () {
    return {
      keywords: '',
      isLogin: false,
      userInfo: {}
    }
  },
  computed: {
    hasAvatar: function () {
      return this.userInfo.avatar !== ''
    }
  },
  methods: {
    doSearch: function () {
      const { href } = this.$router.resolve({
        path: '/searchResult',
        query: {
          keywords: this.keywords
        }
      })
      // console.log(href)
      window.open(href)
    },
    checkLogin: function () {
      var self = this
      var token = localStorage.getItem('token')
      if (token) {
        axios.get('http://192.168.0.113:7001/usercenter/app/user/getappuser', {
          headers: {
            token: token
          }
        }).then(function (res) {
          if (res.status === 200) {
            self.userInfo = res.data
            self.isLogin = true
          } else {
            self.$router.push({
              path: 'login'
            })
          }
        })
      } else {
        self.isLogin = false
      }
    },
    doLogout: function () {
      localStorage.clear()
      this.checkLogin()
    }
  },
  mounted: function () {
    this.checkLogin()
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
@import "~styles/public.styl"
.top-line
  font-family 'zangwen'
  background $main-color
  height 40px
  line-height 40px
  .top-line-content
    width 1200px
    margin 0 auto
    span
      font-size 14px
      color #fff
    .login-register-btn
      float right
      a
        font-size 14px
        color #fff
        img
          width 30px
          height 30px
          margin-top 5px
          margin-right 5px
          border-radius 50%
        &.login
          margin-right 20px
      button
        background none
        border none
        outline none
        font-size 14px
        color #fff
        cursor pointer
.header
  width 1200px
  margin 0 auto
  .logo-search
    overflow hidden
    padding 10px 0
    width 100%
    .logo
      display block
      float left
      .logo-img
        width 340px
        height 88px
    .search
      float right
      font-size 0
      border-radius 5px
      overflow hidden
      margin-top 7px
      .search-input
        width 200px
        height 30px
        padding-left 30px
        padding-right 5px
        background #f7f7f7 url("~@/assets/images/search.png") no-repeat 7px center
        background-size 16px 16px
        box-sizing border-box
        border none
        outline none
        font-size 14px
        vertical-align top
        font-family 'zangwen'
      .search-btn
        font-family 'zangwen'
        border none
        background $main-color
        outline none
        width 70px
        height 30px
        color #fff
        cursor pointer
  .nav
    margin 10px 0
    .nav-container
      overflow hidden
      li
        float left
        width 100px
        line-height 30px
        cursor pointer
        text-align center
        font-family 'zangwen'
        border-bottom 2px solid transparent
        &:hover
          border-bottom 2px solid $main-color
        &.active
          border-bottom 2px solid $main-color
        a
          display block
</style>