feat: 对接各个视频数据

2025-12-30 19:42:47 +08:00
1 parent 6103453e32
commit 6ab98c4764
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { ImgButton } from '@/components/Button'
+import { Video, QuestionQuiz, type Question } from '@/components'
+import { getBackgroundImage, getPublicPath, IMAGE_PATHS } from '@/utils'
+
+const router = useRouter()
+
+const handleBack = () => {
+  router.back()
+}
+
+// 滑轨拍摄视频 URL
+const sliderVideoUrl = getPublicPath('video/on-site/dygmk_hgydjt_batch.mp4')
+
+// 视频播放状态
+const videoEnded = ref(false)
+const videoPlaying = ref(false)
+const showQuiz = ref(false) // 控制是否显示答题窗口
+
+// 视频播放完成
+const handleVideoEnded = () => {
+  videoEnded.value = true
+  showQuiz.value = true // 视频播放完成后显示答题窗口
+}
+
+// 交互一 & 交互二：选择题
+const questions = ref<Question[]>([
+  {
+    id: 1,
+    title: '滑轨拍摄',
+    description: '下面哪一种拍摄情境，最适合使用滑轨拍摄？',
+    options: [
+      {
+        id: 'a',
+        label: '人物正对镜头说话，背景简单，镜头静止人物正对镜头说话，背景简单，镜头静止'
+      },
+      { id: 'b', label: '人物站在窗边，前景有栏杆或墙体，镜头缓慢横向移动' },
+      { id: 'c', label: '人物快速奔跑，摄影师跟着移动拍摄' }
+    ],
+    correctOptionId: 'b',
+    explanation:
+      '滑轨镜头的价值，不在"动"，而在稳定、克制地交代空间关系。当前景—人物—背景同时存在时，缓慢的横向移动，会让画面产生层次和叙事感，而不是分散注意力。'
+  }
+])
+
+// 答题完成
+const handleQuestionsComplete = () => {
+  showQuiz.value = false // 答题成功后关闭答题窗口
+}
+</script>
+
+<template>
+  <div class="relative w-full h-full flex items-center justify-center overflow-hidden">
+    <!-- 背景 -->
+    <div
+      class="absolute inset-0 bg-cover bg-center bg-no-repeat -z-10"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.SHOOTING.BG) }"
+    ></div>
+
+    <!-- 视频播放区域 -->
+    <div class="w-full h-full bg-black/40 backdrop-blur-md rounded-3xl border border-white/20">
+      <Video
+        class="w-full h-full"
+        :src="sliderVideoUrl"
+        v-model="videoPlaying"
+        :muted="false"
+        :volume="1"
+        :controls="true"
+        :hideNativeControls="true"
+        :autoplay="true"
+        @ended="handleVideoEnded"
+      >
+        <template #overlay>
+          <QuestionQuiz
+            v-if="showQuiz"
+            :show-question-number="false"
+            :questions="questions"
+            @complete="handleQuestionsComplete"
+          />
+        </template>
+      </Video>
+    </div>
+
+    <!-- 返回按钮 -->
+    <ImgButton
+      class="absolute right-0 top-0 z-20"
+      :image="IMAGE_PATHS.COMPONENTS.BACK"
+      @click="handleBack"
+    />
+  </div>
+</template>