From e15dbdbc396f61a645c8d8a504b45476f1fcea08 Mon Sep 17 00:00:00 2001
From: xiangpei <xiangpei@timesnew.cn>
Date: 星期五, 30 五月 2025 17:16:17 +0800
Subject: [PATCH] 评论点赞功能
---
api/video.js | 28 ++++++++++++++
App.vue | 6 +-
pages/tabbar/index/home.vue | 52 ++++++++++++++++++++++---
3 files changed, 76 insertions(+), 10 deletions(-)
diff --git a/App.vue b/App.vue
index 98414e3..16d7b4c 100644
--- a/App.vue
+++ b/App.vue
@@ -255,9 +255,9 @@
@font-face {
font-family: 'iconfont'; /* Project id 4921691 */
src:
- url('//at.alicdn.com/t/c/font_4921691_s75bca4srg.woff2?t=1748511781888') format('woff2'),
- url('//at.alicdn.com/t/c/font_4921691_s75bca4srg.woff?t=1748511781888') format('woff'),
- url('//at.alicdn.com/t/c/font_4921691_s75bca4srg.ttf?t=1748511781888') format('truetype');
+ url('//at.alicdn.com/t/c/font_4921691_hqalp3igc3.woff2?t=1748586496249') format('woff2'),
+ url('//at.alicdn.com/t/c/font_4921691_hqalp3igc3.woff?t=1748586496249') format('woff'),
+ url('//at.alicdn.com/t/c/font_4921691_hqalp3igc3.ttf?t=1748586496249') format('truetype');
}
.iconfont {
/* font-family闇�瑕佸拰鑷畾涔夌殑鐩稿悓 */
diff --git a/api/video.js b/api/video.js
index 843d069..c46c6b9 100644
--- a/api/video.js
+++ b/api/video.js
@@ -88,3 +88,31 @@
data: data
});
}
+
+/**
+ * 璇勮鐐硅禐
+ *
+ * @param params
+ */
+ export function thubmsUpComment(data) {
+ return http.request({
+ url: "/lmk/video-comment/thumbs_up",
+ method: Method.POST,
+ needToken: true,
+ data: data
+ });
+}
+
+/**
+ * 鍙栨秷璇勮鐐硅禐
+ *
+ * @param params
+ */
+ export function cancelThubmsUpComment(data) {
+ return http.request({
+ url: "/lmk/video-comment/cancel/thumbs_up",
+ method: Method.POST,
+ needToken: true,
+ data: data
+ });
+}
diff --git a/pages/tabbar/index/home.vue b/pages/tabbar/index/home.vue
index 2a9bde6..d3b82cc 100644
--- a/pages/tabbar/index/home.vue
+++ b/pages/tabbar/index/home.vue
@@ -123,13 +123,14 @@
<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"></text>
+ <text v-if="!comment.hasThumbsUp" class="thumbs-up time iconfont" @click="thubmsUp(comment.id, index, null)"><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)"><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>
@@ -140,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"> </text>
+ <text v-if="!reply.hasThumbsUp" class="thumbs-up time iconfont" @click="thubmsUp(reply.id, index, replyIndex)"><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)"><text v-show="reply.thumbsUpNum > 0" class="thumbs-num">{{reply.thumbsUpNum}}</text></text>
</view>
</view>
</view>
@@ -176,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() {
@@ -202,7 +204,7 @@
replyUserId: '',
replyUserNickname: '',
replyUserAvatar: '',
- masterCommentId: ''
+ masterCommentId: null
},
comments: [], // 璇勮鍒楄〃
commentsTotal: 0, // 璇勮鎬绘潯鏁�
@@ -249,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++;
@@ -285,7 +319,7 @@
replyUserId: '',
replyUserNickname: '',
replyUserAvatar: '',
- masterCommentId: ''
+ masterCommentId: null
}
},
// 鍙栨秷鍥炲
@@ -946,8 +980,9 @@
}
.thumbs-up {
position: absolute;
- right: 80rpx;
+ right: 20rpx;
font-size: 32rpx;
+ width: 120rpx;
}
.textSideIcon {
font-size: 36rpx;
@@ -957,4 +992,7 @@
margin-right: 10rpx;
color: #cccccc;
}
+ .thumbs-num {
+ margin-left: 4rpx;
+ }
</style>
\ No newline at end of file
--
Gitblit v1.8.0