绿满眶商城微信小程序-uniapp
peng
2025-09-16 577042a77ff72607e2cd5de3a06f33a1c9d3f703
pages/tabbar/index/home.vue
@@ -15,13 +15,12 @@
                     mode="aspectFit"></image>
               </view>
               <video v-if="index >= currentIndex - videoLiveOffset && index <= currentIndex + videoLiveOffset"
                  :id="'video' + index" :ref="'video' + index" :src="item.videoUrl"
                  :autoplay="index === currentIndex" :controls="isControls" :loop="true"
                  :object-fit="item.videoFit" :enable-progress-gesture="false" :show-center-play-btn="false"
                  :show-progress="false" :show-fullscreen-btn="isControls" :show-play-btn="isControls"
                  :show-mute-btn="false" class="video-item" @fullscreenchange="onFullscreenChange"
                  @play="onPlay(item.id, index)" @pause="onPause(index)" @ended="onEnded(index)"
                  @click="togglePlay(index)" @timeupdate="onTimeUpdate($event)"
                  :id="'video' + index" :ref="'video' + index" :src="item.videoUrl" :autoplay="index === currentIndex"
                  :controls="isControls" :loop="true" :object-fit="item.videoFit" :enable-progress-gesture="false"
                  :show-center-play-btn="false" :show-progress="false" :show-fullscreen-btn="isControls"
                  :show-play-btn="isControls" :show-mute-btn="false" class="video-item"
                  @fullscreenchange="onFullscreenChange" @play="onPlay(item.id, index)" @pause="onPause(index)"
                  @ended="onEnded(index)" @click="togglePlay(index)" @timeupdate="onTimeUpdate($event)"
                  @loadedmetadata="onLoadedMetadata($event)" @waiting="videoWaiting(index)"></video>
               <view class="fullscreen-btn">
                  <image class="fullscreen-icon" :src="isFullScreen ? off_screen : on_screen" mode="aspectFit"
@@ -62,7 +61,7 @@
            <!-- 悬挂商品链接层 -->
            <view class="goods-link-warp" v-if="item.goodsList.length > 0">
            <view class="goods-link-warp" :style="{ bottom: marginBottom + 55 + 'px' }" v-if="item.goodsList.length > 0">
               <view class="goods-link">
                  <swiper @change="goodsChange" :autoplay="true" :interval="4000" style="height: 120rpx;">
                     <swiper-item v-for="goods in item.goodsList" :key="goods.goodsId">
@@ -75,8 +74,8 @@
                              <text class="goods-name">{{ goods.goodsName }}</text>
                              <view class="price-section">
                                 <text class="current-price">¥{{ goods.price }}</text>
                                 <text class="original-price" v-if="goods.originalPrice">¥{{
                                    goods.originalPrice }}</text>
                                 <text class="original-price"
                                    v-if="goods.originalPrice">¥{{ goods.originalPrice }}</text>
                              </view>
                           </view>
                        </view>
@@ -88,14 +87,15 @@
            <!-- 视频信息层 -->
            <view class="video-info" :style="{ bottom: marginBottom + 20 + 'px' }">
               <view style="width: 100%; position: relative;" @click="jumpToSearch">
               <view style="width: 100%; position: relative;">
                  <text class="video-author">@{{ item.authorName }}</text>
                  <text class="iconfont" style="position: absolute;right: 42px;bottom: 50rpx;">&#xe64e;</text>
                  <text class="iconfont" @click="jumpToSearch"
                     style="position: absolute;right: 42px;bottom: 50rpx;">&#xe64e;</text>
               </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.id">#{{ tag.tagName
                  }}</text>
                  <text class="video-tag" v-for="(tag, index) in item.tagList"
                     :key="tag.id">#{{ tag.tagName }}</text>
               </view>
            </view>
@@ -171,12 +171,12 @@
                           <text @click="openReply(comment)" class="reply-btu time">回复</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>
                                 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>
                                 v-show="comment.thumbsUpNum > 0"
                                 class="thumbs-num">{{ comment.thumbsUpNum }}</text></text>
                        </view>
                     </view>
                  </view>
@@ -200,12 +200,12 @@
                              <text @click="openReply(comment, reply)" class="reply-btu time">回复</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>
                                    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>
                                    v-show="reply.thumbsUpNum > 0"
                                    class="thumbs-num">{{ reply.thumbsUpNum }}</text></text>
                           </view>
                        </view>
                     </view>
@@ -984,7 +984,9 @@
                  this.videoNoMore = true;
                  return;
               }
               this.videoQuery.pageNumber++;
               if (res.data.code === 200) {
                  this.videoQuery.pageNumber++;
               }
            })
         } else {
@@ -1012,7 +1014,9 @@
                  this.videoNoMore = true;
                  return;
               }
               this.videoQuery.pageNumber++;
               if (res.data.code === 200) {
                  this.videoQuery.pageNumber++;
               }
            })
         }
@@ -1472,7 +1476,7 @@
/* 商品链接悬挂层样式 */
.goods-link-warp {
   position: absolute;
   bottom: 160px;
   bottom: 100px;
   left: 20px;
   color: #f8f8f8;
   z-index: 10;