nshop-front-pc/src/components/customer/accountSwiper.tsx

"use client";
// import { Swiper, SwiperSlide } from 'swiper/react';
import { OpenAddToCartModalButton } from "@/components/common/AddToCartModal/OpenAddToCartModalButton";
import Image from 'next/image';
interface ProductItem {
  id: number;
  sku: string;
  name: string;
  slug: string | null;
  type: string;
  price: number;
  min_price: number;
  special_price: number | null;
  image_url: string | null;
  is_new: boolean;
  is_featured: boolean;
  short_description: string;
  rating: number;
  review_count: number;
}
// import 'swiper/css';
// 模拟商品数据（和图片内容匹配）
const productList:ProductItem[] = [
                    {
                        "id": 3792,
                        "sku": "BW--Closure",
                        "name": "100% Brazilian Virgin Hair Body Wave HD Transparent Lace Closure ",
                        "slug": null,
                        "type": "flexible_variant",
                        "price": 94.71,
                        "min_price": 94.71,
                        "special_price": null,
                        "image_url": "https:www.asteriahair.com/media/catalog/product/b/o/body_13__1_1.jpg",
                        "is_new": true,
                        "is_featured": false,
                        "short_description": "Asteria Hair 100% Brazilian Virgin Hair Body Wave Lace Closure, Free Part 4x4 Closure Can be Parted anywhere you like, transparent lace color and HD invisible lace to choose from, both color body wave hair lace closure fits all skin tone perfectly.",
                        "rating": 5,
                        "review_count": 10
                    },
                    {
                        "id": 3843,
                        "sku": "#613--STW--3+C--10A613",
                        "name": "100% Human Hair 613 Blonde Brazilian Straight Hair 3 Bundles With Closure In Stock",
                        "slug": null,
                        "type": "flexible_variant",
                        "price": 168.18,
                        "min_price": 168.18,
                        "special_price": null,
                        "image_url": "https:www.asteriahair.com/media/catalog/product/6/1/613_3_.jpg",
                        "is_new": true,
                        "is_featured": false,
                        "short_description": "Asteria Hair 613 Blonde Color Straight Human Hair Weave 3 Bundles With 4x4 Lace Closure Transparent Lace Color",
                        "rating": 0,
                        "review_count": 0
                    },
                    {
                        "id": 3850,
                        "sku": "#613--BW--4--10A613",
                        "name": "100% Human Hair Body Wave 4 Bundles 613 Blonde Hair",
                        "slug": null,
                        "type": "flexible_variant",
                        "price": 156.73,
                        "min_price": 156.73,
                        "special_price": null,
                        "image_url": "https:www.asteriahair.com/media/catalog/product/b/l/blonde_hair.jpg",
                        "is_new": true,
                        "is_featured": false,
                        "short_description": "100% Brazilian Virgin Human Hair Weaves Body Wave 4 Bundles 613 Blonde Hair For Sale",
                        "rating": 0,
                        "review_count": 0
                    },
                    {
                        "id": 3790,
                        "sku": "BW--3",
                        "name": "100% Human Hair Natural Black Brazilian Body Wave Hair 8-30 Inch",
                        "slug": null,
                        "type": "flexible_variant",
                        "price": 183.29,
                        "min_price": 183.29,
                        "special_price": null,
                        "image_url": "https:www.asteriahair.com/media/catalog/product/b/o/body_wave_human_hair_bundles.png",
                        "is_new": true,
                        "is_featured": false,
                        "short_description": "Unprocessed Brazilian Body Wave 3 Bundles Virgin Hair Body Wave Natural Black Hot Sale Asteria Hair Product",
                        "rating": 0,
                        "review_count": 0
                    },
                    {
                        "id": 3868,
                        "sku": "P--LD--3",
                        "name": "100% Unprocessed Virgin Peruvian Human Hair Weave Loose Deep 3 PCS In Stock",
                        "slug": null,
                        "type": "flexible_variant",
                        "price": 193.24,
                        "min_price": 193.24,
                        "special_price": null,
                        "image_url": "https:www.asteriahair.com/media/catalog/product/3/_/3__1_9.jpg",
                        "is_new": true,
                        "is_featured": false,
                        "short_description": "Asteria Hair 100% Unprocessed Peruvian Virgin Human Hair Weave 3 Bundles Deal Loose Deep Wave Weaves 3 PCs Hair Bundles",
                        "rating": 5,
                        "review_count": 17
                    },
                    {
                        "id": 3835,
                        "sku": "P--BW--4",
                        "name": "100% Virgin Hair Natural Black Peruvian Body Wave Hair 8-30 Inch For Selling",
                        "slug": null,
                        "type": "flexible_variant",
                        "price": 222.27,
                        "min_price": 222.27,
                        "special_price": null,
                        "image_url": "https:www.asteriahair.com/media/catalog/product/x/y/xys_3917_2.jpg",
                        "is_new": true,
                        "is_featured": false,
                        "short_description": "Unprocessed Peruvian Body Wave 4 Bundles Virgin Hair Body Wave Natural Black Top Selling Asteria Hair Bundles",
                        "rating": 5,
                        "review_count": 10
                    },
                    {
                        "id": 3786,
                        "sku": "test11111",
                        "name": "12312312",
                        "slug": null,
                        "type": "flexible_variant",
                        "price": 111,
                        "min_price": 111,
                        "special_price": null,
                        "image_url": null,
                        "is_new": true,
                        "is_featured": true,
                        "short_description": "<p>3324124124</p>",
                        "rating": 0,
                        "review_count": 0
                    },
                    {
                        "id": 3807,
                        "sku": "DW--Frontal",
                        "name": "13*4 Ear to Ear Transparent HD Lace Frontal Human Brazilian Hair Deep Wave Hair",
                        "slug": null,
                        "type": "flexible_variant",
                        "price": 121.75,
                        "min_price": 121.75,
                        "special_price": null,
                        "image_url": "https:www.asteriahair.com/media/catalog/product/0/2/02_4_3.jpg",
                        "is_new": true,
                        "is_featured": false,
                        "short_description": "Asteria 13*4 Lace Frontal Human Hair Brazilian Hair Sale Deep Wave Hair Cheap Brazilian Hair Ear To Ear Lace Frontal Human Hair",
                        "rating": 5,
                        "review_count": 3
                    },
                    {
                        "id": 3860,
                        "sku": "#T1 B613--BW--3+F--10A",
                        "name": "1B 613 Ombre Human Virgin Hair Body Wave Hair 3 Bundles with 13*4 Lace Frontal",
                        "slug": null,
                        "type": "flexible_variant",
                        "price": 199.24,
                        "min_price": 199.24,
                        "special_price": null,
                        "image_url": "https:www.asteriahair.com/media/catalog/product/1/b/1b-613-blonde-bundles-with-frontal.jpg",
                        "is_new": true,
                        "is_featured": false,
                        "short_description": "Asteria Hair #1B\/613 Ombre Blonde Hair Color 100% Human Body Wave Hair 3 Bundles with Ear to Ear Lace Frontal Deal",
                        "rating": 0,
                        "review_count": 0
                    },
                    {
                        "id": 3800,
                        "sku": "STW--3+F",
                        "name": "1pc Ear To Ear Lace Frontal with 3 Bundles Straight Virgin Brazilian Hair Weft",
                        "slug": null,
                        "type": "flexible_variant",
                        "price": 281.86,
                        "min_price": 281.86,
                        "special_price": null,
                        "image_url": "https:www.asteriahair.com/media/catalo/product/3/_/3_11_1.jpg",
                        "is_new": true,
                        "is_featured": false,
                        "short_description": "High Quality Asteria Products 1pc Ear To Ear Lace Frontal Closure Totally Hand Made Pre-Plucked Hairline With Baby Hair 3 Bundles Human Straight Virgin Brazilian Hair Weft Natural Black Tangle Free No Splits",
                        "rating": 0,
                        "review_count": 0
                    },
                ]
// 五星星星渲染
  const renderStars = (count: number) => {
    return Array.from({ length: count }).map((_, idx) => (
      <svg
        key={idx}
        className="w-4 h-4 text-green-600 inline-block"
        viewBox="0 0 24 24"
        fill="currentColor"
      >
        <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
      </svg>
    ));
  };
const AccountSwiper = () => {
  return (
    <div className="w-full max-w-[700px] mx-auto px-4">
       {/* 商品2列网格 */}
            <div className="grid grid-cols-2 gap-4">
              {productList.map((item) => (
                <div key={item.id} className="flex flex-col gap-3">
                  {/* Next.Image 商品图容器 */}
                  <div className="relative w-full aspect-[3/4] overflow-hidden rounded-md">
                    <Image
                      src={item.image_url?item.image_url:''}
                      alt={item.name}
                      fill
                      sizes="(max-width:768px) 50vw, 33vw"
                      className="object-cover"
                    />
                  </div>
      
                  {/* 标题 */}
                  <p className="text-sm text-gray-800 truncate">{item.name}</p>
      
                  {/* 星级 + 评论数 */}
                  <div className="flex items-center gap-1">
                    {renderStars(item.rating)}
                    <span className="text-sm text-gray-600 ml-1 underline">
                      {item.review_count}
                    </span>
                  </div>
                  {/* 价格 + 购物车图标 */}
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-1">
                      <span className="font-semibold">${item.min_price}</span>
                      <span className="text-xs text-gray-500 line-through">
                        ${item.price}
                      </span>
                    </div>
                    {/* 购物车图标 */}
                    <OpenAddToCartModalButton
                      productId={
                        item.id
                      }
                      icon={
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          width="32"
                          height="32"
                          viewBox="0 0 32 32"
                          fill="none"
                        >
                          <rect
                            x="0"
                            y="0"
                            width="32"
                            height="32"
                            rx="8"
                            fill="#036141"
                          ></rect>
                          <path
                            stroke="rgba(255, 255, 255, 1)"
                            stroke-width="1.3333333333333333"
                            stroke-linejoin="round"
                            stroke-linecap="round"
                            d="M6.40039 7.79993L8.03372 7.79993L8.73372 10.5999M8.73372 10.5999L11.0671 19.9333L23.2004 19.9333L25.5337 10.5999L8.73372 10.5999Z"
                          ></path>
                          <ellipse
                            cx="11.066040515899658"
                            cy="23.199928283691406"
                            rx="1.4000248908996582"
                            ry="1.4000015258789062"
                            stroke="rgba(255, 255, 255, 1)"
                            stroke-width="1.3333333333333333"
                            stroke-linejoin="round"
                            stroke-linecap="round"
                          ></ellipse>
                          <ellipse
                            cx="23.1998291015625"
                            cy="23.199928283691406"
                            rx="1.4000244140625"
                            ry="1.4000015258789062"
                            stroke="rgba(255, 255, 255, 1)"
                            stroke-width="1.3333333333333333"
                            stroke-linejoin="round"
                            stroke-linecap="round"
                          ></ellipse>
                          <path
                            stroke="rgba(255, 255, 255, 1)"
                            stroke-width="1.3333333333333333"
                            stroke-linejoin="round"
                            stroke-linecap="round"
                            d="M15.2656 15.2665L18.999 15.2665"
                          ></path>
                          <path
                            stroke="rgba(255, 255, 255, 1)"
                            stroke-width="1.3333333333333333"
                            stroke-linejoin="round"
                            stroke-linecap="round"
                            d="M17.1348 17.1332L17.1348 13.3999"
                          ></path>
                        </svg>
                      }
                    />
                  </div>
                </div>
              ))}
            </div>
      {/* Swiper 核心容器 */}
   

      {/* 分页器容器（底部小圆点） */}
      {/* <div className="swiper-pagination flex justify-center mt-4"></div> */}
    </div>
  );
};
  //  <Swiper
     
  //       slidesPerView={2} // 一行显示2个商品（和图片一致）
  //       spaceBetween={8} // 商品之间的间距
  //       breakpoints={{
  //         // 响应式适配（小屏显示1个）
  //         390: { slidesPerView: 2 },
  //         640: { slidesPerView: 2 },
  //       }}
  //       className="product-swiper"
  //     >
  //       {/* 循环渲染商品卡片 */}
  //       {productList.map((product) => (
  //         <SwiperSlide key={product.id} className="rounded-lg overflow-hidden">
  //           <div className="flex flex-col h-full">
  //             {/* 商品图片（带标签） */}
  //             <div className="relative w-full aspect-[3/4]">
  //               <Image
  //                 src={product.imgUrl}
  //                 alt={product.title}
  //                 fill
  //                 className="w-full h-auto object-cover rounded-t-lg"
  //               />
  //               {/* 促销标签（有内容才显示） */}
  //               {product.tag && (
  //                 <div className="absolute bottom-2 left-2 bg-black/80 text-white text-xs px-2 py-1 rounded">
  //                   {product.tag}
  //                 </div>
  //               )}
  //             </div>

  //             {/* 商品标题 */}
  //             <p className="mt-3 text-sm text-gray-800 font-medium line-clamp-2">
  //               {product.title}
  //             </p>

  //             {/* 价格区域 */}
  //             <div className="flex items-center gap-2 mt-2">
  //               <span className="text-red-600 font-bold">{product.price}</span>
  //               <span className="text-xs text-gray-500 line-through">
  //                 {product.originalPrice}
  //               </span>
  //               {/* 购物车图标 */}
  //               <span className="ml-auto text-gray-600">🛒</span>
  //             </div>
  //           </div>
  //         </SwiperSlide>
  //       ))}
  //     </Swiper>
export default AccountSwiper;