更新视频评论模块

src/api/comment.js

@@ -4,16 +4,17 @@ const commentApi = {
   videoCommentApi: '/api/comment/video'
 }
 
-// 获取视频评论
-export function getVideoComment(videoId) {
-  return get(commentApi.videoCommentApi + '?prevId=1&nextId=2&videoId=' + videoId)
+// 发布评论
+export function publishComment(data) {
+  return post(commentApi.videoCommentApi, data)
 }
 
-export function childComment(videoId) {
+// 获取评论
+export function getComment(videoId, page) {
   return get(commentApi.videoCommentApi + '?prevId=1&nextId=2&videoId=' + videoId)
 }
 
-// 发布视频评论
-export function publishVideoComment(data) {
-  return post(commentApi.videoCommentApi, data)
+// 获取评论的子评论
+export function getChildComment(videoId, page) {
+  return get(commentApi.videoCommentApi + '?prevId=1&nextId=2&videoId=' + videoId)
 }

src/components/comment/components/CommentForm.vue

@@ -95,7 +95,7 @@
             type="file"
             @change="handleChange"
             @click="onUpload = true"
-          />
+          >
         </div>
         <slot name="submitBtn">
           <button
@@ -119,31 +119,31 @@ export default {
   props: {
     placeholder: {
       type: String,
-      default: '输入评论...',
+      default: '输入评论...'
     },
     id: {
       type: [String, Number],
-      default: 'comment-root',
+      default: 'comment-root'
     },
     comment: {
       type: Object,
-      default: () => {},
+      default: () => {}
     },
     parent: {
       type: Object,
-      default: () => {},
+      default: () => {}
     },
     uploadImg: {
       type: Function,
-      default: null,
-    },
+      default: null
+    }
   },
   data() {
     return {
       focus: false, // * 聚焦状态
       value: '', // * 输入框值
       imgSrc: '', // * 粘贴的图片src
-      showEmojiSelector: false, // * 表情选择框状态
+      showEmojiSelector: false // * 表情选择框状态
     }
   },
   computed: {
@@ -159,9 +159,9 @@ export default {
       return this.isRoot
         ? 'comment-root'
         : this.isSub
-        ? 'reply sub-reply'
-        : 'reply'
-    },
+          ? 'reply sub-reply'
+          : 'reply'
+    }
   },
   mounted() {
     const richInput = this.$refs.input
@@ -255,7 +255,7 @@ export default {
         likes: 0,
         callback: () => {
           this.isRoot ? this.reset() : this.close()
-        },
+        }
       }
 
       if (!this.isSub) {
@@ -292,8 +292,8 @@ export default {
       if (this.showEmojiSelector) {
         this.showEmojiSelector = false
       }
-    },
-  },
+    }
+  }
 }
 </script>
 

src/components/comment/components/CommentItem.vue

@@ -12,10 +12,12 @@
         <div class="meta-box">
           <slot name="userMeta">
             <div class="user-popover-box">
-              <span v-if="comment.user">{{
-                comment.user.name +
-                  (comment.user.author === true ? '（作者）' : '')
-              }}</span>
+              <router-link target="_blank" :to="`/user/` + comment.user.userId">
+                <span v-if="comment.user">{{
+                  comment.user.name +
+                    (comment.user.author === true ? '（作者）' : '')
+                }}</span>
+              </router-link>
             </div>
           </slot>
         </div>

src/components/comment/index.js

@@ -1,6 +1,6 @@
 import JuejinComment from './index.vue'
 
-JuejinComment.install = function (Vue) {
+JuejinComment.install = function(Vue) {
   Vue.component(JuejinComment.name, JuejinComment)
 }
 

src/components/comment/index.vue

@@ -67,10 +67,13 @@
               </comment-item>
             </comment-list>
             <el-pagination
-              v-model="page"
-              :length="length"
-              :total-visible="7"
-              @input="pageChange"
+              :small="screenWidth <= 768"
+              hide-on-single-page
+              layout="prev, pager, next"
+              :page-size="pageSize"
+              :current-page="currentPage"
+              :total="totalSize"
+              @current-change="handleCurrentChange"
             />
           </div>
         </template>
@@ -83,7 +86,7 @@
 import CommentForm from './components/CommentForm'
 import CommentList from './components/CommentList'
 import CommentItem from './components/CommentItem'
-import { childComment } from '@/api/comment'
+import { getChildComment } from '@/api/comment'
 
 export default {
   name: 'JuejinComment',
@@ -138,8 +141,12 @@ export default {
     return {
       forms: [], // 显示在视图上的所有表单 id
       cacheData: [],
-      page: 1,
+      // 屏幕宽度, 为了控制分页条的大小
+      screenWidth: document.body.clientWidth,
       currentPage: 1,
+      pageSize: 10,
+      totalPages: 0,
+      totalSize: 0,
       length: 0
     }
   },
@@ -159,6 +166,15 @@ export default {
       }
     }
   },
+  mounted() {
+    // 当窗口宽度改变时获取屏幕宽度
+    window.onresize = () => {
+      return () => {
+        window.screenWidth = document.body.clientWidth
+        this.screenWidth = window.screenWidth
+      }
+    }
+  },
   created() {
     // 监听并执行一次
     const cancel = this.$watch('data', () => {
@@ -186,16 +202,15 @@ export default {
         imgSrc: '',
         children: [],
         likes: 0,
+        liked: false,
         reply: null,
         createAt: null,
         user: {
-          userId: 10001,
-          name: '芒果',
-          avatar: '//oss.reghao.cn/image/a/41e5094eac724efeb2675eea22dd4468.jpg'
-        },
-        liked: false
+          userId: -1,
+          name: '',
+          avatar: ''
+        }
       }
-
       // 赋值
       for (const key in originObj) {
         originObj[key] =
@@ -461,23 +476,20 @@ export default {
         this.$refs[ref][0].$el.scrollIntoView(false)
       })
     },
-    pageChange(page) {
-      if (page !== this.currentPage) {
-        this.currentPage = page
-        console.log('获取下一页子评论')
-      }
-    },
-    getChildComments(parentId) {
-      childComment(parentId, this.page).then(res => {
-        if (res.code === 0) {
-          this.page += 1
+    handleCurrentChange(currentPage) {
+      this.currentPage = currentPage
+      console.log('获取下一页子评论')
+
+      const parentId = 'dafadfsa'
+      getChildComment(parentId, this.currentPage).then(resp => {
+        if (resp.code === 0) {
+          console.log(resp.data)
         } else {
-          console.error(res.msg)
+          console.error(resp.msg)
         }
+      }).catch(error => {
+        console.error(error.message)
       })
-        .catch(error => {
-          console.error(error.message)
-        })
     }
   }
 }

src/views/home/VideoPage.vue

@@ -213,6 +213,7 @@ import { similarVideo, videoInfo, videoErrorReport, downloadVideo, cacheBiliVide
 import { collectItem } from '@/api/collect'
 import { getUserInfo } from '@/api/user'
 import { submitAccessCode } from '@/api/content'
+import { publishComment, getComment } from '@/api/comment'
 
 export default {
   name: 'VideoPage',
@@ -221,32 +222,43 @@ export default {
     return {
       /** ********************************************************************/
       wrapStyle: '',
-      videoComments: [],
+      videoComments: [
+        {
+          commentId: 114511,
+          content: 'this is comment content',
+          imageUrl: '//oss.reghao.cn/image/a/41e5094eac724efeb2675eea22dd4468.jpg',
+          children: [],
+          likes: 0,
+          liked: false,
+          reply: null,
+          createAt: 1700271326393,
+          user: {
+            userId: 10001,
+            name: '西瓜',
+            avatar: '//oss.reghao.cn/image/a/41e5094eac724efeb2675eea22dd4468.jpg'
+          }
+        }
+      ],
       currentUser: {
+        userId: 10002,
         name: '草莓',
-        avatar: '//picx.zhimg.com/v2-a2c89378a6332cbfed3e28b5ab84feb7.jpg'
+        avatar: '//picx.zhimg.com/v2-a2c89378a6332cbfed3e28b5ab84feb7.jpg',
+        author: true
       },
+      // 自定义组件中 comment 对象的字段名
       props: {
-        id: 114511,
-        content: 'this is comment content',
-        imgSrc: '//oss.reghao.cn/image/a/41e5094eac724efeb2675eea22dd4468.jpg',
-        children: [],
-        likes: 0,
-        liked: false,
-        reply: null,
+        id: 'commentId',
+        content: 'content',
+        imgSrc: 'imageUrl',
+        children: 'children',
+        likes: 'likes',
+        liked: 'liked',
+        reply: 'reply',
         createAt: 'createAt',
-        user: {
-          name: '芒果',
-          avatar: '//oss.reghao.cn/image/a/41e5094eac724efeb2675eea22dd4468.jpg'
-        }
+        user: 'user'
       },
       /** ********************************************************************/
       video: null,
-      videoProp: {
-        info: null,
-        autoPlay: false,
-        playlist: []
-      },
       user: null,
       similarVideos: [],
       isCollected: false,
@@ -280,6 +292,13 @@ export default {
     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
+      }
+    })
   },
   mounted() {
     const header = this.$refs.header
@@ -293,8 +312,6 @@ export default {
       videoInfo(videoId).then(resp => {
         if (resp.code === 0) {
           // this.showAccessCodeDialog = true
-          this.videoProp = resp.data
-
           this.video = resp.data
           document.title = resp.data.title
           this.userId = resp.data.userId
@@ -479,6 +496,8 @@ export default {
         })
       })
     },
+    // ****************************************************************************************************************
+    // 评论
     async submit(newComment, parent, add) {
       const res = await new Promise((resolve) => {
         setTimeout(() => {
@@ -486,7 +505,23 @@ export default {
         }, 300)
       })
       add(Object.assign(res.newComment, { _id: new Date().getTime() }))
+      if (res.parent !== null) {
+        console.log('parent: ', res.parent)
+      }
       console.log('addComment: ', res)
+      publishComment().then(resp => {
+        if (resp.code === 0) {
+          this.$notify.success({
+            message: '评论已发布',
+            duration: 3000
+          })
+        } else {
+          this.$notify.warning({
+            message: '评论发布失败',
+            duration: 3000
+          })
+        }
+      })
     },
     async like(comment) {
       const res = await new Promise((resolve) => {
@@ -500,9 +535,7 @@ export default {
     async uploadImg({ file, callback }) {
       const res = await new Promise((resolve, reject) => {
         const reader = new FileReader()
-
         reader.readAsDataURL(file)
-
         reader.onload = () => {
           resolve(reader.result)
         }
@@ -511,7 +544,6 @@ export default {
           reject(reader.error)
         }
       })
-
       callback(res)
       console.log('uploadImg： ', res)
     },
@@ -523,6 +555,7 @@ export default {
       })
       console.log('deleteComment: ', res)
     }
+    // ****************************************************************************************************************
   }
 }
 </script>