"use client"; // import { Swiper, SwiperSlide } from "swiper/react"; // import { Navigation } from "swiper/modules"; import JinGangSwiper from "./JinGangSwiper"; import TopImageSwiper from "./TopImageSwiper" import HomeBestSellers from "./HomeBestSellers" import HomeMiddleBanner from './HomeMiddleBanner'; import HomeNewArrival from "./HomeNewArrival"; import MiddleImageSwiper from "./MiddleImageSwiper"; import Trending from "./Trending"; import RecommendedProducts from "./RecommendedProducts"; import CategoryTabSwiper from "./CategoryTabSwiper "; import "swiper/css"; import "swiper/css/navigation"; import {HomeApiData,HomeProduct } from "@/types/home/type" // 定义组件入参类型 interface HomeContentProps { homeData: HomeApiData; } // 模拟假数据 const MOCK_DATA = { // 服务标签 services: [ { icon: (), text: "Free Fast Shipping", }, { icon: (), text: "30 Days Return", }, { icon: (), text: "Secure Pay Later", }, { icon: (), text: "100% Human Hair", }, ], // 商品列表（热销/新品/趋势通用） products: [ { id: 1, name: "14-36 In Water Wave Human Hair Wig", price: 143.35, rating: 4.2, reviewCount: 342, img: "/images/product1.jpg", }, { id: 2, name: "14-36 In Water Wave Human Hair Wig", price: 143.35, rating: 4.2, reviewCount: 342, img: "/images/product2.jpg", }, { id: 3, name: "14-36 In Water Wave Human Hair Wig", price: 143.35, rating: 4.2, reviewCount: 342, img: "/images/product3.jpg", }, { id: 4, name: "14-36 In Water Wave Human Hair Wig", price: 143.35, rating: 4.2, reviewCount: 342, img: "/images/product4.jpg", }, { id: 5, name: "14-36 In Water Wave Human Hair Wig", price: 143.35, rating: 4.2, reviewCount: 342, img: "/images/product5.jpg", }, { id: 6, name: "14-36 In Water Wave Human Hair Wig", price: 143.35, rating: 4.2, reviewCount: 342, img: "/images/product6.jpg", }, ], }; export default function HomeContent({ homeData }: HomeContentProps) { const { channel, sections, categories } = homeData; // 过滤出 banner 板块 const bannerSection = sections.find(sec => sec.name === "banner"); const bannerImages = bannerSection?.images ?? []; // 2. 筛选热销板块，假设后端name为 best_sellers，自行修改匹配后端标识 const bestSellerSection = sections.find(sec => sec.name === "BestSellers"); const bestSellers: HomeProduct[] = bestSellerSection?.products ?? []; // 3. 筛选new Arrival板块 const newArrivalSection = sections.find(sec => sec.name === "New_Arrival"); const newArrival: HomeProduct[] = newArrivalSection?.products ?? []; // 4. 筛选7板块 const zeroWearSection = sections.find(sec => sec.name === "7"); const zeroWear: HomeProduct[] = zeroWearSection?.products ?? []; // 4. 筛选trendingSection板块 const trendingSection = sections.find(sec => sec.name === "Trending_Now"); const trending: HomeProduct[] = trendingSection?.products ?? []; // 4. Recommended const recommendedSection = sections.find(sec => sec.name === "Recommended_For_You"); const recommended: HomeProduct[] = recommendedSection?.products ?? []; return (

{/* 顶部Banner */}

{/* 服务标签栏 */}

{MOCK_DATA.services.map((item, idx) => (

{item.icon} {item.text}

))}

{/* 分类快捷入口 */} {/* 热销商品区 */}

); }