首页接口

src/app/(public)/_components/HomeBestSellers.tsx

@@ -5,15 +5,15 @@ import { OpenAddToCartModalButton } from "@/components/common/AddToCartModal/Ope
 // 导入Swiper基础样式
 import "swiper/css";
 import "swiper/css/navigation";
-import {HomeProduct} from "@/types/home/type"
+import { HomeProduct } from "@/types/home/type";
 interface HomeBestSellersProps {
   bestSellers: HomeProduct[];
 }
 const HomeBestSellers = ({ bestSellers }: HomeBestSellersProps) => {
-    if (!bestSellers || bestSellers.length === 0) return null;
-      // 4. 真实数据按每6个拆分一组，替换原来的模拟拆分逻辑
+  if (!bestSellers || bestSellers.length === 0) return null;
+  // 4. 真实数据按每6个拆分一组，替换原来的模拟拆分逻辑
   const chunkSize = 6;
-  const productBlocks:  HomeProduct[][] = [];
+  const productBlocks: HomeProduct[][] = [];
   for (let i = 0; i < bestSellers.length; i += chunkSize) {
     productBlocks.push(bestSellers.slice(i, i + chunkSize));
   }
@@ -72,22 +72,22 @@ const HomeBestSellers = ({ bestSellers }: HomeBestSellersProps) => {
                       ))}
                     </div>
                     <span className="text-xs text-gray-600">
-                      { product.review_count}
+                      {product.review_count}
                     </span>
                   </div>
                   {/* 价格 + 购物车图标 */}
                   <div className="flex items-center justify-between">
                     <div className="flex items-center gap-1">
-                      <span className="font-semibold">${product.min_price}</span>
+                      <span className="font-semibold">
+                        ${product.min_price}
+                      </span>
                       <span className="text-xs text-gray-500 line-through">
                         ${product.price}
                       </span>
                     </div>
                     {/* 购物车图标 */}
                     <OpenAddToCartModalButton
-                      productUrlKey={
-                        "http://nshop.test/hd-transparent-deep-wave-&-curly-lace-frontal-closure-wig"
-                      }
+                      productId={product.id}
                       icon={
                         <svg
                           xmlns="http://www.w3.org/2000/svg"

src/app/(public)/_components/HomeContent.tsx

@@ -97,13 +97,22 @@ export default function HomeContent({ homeData }: HomeContentProps) {
       // 过滤出 banner 板块
   const bannerSection = sections.find(sec => sec.name === "banner");
   const bannerImages = bannerSection?.images ?? [];
+       // 过滤出 banner 板块
+  const jinGangSection = sections.find(sec => sec.id === 13);
+  const jinGang = jinGangSection?.images ?? [];
     // 2. 筛选热销板块，假设后端name为 best_sellers，自行修改匹配后端标识
   const bestSellerSection = sections.find(sec => sec.name === "BestSellers");
   const bestSellers: HomeProduct[] = bestSellerSection?.products ?? [];
+        // 过滤出 banner 板块
+  const middleBannerSection = sections.find(sec => sec.id === 15);
+  const middleBanner = middleBannerSection?.images ?? [];
    // 3. 筛选new Arrival板块
   const newArrivalSection = sections.find(sec => sec.name === "New_Arrival");
   const newArrival: HomeProduct[] = newArrivalSection?.products ?? [];
    // 4. 筛选7板块
+  const zeroWearImageSection = sections.find(sec => sec.id === 18);
+  const zeroWearImage= zeroWearImageSection?.images ?? [];
+   // 4. 筛选7板块
   const zeroWearSection = sections.find(sec => sec.name === "7");
   const zeroWear: HomeProduct[] = zeroWearSection?.products ?? [];
    // 4. 筛选trendingSection板块
@@ -129,12 +138,12 @@ export default function HomeContent({ homeData }: HomeContentProps) {
         ))}
       </div>
       {/* 分类快捷入口 */}
-      <JinGangSwiper />
+      <JinGangSwiper jinGang={jinGang} />
       {/* 热销商品区 */}
       <HomeBestSellers bestSellers={bestSellers} />
-      <HomeMiddleBanner />
+      <HomeMiddleBanner  middleBanner={middleBanner} />
       <HomeNewArrival newArrival={newArrival} />
-      <MiddleImageSwiper zeroWear={zeroWear}  />
+      <MiddleImageSwiper zeroWear={zeroWear}  zeroWearImage={zeroWearImage} />
       <Trending trending={trending}/>
       <RecommendedProducts recommended={recommended} />
       <CategoryTabSwiper />

src/app/(public)/_components/HomeMiddleBanner.tsx

@@ -5,16 +5,22 @@ import { Navigation } from "swiper/modules";
 import "swiper/css";
 import "swiper/css/navigation";
 import Image from "next/image";
-export default function HomeMiddleBanner() {
+import { HomeSectionImage } from "@/types/home/type";
+interface middleBannerProps {
+  middleBanner: HomeSectionImage[];
+}
+export default function HomeMiddleBanner({ middleBanner }: middleBannerProps) {
+  if (!middleBanner || middleBanner.length === 0) return null;
+  const middleBannerImages = middleBanner;
   const [activeIndex, setActiveIndex] = useState(0);
 
   const [swiperRef] = useState(null);
 
-  const handleSlideChange = (swiper:any) => {
+  const handleSlideChange = (swiper: any) => {
     setActiveIndex(swiper.activeIndex);
   };
 
-  const handleIndicatorClick = (index:any) => {
+  const handleIndicatorClick = (index: any) => {
     if (swiperRef) {
       setActiveIndex(index);
     }
@@ -29,30 +35,18 @@ export default function HomeMiddleBanner() {
         onSlideChange={handleSlideChange}
         className="mb-6"
       >
-        <SwiperSlide>
-          <div className="relative w-full h-42">
-            <Image
-              src={
-                "https://cdn.asteriahair.com/media/wysiwyg/home/1750041184.png"
-              }
-              alt={"bbbb"}
-              fill
-              className="w-full h-auto object-cover rounded-md"
-            />
-          </div>
-        </SwiperSlide>
-        <SwiperSlide>
-          <div className="relative w-full h-42">
-            <Image
-              src={
-                "https://cdn.asteriahair.com/media/wysiwyg/home/1750041184.png"
-              }
-              alt={"bbbb"}
-              fill
-              className="w-full h-auto object-cover rounded-md"
-            />
-          </div>
-        </SwiperSlide>
+        {middleBannerImages.map((item, idx) => (
+          <SwiperSlide key={idx}>
+            <div className="relative w-full h-42">
+              <Image
+                src={item.image}
+                alt={item.title}
+                fill
+                className="w-full h-auto object-cover rounded-md"
+              />
+            </div>
+          </SwiperSlide>
+        ))}
       </Swiper>
       <div className="flex justify-center gap-2">
         <button

src/app/(public)/_components/HomeNewArrival.tsx

@@ -85,9 +85,7 @@ const HomeNewArrival = ({ newArrival }: NewArrivalProps) => {
                     </div>
                     {/* 购物车图标 */}
                     <OpenAddToCartModalButton
-                      productUrlKey={
-                        "http://nshop.test/hd-transparent-deep-wave-&-curly-lace-frontal-closure-wig"
-                      }
+                        productId={product.id}
                       icon={
                         <svg
                           xmlns="http://www.w3.org/2000/svg"

src/app/(public)/_components/JinGangSwiper.tsx

@@ -6,64 +6,74 @@ import { Navigation } from "swiper/modules";
 import "swiper/css";
 import "swiper/css/navigation";
 import Image from "next/image";
+import { HomeSectionImage } from "@/types/home/type";
+interface jinGangProps {
+  jinGang: HomeSectionImage[];
+}
+// const MOCK_DATA = [
+//   [
+//     {
+//       name: "Hd Lace Wig",
+//       img: "https://cdn.asteriahair.com/uploads/202602/11/20260211095740_8181b0e039800e07.png",
+//     },
+//     {
+//       name: "Ready To Go",
+//       img: "https://cdn.asteriahair.com/uploads/202602/11/20260211095740_8181b0e039800e07.png",
+//     },
+//     {
+//       name: "Colored Wig",
+//       img: "https://cdn.asteriahair.com/uploads/202602/11/20260211095740_8181b0e039800e07.png",
+//     },
+//     {
+//       name: "U&V Part Wig",
+//       img: "https://cdn.asteriahair.com/uploads/202602/11/20260211095740_8181b0e039800e07.png",
+//     },
+//     {
+//       name: "New Arrival",
+//       img: "https://cdn.asteriahair.com/uploads/202602/11/20260211095740_8181b0e039800e07.png",
+//     },
+//     {
+//       name: "360 Wig",
+//       img: "https://cdn.asteriahair.com/uploads/202602/11/20260211095740_8181b0e039800e07.png",
+//     },
+//   ],
 
-const MOCK_DATA = [
-  [
-    {
-      name: "Hd Lace Wig",
-      img: "https://cdn.asteriahair.com/uploads/202602/11/20260211095740_8181b0e039800e07.png",
-    },
-    {
-      name: "Ready To Go",
-      img: "https://cdn.asteriahair.com/uploads/202602/11/20260211095740_8181b0e039800e07.png",
-    },
-    {
-      name: "Colored Wig",
-      img: "https://cdn.asteriahair.com/uploads/202602/11/20260211095740_8181b0e039800e07.png",
-    },
-    {
-      name: "U&V Part Wig",
-      img: "https://cdn.asteriahair.com/uploads/202602/11/20260211095740_8181b0e039800e07.png",
-    },
-    {
-      name: "New Arrival",
-      img: "https://cdn.asteriahair.com/uploads/202602/11/20260211095740_8181b0e039800e07.png",
-    },
-    {
-      name: "360 Wig",
-      img: "https://cdn.asteriahair.com/uploads/202602/11/20260211095740_8181b0e039800e07.png",
-    },
-  ],
-
-  [
-    {
-      name: "13x4 Lace Wig",
-      img: "https://cdn.asteriahair.com/uploads/202602/11/20260211095800_8181b0e039800e07.png",
-    },
-    {
-      name: "Body Wave Wig",
-      img: "https://cdn.asteriahair.com/uploads/202602/11/20260211095800_8181b0e039800e07.png",
-    },
-    {
-      name: "Deep Wave Wig",
-      img: "https://cdn.asteriahair.com/uploads/202602/11/20260211095800_8181b0e039800e07.png",
-    },
-    {
-      name: "Straight Wig",
-      img: "https://cdn.asteriahair.com/uploads/202602/11/20260211095800_8181b0e039800e07.png",
-    },
-    {
-      name: "Curly Wig",
-      img: "https://cdn.asteriahair.com/uploads/202602/11/20260211095800_8181b0e039800e07.png",
-    },
-    {
-      name: "Bob Wig",
-      img: "https://cdn.asteriahair.com/uploads/202602/11/20260211095800_8181b0e039800e07.png",
-    },
-  ],
-];
+//   [
+//     {
+//       name: "13x4 Lace Wig",
+//       img: "https://cdn.asteriahair.com/uploads/202602/11/20260211095800_8181b0e039800e07.png",
+//     },
+//     {
+//       name: "Body Wave Wig",
+//       img: "https://cdn.asteriahair.com/uploads/202602/11/20260211095800_8181b0e039800e07.png",
+//     },
+//     {
+//       name: "Deep Wave Wig",
+//       img: "https://cdn.asteriahair.com/uploads/202602/11/20260211095800_8181b0e039800e07.png",
+//     },
+//     {
+//       name: "Straight Wig",
+//       img: "https://cdn.asteriahair.com/uploads/202602/11/20260211095800_8181b0e039800e07.png",
+//     },
+//     {
+//       name: "Curly Wig",
+//       img: "https://cdn.asteriahair.com/uploads/202602/11/20260211095800_8181b0e039800e07.png",
+//     },
+//     {
+//       name: "Bob Wig",
+//       img: "https://cdn.asteriahair.com/uploads/202602/11/20260211095800_8181b0e039800e07.png",
+//     },
+//   ],
+// ];
 
-export default function JinGangSwiper() {
+export default function JinGangSwiper({ jinGang }: jinGangProps) {
+    if (!jinGang || jinGang.length === 0) return null;
+    // 4. 真实数据按每6个拆分一组，替换原来的模拟拆分逻辑
+    const chunkSize = 6;
+    const productBlocks: HomeSectionImage[][] = [];
+    for (let i = 0; i < jinGang.length; i += chunkSize) {
+      productBlocks.push(jinGang.slice(i, i + chunkSize));
+    }
   const [activeIndex, setActiveIndex] = useState(0);
 
   const [swiperRef, setSwiperRef] = useState<SwiperType | null>(null);
@@ -89,32 +99,14 @@ export default function JinGangSwiper() {
         onSlideChange={handleSlideChange}
         className="mb-6"
       >
-        <SwiperSlide>
+      {productBlocks.map((block, blockIndex) => (
+         <SwiperSlide key={blockIndex}>
           <div className="grid grid-cols-3 gap-2">
-            {MOCK_DATA[0].map((item, idx) => (
+            {block.map((item, idx) => (
               <div key={`block1-${idx}`} className="relative w-full aspect-[3/4]">
                 <Image
-                  src={item.img}
-                  alt={item.name}
-                  fill
-                  className="object-cover rounded-md"
-                />
-                {/* <div className="absolute bottom-2 left-2 text-white text-sm font-medium bg-black/50 px-2 py-1 rounded">
-                  {item.name}
-                </div> */}
-              </div>
-            ))}
-          </div>
-        </SwiperSlide>
-
-        {/* 第二大块：6个分类卡片（2行3列） */}
-        <SwiperSlide>
-          <div className="grid grid-cols-3 gap-2">
-            {MOCK_DATA[1].map((item, idx) => (
-              <div key={`block2-${idx}`} className="relative w-full aspect-[3/4]">
-                <Image
-                  src={item.img}
-                  alt={item.name}
+                  src={item.image}
+                  alt={item.title}
                   fill
                   className="object-cover rounded-md"
                 />
@@ -125,6 +117,8 @@ export default function JinGangSwiper() {
             ))}
           </div>
         </SwiperSlide>
+      ))}
+     
       </Swiper>
 
       {/* 底部指示器按钮：2个，激活态黑色，未激活灰色 */}

src/app/(public)/_components/MiddleImageSwiper.tsx

@@ -6,9 +6,10 @@ import "swiper/css/pagination";
 import "swiper/css/navigation";
 import "./css/swiper-custom.css";
 import { OpenAddToCartModalButton } from "@/components/common/AddToCartModal/OpenAddToCartModalButton";
-import {HomeProduct} from "@/types/home/type"
+import {HomeProduct,HomeSectionImage} from "@/types/home/type"
 interface zeroWearProps {
   zeroWear: HomeProduct[];
+  zeroWearImage:HomeSectionImage[]
 }
 // const productList = [
 //   {
@@ -37,15 +38,16 @@ interface zeroWearProps {
 //   },
 // ];
 
-const MiddleImageSwiper = ({ zeroWear }: zeroWearProps) => {
+const MiddleImageSwiper = ({ zeroWear,zeroWearImage }: zeroWearProps) => {
   if (!zeroWear || zeroWear.length === 0) return null;
   const  productList = zeroWear
+  const WearImage = zeroWearImage;
   return (
     <div className="w-full pr-4 pl-4 mx-auto  rounded-lg  ">
       <div className="w-full">
         <img
-          src="https://cdn.asteriahair.com/uploads/202602/11/20260211095330_7ec9031a4ab36e44.gif"
-          alt="ZEROWEAR hair banner"
+          src={WearImage[0].image || 'https://cdn.asteriahair.com/uploads/202602/11/20260211095330_7ec9031a4ab36e44.gif'}
+          alt={WearImage[0].title || 'ZEROWEAR hair banner'}
           className="w-full h-auto object-cover block"
         />
       </div>
@@ -88,9 +90,7 @@ const MiddleImageSwiper = ({ zeroWear }: zeroWearProps) => {
                       </div>
                       {/* 购物车图标 */}
                       <OpenAddToCartModalButton
-                        productUrlKey={
-                          "http://nshop.test/hd-transparent-deep-wave-&-curly-lace-frontal-closure-wig"
-                        }
+                         productId={item.id}
                         icon={
                           <svg
                             xmlns="http://www.w3.org/2000/svg"

src/app/(public)/_components/RecommendedProducts.tsx

@@ -183,8 +183,8 @@ export default function RecommendedProducts({ recommended }: recommendedProps) {
               </div>
               {/* 购物车图标 */}
               <OpenAddToCartModalButton
-                productUrlKey={
-                  "http://nshop.test/hd-transparent-deep-wave-&-curly-lace-frontal-closure-wig"
+                productId={
+                  item.id
                 }
                 icon={
                   <svg

src/app/(public)/_components/Trending.tsx

@@ -178,9 +178,7 @@ const Trending = ({ trending }: trendingProps) => {
                       </div>
                       {/* 购物车图标 */}
                       <OpenAddToCartModalButton
-                        productUrlKey={
-                          "http://nshop.test/hd-transparent-deep-wave-&-curly-lace-frontal-closure-wig"
-                        }
+                         productId={item.id}
                         icon={
                           <svg
                             xmlns="http://www.w3.org/2000/svg"

src/app/(public)/product/_components/youmaylike/Recommend.tsx

@@ -197,9 +197,7 @@ const Recommend = () => {
                     </div>
                     {/* 购物车图标 */}
                     <OpenAddToCartModalButton
-                      productUrlKey={
-                        "http://nshop.test/hd-transparent-deep-wave-&-curly-lace-frontal-closure-wig"
-                      }
+                        productId={product.id}
                       icon={
                         <svg
                           xmlns="http://www.w3.org/2000/svg"

src/types/home/type.ts

@@ -1,4 +1,4 @@
-type HomeSectionImage = {
+export type HomeSectionImage = {
   link: string;
   image: string;
   title: string;