304 lines
8.0 KiB
Vue
304 lines
8.0 KiB
Vue
<script lang="ts" setup>
|
||
import { computed, nextTick, ref } from 'vue'
|
||
import { useRouter } from 'vue-router'
|
||
import ImgButton from '@/components/Button/ImgButton.vue'
|
||
import { StepNavigation } from '@/components/Guide'
|
||
import { Video, QuestionQuiz, type Question } from '@/components'
|
||
import { getStaticImage, IMAGE_PATHS } from '@/utils'
|
||
// 视频导入
|
||
// 手机摄像头介绍
|
||
import video1 from '/video/new/xinshou_shoujishexiangtoujieshao.mp4'
|
||
// 景别概念介绍 - 暂时用其他视频代替
|
||
import video2 from '/video/new/xsdh_jbgnjs_batch.mp4'
|
||
// 手机慢动作 - 暂时用其他视频代替
|
||
import video3 from '/video/new/xsdh_sjmdz_batch.mp4'
|
||
// 延时摄影 - 暂时用其他视频代替
|
||
import video4 from '/video/new/xsdh_yssy_batch.mp4'
|
||
// 神奇的微距摄影
|
||
import video5 from '/video/new/xsdh_sqdwjsy_batch.mp4'
|
||
// 夜景摄影 - 暂时用其他视频代替
|
||
import video6 from '/video/new/xsdh_djmldyjsy_batch.mp4'
|
||
|
||
const router = useRouter()
|
||
|
||
// 受控播放开关（用于切换到下一个视频时自动播放）
|
||
const playing = ref(false)
|
||
const status = ref(false)
|
||
const showQuiz = ref(false) // 控制是否显示答题窗口
|
||
|
||
// 步骤导航数据 - 确保content字段不包含（一）、【Q2】等标记
|
||
const rawSteps = [
|
||
{
|
||
id: 'step2',
|
||
label: '拍摄基础',
|
||
content: '手机摄像头介绍',
|
||
type: 'post' as const
|
||
},
|
||
{
|
||
id: 'step3',
|
||
label: '拍摄基础',
|
||
content: '景别概念介绍',
|
||
type: 'post' as const
|
||
},
|
||
{
|
||
id: 'step4',
|
||
label: '拍摄基础',
|
||
content: '手机慢动作',
|
||
type: 'post' as const
|
||
},
|
||
{
|
||
id: 'step5',
|
||
label: '拍摄基础',
|
||
content: '延时摄影',
|
||
type: 'post' as const
|
||
},
|
||
{
|
||
id: 'step6',
|
||
label: '拍摄基础',
|
||
content: '神奇的微距摄影',
|
||
type: 'post' as const
|
||
},
|
||
{
|
||
id: 'step7',
|
||
label: '拍摄基础',
|
||
content: '独具魅力的夜景摄影',
|
||
type: 'post' as const
|
||
}
|
||
]
|
||
|
||
const navigationSteps = ref(rawSteps)
|
||
|
||
// 步骤导航相关状态
|
||
const showStepNavigation = ref(false)
|
||
const currentNavigationStep = ref(0) // 对应视频索引，从0开始
|
||
|
||
// 视频列表
|
||
const videoList = [video1, video2, video3, video4, video5, video6]
|
||
const currentVideoIndex = ref(0)
|
||
|
||
// 题目数据：景别概念介绍（index 1）、手机慢动作（index 2）、独具魅力的夜景摄影（index 5）
|
||
const questions = ref<Question[]>([])
|
||
|
||
// 根据当前视频索引获取对应的题目
|
||
const getQuestionsForVideo = (index: number): Question[] => {
|
||
// 景别概念介绍（index 1）
|
||
if (index === 1) {
|
||
return [
|
||
{
|
||
id: 1,
|
||
title: '',
|
||
description: '（单选）如果你想让观众“看清环境、理解空间关系”，更适合用哪种镜头？',
|
||
options: [
|
||
{
|
||
id: 'a',
|
||
label: '面部特写视频'
|
||
},
|
||
{
|
||
id: 'b',
|
||
label: '中景人物视频'
|
||
},
|
||
{
|
||
id: 'c',
|
||
label: '全景环境视频'
|
||
}
|
||
],
|
||
correctOptionId: 'c',
|
||
explanation: '全景更适合交代故事发生在哪里。'
|
||
}
|
||
]
|
||
}
|
||
|
||
// 手机慢动作（index 2）
|
||
if (index === 2) {
|
||
return [
|
||
{
|
||
id: 2,
|
||
title: '',
|
||
description: '（多选题）下面这些拍摄场景中，哪些更适合使用"慢动作"来表现？',
|
||
options: [
|
||
{
|
||
id: 'a',
|
||
label: '城市街道上车水马龙，车辆快速穿行'
|
||
},
|
||
{
|
||
id: 'b',
|
||
label: '甩头发、转身、跳跃等人物动作瞬间'
|
||
},
|
||
{
|
||
id: 'c',
|
||
label: '水花飞溅、雨滴落地、浪花拍岸'
|
||
},
|
||
{
|
||
id: 'd',
|
||
label: '风吹动衣摆、窗帘或树叶缓慢摆动'
|
||
}
|
||
],
|
||
isMultiple: true,
|
||
correctOptionIds: ['b', 'c', 'd'],
|
||
correctOptionId: '', // 多选题时此字段不使用
|
||
explanation: '更适合用慢动作表现的是 B、C、D，它们都包含了"瞬间细节"和"节奏变化"。'
|
||
}
|
||
]
|
||
}
|
||
|
||
// 独具魅力的夜景摄影（index 5）
|
||
if (index === 5) {
|
||
return [
|
||
{
|
||
id: 3,
|
||
title: '互动题 4',
|
||
description: '（单选）你觉得下面哪句话，更接近“新手拍视频的正确思路”？',
|
||
options: [
|
||
{
|
||
id: 'a',
|
||
label: '哪里好看就拍哪里'
|
||
},
|
||
{
|
||
id: 'b',
|
||
label: '设备越贵，画面越好'
|
||
},
|
||
{
|
||
id: 'c',
|
||
label: '在合适的时间，用合适的方式拍'
|
||
}
|
||
],
|
||
correctOptionId: 'c',
|
||
explanation: '拍摄要学会判断时间、光线和方式。'
|
||
}
|
||
]
|
||
}
|
||
|
||
return []
|
||
}
|
||
|
||
//按顺序播放
|
||
const currentVideo = computed(() => videoList[currentVideoIndex.value])
|
||
const handleVideoChange = () => {
|
||
if (currentVideoIndex.value < videoList.length - 1) {
|
||
currentVideoIndex.value++
|
||
currentNavigationStep.value = currentVideoIndex.value
|
||
} else {
|
||
status.value = true
|
||
return
|
||
}
|
||
nextTick(() => {
|
||
// 使用受控播放来触发下一个视频自动播放
|
||
playing.value = true
|
||
})
|
||
}
|
||
|
||
const handleClose = () => {
|
||
router.back()
|
||
}
|
||
|
||
const handlePlay = () => {}
|
||
|
||
const onEnded = () => {
|
||
// 在指定视频结束时弹出答题
|
||
if (
|
||
currentVideoIndex.value === 1 ||
|
||
currentVideoIndex.value === 2 ||
|
||
currentVideoIndex.value === 5
|
||
) {
|
||
playing.value = false
|
||
questions.value = getQuestionsForVideo(currentVideoIndex.value)
|
||
showQuiz.value = true
|
||
} else {
|
||
handleVideoChange()
|
||
}
|
||
}
|
||
|
||
// 步骤导航事件处理
|
||
const handleStepClick = (index: number) => {
|
||
// 关闭答题窗口（如果打开）
|
||
showQuiz.value = false
|
||
currentVideoIndex.value = index
|
||
currentNavigationStep.value = index
|
||
nextTick(() => {
|
||
playing.value = true
|
||
})
|
||
}
|
||
|
||
const handleStepNavigationClose = () => {
|
||
showStepNavigation.value = false
|
||
}
|
||
|
||
// 答题完成后的处理
|
||
const handleQuestionsComplete = () => {
|
||
showQuiz.value = false
|
||
// 答题完成后继续播放下一个视频
|
||
handleVideoChange()
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="w-full h-full relative bg-white/10">
|
||
<ImgButton
|
||
class="absolute right-0 top-0 z-10"
|
||
:image="IMAGE_PATHS.COMPONENTS.BACK"
|
||
@click="handleClose"
|
||
/>
|
||
<!-- 步骤导航按钮 -->
|
||
<button
|
||
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>
|
||
|
||
<Video
|
||
v-if="currentVideo"
|
||
:src="currentVideo"
|
||
v-model="playing"
|
||
:muted="false"
|
||
:volume="1"
|
||
:controls="true"
|
||
:hideNativeControls="true"
|
||
:anchors="[]"
|
||
@play="handlePlay"
|
||
@ended="onEnded"
|
||
>
|
||
<template #overlay>
|
||
<ImgButton
|
||
class="absolute right-0 top-0 z-10 pointer-events-auto"
|
||
:image="IMAGE_PATHS.COMPONENTS.BACK"
|
||
@click="handleClose"
|
||
/>
|
||
<QuestionQuiz
|
||
v-if="showQuiz"
|
||
:show-question-number="false"
|
||
:questions="questions"
|
||
@complete="handleQuestionsComplete"
|
||
/>
|
||
</template>
|
||
</Video>
|
||
|
||
<!-- 步骤导航抽屉 -->
|
||
<StepNavigation
|
||
:visible="showStepNavigation"
|
||
:background-image="getStaticImage('work/vlog背景全屏待定')"
|
||
:steps="navigationSteps"
|
||
:current-step-index="currentNavigationStep"
|
||
@step-click="handleStepClick"
|
||
@close="handleStepNavigationClose"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
video {
|
||
width: 100%;
|
||
height: 100%;
|
||
/* 核心：保持视频比例，多余部分被裁剪 */
|
||
object-fit: cover;
|
||
}
|
||
</style>
|