feat: 对接各个视频数据

src/views/vlog/video/index.vue

@@ -4,16 +4,19 @@ import { useRouter, useRoute } from 'vue-router'
 import ImgButton from '@/components/Button/ImgButton.vue'
 import { GuideSteps, StepNavigation } from '@/components/Guide'
 import { Video } from '@/components'
-import { getStaticImage, IMAGE_PATHS } from '@/utils'
-import second from '/video/Vlog模块_任务取景框_专业剖析_基础景别运用.mp4'
-import third from '/video/Vlog模块_任务取景框_专业剖析_画面构图.mp4'
-import fourth from '/video/Vlog模块_任务取景框_专业剖析_脚本策划.mp4'
-import five from '/video/Vlog模块_任务取景框_专业剖析_动态事件跟拍与抓拍.mp4'
-import six from '/video/Vlog模块_任务取景框_专业剖析_素材导入、剪辑拼接.mp4'
+import { getBackgroundImage, getStaticImage, IMAGE_PATHS } from '@/utils'
+import second from '/video/vlog_renwuqujing_jichujingbieyunyong.mp4'
+import third from '/video/vlog_renwuqujing_huamiangoutu.mp4'
+import fourth from '/video/vlog_renwuqujing_jiaobencehua.mp4'
+import five from '/video/vlog_renwuqujing_zhuapai.mp4'
+import six from '/video/vlog_renwuqujing_jianjipingjie.mp4'
+import { useVlogStore } from '@/stores'
 
 const router = useRouter()
 const route = useRoute()
 
+const vlog = useVlogStore()
+
 // 受控播放开关（用于切换到下一个视频时自动播放）
 const playing = ref(false)
 const status = ref(false)
@@ -71,7 +74,7 @@ const currentVideoIndex = ref(0)
 //按顺序播放
 const currentVideo = computed(() => videoList[currentVideoIndex.value])
 const resolvedSrc = computed(() => {
-  if (key.value === 'case') return '/video/案例赏析-美食小确幸：桂花酒酿小圆子.mp4'
+  if (key.value === 'case') return '/video/anlishangxi_meishi_xiaoyuanzi.mp4'
   if (key.value === 'profession') return currentVideo.value
   return ''
 })
@@ -101,29 +104,38 @@ const handleClose = () => {
 
 const image = computed(() => route.query.image as string)
 const key = computed(() => route.query.key as string)
+const label = computed(() => route.query.label as string)
 
 const handleClick = () => {}
 
 const handlePlay = () => {}
 
+// 示例：简单锚点配置（可按需替换为真实题目数据）
+// const anchors = ref([
+//   {
+//     id: 'example-1',
+//     time: 5,
+//     meta: {
+//       title: '第 1 个锚点示例',
+//       options: ['继续观看']
+//     }
+//   }
+// ])
+
 const onEnded = () => {
   if (key.value === 'profession') handleVideoChange()
 }
 
 const handleComplete = () => {
   if (key.value === 'profession') {
+    if (!vlog.isVlogUnlock) vlog.setIsVlogUnlock(true)
     router.push({
-      name: 'Work',
-      query: {
-        key: 'work'
-      }
+      name: 'Work'
     })
   } else {
+    if (vlog.vlogUnlockProgress == 0) vlog.setVlogUnlockProgress(1)
     router.push({
-      name: 'Prepare',
-      query: {
-        key: 'prepare'
-      }
+      name: 'Vlog'
     })
   }
 }
@@ -149,9 +161,22 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="w-full h-full relative bg-white/10" @click="handleClick">
+  <div class="w-full h-full relative bg-white/10">
     <template v-if="key !== 'case' && key !== 'profession'">
-      <ImgButton class="absolute left-4 top-4 z-10" :image="image"></ImgButton>
+      <div
+        :class="[
+          'absolute left-4 top-4 z-10 w-[359px] h-[96px] bg-cover bg-center',
+          'flex justify-center items-center'
+        ]"
+        :style="{ backgroundImage: getBackgroundImage(image) }"
+      >
+        <span
+          :class="['ml-6 text-white [text-shadow:5px_5px_5px_rgba(0,0,0,0.4)] text-5xl font-bold']"
+        >
+          {{ label }}
+        </span>
+      </div>
+      <!-- <ImgButton class="absolute left-4 top-4 z-10" :image="image"></ImgButton> -->
       <ImgButton
         class="absolute right-0 top-0 z-10"
         :image="IMAGE_PATHS.COMPONENTS.BACK"
@@ -186,14 +211,53 @@ onMounted(() => {
       :volume="1"
       :controls="true"
       :hideNativeControls="true"
+      :anchors="[]"
       @play="handlePlay"
       @ended="onEnded"
     >
-      <template #overlay>
-        <ImgButton
+      <!-- <template #anchor="{ anchor, resume, unmute }">
+        <div class="absolute inset-0 bg-black/50 flex items-center justify-center text-white">
+          <div class="bg-black/80 rounded-lg p-4 w-[320px]">
+            <div class="mb-3 font-bold">
+              {{ anchor.meta?.title || `锚点：${anchor.id}` }}
+            </div>
+            <div class="space-y-2">
+              <button
+                v-for="opt in anchor.meta?.options || []"
+                :key="opt"
+                class="w-full py-2 rounded bg-white/10 hover:bg-white/20"
+                @click="resume()"
+              >
+                {{ opt }}
+              </button>
+            </div>
+            <div class="mt-4 flex justify-end gap-2 text-xs opacity-70">
+              <button @click="unmute()">取消静音并继续</button>
+              <button @click="resume()">直接继续播放</button>
+            </div>
+          </div>
+        </div>
+      </template> -->
+      <template v-slot:overlay>
+        <div
+          :class="[
+            'absolute left-4 top-4 z-10 pointer-events-auto w-[359px] h-[96px] bg-cover bg-center',
+            'flex justify-center items-center'
+          ]"
+          :style="{ backgroundImage: getBackgroundImage(image) }"
+        >
+          <span
+            :class="[
+              'ml-6 text-white [text-shadow:5px_5px_5px_rgba(0,0,0,0.4)] text-5xl font-bold'
+            ]"
+          >
+            {{ label }}
+          </span>
+        </div>
+        <!-- <ImgButton
           class="absolute left-4 top-4 z-10 pointer-events-auto"
           :image="image"
-        ></ImgButton>
+        ></ImgButton> -->
         <ImgButton
           class="absolute right-0 top-0 z-10 pointer-events-auto"
           :image="IMAGE_PATHS.COMPONENTS.BACK"