页面调整

src/layout/components/head.vue

@@ -46,12 +46,12 @@ export default {
     return {
       userInfo: {},
       headItem: [
-        { icon: 'mdi-account', text: '个人中心', link: '/studio', id: 0 },
-        { icon: 'mdi-application', text: '稍后再看', link: '/studio', id: 2 },
-        { icon: 'mdi-application', text: '收藏列表', link: '/studio', id: 3 },
-        { icon: 'mdi-application', text: '历史记录', link: '/studio', id: 4 },
-        { icon: 'mdi-cash-usd', text: '付费会员', link: '/vip', id: 5 },
-        { icon: 'mdi-logout', text: '退出', link: '/logout', id: 6 }
+        { icon: 'mdi-account', text: '个人中心', link: '/u', 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 },
+        { icon: 'mdi-application', text: '创作中心', link: '/studio', id: 4 },
+        { icon: 'mdi-logout', text: '退出', link: '/logout', id: 5 }
       ]
     }
   },
@@ -61,25 +61,16 @@ export default {
   methods: {
     headClick(value) {
       if (value === 0) {
-        // this.$router.push('/user/' + this.userInfo.userId)
-        // location.replace('/user/' + this.userInfo.userId)
-        if (this.$route.path === '/studio') {
-          return
-        }
-        this.$router.push('/studio')
-      } else if (value === 1) {
-        if (this.$route.path === '/studio') {
-          return
-        }
+        this.$router.push('/u/' + this.userInfo.userId)
+        location.replace('/u/' + 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') {
+        this.$router.push('/user/favlist')
+      } else if (value === 3 && this.$route.path !== '/user/hislist') {
+        this.$router.push('/user/hislist')
+      } else if (value === 4 && this.$route.path !== '/user/studio') {
         this.$router.push('/studio')
-      } else if (value === 3) {
-        this.$router.push('/vip')
-      } else if (value === 4) {
-        if (this.$route.path === '/user/setting') {
-          return
-        }
-        this.$router.push('/user/setting')
-        // location.replace('/user/setting')
       } else {
         this.logout()
       }
@@ -95,31 +86,6 @@ export default {
       }).catch(() => {
         console.log('用户登录失败')
       })
-
-      /* this.$store.commit('setUserInfo', null)
-      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
-        })*/
     }
   }
 }

src/layout/index.vue

@@ -35,16 +35,7 @@
       >
         <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="搜索"
-      />-->
-      <SearchInput/>
+      <SearchInput />
       <v-spacer />
       <v-tooltip bottom>
         <template v-slot:activator="{ on, attrs }">
@@ -81,7 +72,6 @@
         <v-icon left dark>mdi-account</v-icon> 登录
       </v-btn>
     </v-app-bar>
-
     <v-main>
       <router-view />
     </v-main>
@@ -102,7 +92,6 @@ import Head from '@/layout/components/head.vue'
 import SearchInput from '@/layout/components/search-input.vue'
 
 export default {
-  // TODO 增加分类页
   components: {
     Head,
     SearchInput
@@ -116,15 +105,13 @@ export default {
       { 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' },
-      { icon: 'mdi-playlist-play', text: '稍后再看', link: '/playlist' }
-
-    ],
+      { icon: 'mdi-trending-up', text: '知乎', link: '/zhihu' }
+    ]/*,
     headItem: [
-      { icon: 'mdi-head', text: '个人中心', link: '/studio', id: 0 },
+      { 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() {
   },
@@ -133,7 +120,7 @@ export default {
     this.$vuetify.theme.dark = this.$store.state.darkThemOpen
   },
   methods: {
-    headClick(value) {
+    /* headClick(value) {
       if (value === 0) {
         this.$router.push('/user/' + this.userInfo.userId)
       } else if (value === 1) {
@@ -141,7 +128,7 @@ export default {
       } else {
         this.logout()
       }
-    },
+    },*/
     logout() {
       // 调用 store/modules/user.js 中的 login 方法
       this.$store.dispatch('user/logout').then(() => {
@@ -153,30 +140,6 @@ export default {
       }).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')

src/layout/studio.vue

@@ -36,7 +36,7 @@
       </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) === '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
@@ -69,7 +69,7 @@
       >
         <span style="cursor:pointer" @click="goToHome()">{{ this.$store.state.webInfo.name }}</span>
       </v-toolbar-title>
-<!--      <v-text-field
+      <!--      <v-text-field
         flat
         solo-inverted
         hide-details
@@ -132,22 +132,21 @@ export default {
     CheckPower,
     drawer: true,
     items: [
-      { icon: 'mdi-application', text: '个人主页', link: '/studio' },
       { icon: 'mdi-filmstrip-box-multiple', text: '稿件列表', link: '/studio/post' },
       { icon: 'mdi-upload', text: '投稿', link: '/studio/upload' },
-      /* { icon: 'mdi-database', text: '数据分析', link: '/studio/data' },
-      { icon: 'mdi-account-multiple', text: '粉丝管理', link: '/studio/fans' },*/
+      { 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' }
+      { 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' },
-      { icon: 'mdi-playlist-edit', text: '分类管理', link: '/studio/admin/category' }
+      { icon: 'mdi-square-edit-outline', text: '网页设置', link: '/studio/admin/websetting' }
     ]
   }),
   mounted() {

src/layout/user.vue

@@ -0,0 +1,164 @@
+<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: '/user/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>

src/router/index.js

@@ -60,15 +60,6 @@ const routes = [
         component: () => import('@/views/video/video.vue'),
         meta: { title: '播放' }
       },
-      {
-        path: '/user/setting',
-        name: 'UserSetting',
-        component: () => import('@/views/user/setting.vue'),
-        meta: {
-          title: '个人设置',
-          requireAuth: true
-        }
-      },
       {
         path: '/vip',
         name: 'VIP',
@@ -85,12 +76,6 @@ const routes = [
           title: 'VIP'
         }
       },
-      {
-        path: '/user/:id',
-        name: 'User',
-        component: () => import('@/views/user/index.vue'),
-        meta: { title: '个人主页' }
-      },
       {
         path: '/live',
         name: 'live',
@@ -99,21 +84,167 @@ 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: '个人主页',
+          title: '创作中心',
           requireAuth: true
         }
-      },
+      },*/
       {
         path: '/studio/upload',
         name: 'Upload',
@@ -132,6 +263,15 @@ const routes = [
           requireAuth: true
         }
       },
+      {
+        path: '/studio/statistics',
+        name: 'Statisticss',
+        component: () => import('@/views/studio/statistics.vue'),
+        meta: {
+          title: '数据统计',
+          requireAuth: true
+        }
+      },
       {
         path: '/studio/comment',
         name: 'Comment',

src/views/studio/statistics.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    数据统计
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Statistics'
+}
+</script>
+
+<style>
+
+</style>

src/views/user/LoginHistory.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    登录历史
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UserLoginHistory'
+}
+</script>
+
+<style>
+
+</style>

src/views/user/favlist.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    收藏列表
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UserFavlist'
+}
+</script>
+
+<style>
+
+</style>

src/views/user/follow.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    关注管理
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UserFollow'
+}
+</script>
+
+<style>
+
+</style>

src/views/user/hislist.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    历史记录
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UserHislist'
+}
+</script>
+
+<style>
+
+</style>

src/views/user/index.vue

@@ -32,7 +32,7 @@
           <v-btn color="primary" @click="goToSetting">自定义频道</v-btn> <v-btn color="primary" @click="goToStudio">创作中心</v-btn>
         </v-col>-->
         <v-col
-          v-if="this.$store.state.user.userInfo == null || this.$store.state.user.userInfo.userId != id"
+          v-if="this.$store.state.user.userInfo == null || this.$store.state.user.userInfo.userId !== id"
           cols="6"
           md="4"
         >
@@ -82,13 +82,12 @@
           </v-col>
         </v-row>
       </div>
-      <v-row v-if="type != 4">
+      <v-row v-if="type !== 4">
         <v-col
           v-for="item in videoList"
           :key="item.id"
           cols="12"
         >
-
           <VideoList :video="item" />
         </v-col>
       </v-row>

src/views/user/pay.vue

@@ -0,0 +1,107 @@
+<template>
+  <v-container fill-height>
+    <v-row no-gutters justify="center" align="center">
+      <v-col
+        v-for="item in items"
+        :key="item.id"
+        v-resize="onResize"
+        :cols="cols"
+        style="margin-top: 48px;"
+      >
+        <v-card
+          class="mx-auto"
+          max-width="344"
+        >
+          <v-card-text>
+            <div> 时长： </div>
+            <p class="display-1 text--primary">
+              {{ item.time }}
+            </p>
+
+            <div class="text--primary">
+              <strong> ￥： {{ item.money }} </strong>
+            </div>
+          </v-card-text>
+          <v-card-actions>
+            <v-btn
+              text
+              color="deep-purple accent-4"
+              @click="dialog = true"
+            >
+              支付
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-col>
+    </v-row>
+    <v-dialog
+      v-model="dialog"
+      max-width="290"
+    >
+      <v-card>
+        <v-card-title class="headline">支付接口尚未完成</v-card-title>
+
+        <v-card-text>
+          如有需要，请联系网站管理
+        </v-card-text>
+
+        <v-card-actions>
+          <v-spacer />
+
+          <v-btn
+            color="green darken-1"
+            text
+            @click="dialog = false"
+          >
+            取消
+          </v-btn>
+
+          <v-btn
+            color="green darken-1"
+            text
+            @click="dialog = false"
+          >
+            同意
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </v-container>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dialog: false,
+      cols: 5,
+      items: [
+        { id: 0, money: 10, time: '一个月' },
+        { id: 1, money: 25, time: '三个月' },
+        { id: 2, money: 40, time: '半年' },
+        { id: 3, money: 60, time: '一年' }
+      ],
+      windowSize: {
+
+      }
+    }
+  },
+  created() {
+    this.windowSize = { x: window.innerWidth, y: window.innerHeight }
+  },
+  methods: {
+    onResize() {
+      this.windowSize = { x: window.innerWidth, y: window.innerHeight }
+      if (this.windowSize.x < 700) {
+        this.cols = 12
+      } else {
+        this.cols = 5
+      }
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

src/views/user/playlist.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    稍后再看
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UserPlaylist'
+}
+</script>
+
+<style>
+
+</style>

src/views/user/vip.vue

@@ -0,0 +1,74 @@
+<template>
+  <v-container fill-height>
+    <v-row v-if="this.$store.state.user.userInfo == null || checkPower.checkVip(this.$store.state.user.userInfo) === false" justify="center" align="center">
+      <v-col>
+        <v-card
+          class="mx-auto"
+          max-width="500"
+        >
+          <v-row justify="center">
+            <v-col cols="10" style="text-align: center">
+              <h3>开启VIP，享受无限观看次数。获取专属VIP标记！</h3>
+            </v-col>
+          </v-row>
+          <v-row justify="center">
+            <v-col cols="10" style="text-align: center">
+              <v-btn x-large outlined color="indigo" @click="()=>this.$router.push('/vip/pay')">开启</v-btn>
+            </v-col>
+          </v-row>
+
+        </v-card>
+      </v-col>
+    </v-row>
+    <v-row v-else justify="center" align="center">
+      <v-col>
+        <v-card
+          class="mx-auto"
+          max-width="400"
+        >
+          <v-img
+            class="white--text align-end"
+            height="200px"
+            src="https://cdn.vuetifyjs.com/images/cards/docks.jpg"
+          >
+            <v-card-title>你好，尊贵的VIP:  {{ this.$store.state.user.userInfo.username }}</v-card-title>
+          </v-img>
+
+          <v-card-text class="text--primary">
+            <div>VIP到期时间： <strong>{{ TimeUtil.renderTime(this.$store.state.user.userInfo.vipStopTime) }}</strong></div>
+            <div>剩余观看次数：<strong> ∞ </strong></div>
+          </v-card-text>
+
+          <v-card-actions>
+            <v-btn
+              color="orange"
+              text
+              @click="()=>this.$router.push('/vip/pay')"
+            >
+              续费
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-col>
+    </v-row>
+
+  </v-container>
+</template>
+
+<script>
+import checkPower from '@/utils/check-power.vue'
+import TimeUtil from '@/utils/time-util.vue'
+export default {
+  name: 'UserVip',
+  data() {
+    return {
+      checkPower,
+      TimeUtil
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>