update

src/router/index.js

@@ -13,6 +13,10 @@ const ImagePage = () => import('views/home/ImagePage')
 const ArticleIndex = () => import('views/home/Article')
 const Search = () => import('views/home/Search')
 const UserHome = () => import('views/user/Home')
+const UserVideo = () => import('views/user/Home')
+const UserImage = () => import('views/user/Home')
+const UserAudio = () => import('views/user/Home')
+const UserArticle = () => import('views/user/Home')
 const UserFollowing = () => import('views/user/Home')
 const UserFollower = () => import('views/user/Home')
 const ProfileIndex = () => import('views/user/Profile')
@@ -129,6 +133,26 @@ const routes = [
     name: 'UserHome',
     component: UserHome
   },
+  {
+    path: '/user/:id/video',
+    name: 'UserVideo',
+    component: UserVideo
+  },
+  {
+    path: '/user/:id/image',
+    name: 'UserImage',
+    component: UserImage
+  },
+  {
+    path: '/user/:id/audio',
+    name: 'UserAudio',
+    component: UserAudio
+  },
+  {
+    path: '/user/:id/article',
+    name: 'UserArticle',
+    component: UserArticle
+  },
   {
     path: '/user/:id/following',
     name: 'UserFollowing',

src/views/user/Home.vue

@@ -7,7 +7,7 @@
             <el-row>
               <el-col :md="1">
                 <el-avatar>
-                  <el-image :src="user.avatarUrl" />
+                  <el-image :src="user.avatarUrl"/>
                 </el-avatar>
               </el-col>
               <el-col :md="23">
@@ -36,13 +36,9 @@
               <span v-if="user.signature === undefined || user.signature === null">此用户没有签名</span>
             </el-row>
             <el-row>
-              <router-link target="_blank" :to="`/user/${user.userId}/following`">
-                <span class="el-icon-user">关注数: {{ user.followingCount }}</span>
-              </router-link>
+              <span class="el-icon-user">关注数: {{ user.followingCount }}</span>
               <span v-html="'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'" />
-              <router-link target="_blank" :to="`/user/${user.userId}/follower`">
-                <span class="el-icon-user">粉丝数: {{ user.followerCount }}</span>
-              </router-link>
+              <span class="el-icon-user">粉丝数: {{ user.followerCount }}</span>
             </el-row>
           </div>
         </el-card>
@@ -51,6 +47,16 @@
     <el-row>
       <el-col :md="24" class="movie-list">
         <el-tabs v-model="activeName" @tab-click='tabClick'>
+          <el-tab-pane name="status">
+            <span slot="label">
+              状态<el-badge :value="statusCount" :max="9999" class="item" type="warning"/>
+            </span>
+            <div v-if="activeName === 'status'">
+              <el-row v-for="(status, index) in statusList" :key="index" :md="16" :sm="12" :xs="12">
+                <status-card :status="status" />
+              </el-row>
+            </div>
+          </el-tab-pane>
           <el-tab-pane name="video">
             <span slot="label">
               视频<el-badge :value="videoCount" :max="9999" class="item" type="warning"/>
@@ -71,14 +77,24 @@
               </el-col>
             </div>
           </el-tab-pane>
-          <el-tab-pane name="status">
+          <el-tab-pane name="audio">
             <span slot="label">
-              状态<el-badge :value="statusCount" :max="9999" class="item" type="warning"/>
+              音频<el-badge :value="videoCount" :max="9999" class="item" type="warning"/>
             </span>
-            <div v-if="activeName === 'status'">
-              <el-row v-for="(status, index) in statusList" :key="index" :md="16" :sm="12" :xs="12">
-                <status-card :status="status" />
-              </el-row>
+            <div v-if="activeName === 'audio'">
+              <el-col v-for="(video, index) in videoList" :key="index" :md="6" :sm="12" :xs="12">
+                <video-card :video="video" />
+              </el-col>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane name="article">
+            <span slot="label">
+              文章<el-badge :value="videoCount" :max="9999" class="item" type="warning"/>
+            </span>
+            <div v-if="activeName === 'article'">
+              <el-col v-for="(video, index) in videoList" :key="index" :md="6" :sm="12" :xs="12">
+                <video-card :video="video" />
+              </el-col>
             </div>
           </el-tab-pane>
           <el-tab-pane name="following">
@@ -149,7 +165,7 @@ export default {
         icon: 'el-icon-plus',
         text: '关注'
       },
-      activeName: 'video',
+      activeName: 'status',
       currentPage: 1,
       pageSize: 12,
       totalSize: 0,
@@ -169,7 +185,28 @@ export default {
     getUserInfo(this.userId).then(res => {
       if (res.code === 0) {
         this.user = res.data
-        document.title = this.user.screenName + '的个人主页'
+        const path = this.$route.path
+        if (path.endsWith("video")) {
+          this.activeName = 'video'
+          document.title = this.user.screenName + '的视频'
+        } else if (path.endsWith("image")) {
+          this.activeName = 'image'
+          document.title = this.user.screenName + '的相册'
+        } else if (path.endsWith("audio")) {
+          this.activeName = 'audio'
+          document.title = this.user.screenName + '的音频'
+        } else if (path.endsWith("article")) {
+          this.activeName = 'article'
+          document.title = this.user.screenName + '的文章'
+        } else if (path.endsWith("following")) {
+          this.activeName = 'following'
+          document.title = this.user.screenName + '的关注'
+        } else if (path.endsWith("follower")) {
+          this.activeName = 'follower'
+          document.title = this.user.screenName + '的粉丝'
+        } else {
+          document.title = this.user.screenName + '的个人主页'
+        }
       }
     })
 
@@ -202,6 +239,11 @@ export default {
       }
     }
   },
+  watch: {
+    $route(){
+      this.$router.go()
+    }
+  },
   methods: {
     initPagination() {
       this.pageSize = 12
@@ -233,7 +275,68 @@ export default {
     },
     tabClick(tab) {
       this.activeName = tab.name
-      if (this.activeName === 'video') {
+      if (this.activeName === 'status') {
+        const path = '/user/' + this.userId
+        if (this.$route.path === path) {
+          this.$router.go(0)
+          return
+        }
+        this.$router.push(path)
+
+        /*this.currentPage = 1
+        this.lastId = 0
+        this.userStatusListWrapper(this.currentPage, this.userId, this.lastId)*/
+      } else if (this.activeName === 'video') {
+        this.goToTab(this.activeName)
+        /*this.currentPage = 1
+        this.lastId = 0
+        this.userVideoListWrapper(this.currentPage, this.userId, this.lastId)*/
+      } else if (this.activeName === 'image') {
+        this.goToTab(this.activeName)
+        /*this.currentPage = 1
+        this.lastId = 0
+        this.userVideoListWrapper(this.currentPage, this.userId, this.lastId)*/
+      } else if (this.activeName === 'audio') {
+        this.goToTab(this.activeName)
+        /*this.currentPage = 1
+        this.lastId = 0
+        this.userVideoListWrapper(this.currentPage, this.userId, this.lastId)*/
+      } else if (this.activeName === 'article') {
+        this.goToTab(this.activeName)
+        /*this.currentPage = 1
+        this.lastId = 0
+        this.userVideoListWrapper(this.currentPage, this.userId, this.lastId)*/
+      } else if (this.activeName === 'following') {
+        this.goToTab(this.activeName)
+        /*getUserFollowing(this.userId).then(res => {
+          if (res.code === 0) {
+            this.followingList = res.data
+          }
+        })*/
+      } else if (this.activeName === 'follower') {
+        this.goToTab(this.activeName)
+        /*getUserFollower(this.userId).then(res => {
+          if (res.code === 0) {
+            this.followerList = res.data
+          }
+        })*/
+      }
+    },
+    goToTab(activeName) {
+      const path = '/user/' + this.userId + '/' + activeName
+      if (this.$route.path === path) {
+        this.$router.go(0)
+        return
+      }
+      this.$router.push(path)
+    },
+    getData() {
+      this.activeName = tab.name
+      if (this.activeName === 'status') {
+        this.currentPage = 1
+        this.lastId = 0
+        this.userStatusListWrapper(this.currentPage, this.userId, this.lastId)
+      } else if (this.activeName === 'video') {
         this.currentPage = 1
         this.lastId = 0
         this.userVideoListWrapper(this.currentPage, this.userId, this.lastId)
@@ -241,10 +344,14 @@ export default {
         this.currentPage = 1
         this.lastId = 0
         this.userVideoListWrapper(this.currentPage, this.userId, this.lastId)
-      } else if (this.activeName === 'status') {
+      } else if (this.activeName === 'audio') {
         this.currentPage = 1
         this.lastId = 0
-        this.userStatusListWrapper(this.currentPage, this.userId, this.lastId)
+        this.userVideoListWrapper(this.currentPage, this.userId, this.lastId)
+      } else if (this.activeName === 'article') {
+        this.currentPage = 1
+        this.lastId = 0
+        this.userVideoListWrapper(this.currentPage, this.userId, this.lastId)
       } else if (this.activeName === 'following') {
         getUserFollowing(this.userId).then(res => {
           if (res.code === 0) {