绿满眶商城微信小程序-uniapp
xiangpei
2025-06-29 ca1ce1acc217be0b510e7ee44fcdd3ee85558fde
pages/tabbar/index/home.vue
@@ -1,5 +1,6 @@
<template>
  <view class="video-container">
   <top-bar selectedTitleIndex="home" textColor="white" @changeTab="topBarChange" class="topBar"></top-bar>
   <!-- 视频加载 -->
   <zero-loading v-show="videoLoading" type="circle" color="#0ebd57" text=""></zero-loading>
    <!-- 视频列表 -->
@@ -35,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"
@@ -52,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 }">
@@ -117,7 +119,7 @@
        <!-- 视频信息层 -->
        <view class="video-info">
        <view class="video-info" :style="{bottom: marginBottom + 20 + 'px'}">
        <view>
           <text class="video-author">@{{item.authorName}}</text>
        </view>
@@ -247,7 +249,10 @@
import { silentLogin } from "@/api/connect.js";
import { getUserInfo } from "@/api/members";
import storage from "@/utils/storage.js";
import TopBar from "@/components/TopBar.vue";
export default {
  components: {TopBar},
  computed: {
       hasPlayTime() {
         return this.sliderFormatTime(this.progress > 0 ? this.duration * this.progress / 100 : 0);
@@ -322,7 +327,8 @@
         pageNumber: 1,
         pageSize: 10,
         videoFrom: 'recommend'
      }
      },
      marginBottom: 0 // 底部安全区域
    }
  },
  onShow() {
@@ -344,6 +350,7 @@
     this.startHidenTime = Date.now()
  },
  onLoad(option) {
     this.marginBottom = uni.getSystemInfoSync().safeAreaInsets.bottom
     const token = storage.getAccessToken();
     if (! token) {
        this.wxSilentLogin(() => {
@@ -379,6 +386,17 @@
     }
  },
  methods: {
     topBarChange(titleObj) {
      if (titleObj.index === 'home') {
         uni.switchTab({
            url: titleObj.pagePath
         });
      } else {
         uni.redirectTo({
            url: titleObj.pagePath
         });
      }
     },
     // 静默登录
     wxSilentLogin(callback) {
        //获取code
@@ -1337,7 +1355,7 @@
   .progress-text {
     margin-top: 10px;
     font-size: 14px;
     color: #666;
     color: #fff;
   }
   .swiper-box {
     width: 100%;
@@ -1361,4 +1379,10 @@
   .custom-share-btn::after {
     border: none;
   }
   .topBar {
      position: fixed;
      top: 20rpx;
      left: 20rpx;
      z-index: 1000
   }
</style>