绿满眶商城微信小程序-uniapp
zxl
2025-06-04 ba5acc3cdefd33a4845b578015e2aae8b43f80d3
pages/tabbar/index/home.vue
@@ -66,14 +66,14 @@
        </view>
          <view style="width: 100%;word-wrap: break-word;white-space: normal;overflow-wrap: break-word;">
           <text class="video-title">{{item.title}}</text>
           <text class="video-tag" v-for="(tag, index) in item.tagList" :key="tag">#{{tag.tagName}}</text>
           <text class="video-tag" v-for="(tag, index) in item.tagList" :key="tag.id">#{{tag.tagName}}</text>
        </view>
        </view>
        
        <!-- 右侧互动按钮 -->
       <view class="action-buttons">
         <view class="avatar-container">
            <image class="avatar" :src="item.authorAvatar" mode="aspectFill"></image>
            <image class="avatar" @click="jumpToHomePage(item.authorId)" :src="item.authorAvatar" mode="aspectFill"></image>
            <!-- 关注图标 - 使用绝对定位 -->
            <view v-if="!item.subscribeThisAuthor" class="follow-icon" @click="subscribeAuth(index, item.authorId)">
             <text class="iconfont">&#xe629;</text>
@@ -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,11 +178,12 @@
</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() {
    return {
      videoNoMore: false, // 是否还有更多视频
      commentNoMore: false, // 是否还有更多评论
      commentQuery: {
         pageNumber: 1,
@@ -202,7 +205,7 @@
         replyUserId: '',
         replyUserNickname: '',
         replyUserAvatar: '',
         masterCommentId: ''
         masterCommentId: null
      },
      comments: [],            // 评论列表
      commentsTotal: 0,            // 评论总条数
@@ -226,8 +229,11 @@
      ],   // 视频列表数据
      videoContexts: [], // 视频上下文对象集合
      loading: false,  // 是否正在加载
      page: 1,         // 当前页码
      pageSize: 10     // 每页数量
      videoQuery: {
         pageNumber: 1,
         pageSize: 6,
         videoFrom: 'recommend'
      }
    }
  },
  onShow() {
@@ -249,6 +255,44 @@
    this.initVideoContexts();
  },
  methods: {
      // 跳转个人主页
      jumpToHomePage(authorId) {
         uni.navigateTo({
            url: "/pages/video/home-page?authorId=" + authorId
         })
      },
      // 取消点赞
      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 +329,7 @@
            replyUserId: '',
            replyUserNickname: '',
            replyUserAvatar: '',
            masterCommentId: ''
            masterCommentId: null
         }
      },
       // 取消回复
@@ -453,22 +497,31 @@
    
    // 加载视频数据
    async loadVideos() {
      if (this.loading) return;
      if (this.loading || this.videoNoMore) return;
      this.loading = true;
      
     getRecommendVideos({pageNumber: this.page, pageSize: this.pageSize}).then(res => {
     getRecommendVideos(this.videoQuery).then(res => {
        console.log(res, "视频数据");
        if (this.page === 1) {
        if (this.videoQuery.pageNumber === 1) {
          this.videoList = res.data.data;
        } else {
          this.videoList = [...this.videoList, ...res.data.data];
         this.videoList = [
           ...this.videoList,
           ...res.data.data.filter(
             (newItem) => !this.videoList.some((oldItem) => oldItem.id === newItem.id)
           ),
         ];
        }
        this.page++;
        this.$nextTick(() => {
          this.initVideoContexts();
        });
        this.loading = false;
        if(res.data.data.length < this.videoQuery.pageSize) {
           this.videoNoMore = true;
           return;
        }
        this.videoQuery.pageNumber++;
     })
    },
    
@@ -522,6 +575,7 @@
    },
    // 单击屏幕:暂停或继续播放
   togglePlay(index) {
      console.log("单击视频", index, this.videoContexts);
      if(this.currentVideoIsPlaying) {
         this.videoContexts[index].pause();
      } else {
@@ -946,8 +1000,9 @@
   }
   .thumbs-up {
      position: absolute;
      right: 80rpx;
      right: 20rpx;
      font-size: 32rpx;
      width: 120rpx;
   }
   .textSideIcon {
      font-size: 36rpx;
@@ -957,4 +1012,7 @@
      margin-right: 10rpx;
      color: #cccccc;
   }
   .thumbs-num {
      margin-left: 4rpx;
   }
</style>