供应商，登录同步电话，首页进度条

zxl

2025-08-05 5fdb1bbeaf94343144f173745e5a470ab440ccf9

 pages/tabbar/index/home.vue

@@ -39,6 +39,8 @@
            :object-fit="item.videoFit"
            :enable-progress-gesture="false"
            :show-center-play-btn="false"
            :show-progress="true"
            :show-fullscreen-btn="true"
            class="video-item"
            @play="onPlay(item.id, index)"
            @pause="onPause(index)"
@@ -56,9 +58,10 @@
            :style="{bottom: marginBottom + 'px'}"
            class="container">
            <!-- 进度条 - 整个区域可拖动 -->
            <view class="process-warp" :style="{ opacity: showProcess ? 1 : 0 }">
            <!-- <view class="process-warp" :style="{ opacity: showProcess ? 1 : 0 }"> -->
            <view class="process-warp">
              <!-- 显示当前进度 -->
              <view class="progress-text">{{ hasPlayTime }}/{{formartDuration}}</view>
              <view v-show="isTouch" class="progress-text">{{ hasPlayTime }}/{{formartDuration}}</view>
              <view
               class="progress-bar"
               id="progressBar"
@@ -276,6 +279,7 @@
  },
  data() {
    return {
      isTouch:false,
      userId :'',
      currentImgIndex: 0, // 播放到第几张图--索引
      currentGoodsIndex: 0, // 播放到第几个商品--索引
@@ -289,7 +293,7 @@
      barWidth: 0, // 进度条宽度
      isDragging: false, // 是否正在拖动
      processHidenTimer: null, // 进度条隐藏定时器
      showProcess: false, // 是否显示进度条
      showProcess: true, // 是否显示进度条
      videoNoMore: false, // 是否还有更多视频
      commentNoMore: false, // 是否还有更多评论
      commentQuery: {
@@ -1090,6 +1094,7 @@
   handleTouchStart(e) {
     this.isDragging = true;
     this.showProcess = true;
     this.isTouch = true;
     this.startProgress = this.progress; // 记录开始时的进度
     this.startX = e.touches[0].pageX;
     console.log("记录开始时的进度", this.startProgress);
@@ -1113,7 +1118,8 @@
     videoContext.seek(this.duration * this.progress / 100)
     videoContext.play()
     this.processHidenTimer = setTimeout(() => {
        this.showProcess = false;
        // this.showProcess = true;
        this.isTouch = false;
      }, 1000);
   },

@@ -1555,16 +1561,21 @@
   .progress-bar {
     position: relative;
     width: 100%;
     height: 16px;
     background-color: #eee;
     height: 5px;
     background-color: rgba(255, 255, 255, 0.2); /* 半透明背景 */
     overflow: hidden;
     border-radius: 1.5px;
     cursor: pointer;
     transition: height 0.2s;
   }

   .progress-fill {
		
     position: absolute;
     left: 0;
     top: 0;
     height: 100%;
     border-radius: 2px;
     background-color: lightgray;
     transition: width 0.1s;
   }