调整优化评论组件

src/api/comment.js

@@ -1,7 +1,8 @@
 import { get, post } from '@/utils/request'
 
 const commentApi = {
-  videoCommentApi: '/api/comment/video'
+  videoCommentApi: '/api/comment/video',
+  videoChildCommentApi: '/api/comment/video/child'
 }
 
 // 发布评论
@@ -10,11 +11,11 @@ export function publishComment(data) {
 }
 
 // 获取评论
-export function getComment(videoId, page) {
-  return get(commentApi.videoCommentApi + '?prevId=1&nextId=2&videoId=' + videoId)
+export function getComment(videoId, pageNumber) {
+  return get(commentApi.videoCommentApi + '?videoId=' + videoId + '&pageNumber=' + pageNumber)
 }
 
 // 获取评论的子评论
-export function getChildComment(videoId, page) {
-  return get(commentApi.videoCommentApi + '?prevId=1&nextId=2&videoId=' + videoId)
+export function getChildComment(commentId, pageNumber) {
+  return get(commentApi.videoChildCommentApi + '?commentId=' + commentId + '&pageNumber=' + pageNumber)
 }

src/components/comment/index.vue

@@ -72,8 +72,8 @@
               layout="prev, pager, next"
               :page-size="pageSize"
               :current-page="currentPage"
-              :total="totalSize"
-              @current-change="handleCurrentChange"
+              :total="comment.total"
+              @current-change="(val) => handleCurrentChange(comment, val)"
             />
           </div>
         </template>
@@ -139,14 +139,15 @@ export default {
   },
   data() {
     return {
-      forms: [], // 显示在视图上的所有表单 id
-      cacheData: [],
       // 屏幕宽度, 为了控制分页条的大小
       screenWidth: document.body.clientWidth,
       currentPage: 1,
       pageSize: 10,
-      totalPages: 0,
-      totalSize: 0,
+      totalSize: 20,
+      dataList: [],
+      // ********************************************************************/
+      forms: [], // 显示在视图上的所有表单 id
+      cacheData: [],
       length: 0
     }
   },
@@ -205,6 +206,7 @@ export default {
         liked: false,
         reply: null,
         createAt: null,
+        total: 0,
         user: {
           userId: -1,
           name: '',
@@ -477,14 +479,14 @@ export default {
         this.$refs[ref][0].$el.scrollIntoView(false)
       })
     },
-    handleCurrentChange(currentPage) {
+    handleCurrentChange(comment, currentPage) {
       this.currentPage = currentPage
-      console.log('获取下一页子评论')
-
-      const parentId = 'dafadfsa'
-      getChildComment(parentId, this.currentPage).then(resp => {
+      this.getChildCommentWrapper(comment, this.currentPage)
+    },
+    getChildCommentWrapper(comment, pageNumber) {
+      getChildComment(comment.id, pageNumber).then(resp => {
         if (resp.code === 0) {
-          console.log(resp.data)
+          comment.children = resp.data.list
         } else {
           console.error(resp.msg)
         }

src/utils/request.js

@@ -56,11 +56,7 @@ instance.interceptors.response.use(
       switch (error.response.status) {
         case 401:
           // 返回 401 清除token信息并跳转到登陆页面
-          this.$notify.error({
-            message: '401 错误',
-            type: 'error',
-            duration: 3000
-          })
+          console.log('401 错误')
 
           Vue.$cookies.remove('token')
           store.commit('USER_LOGOUT')
@@ -68,33 +64,17 @@ instance.interceptors.response.use(
           removeAll()
           break
         case 404:
-          this.$notify.error({
-            message: '网络请求不存在',
-            type: 'error',
-            duration: 3000
-          })
+          console.log('404 错误')
           break
         default:
-          this.$notify.error({
-            message: error.response.data.message,
-            type: 'error',
-            duration: 3000
-          })
+          console.log(error.message)
       }
     } else {
       // 请求超时或者网络有问题
       if (error.message.includes('timeout')) {
-        this.$notify.error({
-          message: '请求超时！请检查网络是否正常',
-          type: 'error',
-          duration: 3000
-        })
+        console.log(error.message)
       } else {
-        this.$notify.error({
-          message: error.message,
-          type: 'error',
-          duration: 3000
-        })
+        console.log(error.message)
       }
     }
     return Promise.reject(error)

src/views/home/Audio.vue

@@ -49,7 +49,6 @@ export default {
       screenWidth: document.body.clientWidth,
       currentPage: 1,
       pageSize: 12,
-      totalPages: 0,
       totalSize: 0,
       dataList: [],
       showEmpty: true
@@ -74,7 +73,6 @@ export default {
       getAudios(page).then(resp => {
         if (resp.code === 0) {
           this.dataList = resp.data.list
-          this.totalPages = resp.totalPages
           this.totalSize = resp.data.totalSize
         }
       })

src/views/home/ShortVideo.vue

@@ -57,7 +57,6 @@ export default {
       screenWidth: document.body.clientWidth,
       currentPage: 1,
       pageSize: 12,
-      totalPages: 0,
       totalSize: 0,
       dataList: [],
       categoryId: 1,
@@ -109,7 +108,6 @@ export default {
         if (resp.code === 0) {
           const respData = resp.data
           this.dataList = respData.list
-          this.totalPages = respData.totalPages
           this.totalSize = respData.totalSize
         } else {
           this.$notify({

src/views/home/Video.vue

@@ -57,7 +57,6 @@ export default {
       screenWidth: document.body.clientWidth,
       currentPage: 1,
       pageSize: 12,
-      totalPages: 0,
       totalSize: 0,
       dataList: [],
       categoryId: 1,
@@ -109,7 +108,6 @@ export default {
         if (resp.code === 0) {
           const respData = resp.data
           this.dataList = respData.list
-          this.totalPages = respData.totalPages
           this.totalSize = respData.totalSize
         } else {
           this.$notify({

src/views/home/VideoPage.vue

@@ -110,7 +110,7 @@
             <div class="text item">
               <div ref="comment" :style="wrapStyle" class="comment-wrap">
                 <comment
-                  v-model="videoComments"
+                  v-model="dataList"
                   :user="currentUser"
                   :props="props"
                   :before-submit="submit"
@@ -118,6 +118,14 @@
                   :before-delete="deleteComment"
                   :upload-img="uploadImg"
                 />
+                <el-pagination
+                  :small="screenWidth <= 768"
+                  layout="prev, pager, next"
+                  :page-size="pageSize"
+                  :current-page="currentPage"
+                  :total="totalSize"
+                  @current-change="handleCurrentChange"
+                />
               </div>
             </div>
           </el-card>
@@ -220,7 +228,13 @@ export default {
   components: { SideVideoCard, VideoPlayer, UserAvatarCard, PermissionDeniedCard, comment },
   data() {
     return {
-      /** ********************************************************************/
+      // 屏幕宽度, 为了控制分页条的大小
+      screenWidth: document.body.clientWidth,
+      currentPage: 1,
+      pageSize: 20,
+      totalSize: 0,
+      dataList: [],
+      // ********************************************************************/
       wrapStyle: '',
       videoComments: [
         {
@@ -255,9 +269,11 @@ export default {
         liked: 'liked',
         reply: 'reply',
         createAt: 'createAt',
+        total: 'total',
         user: 'user'
       },
-      /** ********************************************************************/
+      // ********************************************************************/
+      videoId: null,
       video: null,
       user: null,
       similarVideos: [],
@@ -288,17 +304,11 @@ export default {
     }
   },
   created() {
-    const videoId = this.$route.params.id
-    this.accessCodeForm.contentId = videoId
-    this.getVideoInfo(videoId)
-    this.getSimilarVideos(videoId)
-
-    getComment(videoId, 1).then(resp => {
-      if (resp.code === 0) {
-        console.log(resp.data)
-        this.videoComments = resp.data.list
-      }
-    })
+    this.videoId = this.$route.params.id
+    this.accessCodeForm.contentId = this.videoId
+    this.getVideoInfo(this.videoId)
+    this.getSimilarVideos(this.videoId)
+    this.getCommentWrapper(this.currentPage)
   },
   mounted() {
     const header = this.$refs.header
@@ -307,6 +317,37 @@ export default {
     }
   },
   methods: {
+    // ****************************************************************************************************************
+    handleCurrentChange(currentPage) {
+      this.currentPage = currentPage
+      this.getCommentWrapper(currentPage)
+      // 回到顶部
+      scrollTo(0, 0)
+    },
+    getCommentWrapper(pageNumber) {
+      getComment(this.videoId, pageNumber).then(resp => {
+        if (resp.code === 0) {
+          const respData = resp.data
+          this.dataList = respData.list
+          this.totalSize = respData.totalSize
+        } else {
+          this.$notify({
+            title: '提示',
+            message: resp.msg,
+            type: 'error',
+            duration: 3000
+          })
+        }
+      }).catch(error => {
+        this.$notify({
+          title: '提示',
+          message: error.message,
+          type: 'warning',
+          duration: 3000
+        })
+      })
+    },
+    // ****************************************************************************************************************
     // 获取视频的详细信息
     getVideoInfo(videoId) {
       videoInfo(videoId).then(resp => {
@@ -506,10 +547,13 @@ export default {
       })
       add(Object.assign(res.newComment, { _id: new Date().getTime() }))
       if (res.parent !== null) {
-        console.log('parent: ', res.parent)
+        // console.log('parent: ', res.parent)
+      } else {
+        this.totalSize += 1
       }
-      console.log('addComment: ', res)
-      publishComment().then(resp => {
+
+      // console.log('addComment: ', res)
+      /* publishComment(res).then(resp => {
         if (resp.code === 0) {
           this.$notify.success({
             message: '评论已发布',
@@ -521,7 +565,7 @@ export default {
             duration: 3000
           })
         }
-      })
+      })*/
     },
     async like(comment) {
       const res = await new Promise((resolve) => {