reghao
/
tnbapp


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
							<template>
  <v-app>
    <v-app-bar
      app
      color="blue"
      dark
    >
      <v-container class="py-0 fill-height">
        <v-toolbar-title
          class="hidden-sm-and-down ml-0 pl-4"
          style="width: 150px"
        >
          <span style="cursor:pointer" @click="goToHome()">{{ this.$store.state.webInfo.name }}</span>
        </v-toolbar-title>
        <router-link v-for="item in items" :key="item.text" :to="item.link">
          <v-list-item
            link
          >
            <v-list-item-action>
              <v-icon>{{ item.icon }}</v-icon>
            </v-list-item-action>
            <v-list-item-content>
              <v-list-item-title>
                {{ item.text }}
              </v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </router-link>
        <v-spacer />
        <SearchInput />
        <v-spacer />
        <v-tooltip bottom>
          <template v-slot:activator="{ on, attrs }">
            <v-btn
              icon
              v-bind="attrs"
              v-on="on"
              @click="goToPublish"
            >
              <v-icon>mdi-video-plus</v-icon>
            </v-btn>
          </template>
          <span>发布</span>
        </v-tooltip>
        <v-tooltip bottom>
          <template v-slot:activator="{ on, attrs }">
            <v-btn
              icon
              v-bind="attrs"
              v-on="on"
              @click="goToMessage"
            >
              <v-icon>mdi-bell</v-icon>
            </v-btn>
          </template>
          <span>通知</span>
        </v-tooltip>
        <Head v-if="this.$store.state.user.userInfo" />
        <!-- 未登录 -->
        <v-btn
          v-if="this.$store.state.user.userInfo == null"
          outlined
          @click="goToLoginPage"
        >
          <v-icon left dark>mdi-account</v-icon> 登录
        </v-btn>
      </v-container>
    </v-app-bar>
    <v-main>
      <v-container>
        <!--根据 router/index.js 中的路由渲染页面-->
        <router-view />
      </v-container>
    </v-main>
    <!--
    <v-footer app>
          <v-col
            class="text-center"
            cols="12"
          >
            {{ new Date().getFullYear() }} — <strong>Vuetify</strong>
          </v-col>
        </v-footer>-->
  </v-app>
</template>

<script>
import Head from '@/layout/components/head.vue'
import SearchInput from '@/layout/components/search-input.vue'

export default {
  components: {
    Head,
    SearchInput
  },
  data: () => ({
    userInfo: {},
    drawer: true,
    keyword: '',
    items: [
      { icon: 'mdi-youtube-subscription', text: '直播', link: '/live' },
      { icon: 'mdi-trending-up', text: '微博', link: '/mblog' },
      { icon: 'mdi-trending-up', text: '知乎', link: '/zhihu' }
    ],
    links: [
      '直播',
      '微博',
      '知乎'
    ]
    /*,
    headItem: [
      { icon: 'mdi-head', text: '个人中心', link: '/user/:userId', id: 0 },
      { icon: 'mdi-wrench', text: '创作中心', link: '/studio', id: 1 },
      { icon: 'mdi-logout', text: '退出', link: '/logout', id: 2 }
    ]*/
  }),
  mounted() {
  },
  created() {
    this.userInfo = this.$store.state.user.userInfo
    this.$vuetify.theme.dark = this.$store.state.darkThemOpen
  },
  methods: {
    goToLink() {
      console.log('跳转到页面')
      // this.$router.push('/studio1')
    },
    /* headClick(value) {
      if (value === 0) {
        this.$router.push('/user/' + this.userInfo.userId)
      } else if (value === 1) {
        this.$router.push('/studio')
      } else {
        this.logout()
      }
    },*/
    logout() {
      // 调用 store/modules/user.js 中的 login 方法
      this.$store.dispatch('user/logout').then(() => {
        if (this.$route.path === '/') {
          location.reload()
        } else {
          this.$router.push('/')
        }
      }).catch(() => {
        console.log('用户登录失败')
      })
    },
    goToLoginPage() {
      this.$router.push('/login')
    },
    goToMessage() {
      this.$router.push('/message')
    },
    goToPublish() {
      this.$router.push('/studio/upload')
    },
    goToHome() {
      if (this.$route.path === '/') {
        return
      }
      this.$router.push('/')
    },
    goToUserHome() {
      if (this.$route.path === '/user/' + this.$store.state.user.userInfo.userId) {
        return
      }
      this.$router.push('/user/' + this.$store.state.user.userInfo.userId)
    }
  }
}
</script>

<style scoped>
a {
  text-decoration: none;
}
</style>