完成对用户主页的重构

src/views/user/home.vue

@@ -128,15 +128,17 @@
 </template>
 
 <script>
-import { userAudioList } from '@/api/media/audio'
-import { userVideoList } from '@/api/media/video'
 import { getUserInfo } from '@/api/user/user'
-import { userStatus } from '@/api/mblog/status'
 import Power from '@/utils/check-power.vue'
 import TimeUtil from '@/utils/time-util.vue'
 
+import { userStatus } from '@/api/mblog/status'
 import StatusCard from '@/components/card/status-card'
+
+import { userVideoList } from '@/api/media/video'
 import VideoCard from '@/components/card/video-card.vue'
+
+import { userAudioList } from '@/api/media/audio'
 import AudioCard from '@/components/card/audio-card.vue'
 
 export default {

src/views/user/user-album.vue

@@ -10,11 +10,14 @@
 export default {
   data() {
     return {
+      userId: 0
     }
   },
   mounted() {
   },
   created() {
+    const userIdStr = this.$route.params.userId
+    this.userId = parseInt(userIdStr)
   },
   methods: {
   }

src/views/user/user-article.vue

@@ -10,11 +10,14 @@
 export default {
   data() {
     return {
+      userId: 0
     }
   },
   mounted() {
   },
   created() {
+    const userIdStr = this.$route.params.userId
+    this.userId = parseInt(userIdStr)
   },
   methods: {
   }

src/views/user/user-audio.vue

@@ -1,22 +1,78 @@
 <template>
   <v-container>
-    <p>
-      用户音频
-    </p>
+    <v-row>
+      <p>音频投稿列表</p>
+    </v-row>
+    <v-row>
+      <v-col
+        v-for="item in cardList"
+        :key="item.audioId"
+      >
+        <audio-card :item="item" />
+      </v-col>
+    </v-row>
+    <v-row justify="center">
+      <v-pagination
+        v-model="page"
+        :length="length"
+        :total-visible="7"
+        @input="pageChange"
+      />
+    </v-row>
   </v-container>
 </template>
 
 <script>
+import { userAudioList } from '@/api/media/audio'
+import AudioCard from '@/components/card/audio-card.vue'
+
 export default {
+  components: {
+    AudioCard
+  },
   data() {
     return {
+      userId: 0,
+      cardList: [],
+      currentPage: 1,
+      page: 1,
+      length: 0,
+      type: 0
     }
   },
   mounted() {
   },
   created() {
+    const userIdStr = this.$route.params.userId
+    this.userId = parseInt(userIdStr)
+    this.getAudioList(this.page)
   },
   methods: {
+    getAudioList(page) {
+      userAudioList(page, this.userId).then(res => {
+        if (res.code === 0) {
+          this.$vuetify.goTo(0)
+
+          const pageList = res.data
+          this.cardList.splice(0, this.cardList.length)
+          for (const item of pageList.list) {
+            this.cardList.push(item)
+          }
+          this.currentPage = pageList.currentPage
+          this.length = pageList.totalPages
+        } else {
+          alert(res.data)
+        }
+      }).catch(error => {
+        console.error(error.message)
+      })
+    },
+    pageChange(page) {
+      this.page = page
+      if (page !== this.currentPage) {
+        this.getAudioList(page)
+      }
+    }
   }
 }
 </script>

src/views/user/user-home.vue

@@ -64,10 +64,14 @@
     <v-divider />
     <v-divider />
     <v-divider />
-    <v-card>
-      <v-container fill-height>
-        <div id="top" />
-        <v-row v-if="cardType === 'video'">
+    <div v-if="type === 1">
+      <v-card
+        light
+      >
+        <v-card-title class="text-h5">
+          最近投稿
+        </v-card-title>
+        <v-row>
           <v-col
             v-for="item in cardList"
             :key="item.videoId"
@@ -75,44 +79,22 @@
             <video-card :video="item" />
           </v-col>
         </v-row>
-        <v-row v-if="cardType === 'status'">
-          <v-col
-            v-for="item in cardList"
-            :key="item.statusId"
-          >
-            <status-card :item="item" />
-          </v-col>
-        </v-row>
-        <v-row v-if="cardType === 'answer'">
-          <v-col
-            v-for="item in cardList"
-            :key="item.audioId"
-          >
-            <audio-card :item="item" />
-          </v-col>
-        </v-row>
-      </v-container>
-      <v-divider />
-    </v-card>
+      </v-card>
+    </div>
   </div>
 </template>
 
 <script>
-import { userVideoList } from '@/api/media/video'
 import { getUserInfo } from '@/api/user/user'
 import Power from '@/utils/check-power.vue'
 import TimeUtil from '@/utils/time-util.vue'
-
-import StatusCard from '@/components/card/status-card'
+import { userVideoList } from '@/api/media/video'
 import VideoCard from '@/components/card/video-card.vue'
-import AudioCard from '@/components/card/audio-card.vue'
 
 export default {
   name: 'UserHome',
   components: {
-    StatusCard,
-    VideoCard,
-    AudioCard
+    VideoCard
   },
   data() {
     return {
@@ -121,10 +103,9 @@ export default {
       loginUserId: 0,
       userId: 0,
       userInfo: {},
-      cardType: null,
       cardList: [],
       page: 1,
-      type: 0
+      type: 1
     }
   },
   created() {
@@ -149,20 +130,11 @@ export default {
 
       this.type = type
       if (type === 1) {
-        this.$router.push('/u/' + this.userId + '/post')
-        /* this.initPagerParam()
         this.getVideoList(1)
-        this.$vuetify.goTo(type)*/
       } else if (type === 2) {
         this.$router.push('/u/' + this.userId + '/status')
-        /* this.initPagerParam()
-        this.getStatusList(1)
-        this.$vuetify.goTo(type)*/
       } else if (type === 3) {
-        this.$router.push('/u/' + this.userId + '/post')
-        /* this.initPagerParam()
-        this.getAnswerList(1)
-        this.$vuetify.goTo(type)*/
+        this.$router.push('/u/' + this.userId + '/video')
       }
     },
     getUserInfo1(userId) {
@@ -180,7 +152,6 @@ export default {
     getVideoList(page) {
       userVideoList(page, this.userId).then(res => {
         if (res.code === 0) {
-          this.cardType = 'video'
           this.$vuetify.goTo(0)
 
           const pageList = res.data

src/views/user/user-status.vue

@@ -1,22 +1,78 @@
 <template>
   <v-container>
-    <p>
-      用户状态
-    </p>
+    <v-row>
+      <p>用户状态</p>
+    </v-row>
+    <v-row>
+      <v-col
+        v-for="item in cardList"
+        :key="item.statusId"
+      >
+        <status-card :item="item" />
+      </v-col>
+    </v-row>
+    <v-row justify="center">
+      <v-pagination
+        v-model="page"
+        :length="length"
+        :total-visible="7"
+        @input="pageChange"
+      />
+    </v-row>
   </v-container>
 </template>
 
 <script>
+import { userStatus } from '@/api/mblog/status'
+import StatusCard from '@/components/card/status-card'
+
 export default {
+  components: {
+    StatusCard
+  },
   data() {
     return {
+      userId: 0,
+      cardList: [],
+      currentPage: 1,
+      page: 1,
+      length: 0,
+      type: 0
     }
   },
   mounted() {
   },
   created() {
+    const userIdStr = this.$route.params.userId
+    this.userId = parseInt(userIdStr)
+    this.getStatusList(this.page)
   },
   methods: {
+    getStatusList(page) {
+      userStatus(this.userId, page).then(res => {
+        if (res.code === 0) {
+          this.$vuetify.goTo(0)
+
+          const pageList = res.data
+          this.cardList.splice(0, this.cardList.length)
+          for (const item of pageList.list) {
+            this.cardList.push(item)
+          }
+          this.currentPage = pageList.currentPage
+          this.length = pageList.totalPages
+        } else {
+          alert(res.data)
+        }
+      }).catch(error => {
+        console.error(error.message)
+      })
+    },
+    pageChange(page) {
+      this.page = page
+      if (page !== this.currentPage) {
+        this.getStatusList(page)
+      }
+    }
   }
 }
 </script>

src/views/user/user-video.vue

@@ -1,22 +1,79 @@
 <template>
   <v-container>
-    <p>
-      用户视频
-    </p>
+    <v-row>
+      <p>视频投稿列表</p>
+    </v-row>
+    <v-row>
+      <v-col
+        v-for="item in cardList"
+        :key="item.videoId"
+      >
+        <video-card :video="item" />
+      </v-col>
+    </v-row>
+    <v-row justify="center">
+      <v-pagination
+        v-model="page"
+        :length="length"
+        :total-visible="7"
+        @input="pageChange"
+      />
+    </v-row>
   </v-container>
 </template>
 
 <script>
+import { userVideoList } from '@/api/media/video'
+import VideoCard from '@/components/card/video-card.vue'
+
 export default {
+  components: {
+    VideoCard
+  },
   data() {
     return {
+      userId: 0,
+      cardList: [],
+      currentPage: 1,
+      page: 1,
+      length: 0,
+      type: 0
     }
   },
   mounted() {
   },
   created() {
+    const userIdStr = this.$route.params.userId
+    this.userId = parseInt(userIdStr)
+    this.getVideoList(this.page)
   },
   methods: {
+    getVideoList(page) {
+      userVideoList(page, this.userId).then(res => {
+        if (res.code === 0) {
+          this.cardType = 'video'
+          this.$vuetify.goTo(0)
+
+          const pageList = res.data
+          this.cardList.splice(0, this.cardList.length)
+          for (const item of pageList.list) {
+            this.cardList.push(item)
+          }
+          this.currentPage = pageList.currentPage
+          this.length = pageList.totalPages
+        } else {
+          alert(res.data)
+        }
+      }).catch(error => {
+        console.error(error.message)
+      })
+    },
+    pageChange(page) {
+      this.page = page
+      if (page !== this.currentPage) {
+        this.getVideoList(page)
+      }
+    }
   }
 }
 </script>