feat: 对接各个视频数据

2025-12-30 19:42:47 +08:00
1 parent 6103453e32
commit 6ab98c4764
@@ -0,0 +1,229 @@
+<script lang="ts" setup>
+import { computed, nextTick, onMounted, ref } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import ImgButton from '@/components/Button/ImgButton.vue'
+import { GuideSteps, StepNavigation } from '@/components/Guide'
+import { Video } from '@/components'
+import { getStaticImage, IMAGE_PATHS } from '@/utils'
+import second from '/video/vlog_renwuqujing_jichujingbieyunyong.mp4'
+import third from '/video/vlog_renwuqujing_huamiangoutu.mp4'
+import fourth from '/video/vlog_renwuqujing_jiaobencehua.mp4'
+import five from '/video/vlog_renwuqujing_zhuapai.mp4'
+import six from '/video/vlog_renwuqujing_jianjipingjie.mp4'
+import { useInterviewStore } from '@/stores'
+
+const router = useRouter()
+const route = useRoute()
+
+const interview = useInterviewStore()
+
+// 受控播放开关（用于切换到下一个视频时自动播放）
+const playing = ref(false)
+const status = ref(false)
+
+//引导步骤
+const steps = ref([
+  {
+    id: 'step1',
+    content: '试着用这些方法记录身边的小事，你会发现，原来平凡的日子里有这么多值得捕捉的瞬间。'
+  }
+])
+
+// 步骤导航数据
+const navigationSteps = ref([
+  {
+    id: 'step1',
+    label: '拍摄执行',
+    content: '基础景别应用',
+    type: 'shooting' as const
+  },
+  {
+    id: 'step2',
+    label: '拍摄执行',
+    content: '画面构图',
+    type: 'shooting' as const
+  },
+  {
+    id: 'step3',
+    label: '内容策划',
+    content: '简单脚本策划',
+    type: 'planning' as const
+  },
+  {
+    id: 'step4',
+    label: '拍摄执行',
+    content: '动态事件跟拍与抓拍',
+    type: 'shooting' as const
+  },
+  {
+    id: 'step5',
+    label: '后期制作',
+    content: '素材导入、剪辑拼接',
+    type: 'post' as const
+  }
+])
+
+// 步骤导航相关状态
+const showStepNavigation = ref(false)
+const currentNavigationStep = ref(1) // 对应视频索引，从0开始
+
+// 视频列表
+const videoList = [second, third, fourth, five, six]
+const currentVideoIndex = ref(0)
+
+//按顺序播放
+const currentVideo = computed(() => videoList[currentVideoIndex.value])
+const resolvedSrc = computed(() => {
+  if (key.value === 'case') return '/video/anlishangxi_meishi_xiaoyuanzi.mp4'
+  if (key.value === 'profession') return currentVideo.value
+  return ''
+})
+const handleVideoChange = () => {
+  if (currentVideoIndex.value < videoList.length - 1) {
+    currentVideoIndex.value++
+    currentNavigationStep.value = currentVideoIndex.value
+  } else {
+    status.value = true
+    steps.value = [
+      {
+        id: 'step1',
+        content: '恭喜你，已完成专业剖析的学习，点击【查看脚本】回顾视频脚本吧!'
+      }
+    ]
+    return
+  }
+  nextTick(() => {
+    // 使用受控播放来触发下一个视频自动播放
+    playing.value = true
+  })
+}
+
+const handleClose = () => {
+  router.back()
+}
+
+const image = computed(() => route.query.image as string)
+const key = computed(() => route.query.key as string)
+
+const handleClick = () => {}
+
+const handlePlay = () => {}
+
+const onEnded = () => {
+  if (key.value === 'profession') handleVideoChange()
+}
+
+const handleComplete = () => {
+  if (key.value === 'profession') {
+    if (!interview.isInterviewUnlock) interview.setIsInterviewUnlock(true)
+    router.push({
+      name: 'InterviewWork'
+    })
+  } else {
+    if (interview.InterviewUnlockProgress == 0) interview.setInterviewUnlockProgress(1)
+    router.push({
+      name: 'Interview'
+    })
+  }
+}
+
+// 步骤导航事件处理
+const handleStepClick = (index: number) => {
+  currentVideoIndex.value = index
+  currentNavigationStep.value = index
+  nextTick(() => {
+    playing.value = true
+  })
+}
+
+const handleStepNavigationClose = () => {
+  showStepNavigation.value = false
+}
+
+onMounted(() => {
+  if (key.value === 'idea') {
+    status.value = true
+  }
+})
+</script>
+
+<template>
+  <div class="w-full h-full relative bg-white/10" @click="handleClick">
+    <template v-if="key !== 'case' && key !== 'profession'">
+      <ImgButton class="absolute left-4 top-4 z-10" :image="image"></ImgButton>
+      <ImgButton
+        class="absolute right-0 top-0 z-10"
+        :image="IMAGE_PATHS.COMPONENTS.BACK"
+        @click="handleClose"
+      />
+    </template>
+    <!-- 步骤导航按钮 -->
+    <button
+      v-if="key === 'profession'"
+      class="absolute right-4 top-1/2 z-10 -translate-y-1/2 w-12 h-12 bg-blue-500/80 hover:bg-blue-500 rounded-full flex items-center justify-center text-white transition-all duration-200"
+      @click="showStepNavigation = true"
+      title="步骤导航"
+    >
+      <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>
+
+    <div v-if="key === 'vlog'" :src="image">
+      <img :src="getStaticImage('work/vlog背景全屏待定')" alt="" />
+    </div>
+    <Video
+      v-else-if="key === 'case' || key === 'profession'"
+      :src="resolvedSrc"
+      v-model="playing"
+      :muted="false"
+      :volume="1"
+      :controls="true"
+      :hideNativeControls="true"
+      @play="handlePlay"
+      @ended="onEnded"
+    >
+      <template v-slot:overlay>
+        <ImgButton
+          class="absolute left-4 top-4 z-10 pointer-events-auto"
+          :image="image"
+        ></ImgButton>
+        <ImgButton
+          class="absolute right-0 top-0 z-10 pointer-events-auto"
+          :image="IMAGE_PATHS.COMPONENTS.BACK"
+          @click="handleClose"
+        />
+      </template>
+    </Video>
+    <div v-else-if="key === 'idea'" :src="image">
+      <img :src="getStaticImage('work/思路提点全屏')" alt="" />
+    </div>
+  </div>
+
+  <!-- 引导与高亮 -->
+  <GuideSteps v-if="status" :steps="steps" position-offset-y="85%" @complete="handleComplete" />
+
+  <!-- 步骤导航抽屉 -->
+  <StepNavigation
+    :visible="showStepNavigation && key === 'profession'"
+    :background-image="getStaticImage('work/vlog背景全屏待定')"
+    :steps="navigationSteps"
+    :current-step-index="currentNavigationStep"
+    @step-click="handleStepClick"
+    @close="handleStepNavigationClose"
+  />
+</template>
+
+<style scoped>
+video {
+  width: 100%;
+  height: 100%;
+  /* 核心：保持视频比例，多余部分被裁剪 */
+  object-fit: cover;
+}
+</style>