nshop-front-m/src/app/(public)/customer/account/_components/AccountVipPopup.tsx

"use client";
// import Link from "next/link";
// 轮播逻辑
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Scrollbar } from "swiper/modules";
import { Swiper as SwiperType } from "swiper/types";
import { useEffect, useState } from "react";
import Image from "next/image";
import "swiper/css";
import "swiper/css/navigation";
import { clientFetch } from "@/lib/restApiClient";

// 模拟你的每一页数据，方便维护
const vipList = [
  {
    level: 1,
    title: "V1 Privileges",
    exppoints: 1000,
    coupons: [
      {
        img: "https://cdn.alipearlhair.com/media/wysiwyg/wap/202301130956.png",
        text1: "Points Redeem",
        text2: "Giftcard",
        link: "javascript:void(0)",
      },
      {
        img: "https://cdn.alipearlhair.com/media/wysiwyg/wap/202301130957.png",
        text1: "Exclusive",
        text2: "$100 Coupon",
        link: "javascript:void(0)",
      },
      {
        img: "https://cdn.alipearlhair.com/media/wysiwyg/wap/202301130958.png",
        text1: "Birthday",
        text2: "Treat",
        link: "javascript:void(0)",
      },
    ],
  },
  {
    level: 2,
    title: "V2 Privileges",
    exppoints: 2000,
    coupons: [
      {
        img: "https://cdn.alipearlhair.com/media/wysiwyg/wap/202301130956.png",
        text1: "POINTS REDEEM",
        text2: "GIFTCARD",
        link: "javascript:void(0)",
      },
      {
        img: "https://cdn.alipearlhair.com/media/wysiwyg/wap/202301130957.png",
        text1: "EXCLUSIVE",
        text2: "$150 COUPON",
        link: "javascript:void(0)",
      },
      {
        img: "https://cdn.alipearlhair.com/media/wysiwyg/wap/202301130958.png",
        text1: "BIRTHDAY",
        text2: "TREAT",
        link: "javascript:void(0)",
      },
    ],
  },
  {
    level: 3,
    title: "V3 Privileges",
    exppoints: 10000,
    coupons: [
      {
        img: "https://cdn.alipearlhair.com/media/wysiwyg/wap/202301130956.png",
        text1: "POINTS REDEEM",
        text2: "GIFTCARD",
        link: "javascript:void(0)",
      },
      {
        img: "https://cdn.alipearlhair.com/media/wysiwyg/wap/202301130957.png",
        text1: "EXCLUSIVE",
        text2: "$200 COUPON",
        link: "javascript:void(0)",
      },
      {
        img: "https://cdn.alipearlhair.com/media/wysiwyg/wap/202301130958.png",
        text1: "BIRTHDAY",
        text2: "TREAT",
        link: "javascript:void(0)",
      },
    ],
  },
  {
    level: 4,
    title: "V4 Privileges",
    exppoints: 50000,
    coupons: [
      {
        img: "https://cdn.alipearlhair.com/media/wysiwyg/wap/202301130956.png",
        text1: "POINTS REDEEM",
        text2: "GIFTCARD",
        link: "/customer/account/pointsreceivelist",
      },
      {
        img: "https://cdn.alipearlhair.com/media/wysiwyg/wap/202301130957.png",
        text1: "EXCLUSIVE",
        text2: "$300 COUPON",
        link: "/customer/account/couponsreceivelist/v/4/",
      },
      {
        img: "https://cdn.alipearlhair.com/media/wysiwyg/wap/202301130958.png",
        text1: "BIRTHDAY",
        text2: "TREAT",
        link: "/customer/account/birthday",
      },
    ],
  },
];

export default function AccountVipPopup({
  visible,
  onClose,
}: {
  visible: boolean;
  onClose: () => void;
}) {
  // swiper实例
  const [_swiperRef, setSwiperRef] = useState<SwiperType | null>(null);
  // 当前slide下标
  const [activeIndex, setActiveIndex] = useState(0);
  const [_loading, setLoading] = useState(true);
  const [VipGrothData, setVipGrothData] = useState<any>(null);
  // 如果不显示，直接 return null
  useEffect(() => {
    const fetchGrothValue = async () => {
      try {
        setLoading(true);
        const res = await clientFetch("/api/customer/growth-value");
        if (res.data.success) {
          setVipGrothData(res.data.data);
          console.log("vip成长值数据：", res.data.data);
        }
      } catch (error) {
        console.error("获取vip成长值失败：", error);
      } finally {
        setLoading(false);
      }
    };
    fetchGrothValue();
  }, []);
  if (!visible) return null;
  // 滑动切换触发
  const handleSlideChange = (swiper: SwiperType) => {
    setActiveIndex(swiper.activeIndex);
    console.log("aaa slide huadongle ");
  };
  const slideItem = vipList[activeIndex];
  const slideLevelNum = slideItem?.level ?? 1;

  const progressPercent = VipGrothData
    ? Math.min(
        Math.max(
          (VipGrothData.growth_value /
            VipGrothData.next_level.min_growth_value) *
            100,
          0,
        ),
        100,
      )
    : 0;
  const userCurrentLevelNum =
    Number(VipGrothData?.current_level.name.replace(/[^0-9]/g, "")) || 0;
  let showText = "";
  console.log("userCurrentLevelNum", userCurrentLevelNum, slideLevelNum);
  if (userCurrentLevelNum === slideLevelNum) {
    showText = `Growth Value ${VipGrothData?.growth_value}/${VipGrothData?.next_level.min_growth_value}`;
  } else if (userCurrentLevelNum > slideLevelNum) {
    showText = "aaa";
  } else {
    showText = `Integral to 2000`;
  }
  return (
    // 全屏遮罩
    <div className="fixed inset-0 z-50 bg-black/50">
      {/* 弹框主体 - 从底部滑上来 */}
      <div className="absolute bottom-0 rounded-none left-0 right-0 w-full h-full bg-white  overflow-auto">
        <div className="flex flex-col">
          {/* 顶部导航 */}
          <header className="bg-black text-white py-4 px-4 flex items-center">
            <button onClick={onClose} className="">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                className="h-6 w-6"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M15 19l-7-7 7-7"
                />
              </svg>
            </button>
            <h1 className="mx-auto">Vip Center</h1>
          </header>
          <div className="vipcenter-privileges-modal-innerscroll-father">
            <div id="vipcenter-privileges-modal-innerscroll">
              <div
                className="   relative
    h-170
    mt-8
    px-6
    bg-[url('https://cdn.alipearlhair.com/media/wysiwyg/wap/_2.png')]
    bg-no-repeat
    bg-[length:100%_100%]"
              >
                <div className="absolute top-0.75 left-8 text-4.5 text-[#FFD1B9] font-semibold">
                  Vip <span className="levelcard">{userCurrentLevelNum}</span>
                </div>
                <div className="flex flex-col justify-between items-center text-white">
                  <div className="w-18 h-18 mt-6">
                    <Image
                      src="https://cdn.alipearlhair.com/media/wysiwyg/newap/202303131637.png"
                      alt=""
                      width={0}
                      height={0}
                      sizes="100vw"
                      className="max-w-full border-0 align-top w-full h-auto"
                    />
                  </div>
                  <p className="text-4.5 mt-3 font-semibold"></p>
                  <p className="text-text-sm mt-1.5 text-[#EFEFEF]">
                    18567768101@163.com
                  </p>
                  <p className="text-sm mt-1.5 text-[#EFEFEF]">
                    Above current level
                  </p>
                </div>
                <div className="box-border w-full mt-10.5 mb-9.75">
                  <div className="text-center text-sm text-white mb-3">
                    <span className="account-center-progress-text-pre">
                      {showText}
                    </span>
                  </div>
                  <div className="relative h-1 bg-[#5F4040]">
                    <div
                      className="w-4 h-4 rounded-full bg-black absolute top-1/2 -translate-y-1/2  block"
                      style={{ left: `${progressPercent}%` }}
                    ></div>
                    <div
                      className="rounded-[1.2821vw] h-full bg-[rgba(255,255,255,1)]"
                      style={{ width: `${progressPercent}%` }}
                    ></div>
                  </div>
                  {/* 轮播 */}
                  <div className="swiper-container-center vip-swiper">
                    <Swiper
                      modules={[Navigation, Scrollbar]}
                      slidesPerView={1}
                      navigation={{
                        prevEl: ".btn-prev", // 左箭头class
                        nextEl: ".btn-next", // 右箭头class
                        disabledClass: "opacity-20", // 滑到首尾自动加这个类，Tailwind直接用
                      }}
                      onSwiper={(swiper) => setSwiperRef(swiper)}
                      onSlideChange={handleSlideChange}
                      spaceBetween={0}
                      className="swiper-container-horizontal"
                    >
                      {vipList.map((item, idx) => (
                        <SwiperSlide
                          key={idx}
                          className="swiper-slide-color"
                          style={{ width: "343px" }}
                          data-exppoints={item.exppoints}
                          data-level={item.level}
                        >
                          {/* 标题 */}
                          <h3 className="text-lg font-medium mb-4 mt-4">
                            {item.title}
                          </h3>

                          {/* 权益卡片容器 */}
                          <div className="vipcenter-privileges-coupnts flex gap-3 flex-wrap">
                            {item.coupons.map((coupon, cIdx) => (
                              <a
                                key={cIdx}
                                href={coupon.link}
                                className="vipcenter-privileges-coupnt-a vipcenter-privileges-coupnt-ponit"
                              >
                                <button className="vipcenter-privileges-coupnt flex flex-col items-center p-2 border rounded">
                                  <img
                                    src={coupon.img}
                                    alt=""
                                    className="w-10 h-10 object-contain mb-1"
                                  />
                                  <p className="text-sm">{coupon.text1}</p>
                                  <p className="text-sm">{coupon.text2}</p>
                                </button>
                              </a>
                            ))}
                          </div>
                        </SwiperSlide>
                      ))}
                      {/* 自定义左右按钮，放在Swiper内部，同级slide */}
                      <button className="btn-prev absolute left-2 top-1/2 -translate-y-1/2 z-10 w-9 h-9 rounded-full bg-black/50 shadow flex items-center justify-center">
                        {/* 自定义左箭头SVG */}
                        <svg
                          width="16"
                          height="16"
                          viewBox="0 0 24 24"
                          fill="none"
                          stroke="#fff"
                          stroke-width="2"
                        >
                          <path d="M15 18l-6-6 6-6" />
                        </svg>
                      </button>
                      <button className="btn-next absolute right-2 top-1/2 -translate-y-1/2 z-10 w-9 h-9 rounded-full bg-black/50 shadow flex items-center justify-center">
                        {/* 自定义右箭头SVG */}
                        <svg
                          width="16"
                          height="16"
                          viewBox="0 0 24 24"
                          fill="none"
                          stroke="#fff"
                          stroke-width="2"
                        >
                          <path d="M9 18l6-6-6-6" />
                        </svg>
                      </button>
                    </Swiper>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}