taimed-international-app/components/video-player/components/ProgressBar.vue

<template>
  <view class="progress-bar-container">
    <view
      class="progress-bar"
      @touchstart="handleTouchStart"
      @touchmove="handleTouchMove"
      @touchend="handleTouchEnd"
      @click="handleClick"
    >
      <!-- 背景轨道 -->
      <view class="track"></view>

      <!-- 已播放进度 -->
      <view class="played" :style="{ width: playedPercent + '%' }"></view>

      <!-- 拖动滑块 -->
      <view class="thumb" :style="{ left: playedPercent + '%' }"></view>

      <!-- 时间提示 -->
      <view
        v-if="showTimeTooltip"
        class="time-tooltip"
        :style="{ left: tooltipPosition + '%' }"
      >
        {{ formatTime(tooltipTime) }}
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

interface Props {
  current: number
  duration: number
}

const props = withDefaults(defineProps<Props>(), {
  current: 0,
  duration: 0
})

const emit = defineEmits<{
  seek: [time: number]
}>()

const isDragging = ref(false)
const showTimeTooltip = ref(false)
const tooltipPosition = ref(0)
const tooltipTime = ref(0)
const progressBarWidth = ref(0)

const playedPercent = computed(() => {
  if (!props.duration) return 0
  return (props.current / props.duration) * 100
})

const formatTime = (seconds: number): string => {
  if (!seconds || isNaN(seconds)) return '00:00'

  const mins = Math.floor(seconds / 60)
  const secs = Math.floor(seconds % 60)

  return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
}

const handleTouchStart = (e: any) => {
  isDragging.value = true
  showTimeTooltip.value = true

  // 获取进度条宽度
  const query = uni.createSelectorQuery()
  query.select('.progress-bar').boundingClientRect()
  query.exec((res) => {
    if (res[0]) {
      progressBarWidth.value = res[0].width
    }
  })
}

const handleTouchMove = (e: any) => {
  if (!isDragging.value || !progressBarWidth.value) return

  const touch = e.touches[0]
  const query = uni.createSelectorQuery()
  query.select('.progress-bar').boundingClientRect()
  query.exec((res) => {
    if (res[0]) {
      const rect = res[0]
      const offsetX = touch.clientX - rect.left
      const percent = Math.max(0, Math.min(100, (offsetX / rect.width) * 100))

      tooltipPosition.value = percent
      tooltipTime.value = (percent / 100) * props.duration
    }
  })
}

const handleTouchEnd = (e: any) => {
  if (!isDragging.value) return

  isDragging.value = false
  showTimeTooltip.value = false

  // 发送 seek 事件
  emit('seek', tooltipTime.value)
}

const handleClick = (e: any) => {
  const query = uni.createSelectorQuery()
  query.select('.progress-bar').boundingClientRect()
  query.exec((res) => {
    if (res[0]) {
      const rect = res[0]
      const offsetX = e.detail.x - rect.left
      const percent = Math.max(0, Math.min(100, (offsetX / rect.width) * 100))
      const time = (percent / 100) * props.duration

      emit('seek', time)
    }
  })
}
</script>

<style lang="scss" scoped>
.progress-bar-container {
  width: 100%;
  padding: 10rpx 0;
}

.progress-bar {
  position: relative;
  width: 100%;
  height: 6rpx;
  cursor: pointer;
}

.track {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 3rpx;
}

.played {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #1989fa;
  border-radius: 3rpx;
  transition: width 0.1s;
}

.thumb {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 24rpx;
  height: 24rpx;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
  transition: left 0.1s;
}

.time-tooltip {
  position: absolute;
  bottom: 30rpx;
  transform: translateX(-50%);
  padding: 8rpx 16rpx;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: 24rpx;
  border-radius: 8rpx;
  white-space: nowrap;
  pointer-events: none;
}
</style>