绿满眶商城微信小程序-uniapp
xiangpei
2025-06-03 877c92743693f645bbf86cfbfe8d28c7f1196575
pages/tabbar/index/home.vue
@@ -8,7 +8,7 @@
      :current="currentIndex"
      @change="onSwiperChange"
    >
      <swiper-item v-for="(item, index) in videoList" :key="item.id + index">
      <swiper-item v-for="(item, index) in videoList" :key="item.id">
      <!-- 播放按钮(仅当视频暂停时显示) -->
      <view 
        class="play-icon" 
@@ -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="item.id + tag.id">#{{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" @click="() => jumpToHomePage(item.authorId)" :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>
@@ -114,7 +114,7 @@
           暂无评论,快来发表第一条评论吧~
         </view>
         
         <view v-else class="comment-item" v-for="(comment, index) in comments" :key="comment.id + index">
         <view v-else class="comment-item" v-for="(comment, index) in comments" :key="comment.id">
         <view style="display: flex;">
            <image class="comment-avatar" :src="comment.userAvatar || '/static/default-avatar.png'"></image>
            <view class="comment-content">
@@ -130,7 +130,7 @@
         </view>
         <!-- 回复列表 -->
           <view class="reply-list" v-if="comment.replies && comment.replies.length > 0">
            <view class="reply-item" v-for="(reply, replyIndex) in comment.replies" :key="reply.id + index">
            <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>
@@ -183,6 +183,7 @@
export default {
  data() {
    return {
      videoNoMore: false, // 是否还有更多视频
      commentNoMore: false, // 是否还有更多评论
      commentQuery: {
         pageNumber: 1,
@@ -228,8 +229,11 @@
      ],   // 视频列表数据
      videoContexts: [], // 视频上下文对象集合
      loading: false,  // 是否正在加载
      page: 1,         // 当前页码
      pageSize: 10     // 每页数量
      videoQuery: {
         pageNumber: 1,
         pageSize: 6,
         videoFrom: 'recommend'
      }
    }
  },
  onShow() {
@@ -493,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++;
     })
    },
    
@@ -562,6 +575,7 @@
    },
    // 单击屏幕:暂停或继续播放
   togglePlay(index) {
      console.log("单击视频", index, this.videoContexts);
      if(this.currentVideoIsPlaying) {
         this.videoContexts[index].pause();
      } else {