评论点赞功能

xiangpei

2025-05-30 e15dbdbc396f61a645c8d8a504b45476f1fcea08

评论点赞功能

 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需要和自定义的相同 */

 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
  });
}

 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">&#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>
@@ -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">&#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>
@@ -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>