更新视频评论组件

src/api/comment.js

@@ -0,0 +1,15 @@
+import { get, post } from '@/utils/request'
+
+const videoApi = {
+  videoCommentApi: '/api/comment/video',
+}
+
+// 获取视频评论
+export function getVideoComment(videoId) {
+  return get(videoApi.videoCommentApi + '?prevId=1&nextId=2&videoId=' + videoId)
+}
+
+// 发布视频评论
+export function publishVideoComment(data) {
+  return post(videoApi.videoCommentApi, data)
+}

src/api/video.js

@@ -10,7 +10,6 @@ const videoApi = {
   videoUrlApi: '/api/content/video/url',
   videoSubmitApi: '/api/content/video/submit',
   userVideoListApi: '/api/content/video/user',
-  videoCommentApi: '/api/comment/video',
 
   playerRecordApi: '/api/media/video/play/record',
   userRecentlyVideoListApi: '/api/media/video/post/user/recently',
@@ -74,8 +73,3 @@ export function userRecentlyVideoList(userId) {
 export function getDisplayedVideoList() {
   return get(videoApi.testVideoApi)
 }
-
-// 视频评论
-export function getVideoComment(videoId) {
-  return get(videoApi.videoCommentApi + '?prevId=1&nextId=2&videoId=' + videoId)
-}

src/components/comment/Comment.vue

@@ -8,7 +8,7 @@
     <el-row type="flex" align="middle" class="content">
       <el-col :span="2">
         <img
-          v-if="!$user"
+          v-if="!user"
           class="u-avatar"
           src="@/assets/img/icon/avatar.png"
           alt=""
@@ -20,14 +20,14 @@
           v-model="content"
           type="textarea"
           :rows="3"
-          :disabled="!$user"
-          :placeholder="$user ? '请输入评论' : '登陆后才可评论！'"
+          :disabled="!user"
+          :placeholder="user ? '请输入评论' : '登陆后才可评论！'"
         />
       </el-col>
       <el-col :span="6" :offset="1">
         <el-button
           type="primary"
-          :disabled="!$user"
+          :disabled="!user"
           @click.native="addComment"
         >发布评论</el-button>
       </el-col>
@@ -47,16 +47,16 @@
       <el-col :span="21" :offset="1">
         <div class="u-nickname">{{ comment.nickname }}</div>
         <span class="time">{{ getDate(comment.date) }}</span>
-        <!--	<el-popover
+        	<el-popover
 								placement="top"
 								width="150"
 								trigger="hover">
-					<p>确定删除该条评论吗？</p>
+					<p>确定删除评论？</p>
 					<div style="text-align: right; margin: 0">
-						<el-button type="primary" size="mini" @click="deleteComment(comment.commentId)">确定</el-button>
+						<el-button type="plain" size="mini" @click="deleteComment(comment.commentId)">确定</el-button>
 					</div>
-					<i class="el-icon-delete" slot="reference">删除</i>
-				</el-popover>-->
+					<i v-if="comment.uid === user.uid" class="el-icon-delete" slot="reference">删除</i>
+				</el-popover>
         <div class="comment">
           {{ comment.content }}
         </div>
@@ -67,12 +67,13 @@
 
 <script>
 import { formatDate } from 'assets/js/utils'
+import { getVideoComment, publishVideoComment } from '@/api/comment'
 
 export default {
   name: 'Comment',
   components: {},
   props: {
-    vid: Number
+    videoId: String
   },
   data() {
     return {
@@ -81,17 +82,11 @@ export default {
       user: {
         uid: 11011,
         nickname: '大西瓜',
-        avatarurl: 'https://picx.zhimg.com/v2-6fd63e002c1b9b7ee99cf635608f9467_xl.jpg'
+        avatarurl: 'https://oss.reghao.cn/image/BXJD1jDpRL.webp'
       }
     }
   },
   watch: {
-    vid(newVal) {
-      // 加载当前视频的评论
-      /* getComments(newVal).then((res) => {
-        this.comments = res
-      })*/
-    }
   },
   created() {
     this.comments = [
@@ -101,13 +96,23 @@ export default {
         avatarurl: 'https://picx.zhimg.com/v2-6fd63e002c1b9b7ee99cf635608f9467_xl.jpg',
         content: 'hhhhhhhhhhhhhhh',
         date: new Date()
+      },
+      {
+        uid: 11012,
+        nickname: '大芒果',
+        avatarurl: 'https://picx.zhimg.com/v2-6fd63e002c1b9b7ee99cf635608f9467_xl.jpg',
+        content: 'kkkkkkkkkkkkkkkkk',
+        date: new Date()
       }
     ]
 
     // 加载当前视频的评论
-    /* getComments(this.vid).then((res) => {
-      this.comments = res
-    })*/
+    getVideoComment(this.videoId).then(res => {
+      console.log('获取视频评论')
+      if (res.code === 0) {
+        console.log(res)
+      }
+    })
   },
   methods: {
     getDate(date) {
@@ -115,40 +120,47 @@ export default {
     },
     // 添加评论
     addComment() {
-      this.$message.info('发布评论成功！')
+      /*this.$message.info('发布评论成功！')
       this.comments.splice(0, 0, {
         nickname: '大芒果',
         avatarurl: 'https://picx.zhimg.com/v2-6fd63e002c1b9b7ee99cf635608f9467_xl.jpg',
         content: '一扫而散',
         date: new Date()
       })
-      this.content = ''
+      this.content = ''*/
+
+      if (this.user) {
+        console.log('发布评论')
 
-      /* const user = this.$user
-      if (user) {
         if (this.content === '' || this.content === null) {
           this.$message.warning('评论内容不能为空!')
           return
         }
-        addComment(user.uid, this.vid, this.content).then((res) => {
-          if (res === 1) {
-            this.$message.info('发布评论成功！')
+
+        publishVideoComment({
+          uid: this.user.uid,
+          videoId: this.videoId,
+          content: this.content
+        }).then((res) => {
+          if (res.code === 0) {
+            this.$message.info('评论已发布！')
             this.comments.splice(0, 0, {
-              avatarurl: user.avatarurl,
-              nickname: user.nickname,
+              avatarurl: this.user.avatarurl,
+              nickname: this.user.nickname,
               content: this.content,
               date: new Date()
             })
             this.content = ''
           }
         })
-      }*/
-    }
+      }
+    },
     // 删除当前评论
-    // deleteComment(contentId) {
-    // 	deleteCommentById(contentId) // 删除评论
-    //
-    // }
+    deleteComment(contentId) {
+      console.log('删除评论')
+      // 删除评论
+    	// deleteCommentById(contentId)
+    }
   }
 }
 </script>