super_video/src/views/film/work/index.vue

<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 { useFilmStore } from '@/stores'

const router = useRouter()

const film = useFilmStore()

type WorkTab = 'case' | 'profession' | 'idea'

const selected = ref<WorkTab>('case')
const stepIndex = ref(0)
const workSideSwitcherRef = ref<InstanceType<typeof WorkSideSwitcher>>()

const isGuideFilmTask = computed(() => film.isGuideFilmTask)
const isFilmUnlock = computed(() => film.isFilmUnlock)

//引导步骤
const steps = [
  {
    id: 'step1',
    content: '经常听到有人赞叹：“这个镜头真高级。”'
  },
  { id: 'step2', content: '那么什么样的镜头才算是好镜头？又是什么让画面显得更高级？' }
]

//切换图片
const sideSwitcherItems = ref([
  {
    key: 'case',
    name: '案例赏析',
    description: '物件春秋-上海钟表文化科普馆',
    image: 'film/案件赏析小屏'
  },
  {
    key: 'profession',
    name: '专业剖析',
    description: '物件春秋-上海钟表文化科普馆',
    image: 'film/案件赏析小屏'
  },
  {
    key: 'idea',
    name: '思路提点',
    description: '物件春秋-上海钟表文化科普馆',
    image: 'film/思路提点小屏'
  }
])

//当前选中的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 = () => {
  const currentItem = workSideSwitcherRef.value?.items.find(item => item.key === selected.value)
  router.push({
    name: 'FilmVideo',
    query: {
      image: currentItem?.activeImage || '',
      key: selected.value,
      label: currentItem?.label || ''
    }
  })
}

const handleClose = () => {
  router.push({ name: 'Film' })
}

const handleWorkClick = () => {
  if (!isFilmUnlock.value) return
  openImages([getStaticImage('work/桂花酒酿小圆子')])
}
const handleGuideComplete = () => {
  film.setIsGuideFilmTask(false)
}

const handleOpenGuide = () => {
  stepIndex.value = 0
  film.setIsGuideFilmTask(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('film/任务取景框背景') }"
    ></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="isFilmUnlock ? IMAGE_PATHS.WORK.TASK_BTN_OK : IMAGE_PATHS.WORK.TASK_BTN"
      @click="handleWorkClick"
    />

    <!-- 引导与高亮 -->
    <GuideSteps
      v-if="isGuideFilmTask"
      :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>