gpts-ui/web/src/app/vip-box/page.tsx

"use client";
import { useState, useEffect } from "react";
import { useGlobalContext } from "@/providers/GlobalProvider";
import { RiCloseFill } from 'react-icons/ri';

interface Package {
  id: number;
  name: string;
  description: string;
  price: string;
  image: string;
  days: number;
  basePoints: number;
  seniorPoints: number;
}

const packages: Package[] = [
  {
    id: 1,
    name: "入门体验会员",
    description:
      "套餐包含500积分通用AI模型(AI3.5Turbo等模型)、100积分增强AI模型(AI4o大模型)、30积分高级绘画额度",
    price: "19.99",
    image:
      "http://ai3666.oss-cn-beijing.aliyuncs.com/ai/2024-11-14/%C3%A7%C2%A8%C2%BF%C3%A5%C2%AE%C2%9A%C3%A8%C2%AE%C2%BE%C3%A8%C2%AE%C2%A1-1.jpg",
    days: 30,
    basePoints: 100,
    seniorPoints: 100,
  },
  {
    id: 2,
    name: "季度高级会员",
    description:
      "套餐包含800积分通用AI模型(AI3.5Turbo等模型)、1000积分增强AI模型(AI4o大模型)、300积分高级绘画额度",
    price: "99.00",
    image:
      "http://ai3666.oss-cn-beijing.aliyuncs.com/ai/2024-11-14/%C3%A7%C2%A8%C2%BF%C3%A5%C2%AE%C2%9A%C3%A8%C2%AE%C2%BE%C3%A8%C2%AE%C2%A1-2.jpg",
    days: 120,
    basePoints: 800,
    seniorPoints: 1000,
  },
  {
    id: 3,
    name: "年度畅享会员",
    description:
      "套餐包含3000积分通用AI模型(AI3.5Turbo等模型)、3000积分增强AI模型(AI4o大模型)、300积分高级绘画额度",
    price: "365.00",
    image:
      "http://ai3666.oss-cn-beijing.aliyuncs.com/ai/2024-11-14/%C3%A7%C2%A8%C2%BF%C3%A5%C2%AE%C2%9A%C3%A8%C2%AE%C2%BE%C3%A8%C2%AE%C2%A1-3.jpg",
    days: 365,
    basePoints: 3000,
    seniorPoints: 3000,
  },
];

export default function VipBoxPage() {
  const { changeMenuIndex } = useGlobalContext();
  const [showBuyBox, setShowBuyBox] = useState(false);

  const closeBuyBox = () => {
    setShowBuyBox(false);
  }

  useEffect(() => {
    
  }, []);

  return (
    <>
      <section className="text-gray-600 body-font mt-6 md:mt-0">
        <div className="w-full md:container md:px-5 md:py-24 mx-auto">
          <div className="flex flex-col text-center w-full">
            <h1 className="sm:text-4xl text-3xl font-medium title-font mb-2 text-gray-900 dark:text-white">
              会员套餐
            </h1>
            <p className="lg:w-2/3 mx-auto leading-relaxed text-base text-gray-500">
              尽情探索，欢迎光临我们的在线商店、感谢您选择我们、让我们一同开启愉悦的购物之旅！
            </p>
          </div>

          <div className="px-4 py-8 sm:px-6 sm:py-12 lg:px-8 lg:py-16">
            <div className="grid grid-cols-1 gap-2 md:grid-cols-2 md:gap-4  xl:grid-cols-3 xl:gap-8">
              {packages.map((pkg) => (
                <div
                  className="rounded-2xl border border-gray-200 shadow-sm dark:border-gray-500"
                  key={pkg.id}
                >
                  <div className="p-6 sm:px-8">
                    <img
                      className="lg:h-48 md:h-36 w-full object-cover object-center rounded-2xl"
                      src={pkg.image}
                      alt={pkg.name}
                    />
                    <h2 className="mt-2 text-lg font-medium text-gray-900 dark:text-white">
                      {pkg.name}
                    </h2>
                    <p className="mt-2 text-gray-700 dark:text-gray-500">
                      {pkg.description}
                    </p>
                    <p className="mt-2 sm:mt-4">
                      <strong className="text-3xl font-bold text-gray-900 sm:text-4xl  dark:text-gray-300">
                        {pkg.days}
                      </strong>
                      <span className="text-sm font-medium text-gray-700 dark:text-gray-500 ml-1">
                        天
                      </span>
                    </p>
                    <button className="mt-4 block w-full rounded px-12 py-3 text-center text-sm font-medium text-white global-bg-color focus:outline-none focus:ring sm:mt-6 transition ease-in-out hover:-translate-y-1" onClick={() => setShowBuyBox(true)}>
                      ￥{pkg.price}
                    </button>
                  </div>

                  <div className="px-6 pb-6 sm:px-8 sm:pb-8">
                    <ul className="space-y-2 text-gray-700 dark:text-gray-500">
                      <li className="flex justify-between">
                        <span>基础模型额度</span>
                        <span>{pkg.basePoints} 积分 </span>
                      </li>
                      <li className="flex justify-between">
                        <span>高级模型额度</span>
                        <span>{pkg.seniorPoints} 积分 </span>
                      </li>
                    </ul>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {showBuyBox && (
        <div className="pay-box">
          <div className="pay-mask"></div>
          <div className="pay-div p-7 bg-white dark:bg-gray-900 text-base rounded w-11/12 lg:w-full max-w-screen-lg">
            <RiCloseFill className="absolute right-2.5 top-2.5 w-8 h-8 cursor-pointer transform duration-500 ease-in-out hover:scale-125 text-gray-500" onClick={closeBuyBox}></RiCloseFill>
            <h2 className="text-xl global-txt-color">会员套餐支付</h2>
            <div className="py-10 grid grid-cols-1 md:grid-cols-2 md:gap-8">
              <div className="">
                <div className="flex">
                  <div className="w-20 text-nowrap text-left h-6 leading-8 shrink-0">
                    需要支付：
                  </div>
                  <div className="h-6 text-red-700 text-2xl">￥19.90</div>
                </div>
                <div className="mt-4 flex ">
                  <div className="w-20 text-nowrap text-left shrink-0">套餐名称：</div>
                  <div className="text-left">入门体验会员</div>
                </div>
                <div className="mt-4 flex">
                  <div className="w-20 text-nowrap text-left shrink-0">套餐描述：</div>
                  <div className="text-left w-5/6">
                    套餐包含500积分通用AI模型(AI3.5Turbo等模型)、100积分增强AI模型(AI4o大模型)、30积分高级绘画额度
                  </div>
                </div>
              </div>
              <div className="text-center py-4 md:py-0 mt-5 md:mt-0 border-t md:border-t-0">
                <div>
                  请在 <span className="text-red-700">00:03:34</span>{" "}
                  时间内完成支付！
                </div>
                <div className="w-full pt-3">
                  <div className="relative w-72 mx-auto p-3 border rounded">
                    <img
                      src="/temp/wxpay.png"
                      className="w-12 bg-white p-1 div-center"
                    />
                    <img src="/temp/qrcode.png" />
                  </div>
                </div>
                <div className="mt-2">打开微信扫码支付</div>
              </div>
            </div>
          </div>
        </div>
      )}
    </>
  );
}