reghao
/
tnbapp


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
							<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: 60px"
        >
          <p style="font-size: 20px; margin-bottom: 0;">
            <router-link :to="`/`" style="color: white;"> {{ this.$store.state.webInfo.name }} </router-link>
          </p>
        </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-trending-up', text: '状态', link: '/mblog' },*/
      { text: '状态', link: '/mblog' },
      { text: '视频', link: '/video' },
      { text: '音频', link: '/audio' },
      { text: '图片', link: '/image' },
      { text: '文章', link: '/article' }
    ]
  }),
  created() {
    this.userInfo = this.$store.state.user.userInfo
    this.$vuetify.theme.dark = this.$store.state.darkThemOpen
  },
  methods: {
    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')
    }
  }
}
</script>

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