Ana Sayfa Keşfet Yardım
Giriş Yap
reghao
/
tnbapp
1
0
Çatalla 0
Dosyalar Sorunlar 0 Değişiklik İstekleri 0 Wiki
Kaynağa Gözat

调整页面布局

reghao 3 yıl önce
ebeveyn
865a5b6fc7
işleme
46457fde62
9 değiştirilmiş dosya ile 811 ekleme ve 912 silme
Görünümü Böl Farklılık Durumunu Göster
  1. 4 3
      src/layout/components/head.vue
  2. 75 71
      src/layout/index.vue
  3. 0 184
      src/layout/studio.vue
  4. 0 164
      src/layout/user.vue
  5. 255 249
      src/router/index.js
  6. 58 0
      src/views/message/index.vue
  7. 88 5
      src/views/studio/index.vue
  8. 246 0
      src/views/user/home.vue
  9. 85 236
      src/views/user/index.vue

+ 4 - 3
src/layout/components/head.vue
Dosyayı Görüntüle 

@@ -46,7 +46,7 @@ export default {
 
     return {
 
       userInfo: {},
 
       headItem: [
 
-        { icon: 'mdi-account', text: '个人中心', link: '/u', id: 0 },
 
+        { icon: 'mdi-account', text: '个人中心', link: '/user', id: 0 },
 
         { icon: 'mdi-application', text: '稍后再看', link: '/user/playlist', id: 1 },
 
         { icon: 'mdi-application', text: '收藏列表', link: '/user/favlist', id: 2 },
 
         { icon: 'mdi-application', text: '历史记录', link: '/user/hislist', id: 3 },
 
@@ -61,8 +61,9 @@ export default {
 
   methods: {
 
     headClick(value) {
 
       if (value === 0) {
 
-        this.$router.push('/u/' + this.userInfo.userId)
 
-        location.replace('/u/' + this.userInfo.userId)
 
+        this.$router.push('/user')
 
+        /* this.$router.push('/user/' + this.userInfo.userId)
 
+        location.replace('/user/' + this.userInfo.userId)*/
 
       } else if (value === 1 && this.$route.path !== '/user/playlist') {
 
         this.$router.push('/user/playlist')
 
       } else if (value === 2 && this.$route.path !== '/user/favlist') {

+ 75 - 71
src/layout/index.vue
Dosyayı Görüntüle 

@@ -1,79 +1,75 @@
 
 <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>
 
     <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>
 
-      <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"
 
+      <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-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-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"
 
+            >
 
+              <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>
 
-      <router-view />
 
+      <v-container>
 
+        <!--根据 router/index.js 中的路由渲染页面-->
 
+        <router-view />
 
+      </v-container>
 
     </v-main>
 
     <!--
 
     <v-footer app>
 
@@ -84,7 +80,7 @@
 
             {{ new Date().getFullYear() }} — <strong>Vuetify</strong>
 
           </v-col>
 
         </v-footer>-->
 
-  </div>
 
+  </v-app>
 
 </template>
 
 
 <script>
 
@@ -101,12 +97,16 @@ export default {
 
     drawer: true,
 
     keyword: '',
 
     items: [
 
-      { icon: 'mdi-home', text: '首页', link: '/' },
 
-      { icon: 'mdi-history', text: '分区', link: '/channel' },
 
       { 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 },
 
@@ -120,6 +120,10 @@ export default {
 
     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)

+ 0 - 184
src/layout/studio.vue
Dosyayı Görüntüle 

@@ -1,184 +0,0 @@
 
-<template>
 
-  <div>
 
-    <v-navigation-drawer
 
-      v-model="drawer"
 
-      app
 
-      clipped
 
-    >
 
-      <router-link :to="`/u/${this.$store.state.user.userInfo.userId}`">
 
-        <v-row justify="center" align="center">
 
-          <v-col cols="12" style="text-align: center">
 
-            <v-avatar size="62">
 
-              <v-img :src="this.$store.state.user.userInfo.avatarUrl" />
 
-            </v-avatar>
 
-          </v-col>
 
-        </v-row>
 
-        <v-row justify="center" align="center">
 
-          <v-col cols="12" style="text-align: center">
 
-            {{ this.$store.state.user.userInfo.username }}
 
-          </v-col>
 
-        </v-row>
 
-      </router-link>
 
-      <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-divider />
 
-      <!-- TODO 具有特定角色才能查看 -->
 
-      <div v-if="CheckPower.checkPower(this.$store.state.user.userInfo) === 'admin'">
 
-        <!--<div v-if="CheckPower.checkPower(this.$store.state.user.userInfo) == 'user'">-->
 
-        <router-link v-for="item in adminList" :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>
 
-      </div>
 
-    </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
 
-        style="width: 300px"
 
-        class="ml-0 pl-4"
 
-      >
 
-        <span style="cursor:pointer" @click="goToHome()">{{ this.$store.state.webInfo.name }}</span>
 
-      </v-toolbar-title>
 
-      <!--      <v-text-field
 
-        flat
 
-        solo-inverted
 
-        hide-details
 
-        prepend-inner-icon="mdi-magnify"
 
-        label="搜索"
 
-        class="hidden-sm-and-down"
 
-      />-->
 
-      <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>
 
-  </div>
 
-</template>
 
-
 
-<script>
 
-import Head from '@/layout/components/head.vue'
 
-import CheckPower from '@/utils/check-power.vue'
 
-export default {
 
-  components: {
 
-    Head
 
-  },
 
-  data: () => ({
 
-    CheckPower,
 
-    drawer: true,
 
-    items: [
 
-      { icon: 'mdi-filmstrip-box-multiple', text: '稿件列表', link: '/studio/post' },
 
-      { icon: 'mdi-upload', text: '投稿', link: '/studio/upload' },
 
-      { icon: 'mdi-database', text: '数据统计', link: '/studio/statistics' }
 
-      /* { icon: 'mdi-account-multiple', text: '粉丝管理', link: '/studio/fans' },
 
-      { icon: 'mdi-cash-usd', text: '付费会员', link: '/vip' },
 
-      { icon: 'mdi-wrench', text: '自定义频道', link: '/user/setting' }*/
 
-    ],
 
-    adminList: [
 
-      { icon: 'mdi-playlist-edit', text: '分类管理', link: '/studio/admin/category' },
 
-      { icon: 'mdi-application', text: '邀请码', link: '/studio/admin/invitation' },
 
-      { icon: 'mdi-video', text: '待审核', link: '/studio/admin/examine' },
 
-      { icon: 'mdi-filmstrip-box-multiple', text: '投稿列表', link: '/studio/admin/article/list' },
 
-      { icon: 'mdi-file', text: '文件列表', link: '/studio/admin/file/list' },
 
-      { icon: 'mdi-account-multiple', text: '用户列表', link: '/studio/admin/userlist' },
 
-      { icon: 'mdi-square-edit-outline', text: '网页设置', link: '/studio/admin/websetting' }
 
-    ]
 
-  }),
 
-  mounted() {
 
-  },
 
-  created() {
 
-    this.$vuetify.theme.dark = this.$store.state.darkThemOpen
 
-  },
 
-  methods: {
 
-    goToLoginPage() {
 
-      this.$router.push('/login')
 
-    },
 
-    goToPublish() {
 
-      if (this.$route.path === '/studio/upload') {
 
-        return
 
-      }
 
-      this.$router.push('/studio/upload')
 
-    },
 
-    goToUserHome() {
 
-      this.$router.push('/user/' + this.$store.state.user.userInfo.userId)
 
-    },
 
-    goToHome() {
 
-      if (this.$route.path === '/') {
 
-        return
 
-      }
 
-      this.$router.push('/')
 
-    }
 
-  }
 
-}
 
-</script>
 
-
 
-<style scoped>
 
-a {
 
-  text-decoration: none;
 
-}
 
-</style>

+ 0 - 164
src/layout/user.vue
Dosyayı Görüntüle 

@@ -1,164 +0,0 @@
 
-<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-divider />
 
-      <!-- TODO 具有特定角色才能查看 -->
 
-      <div v-if="CheckPower.checkPower(this.$store.state.user.userInfo) === 'admin'">
 
-        <!--<div v-if="CheckPower.checkPower(this.$store.state.user.userInfo) == 'user'">-->
 
-        <router-link v-for="item in adminList" :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>
 
-      </div>
 
-    </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
 
-        style="width: 300px"
 
-        class="ml-0 pl-4"
 
-      >
 
-        <span style="cursor:pointer" @click="goToHome()">{{ this.$store.state.webInfo.name }}</span>
 
-      </v-toolbar-title>
 
-      <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>
 
-  </div>
 
-</template>
 
-
 
-<script>
 
-import Head from '@/layout/components/head.vue'
 
-import CheckPower from '@/utils/check-power.vue'
 
-export default {
 
-  components: {
 
-    Head
 
-  },
 
-  data: () => ({
 
-    CheckPower,
 
-    drawer: true,
 
-    items: [
 
-      /* { icon: 'mdi-account-multiple', text: '个人主页', link: '/u/home' }, */
 
-      { icon: 'mdi-account-multiple', text: '收藏列表', link: '/user/favlist' },
 
-      { icon: 'mdi-account-multiple', text: '稍后再看', link: '/user/playlist' },
 
-      { icon: 'mdi-account-multiple', text: '历史记录', link: '/user/hislist' },
 
-      { icon: 'mdi-account-multiple', text: '关注管理', link: '/user/follow' },
 
-      { icon: 'mdi-account-multiple', text: '小会员', link: '/user/vip' },
 
-      { icon: 'mdi-account-multiple', text: '登录历史', link: '/user/loginhistory' },
 
-      { icon: 'mdi-wrench', text: '账户设置', link: '/user/setting' }
 
-    ],
 
-    adminList: [
 
-      { icon: 'mdi-playlist-edit', text: '分类管理', link: '/studio/admin/category' },
 
-      { icon: 'mdi-application', text: '邀请码', link: '/studio/admin/invitation' },
 
-      { icon: 'mdi-video', text: '待审核', link: '/studio/admin/examine' },
 
-      { icon: 'mdi-filmstrip-box-multiple', text: '投稿列表', link: '/studio/admin/article/list' },
 
-      { icon: 'mdi-file', text: '文件列表', link: '/studio/admin/file/list' },
 
-      { icon: 'mdi-account-multiple', text: '用户列表', link: '/studio/admin/userlist' },
 
-      { icon: 'mdi-square-edit-outline', text: '网页设置', link: '/studio/admin/websetting' }
 
-    ]
 
-  }),
 
-  mounted() {
 
-  },
 
-  created() {
 
-    this.$vuetify.theme.dark = this.$store.state.darkThemOpen
 
-  },
 
-  methods: {
 
-    goToLoginPage() {
 
-      this.$router.push('/login')
 
-    },
 
-    goToPublish() {
 
-      if (this.$route.path === '/studio/upload') {
 
-        return
 
-      }
 
-      this.$router.push('/studio/upload')
 
-    },
 
-    goToUserHome() {
 
-      this.$router.push('/user/' + this.$store.state.user.userInfo.userId)
 
-    },
 
-    goToHome() {
 
-      if (this.$route.path === '/') {
 
-        return
 
-      }
 
-      this.$router.push('/')
 
-    }
 
-  }
 
-}
 
-</script>
 
-
 
-<style scoped>
 
-a {
 
-  text-decoration: none;
 
-}
 
-</style>

+ 255 - 249
src/router/index.js
Dosyayı Görüntüle 

@@ -1,7 +1,5 @@
 
 import Vue from 'vue'
 
 import VueRouter from 'vue-router'
 
-import Index from '@/layout/index.vue'
 
-import Home from '@/views/home/index.vue'
 
 // import checkPower from '@/utils/check-power.vue'
 
 
 Vue.use(VueRouter)
 
@@ -9,15 +7,267 @@ const routes = [
 
   {
 
     path: '/',
 
     name: 'Index',
 
-    component: Index,
 
+    component: () => import('@/layout/index.vue'),
 
     meta: { title: 'HerTube' },
 
     children: [
 
       {
 
         path: '/',
 
-        name: 'Index',
 
-        component: Home,
 
+        name: 'Home',
 
+        component: () => import('@/views/home/index.vue'),
 
         meta: { title: 'HerTube' }
 
       },
 
+      {
 
+        path: '/studio',
 
+        name: 'Studio',
 
+        component: () => import('@/views/studio/index.vue'),
 
+        meta: { title: 'Studio' },
 
+        children: [
 
+          {
 
+            path: '/studio',
 
+            name: 'Post',
 
+            component: () => import('@/views/studio/post.vue'),
 
+            meta: {
 
+              title: '稿件列表',
 
+              requireAuth: true
 
+            }
 
+          },
 
+          {
 
+            path: '/studio/upload',
 
+            name: 'Upload',
 
+            component: () => import('@/views/studio/upload.vue'),
 
+            meta: {
 
+              title: '投稿',
 
+              requireAuth: true
 
+            }
 
+          },
 
+          {
 
+            path: '/studio/statistics',
 
+            name: 'Statisticss',
 
+            component: () => import('@/views/studio/statistics.vue'),
 
+            meta: {
 
+              title: '数据统计',
 
+              requireAuth: true
 
+            }
 
+          },
 
+          {
 
+            path: '/studio/comment',
 
+            name: 'Comment',
 
+            component: () => import('@/views/studio/comment.vue'),
 
+            meta: {
 
+              title: '评论',
 
+              requireAuth: true
 
+            }
 
+          },
 
+          {
 
+            path: '/studio/admin/invitation',
 
+            name: 'invitation',
 
+            component: () => import('@/views/admin/invitation.vue'),
 
+            meta: {
 
+              title: '邀请码',
 
+              requireAuth: true
 
+            }
 
+          },
 
+          {
 
+            path: '/studio/admin/examine',
 
+            name: 'Examine',
 
+            component: () => import('@/views/admin/examine.vue'),
 
+            meta: {
 
+              title: '审核视频',
 
+              requireAuth: true
 
+            }
 
+          },
 
+          {
 
+            path: '/studio/admin/userlist',
 
+            name: 'Examine',
 
+            component: () => import('@/views/admin/user-list.vue'),
 
+            meta: {
 
+              title: '用户列表',
 
+              requireAuth: true
 
+            }
 
+          },
 
+          {
 
+            path: '/studio/admin/websetting',
 
+            name: 'Examine',
 
+            component: () => import('@/views/admin/web-setting.vue'),
 
+            meta: {
 
+              title: '网页设置',
 
+              requireAuth: true
 
+            }
 
+          },
 
+          {
 
+            path: '/studio/admin/category',
 
+            name: 'Examine',
 
+            component: () => import('@/views/admin/category.vue'),
 
+            meta: {
 
+              title: '分区设置',
 
+              requireAuth: true
 
+            }
 
+          }
 
+        ]
 
+      },
 
+      {
 
+        path: '/user',
 
+        name: 'User',
 
+        component: () => import('@/views/user/index.vue'),
 
+        meta: { title: '用户中心' },
 
+        children: [
 
+          {
 
+            path: '/u/:userId',
 
+            name: 'UserHome',
 
+            component: () => import('@/views/user/home.vue'),
 
+            meta: { title: '用户主页' }
 
+          },
 
+          {
 
+            path: '/user',
 
+            name: 'UserSetting',
 
+            component: () => import('@/views/user/setting.vue'),
 
+            meta: {
 
+              title: '账户设置',
 
+              requireAuth: true
 
+            }
 
+          },
 
+          {
 
+            path: '/user/setting',
 
+            name: 'UserSetting',
 
+            component: () => import('@/views/user/setting.vue'),
 
+            meta: {
 
+              title: '账户设置',
 
+              requireAuth: true
 
+            }
 
+          },
 
+          {
 
+            path: '/user/favlist',
 
+            name: 'UserFavlist',
 
+            component: () => import('@/views/user/favlist.vue'),
 
+            meta: { title: '收藏列表' }
 
+          },
 
+          {
 
+            path: '/user/playlist',
 
+            name: 'UserPlaylist',
 
+            component: () => import('@/views/user/playlist.vue'),
 
+            meta: { title: '稍后再看' }
 
+          },
 
+          {
 
+            path: '/user/hislist',
 
+            name: 'UserHislist',
 
+            component: () => import('@/views/user/hislist.vue'),
 
+            meta: { title: '历史记录' }
 
+          },
 
+          {
 
+            path: '/user/follow',
 
+            name: 'UserFollow',
 
+            component: () => import('@/views/user/follow.vue'),
 
+            meta: { title: '关注管理' }
 
+          },
 
+          {
 
+            path: '/user/vip',
 
+            name: 'UserVip',
 
+            component: () => import('@/views/user/vip.vue'),
 
+            meta: { title: '小会员' }
 
+          },
 
+          {
 
+            path: '/user/loginhistory',
 
+            name: 'LoginHistory',
 
+            component: () => import('@/views/user/LoginHistory.vue'),
 
+            meta: { title: '登录历史' }
 
+          }
 
+          /* {
 
+            path: '/user/studio',
 
+            name: 'StudioIndex',
 
+            component: () => import('@/views/studio/index.vue'),
 
+            meta: {
 
+              title: '个人中心',
 
+              requireAuth: true
 
+            }
 
+          },
 
+          {
 
+            path: '/user/upload',
 
+            name: 'Upload',
 
+            component: () => import('@/views/studio/upload.vue'),
 
+            meta: {
 
+              title: '投稿',
 
+              requireAuth: true
 
+            }
 
+          },
 
+          {
 
+            path: '/user/post',
 
+            name: 'Post',
 
+            component: () => import('@/views/studio/post.vue'),
 
+            meta: {
 
+              title: '稿件列表',
 
+              requireAuth: true
 
+            }
 
+          },
 
+          {
 
+            path: '/user/comment',
 
+            name: 'Comment',
 
+            component: () => import('@/views/studio/comment.vue'),
 
+            meta: {
 
+              title: '评论',
 
+              requireAuth: true
 
+            }
 
+          },
 
+          {
 
+            path: '/user/admin/invitation',
 
+            name: 'invitation',
 
+            component: () => import('@/views/admin/invitation.vue'),
 
+            meta: {
 
+              title: '邀请码',
 
+              requireAuth: true
 
+            }
 
+          },
 
+          {
 
+            path: '/user/admin/examine',
 
+            name: 'Examine',
 
+            component: () => import('@/views/admin/examine.vue'),
 
+            meta: {
 
+              title: '审核视频',
 
+              requireAuth: true
 
+            }
 
+          },
 
+          {
 
+            path: '/user/admin/userlist',
 
+            name: 'Examine',
 
+            component: () => import('@/views/admin/user-list.vue'),
 
+            meta: {
 
+              title: '用户列表',
 
+              requireAuth: true
 
+            }
 
+          },
 
+          {
 
+            path: '/user/admin/websetting',
 
+            name: 'Examine',
 
+            component: () => import('@/views/admin/web-setting.vue'),
 
+            meta: {
 
+              title: '网页设置',
 
+              requireAuth: true
 
+            }
 
+          },
 
+          {
 
+            path: '/user/admin/category',
 
+            name: 'Examine',
 
+            component: () => import('@/views/admin/category.vue'),
 
+            meta: {
 
+              title: '分区设置',
 
+              requireAuth: true
 
+            }
 
+          }*/
 
+        ]
 
+      },
 
+      {
 
+        path: '/message',
 
+        name: 'Message',
 
+        component: () => import('@/views/message/index.vue'),
 
+        meta: { title: 'Message' },
 
+        children: [
 
+          {
 
+            path: '/message',
 
+            name: 'Message',
 
+            component: () => import('@/views/user/index.vue'),
 
+            meta: { title: '消息主页' }
 
+          }
 
+        ]
 
+      },
 
       {
 
         path: '/live',
 
         name: 'Live',
 
@@ -84,250 +334,6 @@ const routes = [
 
       }
 
     ]
 
   },
 
-  {
 
-    path: '/u/:userId',
 
-    name: 'User',
 
-    component: () => import('@/layout/user.vue'),
 
-    meta: { title: '用户中心' },
 
-    children: [
 
-      {
 
-        path: '/u/:userId',
 
-        name: 'User',
 
-        component: () => import('@/views/user/index.vue'),
 
-        meta: { title: '用户主页' }
 
-      },
 
-      {
 
-        path: '/user/home',
 
-        name: 'UserHome',
 
-        component: () => import('@/views/user/index.vue'),
 
-        meta: { title: '用户主页' }
 
-      },
 
-      {
 
-        path: '/user/favlist',
 
-        name: 'UserFavlist',
 
-        component: () => import('@/views/user/favlist.vue'),
 
-        meta: { title: '收藏列表' }
 
-      },
 
-      {
 
-        path: '/user/playlist',
 
-        name: 'UserPlaylist',
 
-        component: () => import('@/views/user/playlist.vue'),
 
-        meta: { title: '稍后再看' }
 
-      },
 
-      {
 
-        path: '/user/hislist',
 
-        name: 'UserHislist',
 
-        component: () => import('@/views/user/hislist.vue'),
 
-        meta: { title: '历史记录' }
 
-      },
 
-      {
 
-        path: '/user/follow',
 
-        name: 'UserFollow',
 
-        component: () => import('@/views/user/follow.vue'),
 
-        meta: { title: '关注管理' }
 
-      },
 
-      {
 
-        path: '/user/vip',
 
-        name: 'UserVip',
 
-        component: () => import('@/views/user/vip.vue'),
 
-        meta: { title: '小会员' }
 
-      },
 
-      {
 
-        path: '/user/loginhistory',
 
-        name: 'LoginHistory',
 
-        component: () => import('@/views/user/LoginHistory.vue'),
 
-        meta: { title: '登录历史' }
 
-      },
 
-      {
 
-        path: '/user/setting',
 
-        name: 'UserSetting',
 
-        component: () => import('@/views/user/setting.vue'),
 
-        meta: {
 
-          title: '账户设置',
 
-          requireAuth: true
 
-        }
 
-      }
 
-      /* {
 
-        path: '/user/studio',
 
-        name: 'StudioIndex',
 
-        component: () => import('@/views/studio/index.vue'),
 
-        meta: {
 
-          title: '个人中心',
 
-          requireAuth: true
 
-        }
 
-      },
 
-      {
 
-        path: '/user/upload',
 
-        name: 'Upload',
 
-        component: () => import('@/views/studio/upload.vue'),
 
-        meta: {
 
-          title: '投稿',
 
-          requireAuth: true
 
-        }
 
-      },
 
-      {
 
-        path: '/user/post',
 
-        name: 'Post',
 
-        component: () => import('@/views/studio/post.vue'),
 
-        meta: {
 
-          title: '稿件列表',
 
-          requireAuth: true
 
-        }
 
-      },
 
-      {
 
-        path: '/user/comment',
 
-        name: 'Comment',
 
-        component: () => import('@/views/studio/comment.vue'),
 
-        meta: {
 
-          title: '评论',
 
-          requireAuth: true
 
-        }
 
-      },
 
-      {
 
-        path: '/user/admin/invitation',
 
-        name: 'invitation',
 
-        component: () => import('@/views/admin/invitation.vue'),
 
-        meta: {
 
-          title: '邀请码',
 
-          requireAuth: true
 
-        }
 
-      },
 
-      {
 
-        path: '/user/admin/examine',
 
-        name: 'Examine',
 
-        component: () => import('@/views/admin/examine.vue'),
 
-        meta: {
 
-          title: '审核视频',
 
-          requireAuth: true
 
-        }
 
-      },
 
-      {
 
-        path: '/user/admin/userlist',
 
-        name: 'Examine',
 
-        component: () => import('@/views/admin/user-list.vue'),
 
-        meta: {
 
-          title: '用户列表',
 
-          requireAuth: true
 
-        }
 
-      },
 
-      {
 
-        path: '/user/admin/websetting',
 
-        name: 'Examine',
 
-        component: () => import('@/views/admin/web-setting.vue'),
 
-        meta: {
 
-          title: '网页设置',
 
-          requireAuth: true
 
-        }
 
-      },
 
-      {
 
-        path: '/user/admin/category',
 
-        name: 'Examine',
 
-        component: () => import('@/views/admin/category.vue'),
 
-        meta: {
 
-          title: '分区设置',
 
-          requireAuth: true
 
-        }
 
-      }*/
 
-    ]
 
-  },
 
-  {
 
-    path: '/studio',
 
-    name: 'Studio',
 
-    component: () => import('@/layout/studio.vue'),
 
-    meta: { title: '创作中心' },
 
-    children: [
 
-      /* {
 
-        path: '/studio',
 
-        name: 'StudioIndex',
 
-        component: () => import('@/views/studio/index.vue'),
 
-        meta: {
 
-          title: '创作中心',
 
-          requireAuth: true
 
-        }
 
-      },*/
 
-      {
 
-        path: '/studio/upload',
 
-        name: 'Upload',
 
-        component: () => import('@/views/studio/upload.vue'),
 
-        meta: {
 
-          title: '投稿',
 
-          requireAuth: true
 
-        }
 
-      },
 
-      {
 
-        path: '/studio/post',
 
-        name: 'Post',
 
-        component: () => import('@/views/studio/post.vue'),
 
-        meta: {
 
-          title: '稿件列表',
 
-          requireAuth: true
 
-        }
 
-      },
 
-      {
 
-        path: '/studio/statistics',
 
-        name: 'Statisticss',
 
-        component: () => import('@/views/studio/statistics.vue'),
 
-        meta: {
 
-          title: '数据统计',
 
-          requireAuth: true
 
-        }
 
-      },
 
-      {
 
-        path: '/studio/comment',
 
-        name: 'Comment',
 
-        component: () => import('@/views/studio/comment.vue'),
 
-        meta: {
 
-          title: '评论',
 
-          requireAuth: true
 
-        }
 
-      },
 
-      {
 
-        path: '/studio/admin/invitation',
 
-        name: 'invitation',
 
-        component: () => import('@/views/admin/invitation.vue'),
 
-        meta: {
 
-          title: '邀请码',
 
-          requireAuth: true
 
-        }
 
-      },
 
-      {
 
-        path: '/studio/admin/examine',
 
-        name: 'Examine',
 
-        component: () => import('@/views/admin/examine.vue'),
 
-        meta: {
 
-          title: '审核视频',
 
-          requireAuth: true
 
-        }
 
-      },
 
-      {
 
-        path: '/studio/admin/userlist',
 
-        name: 'Examine',
 
-        component: () => import('@/views/admin/user-list.vue'),
 
-        meta: {
 
-          title: '用户列表',
 
-          requireAuth: true
 
-        }
 
-      },
 
-      {
 
-        path: '/studio/admin/websetting',
 
-        name: 'Examine',
 
-        component: () => import('@/views/admin/web-setting.vue'),
 
-        meta: {
 
-          title: '网页设置',
 
-          requireAuth: true
 
-        }
 
-      },
 
-      {
 
-        path: '/studio/admin/category',
 
-        name: 'Examine',
 
-        component: () => import('@/views/admin/category.vue'),
 
-        meta: {
 
-          title: '分区设置',
 
-          requireAuth: true
 
-        }
 
-      }
 
-    ]
 
-  },
 
   {
 
     path: '/login',
 
     name: 'Login',

+ 58 - 0
src/views/message/index.vue
Dosyayı Görüntüle 

@@ -0,0 +1,58 @@
 
+<template>
 
+  <v-container fill-height fluid style="padding-left: 24px; padding-right: 24px">
 
+    <v-row>
 
+      <v-col cols="2">
 
+        <v-sheet rounded="lg">
 
+          <v-list color="transparent">
 
+            <v-list-item
 
+              v-for="n in 5"
 
+              :key="n"
 
+              link
 
+            >
 
+              <v-list-item-content>
 
+                <v-list-item-title>
 
+                  List Item {{ n }}
 
+                </v-list-item-title>
 
+              </v-list-item-content>
 
+            </v-list-item>
 
+
 
+            <v-divider class="my-2" />
 
+
 
+            <v-list-item
 
+              link
 
+              color="grey lighten-4"
 
+            >
 
+              <v-list-item-content>
 
+                <v-list-item-title>
 
+                  Refresh
 
+                </v-list-item-title>
 
+              </v-list-item-content>
 
+            </v-list-item>
 
+          </v-list>
 
+        </v-sheet>
 
+      </v-col>
 
+
 
+      <v-col>
 
+        <v-sheet
 
+          min-height="70vh"
 
+          rounded="lg"
 
+        >
 
+          <!--  -->
 
+        </v-sheet>
 
+      </v-col>
 
+    </v-row>
 
+  </v-container>
 
+</template>
 
+
 
+<script>
 
+export default {
 
+  data: () => ({
 
+    links: [
 
+      'Dashboard',
 
+      'Messages',
 
+      'Profile',
 
+      'Updates'
 
+    ]
 
+  })
 
+}
 
+</script>

+ 88 - 5
src/views/studio/index.vue
Dosyayı Görüntüle 

@@ -1,15 +1,98 @@
 
 <template>
 
-  <v-container fill-height>
 
-    Studio 主页
 
+  <v-container>
 
+    <v-row>
 
+      <v-col cols="2">
 
+        <v-sheet rounded="lg">
 
+          <v-list color="transparent">
 
+            <router-link :to="`/u/${this.$store.state.user.userInfo.userId}`">
 
+              <v-row justify="center" align="center">
 
+                <v-col cols="12" style="text-align: center">
 
+                  <v-avatar size="62">
 
+                    <v-img :src="this.$store.state.user.userInfo.avatarUrl" />
 
+                  </v-avatar>
 
+                </v-col>
 
+              </v-row>
 
+              <v-row justify="center" align="center">
 
+                <v-col cols="12" style="text-align: center">
 
+                  {{ this.$store.state.user.userInfo.username }}
 
+                </v-col>
 
+              </v-row>
 
+            </router-link>
 
+            <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-divider class="my-2" />
 
+
 
+            <v-list-item
 
+              link
 
+              color="grey lighten-4"
 
+            >
 
+              <v-list-item-content>
 
+                <v-list-item-title>
 
+                  Refresh
 
+                </v-list-item-title>
 
+              </v-list-item-content>
 
+            </v-list-item>
 
+          </v-list>
 
+        </v-sheet>
 
+      </v-col>
 
+      <v-col>
 
+        <v-sheet
 
+          min-height="70vh"
 
+          rounded="lg"
 
+        >
 
+          <router-view />
 
+        </v-sheet>
 
+      </v-col>
 
+    </v-row>
 
   </v-container>
 
 </template>
 
 
 <script>
 
+import CheckPower from '@/utils/check-power.vue'
 
+
 
 export default {
 
-  name: 'StudioIndex'
 
+  data: () => ({
 
+    CheckPower,
 
+    drawer: true,
 
+    items: [
 
+      { icon: 'mdi-filmstrip-box-multiple', text: '稿件列表', link: '/studio' },
 
+      { icon: 'mdi-upload', text: '投稿', link: '/studio/upload' },
 
+      { icon: 'mdi-database', text: '数据统计', link: '/studio/statistics' }
 
+    ],
 
+    adminList: [
 
+      { icon: 'mdi-playlist-edit', text: '分类管理', link: '/studio/admin/category' },
 
+      { icon: 'mdi-application', text: '邀请码', link: '/studio/admin/invitation' },
 
+      { icon: 'mdi-video', text: '待审核', link: '/studio/admin/examine' },
 
+      { icon: 'mdi-filmstrip-box-multiple', text: '投稿列表', link: '/studio/admin/article/list' },
 
+      { icon: 'mdi-file', text: '文件列表', link: '/studio/admin/file/list' },
 
+      { icon: 'mdi-account-multiple', text: '用户列表', link: '/studio/admin/userlist' },
 
+      { icon: 'mdi-square-edit-outline', text: '网页设置', link: '/studio/admin/websetting' }
 
+    ]
 
+  }),
 
+  mounted() {
 
+  },
 
+  created() {
 
+  },
 
+  methods: {
 
+  }
 
 }
 
 </script>
 
 
-<style>
 
-
 
+<style scoped>
 
+  a {
 
+    text-decoration: none;
 
+  }
 
 </style>

+ 246 - 0
src/views/user/home.vue
Dosyayı Görüntüle 

@@ -0,0 +1,246 @@
 
+<template>
 
+  <div>
 
+    <!--<v-container fill-height fluid style="padding: 0px;">
 
+      <v-row>
 
+        <v-col style="padding: 0px;">
 
+          <v-img :src="userInfo.backgroundUrl" :aspect-ratio="5.98" />
 
+        </v-col>
 
+      </v-row>
 
+    </v-container>-->
 
+    <v-container fill-height>
 
+      <v-row align="center">
 
+        <v-col
 
+          cols="12"
 
+          md="8"
 
+        >
 
+          <v-avatar size="80" style="float: left;">
 
+            <v-img :src="userInfo.avatarUrl" />
 
+          </v-avatar>
 
+          <h2 style="margin-top: 20px;margin-left: 100px;">
 
+            {{ userInfo.username }}
 
+            <v-chip color="yellow" @click="goToVip()">
 
+              <!--<v-chip v-if="Power.checkPower(userInfo) === 'vip'" color="yellow" @click="goTOVIP()">-->
 
+              小会员
 
+            </v-chip>
 
+          </h2>
 
+        </v-col>
 
+        <v-col
 
+          v-if="userInfo && userInfo.userId !== userId"
 
+          cols="6"
 
+          md="4"
 
+          class="hidden-sm-and-down ml-0 pl-4"
 
+        >
 
+          <!--<v-btn color="primary" @click="goToSetting">自定义频道</v-btn> <v-btn color="primary" @click="goToStudio">创作中心</v-btn>-->
 
+          <v-btn color="primary">关注他</v-btn>
 
+        </v-col>
 
+      </v-row>
 
+      <v-row>
 
+        <v-col>
 
+          {{ userInfo.intro }}
 
+        </v-col>
 
+      </v-row>
 
+      <v-row>
 
+        <v-col
 
+          v-if="userInfo || userInfo.userId !== userId"
 
+          cols="6"
 
+          md="4"
 
+        >
 
+          关注数: {{ userInfo.followerCount }}
 
+          粉丝数: {{ userInfo.followerCount }}
 
+        </v-col>
 
+      </v-row>
 
+      <v-tabs>
 
+        <v-tab @click="setType(0)">视频</v-tab>
 
+        <v-tab @click="setType(1)">状态</v-tab>
 
+        <v-tab @click="setType(2)">评论</v-tab>
 
+      </v-tabs>
 
+    </v-container>
 
+    <v-divider />
 
+    <v-container fill-height>
 
+      <div id="top" />
 
+      <div v-if="type === 4">
 
+        <v-row>
 
+          <v-col>
 
+            用户名: {{ userInfo.username }}
 
+          </v-col>
 
+        </v-row>
 
+        <v-row>
 
+          <v-col>
 
+            简介： {{ userInfo.intro }}
 
+          </v-col>
 
+        </v-row>
 
+        <v-row>
 
+          <v-col>
 
+            视频总数： {{ userInfo.submitCount }}
 
+          </v-col>
 
+        </v-row>
 
+        <v-row>
 
+          <v-col>
 
+            粉丝数： {{ userInfo.followerCount }}
 
+          </v-col>
 
+        </v-row>
 
+        <v-row>
 
+          <v-col>
 
+            关注数： {{ userInfo.followingCount }}
 
+          </v-col>
 
+        </v-row>
 
+        <v-row>
 
+          <v-col>
 
+            加入时间： {{ TimeUtil.renderTime(userInfo.createTime) }}
 
+          </v-col>
 
+        </v-row>
 
+      </div>
 
+      <v-row v-if="type === 0">
 
+        <v-col
 
+          v-for="item in videoList"
 
+          :key="item.id"
 
+          cols="12"
 
+        >
 
+          <VideoList :video="item" />
 
+        </v-col>
 
+      </v-row>
 
+      <v-row justify="center">
 
+        <v-pagination
 
+          v-model="page"
 
+          :length="length"
 
+          @input="pageChange"
 
+        />
 
+      </v-row>
 
+    </v-container>
 
+  </div>
 
+</template>
 
+
 
+<script>
 
+import { userVideoList } from '@/api/media/video'
 
+import Power from '@/utils/check-power.vue'
 
+import VideoList from '@/components/player/video-list.vue'
 
+import TimeUtil from '@/utils/time-util.vue'
 
+
 
+export default {
 
+  name: 'UserHome',
 
+  components: {
 
+    VideoList
 
+  },
 
+  data() {
 
+    return {
 
+      TimeUtil,
 
+      Power,
 
+      userId: 0,
 
+      userInfo: {},
 
+      videoList: [],
 
+      page: 1,
 
+      size: 20,
 
+      length: 1,
 
+      totalCount: 0,
 
+      type: 0
 
+    }
 
+  },
 
+  created() {
 
+    this.userId = parseInt(this.$route.params.userId)
 
+    this.getUserInfo()
 
+    // this.getVideoList()
 
+  },
 
+  methods: {
 
+    getUserInfo() {
 
+      if (this.$store.state.user.userInfo !== null && this.$store.state.user.userInfo.userId === this.userId) {
 
+        this.userInfo = this.$store.state.user.userInfo
 
+        document.title = this.userInfo.username
 
+      } else {
 
+        /* fetch(`/api/user/info/${this.userId}`, {
 
+          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 => {
 
+            this.userInfo = json.data
 
+            document.title = json.data.username
 
+            if (json.data.id === -1) {
 
+              this.$router.push('/404')
 
+            }
 
+          })
 
+          .catch(e => {
 
+            return null
 
+          })*/
 
+      }
 
+    },
 
+    getStatusList() {
 
+      console.log('获取状态列表')
 
+    },
 
+    getVideoList() {
 
+      console.log('获取视频列表')
 
+      userVideoList(this.userId).then(res => {
 
+        if (res.code === 0) {
 
+          for (const item of res.data.list) {
 
+            this.videoList.push(item)
 
+          }
 
+          this.page += 1
 
+          this.busy = false
 
+        } else {
 
+          alert(res.data)
 
+        }
 
+      }).catch(error => {
 
+        console.error(error.message)
 
+      })
 
+
 
+      /* fetch(`/api/article/user/list/${this.userId}?page=${this.page}&limit=${this.size}&type=${this.type}`, {
 
+        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 => {
 
+          this.videoList = json.data.list
 
+          this.page = json.data.currPage
 
+          this.length = json.data.totalPage
 
+          this.totalCount = json.data.totalCount
 
+        })
 
+        .catch(e => {
 
+          return null
 
+        })*/
 
+    },
 
+    getCommentList() {
 
+      console.log('获取评论列表')
 
+    },
 
+    pageChange(page) {
 
+      this.page = page
 
+      this.getVideoList(this.type)
 
+      this.$vuetify.goTo(0)
 
+    },
 
+    setType(type) {
 
+      if (type === this.type) {
 
+        return
 
+      }
 
+
 
+      this.type = type
 
+      this.page = 1
 
+      if (type === 0) {
 
+        this.getVideoList()
 
+        this.$vuetify.goTo(type)
 
+      } else if (type === 1) {
 
+        this.getStatusList()
 
+        this.$vuetify.goTo(type)
 
+      } else if (type === 2) {
 
+        this.getCommentList()
 
+        this.$vuetify.goTo(type)
 
+      }
 
+    },
 
+    goToVip() {
 
+      this.$router.push('/vip')
 
+    },
 
+    goToStudio() {
 
+      this.$router.push('/studio')
 
+    },
 
+    goToSetting() {
 
+      this.$router.push('/user/setting')
 
+    }
 
+  }
 
+}
 
+</script>
 
+
 
+<style>
 
+</style>

+ 85 - 236
src/views/user/index.vue
Dosyayı Görüntüle 

@@ -1,252 +1,101 @@
 
 <template>
 
-  <div>
 
-    <!--<v-container fill-height fluid style="padding: 0px;">
 
-      <v-row>
 
-        <v-col style="padding: 0px;">
 
-          <v-img :src="userInfo.backgroundUrl" :aspect-ratio="5.98" />
 
-        </v-col>
 
-      </v-row>
 
-    </v-container>-->
 
-    <v-container fill-height>
 
-      <v-row align="center">
 
-        <v-col
 
-          cols="12"
 
-          md="8"
 
-        >
 
-          <v-avatar size="80" style="float: left;">
 
-            <v-img :src="userInfo.avatarUrl" />
 
-          </v-avatar>
 
-          <h2 style="margin-top: 20px;margin-left: 100px;">
 
-            {{ userInfo.username }}
 
-            <v-chip color="yellow" @click="goToVip()">
 
-              <!--<v-chip v-if="Power.checkPower(userInfo) === 'vip'" color="yellow" @click="goTOVIP()">-->
 
-              小会员
 
-            </v-chip>
 
-          </h2>
 
-        </v-col>
 
-        <v-col
 
-          v-if="userInfo && userInfo.userId !== userId"
 
-          cols="6"
 
-          md="4"
 
-          class="hidden-sm-and-down ml-0 pl-4"
 
-        >
 
-          <!--<v-btn color="primary" @click="goToSetting">自定义频道</v-btn> <v-btn color="primary" @click="goToStudio">创作中心</v-btn>-->
 
-          <v-btn color="primary">关注他</v-btn>
 
-        </v-col>
 
-      </v-row>
 
-      <v-row>
 
-        <v-col>
 
-          {{ userInfo.intro }}
 
-        </v-col>
 
-      </v-row>
 
-      <v-row>
 
-        <v-col
 
-          v-if="userInfo || userInfo.userId !== userId"
 
-          cols="6"
 
-          md="4"
 
-        >
 
-          关注数: {{ userInfo.followerCount }}
 
-          粉丝数: {{ userInfo.followerCount }}
 
-        </v-col>
 
-      </v-row>
 
-      <v-tabs>
 
-        <v-tab @click="setType(0)">视频</v-tab>
 
-        <v-tab @click="setType(1)">状态</v-tab>
 
-        <v-tab @click="setType(2)">评论</v-tab>
 
-      </v-tabs>
 
-    </v-container>
 
-    <v-divider />
 
-    <v-container fill-height>
 
-      <div id="top" />
 
-      <div v-if="type === 4">
 
-        <v-row>
 
-          <v-col>
 
-            用户名: {{ userInfo.username }}
 
-          </v-col>
 
-        </v-row>
 
-        <v-row>
 
-          <v-col>
 
-            简介： {{ userInfo.intro }}
 
-          </v-col>
 
-        </v-row>
 
-        <v-row>
 
-          <v-col>
 
-            视频总数： {{ userInfo.submitCount }}
 
-          </v-col>
 
-        </v-row>
 
-        <v-row>
 
-          <v-col>
 
-            粉丝数： {{ userInfo.followerCount }}
 
-          </v-col>
 
-        </v-row>
 
-        <v-row>
 
-          <v-col>
 
-            关注数： {{ userInfo.followingCount }}
 
-          </v-col>
 
-        </v-row>
 
-        <v-row>
 
-          <v-col>
 
-            加入时间： {{ TimeUtil.renderTime(userInfo.createTime) }}
 
-          </v-col>
 
-        </v-row>
 
-      </div>
 
-      <v-row v-if="type === 0">
 
-        <v-col
 
-          v-for="item in videoList"
 
-          :key="item.id"
 
-          cols="12"
 
+  <v-container>
 
+    <v-row>
 
+      <v-col cols="2">
 
+        <v-sheet rounded="lg">
 
+          <v-list color="transparent">
 
+            <router-link :to="`/u/${this.$store.state.user.userInfo.userId}`">
 
+              <v-row justify="center" align="center">
 
+                <v-col cols="12" style="text-align: center">
 
+                  <v-avatar size="62">
 
+                    <v-img :src="this.$store.state.user.userInfo.avatarUrl" />
 
+                  </v-avatar>
 
+                </v-col>
 
+              </v-row>
 
+              <v-row justify="center" align="center">
 
+                <v-col cols="12" style="text-align: center">
 
+                  {{ this.$store.state.user.userInfo.username }}
 
+                </v-col>
 
+              </v-row>
 
+            </router-link>
 
+            <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-divider class="my-2" />
 
+
 
+            <v-list-item
 
+              link
 
+              color="grey lighten-4"
 
+            >
 
+              <v-list-item-content>
 
+                <v-list-item-title>
 
+                  Refresh
 
+                </v-list-item-title>
 
+              </v-list-item-content>
 
+            </v-list-item>
 
+          </v-list>
 
+        </v-sheet>
 
+      </v-col>
 
+      <v-col>
 
+        <v-sheet
 
+          min-height="70vh"
 
+          rounded="lg"
 
         >
 
-          <VideoList :video="item" />
 
-        </v-col>
 
-      </v-row>
 
-      <v-row justify="center">
 
-        <v-pagination
 
-          v-model="page"
 
-          :length="length"
 
-          @input="pageChange"
 
-        />
 
-      </v-row>
 
-    </v-container>
 
-  </div>
 
+          <router-view />
 
+        </v-sheet>
 
+      </v-col>
 
+    </v-row>
 
+  </v-container>
 
 </template>
 
 
 <script>
 
-import { userVideoList } from '@/api/media/video'
 
-import Power from '@/utils/check-power.vue'
 
-import VideoList from '@/components/player/video-list.vue'
 
-import TimeUtil from '@/utils/time-util.vue'
 
+import CheckPower from '@/utils/check-power.vue'
 
 
 export default {
 
-  name: 'UserHome',
 
-  components: {
 
-    VideoList
 
-  },
 
-  data() {
 
-    return {
 
-      TimeUtil,
 
-      Power,
 
-      userId: 0,
 
-      userInfo: {},
 
-      videoList: [],
 
-      page: 1,
 
-      size: 20,
 
-      length: 1,
 
-      totalCount: 0,
 
-      type: 0
 
-    }
 
+  data: () => ({
 
+    CheckPower,
 
+    items: [
 
+      { icon: 'mdi-wrench', text: '账户设置', link: '/user/setting' },
 
+      { icon: 'mdi-account-multiple', text: '收藏列表', link: '/user/favlist' },
 
+      { icon: 'mdi-account-multiple', text: '稍后再看', link: '/user/playlist' },
 
+      { icon: 'mdi-account-multiple', text: '历史记录', link: '/user/hislist' },
 
+      { icon: 'mdi-account-multiple', text: '关注管理', link: '/user/follow' },
 
+      { icon: 'mdi-account-multiple', text: '小会员', link: '/user/vip' },
 
+      { icon: 'mdi-account-multiple', text: '登录历史', link: '/user/loginhistory' }
 
+    ],
 
+    adminList: [
 
+      { icon: 'mdi-playlist-edit', text: '分类管理', link: '/studio/admin/category' },
 
+      { icon: 'mdi-application', text: '邀请码', link: '/studio/admin/invitation' },
 
+      { icon: 'mdi-video', text: '待审核', link: '/studio/admin/examine' },
 
+      { icon: 'mdi-filmstrip-box-multiple', text: '投稿列表', link: '/studio/admin/article/list' },
 
+      { icon: 'mdi-file', text: '文件列表', link: '/studio/admin/file/list' },
 
+      { icon: 'mdi-account-multiple', text: '用户列表', link: '/studio/admin/userlist' },
 
+      { icon: 'mdi-square-edit-outline', text: '网页设置', link: '/studio/admin/websetting' }
 
+    ]
 
+  }),
 
+  mounted() {
 
   },
 
   created() {
 
-    this.userId = parseInt(this.$route.params.userId)
 
-    this.getUserInfo()
 
-    this.getVideoList()
 
   },
 
   methods: {
 
-    getUserInfo() {
 
-      if (this.$store.state.user.userInfo !== null && this.$store.state.user.userInfo.userId === this.userId) {
 
-        this.userInfo = this.$store.state.user.userInfo
 
-        document.title = this.userInfo.username
 
-      } else {
 
-        fetch(`/api/user/info/${this.userId}`, {
 
-          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 => {
 
-            this.userInfo = json.data
 
-            document.title = json.data.username
 
-            if (json.data.id === -1) {
 
-              this.$router.push('/404')
 
-            }
 
-          })
 
-          .catch(e => {
 
-            return null
 
-          })
 
-      }
 
-    },
 
-    getStatusList() {
 
-      console.log('获取状态列表')
 
-    },
 
-    getVideoList() {
 
-      console.log('获取视频列表')
 
-      userVideoList(this.userId).then(res => {
 
-        if (res.code === 0) {
 
-          for (const item of res.data.list) {
 
-            this.videoList.push(item)
 
-          }
 
-          this.page += 1
 
-          this.busy = false
 
-        } else {
 
-          this.$notify({
 
-            title: res.code,
 
-            message: res.msg,
 
-            type: 'warning',
 
-            duration: 500
 
-          })
 
-        }
 
-      })
 
-        .catch(error => {
 
-          console.error(error.message)
 
-        })
 
-
 
-      /* fetch(`/api/article/user/list/${this.userId}?page=${this.page}&limit=${this.size}&type=${this.type}`, {
 
-        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 => {
 
-          this.videoList = json.data.list
 
-          this.page = json.data.currPage
 
-          this.length = json.data.totalPage
 
-          this.totalCount = json.data.totalCount
 
-        })
 
-        .catch(e => {
 
-          return null
 
-        })*/
 
-    },
 
-    getCommentList() {
 
-      console.log('获取评论列表')
 
-    },
 
-    pageChange(page) {
 
-      this.page = page
 
-      this.getVideoList(this.type)
 
-      this.$vuetify.goTo(0)
 
-    },
 
-    setType(type) {
 
-      if (type === this.type) {
 
-        return
 
-      }
 
-
 
-      this.type = type
 
-      this.page = 1
 
-      if (type === 0) {
 
-        this.getVideoList()
 
-        this.$vuetify.goTo(type)
 
-      } else if (type === 1) {
 
-        this.getStatusList()
 
-        this.$vuetify.goTo(type)
 
-      } else if (type === 2) {
 
-        this.getCommentList()
 
-        this.$vuetify.goTo(type)
 
-      }
 
-    },
 
-    goToVip() {
 
-      this.$router.push('/vip')
 
-    },
 
-    goToStudio() {
 
-      this.$router.push('/studio')
 
-    },
 
-    goToSetting() {
 
-      this.$router.push('/user/setting')
 
-    }
 
   }
 
 }
 
 </script>
 
 
-<style>
 
+<style scoped>
 
+  a {
 
+    text-decoration: none;
 
+  }
 
 </style>