feat: 对接各个视频数据

2025-12-30 19:42:47 +08:00
1 parent 6103453e32
commit 6ab98c4764
@@ -0,0 +1,197 @@
+<script lang="tsx" name="Work" setup>
+defineOptions({ name: 'Work' })
+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 } from 'vue-router'
+import { useScale } from '@/composables/useScale'
+import { ImagePreview } from '@/components'
+import { useInterviewStore } from '@/stores'
+
+const router = useRouter()
+
+const interview = useInterviewStore()
+
+type WorkTab = 'vlog' | 'case' | 'profession' | 'idea'
+
+const selected = ref<WorkTab>('case')
+const stepIndex = ref(0)
+const workSideSwitcherRef = ref<InstanceType<typeof WorkSideSwitcher>>()
+
+const isGuideInterviewTask = computed(() => interview.isGuideInterviewTask)
+const isInterviewUnlock = computed(() => interview.isInterviewUnlock)
+
+//引导步骤
+const steps = [
+  {
+    id: 'step1',
+    content:
+      '现在我们要一起走进 Vlog 的世界。简单说，Vlog 就是用视频记录生活的一种方式 —— 它像一本会动的日记，能把我们身边的小事、瞬间的心情，通过镜头变得生动又具体。'
+  },
+  { id: 'step2', content: '接下来，我们就通过一个具体的案例，看看 Vlog 是怎么“捕捉美好” 的吧。' }
+]
+
+//切换图片
+const sideSwitcherItems = ref([
+  {
+    key: 'vlog',
+    description: '记录身边的美好',
+    image: 'work/vlog背景全屏待定'
+  },
+  {
+    key: 'case',
+    description: '案例赏析-桂花酒酿小圆子',
+    image: 'work/案例背景待定'
+  },
+  {
+    key: 'profession',
+    description: '专业剖析-桂花酒酿小圆子',
+    image: 'work/专业剖析小屏'
+  },
+  {
+    key: 'idea',
+    description: '思路提点-桂花酒酿小圆子',
+    image: 'work/思路提点小屏'
+  }
+])
+
+//当前选中的item
+const currentItem = computed(() => {
+  return sideSwitcherItems.value.find(item => item.key === selected.value)
+})
+
+const currentHighlight = computed(() =>
+  stepIndex.value === 0 ? '.img-switch-item--case' : '.work-border'
+)
+
+interface SimpleStep {
+  id: string
+  content: string
+}
+const handleStepChange = (_step: SimpleStep | null, index: number) => {
+  stepIndex.value = index
+}
+
+const handleSideSwitcherChange = (value: WorkTab) => {
+  if (selected.value === value) return
+}
+
+const handleImageClick = () => {
+  router.push({
+    name: 'FilmVideo',
+    query: {
+      image:
+        workSideSwitcherRef.value?.items.find(item => item.key === selected.value)?.activeImage ||
+        '',
+      key: selected.value
+    }
+  })
+}
+
+const handleClose = () => {
+  router.push({ name: 'Film' })
+}
+
+const handleWorkClick = () => {
+  if (!isInterviewUnlock.value) return
+  openImages([getStaticImage('work/桂花酒酿小圆子')])
+}
+const handleGuideComplete = () => {
+  interview.setIsGuideInterviewTask(false)
+}
+
+const handleOpenGuide = () => {
+  stepIndex.value = 0
+  interview.setIsGuideInterviewTask(true)
+}
+
+const { scale, offsetX, offsetY } = useScale()
+
+function openImages(urls: string[], startIndex = 0) {
+  ImagePreview({
+    images: urls,
+    startIndex,
+    maskClosable: true,
+    getScaleMetrics: () => ({ scale: scale.value, offsetX: offsetX.value, offsetY: offsetY.value })
+  })
+}
+</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.WORK.BG) }"
+    ></div>
+
+    <!-- 关闭 -->
+    <ImgButton
+      class="absolute right-0 top-0"
+      :image="IMAGE_PATHS.COMPONENTS.CLOSE"
+      @click="handleClose"
+    />
+
+    <!-- border图片 -->
+    <div
+      class="work-border absolute top-[140px] left-24 inset-0 bg-cover bg-center bg-no-repeat z-10 w-[1360px] h-[800px] p-10"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.WORK.BORDER) }"
+    >
+      <div
+        class="flex items-center pl-16 w-[1357px] h-[265px] absolute -bottom-16 left-0 bg-cover bg-center bg-no-repeat z-20"
+        :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.WORK.TITLE) }"
+      >
+        <span
+          class="mt-24 text-white font-bold text-6xl [text-shadow:0_2px_4px_rgba(0,0,0,0.2),0_0_6px_rgba(0,207,255,0.9),0_0_14px_rgba(0,207,255,0.7)]"
+        >
+          {{ currentItem?.description }}</span
+        >
+      </div>
+      <img
+        @click="handleImageClick"
+        class="rounded-[62px] cursor-pointer"
+        :src="getStaticImage(currentItem?.image || '')"
+        alt=""
+      />
+    </div>
+
+    <!-- 左侧选项切换 -->
+    <div class="absolute right-4 top-56 z-20">
+      <WorkSideSwitcher
+        ref="workSideSwitcherRef"
+        v-model="selected"
+        @change="handleSideSwitcherChange"
+        :item-class="'w-[359px] h-[96px]'"
+      />
+    </div>
+
+    <!-- 任务取景按钮 -->
+    <ImgButton
+      class="absolute right-14 bottom-10"
+      :image="isInterviewUnlock ? IMAGE_PATHS.WORK.TASK_BTN_OK : IMAGE_PATHS.WORK.TASK_BTN"
+      @click="handleWorkClick"
+    />
+
+    <!-- 引导与高亮 -->
+    <GuideSteps
+      v-if="isGuideInterviewTask"
+      :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>