forked from zhongyidian/super_video
112 lines
3.0 KiB
Vue
112 lines
3.0 KiB
Vue
<script lang="tsx" setup>
|
|
import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
|
|
import { ImgButton } from '@/components/Button'
|
|
|
|
import { onMounted, ref } from 'vue'
|
|
import { ProgressBar, Overlay } from '@/components'
|
|
import { useRouter } from 'vue-router'
|
|
import { useInterviewStore } from '@/stores'
|
|
import InterviewMenu from './components/menu.vue'
|
|
|
|
const router = useRouter()
|
|
const interview = useInterviewStore()
|
|
const visible = ref(false)
|
|
|
|
const currentStep = ref(interview.InterviewUnlockProgress)
|
|
|
|
const handleComplete = () => {
|
|
// console.log('完成前置条件')
|
|
// 处理完成逻辑
|
|
router.push({ name: 'InterviewPractice' })
|
|
}
|
|
|
|
const handleStepChange = (step: number) => {
|
|
// 处理步骤变化逻辑
|
|
currentStep.value = step
|
|
visible.value = true
|
|
}
|
|
|
|
const handleWorkClick = () => {
|
|
console.log('任务取景按钮点击')
|
|
// 处理任务取景按钮点击逻辑
|
|
router.push({ name: 'InterviewWork' })
|
|
}
|
|
|
|
const handleClose = () => {
|
|
router.push({ name: 'Action' })
|
|
}
|
|
|
|
onMounted(() => {
|
|
if (currentStep.value !== 0 && currentStep.value !== 4) {
|
|
visible.value = true
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-full h-full relative">
|
|
<!-- 背景图片-center -->
|
|
<div
|
|
class="absolute inset-0 bg-cover bg-center bg-no-repeat"
|
|
:style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.VLOG.BG_CENTER) }"
|
|
></div>
|
|
|
|
<!-- 关闭 -->
|
|
<ImgButton
|
|
class="absolute right-0 top-0 z-20"
|
|
:image="IMAGE_PATHS.COMPONENTS.CLOSE"
|
|
@click="handleClose"
|
|
/>
|
|
|
|
<!-- 背景图片 -->
|
|
<div
|
|
class="absolute inset-0 bg-cover bg-center bg-no-repeat"
|
|
:style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.VLOG.BG) }"
|
|
></div>
|
|
|
|
<!-- 标题 -->
|
|
<div class="absolute top-2 left-1/2 -translate-x-1/2">
|
|
<ImgButton :image="IMAGE_PATHS.VLOG.TITLE" />
|
|
</div>
|
|
|
|
<!-- 任务取景按钮 -->
|
|
<div
|
|
class="absolute left-24 top-24"
|
|
:style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.VLOG.TASK_CAMERA) }"
|
|
>
|
|
<ImgButton
|
|
:image="currentStep === 4 ? IMAGE_PATHS.VLOG.TASK_BTN_OK : IMAGE_PATHS.VLOG.TASK_BTN"
|
|
@click="handleWorkClick"
|
|
/>
|
|
</div>
|
|
|
|
<!-- 引导任务 -->
|
|
<ImgButton class="absolute right-24 bottom-24" :image="IMAGE_PATHS.VLOG.TASK_PERSON" />
|
|
|
|
<Overlay content-class="w-full h-full" :visible="visible && currentStep < 4">
|
|
<!-- 关闭按钮 -->
|
|
<ImgButton
|
|
class="absolute right-0 top-0 z-20"
|
|
:image="IMAGE_PATHS.COMPONENTS.CLOSE"
|
|
@click="visible = false"
|
|
/>
|
|
|
|
<!-- 菜单 -->
|
|
<InterviewMenu :current-step="currentStep" />
|
|
|
|
<!-- 进度条 -->
|
|
<div class="absolute left-0 bottom-0 w-full">
|
|
<ProgressBar :current-step="currentStep" @step-change="handleStepChange" />
|
|
</div>
|
|
</Overlay>
|
|
|
|
<div class="absolute bottom-0 w-full">
|
|
<ProgressBar
|
|
:current-step="currentStep"
|
|
@complete="handleComplete"
|
|
@step-change="handleStepChange"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|