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

<script lang="tsx" setup>
import { ref, computed, onMounted } 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'

const router = useRouter()
const route = useRoute()

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

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

const status = ref(false)

//引导步骤
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--vlog' : '.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: 'Video',
    query: {
      image:
        workSideSwitcherRef.value?.items.find(item => item.key === selected.value)?.activeImage ||
        '',
      key: selected.value
    }
  })
}

const handleClose = () => {
  router.back()
}

//状态是否完成前置
const isComplete = ref(false)

onMounted(() => {
  if (route.query.key === 'work') {
    selected.value = 'profession'
    isComplete.value = true
  } else {
    status.value = true
  }
})
</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-32 z-20">
      <WorkSideSwitcher
        ref="workSideSwitcherRef"
        v-model="selected"
        @change="handleSideSwitcherChange"
        :item-class="'w-[462px] h-[142px] '"
      />
    </div>

    <!-- 任务取景按钮 -->
    <ImgButton
      class="absolute right-14 bottom-10"
      :image="isComplete ? IMAGE_PATHS.WORK.TASK_BTN_OK : IMAGE_PATHS.WORK.TASK_BTN"
    />

    <!-- 引导与高亮 -->
    <GuideSteps
      v-if="status"
      :steps="steps"
      :highlight-selector="currentHighlight"
      :highlight-padding="12"
      :highlight-radius="20"
      @step-change="handleStepChange"
      position-offset-y="85%"
    />
  </div>
</template>