调整页面

src/components/card/item-card.vue

@@ -24,7 +24,7 @@
           <router-link v-if="videoInfo.userId !== null" :to="`/u/${videoInfo.userId}`"> {{ videoInfo.username }}</router-link>
           <br>
           {{ videoInfo.viewCount }} 观看 <span v-html="`&nbsp;&nbsp;`" />
-          <span v-text="TimeUtil.timeToNowStrning(videoInfo.pubDate)"></span>
+          {{ videoInfo.commentCount }} 评论 <span v-html="`&nbsp;&nbsp;`" />
         </p>
       </v-col>
     </v-row>
@@ -36,7 +36,7 @@ import TimeUtil from '@/utils/time-util.vue'
 export default {
   name: 'ItemCard',
   props: {
-    item: {
+    video: {
       type: Object,
       default: () => {}
     }
@@ -44,7 +44,7 @@ export default {
   data() {
     return {
       TimeUtil,
-      videoInfo: this.item
+      videoInfo: this.video
     }
   },
   created() {

src/components/card/video-card.vue

@@ -26,7 +26,7 @@
           <br>
           {{ videoInfo.viewCount }} 观看 <span v-html="`&nbsp;&nbsp;`" />
           {{ videoInfo.commentCount }} 评论 <span v-html="`&nbsp;&nbsp;`" />
-          <!--<span v-text="TimeUtil.timeToNowStrning(videoInfo.pubDate)" />-->
+          <span v-text="TimeUtil.timeToNowStrning(videoInfo.pubDate)" />
         </p>
       </v-col>
     </v-row>
@@ -36,7 +36,7 @@
 <script>
 import TimeUtil from '@/utils/time-util.vue'
 export default {
-  name: 'VideoCard',
+  name: 'UserVideoCard',
   props: {
     video: {
       type: Object,

src/views/home/index.vue

@@ -15,7 +15,7 @@
 
 <script>
 import { videoRecommend } from '@/api/media/video'
-import VideoCared from '@/components/card/video-card.vue'
+import VideoCared from '@/components/card/item-card.vue'
 
 export default {
   name: 'Index',

src/views/home/mblog.vue

@@ -65,35 +65,23 @@
               </v-slide-group>
             </v-sheet>
           </v-col>
-          <v-col cols="12">
-            <!--<v-card
-              color="#385F73"
-              dark
-            >
-              <v-card-actions>
-                <v-btn text @click="selectFollowingStatus">
-                  状态
-                </v-btn>
-                <v-btn text @click="selectFollowingVideos">
-                  视频
-                </v-btn>
-                <v-btn text @click="selectFollowingAnswers">
-                  回答
-                </v-btn>
-              </v-card-actions>
-            </v-card>-->
-            <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-col>
-          <v-col
-            v-for="item in list"
-            :key="item.statusId"
-          >
-            <status-card :item="item" />
-          </v-col>
+          <div v-infinite-scroll="loadMore" infinite-scroll-disabled="true" infinite-scroll-distance="10">
+            <v-col cols="12">
+              <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-row
+                  v-for="item in cardList"
+                  :key="item.statusId"
+              >
+                <status-card v-if="cardType === 'status'" :item="item" />
+                <item-card v-if="cardType === 'video'" :video="item" />
+              </v-row>
+            </v-col>
+          </div>
         </v-row>
       </v-col>
       <v-col md="4">
@@ -187,12 +175,14 @@ import { mapActions, mapGetters } from 'vuex'
 import { pubStatus, statusRecommend } from '@/api/mblog/status'
 import { videoTimeline } from '@/api/media/video'
 import StatusCard from '@/components/card/status-card'
+import ItemCard from '@/components/card/item-card'
 import FilePondUploadImage from '@/components/upload/filepond-image.vue'
 
 export default {
   name: 'Home',
   components: {
     StatusCard,
+    ItemCard,
     FilePondUploadImage
   },
   data() {
@@ -201,16 +191,14 @@ export default {
         uploadIds: [],
         content: ''
       },
-      list: [],
+      cardType: null,
+      cardList: [],
       busy: false,
       page: 1,
-      model: null,
       followingUser: [
         { username: 'haha', avatar: '', userId: 10000 },
         { username: 'haha', avatar: '', userId: 10001 },
-        { username: 'haha', avatar: '', userId: 10002 },
-        { username: 'haha', avatar: '', userId: 10003 },
-        { username: 'haha', avatar: '', userId: 10004 }
+        { username: 'haha', avatar: '', userId: 10002 }
       ],
       showMessage: false,
       message: ''
@@ -227,7 +215,7 @@ export default {
     option: {
       handler: function(val, oldVal) {
         if (val && val.page === 1) {
-          this.list = []
+          this.cardList = []
         }
       },
       deep: true
@@ -235,9 +223,9 @@ export default {
     statuses: function(val, oldVal) {
       if (val) {
         if (this.option.page === 1) {
-          this.list = val
+          this.cardList = val
         } else {
-          this.list = [...this.list, ...val]
+          this.cardList = [...this.cardList, ...val]
         }
       }
     }
@@ -251,18 +239,48 @@ export default {
     ...mapActions([
       'getMyContent'
     ]),
+    setType(type) {
+      if (type === this.type) {
+        return
+      }
+
+      this.type = type
+      this.page = 1
+      if (type === 0) {
+        this.getFollowingStatus(this.page)
+        this.$vuetify.goTo(type)
+      } else if (type === 1) {
+        this.getFollowingVideos(this.page)
+        this.$vuetify.goTo(type)
+      } else if (type === 2) {
+        this.getFollowingAnswers(this.page)
+        this.$vuetify.goTo(type)
+      }
+    },
     loadMore: function() {
       this.busy = true
       setTimeout(() => {
-        this.getFollowingStatus(this.page)
+        if (this.cardType === 'status') {
+          this.getFollowingStatus(this.page)
+        } else if (this.cardType === 'video') {
+          this.getFollowingVideos(this.page)
+        } else if (this.cardType === 'answer') {
+          this.getFollowingAnswers(this.page)
+        }
       }, 1000)
     },
-    getFollowingVideos(page) {
-      videoTimeline(page)
+    getFollowingStatus(page) {
+      statusRecommend(page)
         .then(res => {
           if (res.code === 0) {
+            this.cardType = 'status'
+
+            if (page === 1) {
+              this.cardList = []
+            }
+
             for (const item of res.data.list) {
-              console.log(item)
+              this.cardList.push(item)
             }
             this.page += 1
             this.busy = false
@@ -276,12 +294,18 @@ export default {
           this.showMessage = true
         })
     },
-    getFollowingStatus(page) {
-      statusRecommend(page)
+    getFollowingVideos(page) {
+      videoTimeline(page)
         .then(res => {
           if (res.code === 0) {
+            this.cardType = 'video'
+
+            if (page === 1) {
+              this.cardList = []
+            }
+
             for (const item of res.data.list) {
-              this.list.push(item)
+              this.cardList.push(item)
             }
             this.page += 1
             this.busy = false
@@ -295,18 +319,13 @@ export default {
           this.showMessage = true
         })
     },
+    getFollowingAnswers(page) {
+      this.cardType = 'answer'
+      console.log('获取关注的用户回答')
+    },
     selectFollowingUser() {
       console.log('加载选中用户的状态...')
     },
-    selectFollowingStatus() {
-      this.getFollowingStatus(1)
-    },
-    selectFollowingVideos() {
-      this.getFollowingVideos(1)
-    },
-    selectFollowingAnswers() {
-      console.log('获取用户回答')
-    },
     uploadCallback(resp) {
       if (resp.code === 0) {
         this.statusPost.uploadIds.push(resp.data.uploadId)

src/views/home/search-result.vue

@@ -16,7 +16,7 @@
           v-for="item in videoList"
           :key="item.id"
         >
-          <ItemCard :item="item" />
+          <ItemCard :video="item" />
         </v-col>
       </v-row>
       <v-row justify="center">

src/views/user/home.vue

@@ -50,14 +50,14 @@
         </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-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>
+      <div id="top" />
       <div v-if="type === 4">
         <v-row>
           <v-col>
@@ -90,12 +90,13 @@
           </v-col>
         </v-row>
       </div>
-      <v-row v-if="type === 0">
+      <v-row>
         <v-col
-          v-for="item in videoList"
+          v-for="item in cardList"
           :key="item.id"
         >
-          <ItemCard :item="item" />
+          <status-card v-if="cardType === 'status'" :item="item" />
+          <video-card v-if="cardType === 'video'" :video="item" />
         </v-col>
       </v-row>
       <v-row justify="center">
@@ -114,13 +115,15 @@
 import { userVideoList } from '@/api/media/video'
 import { getUserInfo } from '@/api/user/account'
 import Power from '@/utils/check-power.vue'
-import ItemCard from '@/components/card/item-card.vue'
+import StatusCard from '@/components/card/status-card'
+import VideoCard from '@/components/card/video-card.vue'
 import TimeUtil from '@/utils/time-util.vue'
 
 export default {
   name: 'UserHome',
   components: {
-    ItemCard
+    StatusCard,
+    VideoCard
   },
   data() {
     return {
@@ -129,7 +132,8 @@ export default {
       loginUserId: 0,
       userId: 0,
       userInfo: {},
-      videoList: [],
+      cardType: null,
+      cardList: [],
       page: 1,
       currentPage: 1,
       size: 20,
@@ -155,7 +159,7 @@ export default {
     if (jumpPage !== undefined) {
       this.page = parseInt(jumpPage)
     }
-    this.getVideoList(this.page, this.userId)
+    this.getStatusList(this.page)
   },
   methods: {
     getUserInfo(userId) {
@@ -170,15 +174,26 @@ export default {
         console.error(error.message)
       })
     },
-    getStatusList() {
+    getStatusList(page) {
+      if (this.page === 1) {
+        this.cardList = []
+      }
+
+      this.cardType = 'status'
       console.log('获取状态列表')
     },
     getVideoList(page) {
       userVideoList(page, this.userId).then(res => {
         if (res.code === 0) {
+          this.cardType = 'video'
+
+          if (this.page === 1) {
+            this.cardList = []
+          }
+
           const pageList = res.data
           for (const item of pageList.list) {
-            this.videoList.push(item)
+            this.cardList.push(item)
           }
           this.currentPage = pageList.currentPage
           this.length = pageList.totalPages
@@ -189,8 +204,12 @@ export default {
         console.error(error.message)
       })
     },
-    getCommentList() {
-      console.log('获取评论列表')
+    getAnswerList(page) {
+      if (this.page === 1) {
+        this.cardList = []
+      }
+      this.cardType = 'answer'
+      console.log('获取回答列表')
     },
     pageChange(page) {
       this.page = page
@@ -212,13 +231,13 @@ export default {
       this.type = type
       this.page = 1
       if (type === 0) {
-        this.getVideoList(1)
+        this.getStatusList(1)
         this.$vuetify.goTo(type)
       } else if (type === 1) {
-        this.getStatusList()
+        this.getVideoList(1)
         this.$vuetify.goTo(type)
       } else if (type === 2) {
-        this.getCommentList()
+        this.getAnswerList(1)
         this.$vuetify.goTo(type)
       }
     },

src/views/video/video.vue

@@ -218,9 +218,9 @@
           <v-row no-gutters>
             <v-col
               v-for="item in videoList"
-              :key="item.id"
+              :key="item.videoId"
             >
-              <VideoCared :video="item" />
+              <item-card :video="item" />
             </v-col>
           </v-row>
         </v-col>
@@ -231,7 +231,7 @@
 
 <script>
 import { similarVideo, videoInfo } from '@/api/media/video'
-import VideoCared from '@/components/card/video-card.vue'
+import ItemCard from '@/components/card/item-card.vue'
 import VideoPlayer from '@/components/player/player.vue'
 import TimeUtil from '@/utils/time-util.vue'
 import Comment from '@/components/comment/video-comment.vue'
@@ -239,7 +239,7 @@ import Comment from '@/components/comment/video-comment.vue'
 export default {
   name: 'Video',
   components: {
-    VideoCared,
+    ItemCard,
     VideoPlayer,
     Comment
   },