faceFamilySource/src/components/SelectTemplateV2.vue

<script setup>
import { ref, onMounted } from "vue"
import { useRouter } from 'vue-router'
import imageBackground from '../static/imageBackground.js';
import { globalStore } from "../globalstore.js";

defineProps({
  show: true
})

onMounted(() => {
  displayedImages.value = imageBackground[0].children;
})

const router = useRouter();
const navigateBack = () => {
  router.push({
    name: 'home'
  })
}

const displayedImages = ref([]);
const goToGenerateImgPage = (item) => {
  globalStore.people_count = item.peopleCount;
  globalStore.select_template = item.imgUrl;
  const hasVisitedBefore = localStorage.getItem('hasVisitedGenerateImg');
  if (!hasVisitedBefore) {
    localStorage.setItem('hasVisitedGenerateImg', 'true');
    router.push({
      name: 'generateImgConfirm'
    });
  } else {
    router.push({
      name: 'generateImg',
      query: { imageUrl: item.imageUrl }
    });
  }
}


const currentBackground = ref(imageBackground[0].titleImgUrl);
const navImage = ref(null);

// 处理导航条点击事件
const handleNavClick = (event) => {
  // 获取点击区域的id
  const zone = event.target.closest('.click-zone');
  if (!zone) return;
  
  const id = parseInt(zone.dataset.id);
  
  // 根据id找到对应的背景图片
  const selectedItem = imageBackground.find(item => item.id === id);
  if (selectedItem) {
    currentBackground.value = selectedItem.titleImgUrl;    
    displayedImages.value = selectedItem.children || [];
    console.log(`切换到ID ${id}的背景图`);
  }
};

</script>

<template>
  <div :show="show" class="main">
    <div class="home-wrapper">
      <div class="scene-item item-1" @click="navigateBack">
        <img src="../assets/images/back-btn.webp" alt="后退">
      </div>

      <!-- 显示当前选中的背景图片 -->
      <div class="main-image">
        <img :src="currentBackground" alt="Background Image" />
      </div>
      
      <!-- 导航条图片，分成6个可点击区域 -->
      <div class="nav-container">
        <div 
          class="nav-image-wrapper"
          ref="navImage"
          @click="handleNavClick"
        >
          <img :src="imageBackground[0].titleImgUrl" alt="Navigation Image" />
          <!-- 创建6个可点击区域 -->
          <div 
            v-for="n in 6" 
            :key="n"
            class="click-zone"
            :style="{ left: `${(n-1)*16.666}%` }"
            :data-id="n"
          ></div>
        </div>
      </div>

      <div class="images-container">
        <div 
          v-for="(item, index) in displayedImages" 
          :key="index" 
          @click="goToGenerateImgPage(item)"
          class="mask-image mask-background"
          :style="{ 'background-image': `url(${item.imgUrl})` }"
        >
          <img class="border-img" src="../assets/images/generate/border.webp" alt="边框">
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.main-image {
  position: absolute;
  top: 24vw;
  padding: 0 3vw;
}
.main-image img {
  width: 100%;
}

.nav-container {
  position: relative;
  top: 18vw;
}

.nav-image-wrapper {
  top: 0;
  opacity: 0;
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.nav-image-wrapper img {
  width: 100%;
  display: block;
  max-width: none;
}

.click-zone {
  position: absolute;
  top: -5px;
  bottom: -5px;
  width: calc(100% /6);
  background-color: transparent;
  transition: background-color .2s ease-in-out;
}

.images-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  gap: 3vw;
  margin-top: 26vw;
  overflow: hidden;
  overflow-y: auto;
}
.mask-background {
  -webkit-mask-image: url("../assets/images/generate/mengban.webp");
  mask-image: url("../assets/images/generate/mengban.webp");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.mask-image {
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  width: 39vw;
  height: 52vw;
}
.border-img {
  width: 39.5vw;
  height: 54vw;
  position: absolute;
  top: -0.5vw;
  left: 0;
}
.main {
  height: 100%;
  overflow-y: auto;
}
.home-wrapper {
  width: 100vw;
  height: 200vw;
  background-image: url('../assets/images/generate/select-template-bg.webp');
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  min-height: -webkit-fill-available;
}

.scene-item {
  position: absolute;
  cursor: pointer;
  transition: all 0.4s ease;
  overflow: hidden;
  border: 3px solid transparent;
  animation: float 4s ease-in-out infinite;
}

.scene-item:hover {
  transform: scale(1.05);
}

.scene-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.item-1 {
  width: 5vw;
  top: 6.7%;
  left: 5%;
  animation-delay: 0s;
}
</style>