super_video/src/views/interview/midterm-shooting/on-site/index.vue

<script lang="ts" setup>
import { computed, nextTick, ref } from 'vue'
import { useRouter } from 'vue-router'
import { ImgButton, Video } from '@/components'
import { StepNavigation } from '@/components/Guide'
import { IMAGE_PATHS, getPublicPath, getStaticImage } from '@/utils'

const router = useRouter()
const playing = ref(false)
const showStepNavigation = ref(false)
const currentVideoIndex = ref(0)

const navigationSteps = ref([
  {
    id: 'q1-shoot-material',
    label: '中期拍摄',
    content: '素材怎么拍',
    videoUrl: getPublicPath('video/interview/on-site/ftmk_sczmp_batch.mp4'),
    type: 'shooting' as const
  },
  {
    id: 'q1-required-shots',
    label: '中期拍摄',
    content: '必拍镜头有哪些',
    videoUrl: getPublicPath('video/interview/on-site/ftmk_bpjtynx_batch.mp4'),
    type: 'shooting' as const
  },
  {
    id: 'q2-moving-shot',
    label: '中期拍摄',
    content: '移动镜头的作用',
    type: 'shooting' as const
  },
  {
    id: 'q2-close-up',
    label: '中期拍摄',
    content: '特写镜头的作用',
    type: 'shooting' as const
  }
])

const currentVideo = computed(() => navigationSteps.value[currentVideoIndex.value].videoUrl)

const back = () => {
  router.back()
}

const handleStepClick = (index: number) => {
  currentVideoIndex.value = index
  // showStepNavigation.value = false
  nextTick(() => {
    playing.value = true
  })
}

const handleStepNavigationClose = () => {
  showStepNavigation.value = false
}

const handleEnded = () => {
  if (currentVideoIndex.value >= navigationSteps.value.length - 1) {
    playing.value = false
    return
  }

  currentVideoIndex.value++
  nextTick(() => {
    playing.value = true
  })
}
</script>

<template>
  <div class="relative w-full h-full overflow-hidden bg-black">
    <Video
      :src="currentVideo"
      v-model="playing"
      :muted="false"
      :volume="1"
      :controls="true"
      :hideNativeControls="true"
      @ended="handleEnded"
    >
      <template #overlay>
        <ImgButton
          class="absolute right-0 top-0 z-20 pointer-events-auto"
          :image="IMAGE_PATHS.COMPONENTS.BACK"
          @click="back"
        />
        <button
          class="absolute right-4 top-1/2 z-20 -translate-y-1/2 w-12 h-12 rounded-full bg-blue-500/80 text-white transition-all duration-200 hover:bg-blue-500 pointer-events-auto flex items-center justify-center"
          title="资源列表"
          @click="showStepNavigation = true"
        >
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
            <path
              d="M3 4H17M3 8H17M3 12H17M3 16H17"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
            />
          </svg>
        </button>
      </template>
    </Video>

    <StepNavigation
      :visible="showStepNavigation"
      :background-image="getStaticImage('work/vlog背景全屏待定')"
      :steps="navigationSteps"
      :current-step-index="currentVideoIndex"
      @step-click="handleStepClick"
      @close="handleStepNavigationClose"
    />
  </div>
</template>