绿满眶商城微信小程序-uniapp
peng
2025-07-02 be80b22a4a0fcd33e1b17ebdb86eba91cc7de4d2
pages/tabbar/index/home.vue
@@ -1,6 +1,6 @@
<template>
  <view class="video-container">
   <top-bar selectedTitleIndex="home" @changeTab="topBarChange" class="topBar"></top-bar>
   <top-bar selectedTitleIndex="home" textColor="white" @changeTab="topBarChange" class="topBar"></top-bar>
   <!-- 视频加载 -->
   <zero-loading v-show="videoLoading" type="circle" color="#0ebd57" text=""></zero-loading>
    <!-- 视频列表 -->
@@ -36,7 +36,7 @@
            :autoplay="index === currentIndex"
            :controls="false"
            :loop="true"
            :object-fit="item.objectFit"
            :object-fit="item.videoFit"
            :enable-progress-gesture="false"
            :show-center-play-btn="false"
            class="video-item"
@@ -53,6 +53,7 @@
            @touchstart.stop="handleTouchStart"
            @touchmove.stop="handleTouchMove"
            @touchend.stop="handleTouchEnd"
            :style="{bottom: marginBottom + 'px'}"
            class="container">
            <!-- 进度条 - 整个区域可拖动 -->
            <view class="process-warp" :style="{ opacity: showProcess ? 1 : 0 }">
@@ -118,9 +119,9 @@
        <!-- 视频信息层 -->
        <view class="video-info">
        <view class="video-info" :style="{bottom: marginBottom + 20 + 'px'}">
        <view>
           <text class="video-author">@{{item.authorName}}</text>
           <text class="video-author" @click="jumpToSearch">@{{item.authorName}}</text>
        </view>
          <view style="width: 100%;word-wrap: break-word;white-space: normal;overflow-wrap: break-word;">
           <text class="video-title">{{item.title}}</text>
@@ -128,7 +129,7 @@
        </view>
        </view>
        <!-- 右侧互动按钮 -->
       <!-- 右侧互动按钮 -->
       <view class="action-buttons">
         <view class="avatar-container">
            <image class="avatar" @click="jumpToHomePage(item.authorId)" :src="item.authorAvatar" mode="aspectFill"></image>
@@ -137,20 +138,24 @@
             <text class="iconfont">&#xe629;</text>
            </view>
         </view>
          <view class="action-item" @click="toggleCollect(item, index)">
         <text class="iconfont" v-if="item.collected">&#xe605;</text>
          <view class="action-item" @click="toggleThumbsUp(item, index)">
         <text class="iconfont" v-if="item.thumbsUp">&#xe605;</text>
         <text class="iconfont" v-else>&#xe601;</text>
         <text style="font-size: 10px;font-weight: lighter;">{{item.collectNum}}</text>
         <text style="font-size: 10px;font-weight: lighter;">{{item.thumbsUpNum}}</text>
          </view>
         <view class="action-item" @click="showComments(item)">
            <text class="iconfont">&#xe7f7;</text>
            <text style="font-size: 10px;font-weight: lighter;">{{item.commentNum}}</text>
          </view>
        <view class="action-item" @click="toggleCollect(item, index)">
           <text class="iconfont" v-if="item.collected">&#xeb9d;</text>
           <text class="iconfont" v-else>&#xe603;</text>
           <text style="font-size: 10px;font-weight: lighter;">{{item.collectNum}}</text>
         </view>
        <view class="action-item">
           <button open-type="share" class="custom-share-btn" :data-obj="item">
                 <text class="iconfont">&#xe602;</text>
               </button>
        </view>
        </view>
@@ -242,7 +247,16 @@
</template>
<script>
import { getRecommendVideos, savePlayRecord, subscribe, getVideoComments, addVideoComment, thubmsUpComment, cancelThubmsUpComment } from "@/api/video.js";
import {
   getRecommendVideos,
   savePlayRecord,
   subscribe,
   getVideoComments,
   addVideoComment,
   thubmsUpComment,
   cancelThubmsUpComment,
   changeThumbsUp,
} from "@/api/video.js";
import { changeCollect } from "@/api/collect.js";
import { saveShare, saveShareClickRecord } from "@/api/share.js";
import { silentLogin } from "@/api/connect.js";
@@ -326,7 +340,8 @@
         pageNumber: 1,
         pageSize: 10,
         videoFrom: 'recommend'
      }
      },
      marginBottom: 0 // 底部安全区域
    }
  },
  onShow() {
@@ -348,6 +363,7 @@
     this.startHidenTime = Date.now()
  },
  onLoad(option) {
     this.marginBottom = uni.getSystemInfoSync().safeAreaInsets.bottom
     const token = storage.getAccessToken();
     if (! token) {
        this.wxSilentLogin(() => {
@@ -383,6 +399,12 @@
     }
  },
  methods: {
     jumpToSearch() {
        uni.navigateTo({
           url: '/pages/video/video-search'
        });
     },
     // 切换顶部导航栏
     topBarChange(titleObj) {
      if (titleObj.index === 'home') {
         uni.switchTab({
@@ -803,6 +825,28 @@
        }
     })
    },
   // 点赞/取消点赞
   toggleThumbsUp(item, index) {
     let data = {
             refId: item.id,
             thumbsUpType: 'video'
     }
     const beforeThumbsUp = item.thumbsUp
     const beforeThumbsUpNum = item.thumbsUpNum
     if(item.thumbsUp) {
             this.videoList[index].thumbsUp = false
             this.videoList[index].thumbsUpNum -= 1
     } else {
             this.videoList[index].thumbsUp = true
             this.videoList[index].thumbsUpNum += 1
     }
     changeThumbsUp(data).then(res => {
             if(res.data.code !== 200) {
                this.videoList[index].thumbsUp = beforeThumbsUp
                this.videoList[index].thumbsUpNum = beforeThumbsUpNum
             }
     })
   },
    // 单击屏幕:暂停或继续播放
   togglePlay(index) {
      console.log("单击视频", index);
@@ -1352,7 +1396,7 @@
   .progress-text {
     margin-top: 10px;
     font-size: 14px;
     color: #666;
     color: #fff;
   }
   .swiper-box {
     width: 100%;