From e15dbdbc396f61a645c8d8a504b45476f1fcea08 Mon Sep 17 00:00:00 2001
From: xiangpei <xiangpei@timesnew.cn>
Date: 星期五, 30 五月 2025 17:16:17 +0800
Subject: [PATCH] 评论点赞功能

---
 pages/tabbar/index/home.vue |   64 ++++++++++++++++++++++++++++----
 1 files changed, 56 insertions(+), 8 deletions(-)

diff --git a/pages/tabbar/index/home.vue b/pages/tabbar/index/home.vue
index 53dd3de..d3b82cc 100644
--- a/pages/tabbar/index/home.vue
+++ b/pages/tabbar/index/home.vue
@@ -123,15 +123,17 @@
 				  <view style="position: relative;">  
 					<text class="time">{{formatTime(comment.createTime)}}</text>
 					<text @click="openReply(comment)" class="reply-btu time">鍥炲</text>
-					<text class="thumbs-up time iconfont">&#xe60b;</text>
+					<text v-if="!comment.hasThumbsUp" class="thumbs-up time iconfont" @click="thubmsUp(comment.id, index, null)">&#xe614;<text v-show="comment.thumbsUpNum > 0" class="thumbs-num">{{comment.thumbsUpNum}}</text></text>
+					<text v-else class="thumbs-up time iconfont" @click="cancelThumbsUp(comment.id, index, null)">&#xe607;<text v-show="comment.thumbsUpNum > 0" class="thumbs-num">{{comment.thumbsUpNum}}</text></text>
 				  </view>
 				</view>
 			</view>
 			<!-- 鍥炲鍒楄〃 -->
 			  <view class="reply-list" v-if="comment.replies && comment.replies.length > 0">
-				<view class="reply-item" v-for="reply in comment.replies" :key="reply.id">
+				<view class="reply-item" v-for="(reply, replyIndex) in comment.replies" :key="reply.id">
 				  <view class="reply-content">
 					<view style="display: flex;">
+						<image class="comment-reply-avatar" :src="reply.replyUserAvatar || '/static/default-avatar.png'"></image>
 						<text class="nickname">{{reply.userNickname}}</text>
 						<text v-if="reply.replyUserId && reply.masterCommentId !== reply.replyId" class="reply-to"><text style="margin-right: 10rpx;font-size: 28rpx;" class="iconfont">&#xe666;</text>{{reply.replyUserNickname}}</text>
 					</view>
@@ -139,7 +141,8 @@
 					<view class="reply-footer">
 					  <text class="time">{{formatTime(reply.createTime)}}</text>
 					  <text @click="openReply(comment, reply)" class="reply-btu time">鍥炲</text>
-					  <text class="thumbs-up time iconfont">&#xe60b; </text>
+					  <text v-if="!reply.hasThumbsUp" class="thumbs-up time iconfont" @click="thubmsUp(reply.id, index, replyIndex)">&#xe614;<text v-show="reply.thumbsUpNum > 0" class="thumbs-num">{{reply.thumbsUpNum}}</text></text>
+					  <text v-else class="thumbs-up time iconfont" @click="cancelThumbsUp(reply.id, index, replyIndex)">&#xe607;<text v-show="reply.thumbsUpNum > 0" class="thumbs-num">{{reply.thumbsUpNum}}</text></text>
 					</view>
 				  </view>
 				</view>
@@ -175,7 +178,7 @@
 </template>
 
 <script>
-import { getRecommendVideos, savePlayRecord, subscribe, getVideoComments, addVideoComment } from "@/api/video.js";
+import { getRecommendVideos, savePlayRecord, subscribe, getVideoComments, addVideoComment, thubmsUpComment, cancelThubmsUpComment } from "@/api/video.js";
 import { changeCollect } from "@/api/collect.js";
 export default {
   data() {
@@ -200,7 +203,8 @@
 			replyId: '',
 			replyUserId: '',
 			replyUserNickname: '',
-			masterCommentId: ''
+			replyUserAvatar: '',
+			masterCommentId: null
 		},
 		comments: [],            // 璇勮鍒楄〃
 		commentsTotal: 0,            // 璇勮鎬绘潯鏁�
@@ -247,6 +251,38 @@
     this.initVideoContexts();
   },
   methods: {
+		// 鍙栨秷鐐硅禐
+		async cancelThumbsUp(id, commentIndex, replyIndex) {
+			const data = {
+				refId: id,
+				thumbsUpType: 'video_comment'
+			}
+			cancelThubmsUpComment(data).then(res => {
+				if(replyIndex != null) {
+					this.comments[commentIndex].replies[replyIndex].hasThumbsUp = false;
+					this.comments[commentIndex].replies[replyIndex].thumbsUpNum -= 1;
+				} else {
+					this.comments[commentIndex].hasThumbsUp = false;
+					this.comments[commentIndex].thumbsUpNum -= 1;
+				}
+			})
+		},
+		// 璇勮鐐硅禐
+		async thubmsUp(id, commentIndex, replyIndex) {
+			const data = {
+				refId: id,
+				thumbsUpType: 'video_comment'
+			}
+			thubmsUpComment(data).then(res => {
+				if(replyIndex != null) {
+					this.comments[commentIndex].replies[replyIndex].hasThumbsUp = true;
+					this.comments[commentIndex].replies[replyIndex].thumbsUpNum += 1;
+				} else {
+					this.comments[commentIndex].hasThumbsUp = true;
+					this.comments[commentIndex].thumbsUpNum += 1;
+				}
+			})
+		},
 		// 鍔犺浇涓嬩竴椤靛洖澶�
 		loadNextPageReply(index) {
 			this.replyCommentQuery.pageNumber++;
@@ -277,12 +313,13 @@
 			const videoId = this.commentForm.videoId;
 			this.commentForm = { // 璇勮琛ㄥ崟鏁版嵁
 				id: '',
-				videoId: videoId,
+				videoId: '',
 				commentContent: '',
 				replyId: '',
 				replyUserId: '',
 				replyUserNickname: '',
-				masterCommentId: ''
+				replyUserAvatar: '',
+				masterCommentId: null
 			}
 		},
 	    // 鍙栨秷鍥炲
@@ -298,6 +335,7 @@
 		  this.commentForm.replyId = comment.id;
 		  this.commentForm.replyUserId = comment.userId;
 		  this.commentForm.replyUserNickname = comment.userNickname;
+		  this.commentForm.replyUserAvatar = comment.userAvatar;
 		  // 鑷姩鑱氱劍杈撳叆妗�
 		  this.$nextTick(() => {
 			const input = this.$refs.commentInput;
@@ -813,6 +851,12 @@
 	  border-radius: 50%;
 	  margin-right: 10rpx;
 	}
+	.comment-reply-avatar {
+		width: 40rpx;
+		height: 40rpx;
+		border-radius: 50%;
+		margin-right: 10rpx;
+	}
 
 	.comment-content {
 	  flex: 1;
@@ -936,8 +980,9 @@
 	}
 	.thumbs-up {
 		position: absolute;
-		right: 80rpx;
+		right: 20rpx;
 		font-size: 32rpx;
+		width: 120rpx;
 	}
 	.textSideIcon {
 		font-size: 36rpx;
@@ -947,4 +992,7 @@
 		margin-right: 10rpx;
 		color: #cccccc;
 	}
+	.thumbs-num {
+		margin-left: 4rpx;
+	}
 </style>
\ No newline at end of file

--
Gitblit v1.8.0