评论点赞功能

xiangpei

2025-05-30 e15dbdbc396f61a645c8d8a504b45476f1fcea08

 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,20 +141,21 @@
               <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>
           </view>
           <view class="view-more-replies" v-if="comment.replyTotalCount > 0 && !comment.expandReply" @click="loadRepliesPage(comment, index)">
            展开{{comment.replyTotalCount}}条回复 ↓
            <text class="line">——</text>展开{{comment.replyTotalCount}}条回复 ↓
           </view>
           <view class="reply-op" v-if="comment.replyTotalCount > replyCommentQuery.pageNumber * replyCommentQuery.pageSize && comment.expandReply">
              <view @click="loadNextPageReply(index)" class="reply-op-item">展开更多<text class="iconfont textSideIcon">&#xeb8d;</text></view>
              <view @click="loadNextPageReply(index)" class="reply-op-item"><text class="line">——</text>展开更多<text class="iconfont textSideIcon">&#xeb8d;</text></view>
              <view @click="retractReplyComment(index)" class="reply-op-item" style="margin-left: 50rpx;">收起<text class="iconfont textSideIcon">&#xeb9b;</text></view>
           </view>
           <view class="reply-op" v-else-if="comment.replyTotalCount <= replyCommentQuery.pageNumber * replyCommentQuery.pageSize && comment.expandReply">
              <view @click="retractReplyComment(index)" class="reply-op-item">收起<text class="iconfont textSideIcon">&#xeb9b;</text></view>
              <view @click="retractReplyComment(index)" class="reply-op-item"><text class="line">——</text>收起<text class="iconfont textSideIcon">&#xeb9b;</text></view>
           </view>
         </view>
       </scroll-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;
@@ -804,7 +842,7 @@
   .comment-item {
     display: flex;
     flex-direction: column;
     padding: 10rpx 0;
     padding: 10rpx 0 20rpx 0;
   }

   .comment-avatar {
@@ -812,6 +850,12 @@
     height: 70rpx;
     border-radius: 50%;
     margin-right: 10rpx;
   }
   .comment-reply-avatar {
      width: 40rpx;
      height: 40rpx;
      border-radius: 50%;
      margin-right: 10rpx;
   }

   .comment-content {
@@ -887,6 +931,7 @@
   .reply-op-item {
      display: flex;
      align-items: center;
      height: 40rpx;
   }
   
   .reply-item {
@@ -935,11 +980,19 @@
   }
   .thumbs-up {
      position: absolute;
      right: 80rpx;
      right: 20rpx;
      font-size: 32rpx;
      width: 120rpx;
   }
   .textSideIcon {
      font-size: 36rpx;
      margin-left: 5rpx;
   }
   .line {
      margin-right: 10rpx;
      color: #cccccc;
   }
   .thumbs-num {
      margin-left: 4rpx;
   }
</style>