feat: 对接各个视频数据

src/views/vlog/work/index.vue

@@ -1,24 +1,27 @@
 <script lang="tsx" name="Work" setup>
 defineOptions({ name: 'Work' })
-import { ref, computed, onActivated } from 'vue'
+import { ref, computed } from 'vue'
 import { getBackgroundImage, IMAGE_PATHS, getStaticImage } from '@/utils'
 import { ImgButton } from '@/components/Button'
 import WorkSideSwitcher from './components/WorkSideSwitcher.vue'
 import { GuideSteps } from '@/components/Guide'
-import { useRouter, useRoute } from 'vue-router'
+import { useRouter } from 'vue-router'
 import { useScale } from '@/composables/useScale'
 import { ImagePreview } from '@/components'
+import { useVlogStore } from '@/stores'
 
 const router = useRouter()
-const route = useRoute()
+
+const vlog = useVlogStore()
 
 type WorkTab = 'vlog' | 'case' | 'profession' | 'idea'
 
-const selected = ref<WorkTab>('vlog')
+const selected = ref<WorkTab>('case')
 const stepIndex = ref(0)
 const workSideSwitcherRef = ref<InstanceType<typeof WorkSideSwitcher>>()
 
-const status = ref(false)
+const isGuideVlogTask = computed(() => vlog.isGuideVlogTask)
+const isVlogUnlock = computed(() => vlog.isVlogUnlock)
 
 //引导步骤
 const steps = [
@@ -60,7 +63,7 @@ const currentItem = computed(() => {
 })
 
 const currentHighlight = computed(() =>
-  stepIndex.value === 0 ? '.img-switch-item--vlog' : '.work-border'
+  stepIndex.value === 0 ? '.img-switch-item--case' : '.work-border'
 )
 
 interface SimpleStep {
@@ -76,28 +79,34 @@ const handleSideSwitcherChange = (value: WorkTab) => {
 }
 
 const handleImageClick = () => {
+  const currentItem = workSideSwitcherRef.value?.items.find(item => item.key === selected.value)
   router.push({
-    name: 'Video',
+    name: 'VlogVideo',
     query: {
-      image:
-        workSideSwitcherRef.value?.items.find(item => item.key === selected.value)?.activeImage ||
-        '',
-      key: selected.value
+      image: currentItem?.activeImage || '',
+      key: selected.value,
+      label: currentItem?.label || ''
     }
   })
 }
 
 const handleClose = () => {
-  router.back()
+  router.push({ name: 'Vlog' })
 }
 
-//状态是否完成前置
-const isComplete = ref(false)
-
 const handleWorkClick = () => {
-  if (!isComplete.value) return
+  if (!isVlogUnlock.value) return
   openImages([getStaticImage('work/桂花酒酿小圆子')])
 }
+const handleGuideComplete = () => {
+  vlog.setIsGuideVlogTask(false)
+}
+
+const handleOpenGuide = () => {
+  stepIndex.value = 0
+  vlog.setIsGuideVlogTask(true)
+}
+
 const { scale, offsetX, offsetY } = useScale()
 
 function openImages(urls: string[], startIndex = 0) {
@@ -108,15 +117,6 @@ function openImages(urls: string[], startIndex = 0) {
     getScaleMetrics: () => ({ scale: scale.value, offsetX: offsetX.value, offsetY: offsetY.value })
   })
 }
-
-onActivated(() => {
-  if (route.query.key === 'work') {
-    // selected.value = 'profession'
-    isComplete.value = true
-  } else {
-    status.value = true
-  }
-})
 </script>
 
 <template>
@@ -158,31 +158,40 @@ onActivated(() => {
     </div>
 
     <!-- 左侧选项切换 -->
-    <div class="absolute right-4 top-32 z-20">
+    <div class="absolute right-0 top-60 z-20">
       <WorkSideSwitcher
         ref="workSideSwitcherRef"
         v-model="selected"
         @change="handleSideSwitcherChange"
-        :item-class="'w-[462px] h-[142px] '"
+        :item-class="'w-[359px] h-[96px]'"
       />
     </div>
 
     <!-- 任务取景按钮 -->
     <ImgButton
       class="absolute right-14 bottom-10"
-      :image="isComplete ? IMAGE_PATHS.WORK.TASK_BTN_OK : IMAGE_PATHS.WORK.TASK_BTN"
+      :image="isVlogUnlock ? IMAGE_PATHS.WORK.TASK_BTN_OK : IMAGE_PATHS.WORK.TASK_BTN"
       @click="handleWorkClick"
     />
 
     <!-- 引导与高亮 -->
     <GuideSteps
-      v-if="status"
+      v-if="isGuideVlogTask"
       :steps="steps"
       :highlight-selector="currentHighlight"
       :highlight-padding="12"
       :highlight-radius="20"
       @step-change="handleStepChange"
+      @complete="handleGuideComplete"
+      @skip="handleGuideComplete"
       position-offset-y="85%"
     />
+
+    <!-- 引导词按钮 -->
+    <ImgButton
+      class="absolute w-[120px] bottom-0 right-0 z-10"
+      image="components/long"
+      @click="handleOpenGuide"
+    />
   </div>
 </template>