forked from zhongyidian/super_video
138 lines
3.9 KiB
Vue
138 lines
3.9 KiB
Vue
<script lang="ts" setup>
|
||
import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
|
||
import { ImgButton } from '@/components/Button'
|
||
import { ModuleSwitcher } from './components/ModuleSwitcher'
|
||
import { computed, ref, onMounted } from 'vue'
|
||
import { useRouter } from 'vue-router'
|
||
|
||
const router = useRouter()
|
||
|
||
// 响应式状态
|
||
const status = ref(false)
|
||
const guideShow = ref(false)
|
||
const selectedModule = ref<'vlog' | 'film' | 'interview'>('vlog')
|
||
const isImageLoading = ref(false)
|
||
|
||
// 预加载图片映射
|
||
const imageMap = {
|
||
vlog: IMAGE_PATHS.ACTION.VIDEO1,
|
||
film: IMAGE_PATHS.ACTION.VIDEO2,
|
||
interview: IMAGE_PATHS.ACTION.VIDEO3
|
||
}
|
||
|
||
// 预加载所有图片
|
||
const preloadImages = () => {
|
||
const imageUrls = Object.values(imageMap).map(path => getBackgroundImage(path))
|
||
imageUrls.forEach(url => {
|
||
const img = new Image()
|
||
img.src = url
|
||
})
|
||
}
|
||
|
||
// 事件处理函数
|
||
const handleOpenGuide = () => {
|
||
guideShow.value = true
|
||
}
|
||
|
||
const handleCloseGuide = () => {
|
||
guideShow.value = false
|
||
status.value = true
|
||
}
|
||
|
||
const handleModuleChange = (module: 'vlog' | 'film' | 'interview') => {
|
||
if (selectedModule.value === module) return
|
||
|
||
isImageLoading.value = true
|
||
selectedModule.value = module
|
||
|
||
// 模拟图片加载完成
|
||
setTimeout(() => {
|
||
isImageLoading.value = false
|
||
}, 100)
|
||
}
|
||
|
||
const handleClick = () => {
|
||
router.push({
|
||
//首字母大写
|
||
name: selectedModule.value.charAt(0).toUpperCase() + selectedModule.value.slice(1)
|
||
})
|
||
}
|
||
|
||
// 计算属性
|
||
const selectedImage = computed(() => {
|
||
return getBackgroundImage(imageMap[selectedModule.value])
|
||
})
|
||
|
||
// 生命周期
|
||
onMounted(() => {
|
||
preloadImages()
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<div class="w-full h-full relative">
|
||
<!-- 背景图片 -->
|
||
<div
|
||
:class="['absolute inset-0 bg-cover bg-center bg-no-repeat']"
|
||
:style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.ACTION_BG) }"
|
||
></div>
|
||
|
||
<!-- 选择模块 -->
|
||
<div :class="['absolute left-0 top-[-140px] inset-0 z-[8] pointer-events-none']">
|
||
<ModuleSwitcher v-model="selectedModule" @change="handleModuleChange" />
|
||
</div>
|
||
|
||
<!-- 电视机 -->
|
||
<div
|
||
class="absolute w-[765px] h-[768px] right-0 top-0 z-[5] transition-opacity duration-200 cursor-pointer"
|
||
:class="{ 'opacity-50': isImageLoading }"
|
||
:style="{ backgroundImage: selectedImage }"
|
||
@click.stop="handleClick"
|
||
></div>
|
||
|
||
<ImgButton
|
||
v-if="status"
|
||
:image="IMAGE_PATHS.ACTION.SKILLS_BTN"
|
||
class="absolute bottom-0 right-0 z-30"
|
||
/>
|
||
|
||
<!-- 新手指导遮罩 -->
|
||
<div v-if="!status" class="absolute inset-0 bg-black/50 z-10"></div>
|
||
|
||
<!-- 新手指导 -->
|
||
<div
|
||
class="absolute bottom-0 left-0 w-full h-[497px] bg-cover bg-center bg-no-repeat z-20 pointer-events-none"
|
||
:style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.ACTION.FOOTER_BTN) }"
|
||
v-if="!guideShow"
|
||
>
|
||
<div
|
||
class="absolute bottom-20 right-[calc(50%-20px)] translate-x-1/2 w-20 h-20 cursor-pointer pointer-events-auto"
|
||
@click="handleOpenGuide"
|
||
></div>
|
||
</div>
|
||
|
||
<div
|
||
class="cursor-pointer absolute bottom-0 left-0 w-full h-[911px] bg-cover bg-center bg-no-repeat z-40"
|
||
:style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.ACTION.FOOTER_BG) }"
|
||
v-else
|
||
>
|
||
<ImgButton
|
||
:image="IMAGE_PATHS.ACTION.DOWN"
|
||
class="absolute top-60 right-1/2 translate-x-1/2"
|
||
@click="handleCloseGuide"
|
||
/>
|
||
</div>
|
||
|
||
<!-- <GuideSteps @complete="handleComplete" @skip="handleSkip">
|
||
<GuideStepsItem>欢迎来到短视频达人应用！我是你的导学小龙</GuideStepsItem>
|
||
<GuideStepsItem>
|
||
现在让我们一起走进
|
||
<em class="text-red-500">Vlog</em>
|
||
的世界。简单说，
|
||
<em class="text-red-500">Vlog</em>
|
||
就是用视频记录生活的一种方式--它像一本会动的日记能把我们身边的小事、瞬间的心情，通过镜头变得生动又具体。
|
||
</GuideStepsItem>
|
||
</GuideSteps> -->
|
||
</div>
|
||
</template>
|