reghao
/
tnbapp


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
							<template>
  <div>
    <v-navigation-drawer
      v-model="drawer"
      app
      clipped
    >
      <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-navigation-drawer>

    <v-app-bar
      :clipped-left="$vuetify.breakpoint.lgAndUp"
      app
      color="blue"
      dark
    >
      <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
      <v-toolbar-title
        class="hidden-sm-and-down ml-0 pl-4"
        style="width: 300px"
      >
        <span style="cursor:pointer" @click="goToHome()">{{ this.$store.state.webInfo.name }}</span>
      </v-toolbar-title>

      <v-text-field
        v-model="keyword"
        flat
        solo-inverted
        hide-details
        prepend-inner-icon="mdi-magnify"
        label="搜索"
      />
      <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"
          >
            <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-app-bar>

    <v-main>
      <router-view />
    </v-main>
    <!--
    <v-footer app>
          <v-col
            class="text-center"
            cols="12"
          >
            {{ new Date().getFullYear() }} — <strong>Vuetify</strong>
          </v-col>
        </v-footer>-->
  </div>
</template>

<script>
import Head from '@/layout/components/head.vue'

export default {
  // TODO 增加分类页
  components: {
    Head
  },
  data: () => ({
    userInfo: {},
    drawer: true,
    keyword: '',
    items: [
      { icon: 'mdi-home', text: '首页', link: '/' },
      { icon: 'mdi-trending-up', text: '状态', link: '/hot' },
      { icon: 'mdi-youtube-subscription', text: '直播', link: '/subscribe' },
      { icon: 'mdi-history', text: '历史记录', link: '/history' },
      { icon: 'mdi-playlist-play', text: '稍后再看', link: '/playlist' }

    ],
    headItem: [
      { icon: 'mdi-head', text: '个人中心', link: '/studio', 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: {
    headClick(value) {
      if (value === 0) {
        this.$router.push('/user/' + this.userInfo.id)
      } 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('用户登录失败')
      })

      /* fetch(`/api/logout`, {
        headers: {
          'Content-Type': 'application/json; charset=UTF-8',
          'X-XSRF-TOKEN': this.$cookies.get('XSRF-TOKEN')
        },
        method: 'GET',
        credentials: 'include'
      }).then(response => response.json())
        .then(json => {
          if (json.status === 200) {
            this.$store.commit('setUserInfo', null)
            if (this.$route.path === '/') {
              location.reload()
            } else {
              this.$router.push('/')
            }
          } else {
            //
          }
        })
        .catch(e => {
          return null
        })*/
    },
    goToLoginPage() {
      this.$router.push('/login')
    },
    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.id) {
        return
      }
      this.$router.push('/user/' + this.$store.state.user.userInfo.id)
    }
  }
}
</script>

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