feat: 对接各个视频数据

src/views/vlog/index.vue

@@ -2,38 +2,52 @@
 import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
 import { ImgButton } from '@/components/Button'
 
-import { onMounted, ref } from 'vue'
-import { ProgressBar } from '@/components'
-import { useRouter, useRoute } from 'vue-router'
+import { computed, onMounted, ref, watch } from 'vue'
+import { ProgressBar, Overlay } from '@/components'
+import { useRouter } from 'vue-router'
+import { useVlogStore } from '@/stores'
+import VlogMenu from './components/menu.vue'
 
 const router = useRouter()
-const route = useRoute()
+const vlog = useVlogStore()
+const visible = ref(false)
 
-const currentStep = ref(0)
+const currentStep = computed(() => vlog.vlogUnlockProgress)
 
 const handleComplete = () => {
-  console.log('完成前置条件')
+  // console.log('完成前置条件')
   // 处理完成逻辑
+  router.push({ name: 'VlogPractice' })
 }
 
 const handleStepChange = (step: number) => {
-  console.log('步骤变化:', step)
   // 处理步骤变化逻辑
+  vlog.setVlogUnlockProgress(step)
+  visible.value = true
 }
 
 const handleWorkClick = () => {
   console.log('任务取景按钮点击')
   // 处理任务取景按钮点击逻辑
-  router.push({ name: 'Work' })
+  router.push({ name: 'VlogWork' })
 }
 
 const handleClose = () => {
-  router.back()
+  router.push({ name: 'Action' })
 }
 
+// watch(
+//   () => currentStep.value,
+//   newVal => {
+//     if (newVal !== 0 && newVal !== 4) {
+//       visible.value = true
+//     }
+//   }
+// )
+
 onMounted(() => {
-  if (route.query.key === 'video') {
-    currentStep.value = 1
+  if (currentStep.value !== 0 && currentStep.value !== 4) {
+    visible.value = true
   }
 })
 </script>
@@ -70,7 +84,7 @@ onMounted(() => {
       :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.VLOG.TASK_CAMERA) }"
     >
       <ImgButton
-        :image="currentStep === 1 ? IMAGE_PATHS.VLOG.TASK_BTN_OK : IMAGE_PATHS.VLOG.TASK_BTN"
+        :image="currentStep === 4 ? IMAGE_PATHS.VLOG.TASK_BTN_OK : IMAGE_PATHS.VLOG.TASK_BTN"
         @click="handleWorkClick"
       />
     </div>
@@ -78,6 +92,23 @@ onMounted(() => {
     <!-- 引导任务 -->
     <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"
+      />
+
+      <!-- 菜单 -->
+      <VlogMenu :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"