"use client"; import { useState, useEffect, useMemo } from "react"; import { useRouter, useSearchParams } from "next/navigation"; import { Check, ArrowLeft } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { fetchSubscriptionPlans, SubscriptionPlan } from "@/lib/stripe"; import { DashboardLayout } from "@/components/layout/dashboard-layout"; export default function PricingPage() { useEffect(() => { // 获取当前窗口尺寸 const currentWidth = window.innerWidth; const currentHeight = window.innerHeight; // 计算缩放比例 (1920x1080) const wScale = currentWidth / 1920; const hScale = currentHeight / 1080; // 检查app节点是否存在 const pricingPage = document.getElementById("pricing-page"); if (!pricingPage) { console.error("未找到app节点"); return; } // setHPading((hScale || 1) * 10); // 创建样式元素 const style = document.createElement("style"); // 设置CSS样式 style.textContent = ` #pricing-page { transform-origin: top left; transform: scale(${wScale}, ${hScale}); width: 1920px; height: 1080px; } `; // 将样式添加到head document.head.appendChild(style); }, []); return (
{/* Main Content */}
); } /**价格方案 */ function HomeModule5() { const [billingType, setBillingType] = useState<"month" | "year">("month"); const [plans, setPlans] = useState([]); // 从后端获取订阅计划数据 useEffect(() => { const loadPlans = async () => { try { const plansData = await fetchSubscriptionPlans(); setPlans(plansData); } catch (err) { console.error("加载订阅计划失败:", err); } }; loadPlans(); }, []); const pricingPlans = useMemo< { title: string; price: number; credits: string; buttonText: string; features: string[]; }[] >(() => { return plans.map((plan) => { return { title: plan.display_name || plan.name, price: billingType === "month" ? plan.price_month / 100 : plan.price_year / 100, credits: plan.description, buttonText: plan.is_free ? "Try For Free" : "Subscribe Now", features: plan.features || [], }; }); }, [plans, billingType]); const handleSubscribe = async (planName: string) => { if (planName === "Kickoff") { return; } try { // 使用新的Checkout Session方案(更简单!) const { createCheckoutSession, redirectToCheckout } = await import( "@/lib/stripe" ); // 从localStorage获取当前用户信息 const User = JSON.parse(localStorage.getItem("currentUser") || "{}"); if (!User.id) { throw new Error("Unable to obtain user ID, please log in again"); } // 1. 创建Checkout Session const result = await createCheckoutSession({ user_id: String(User.id), plan_name: planName, billing_cycle: billingType, }); if (!result.successful || !result.data) { throw new Error("create checkout session failed"); } window.opener?.postMessage({ type: "waiting-payment" }, "*"); // 2. 直接跳转到Stripe托管页面(就这么简单!) window.location.href = result.data.checkout_url; } catch (error) { throw new Error("create checkout session failed, please try again later"); } }; return (

Pick a plan and make it yours

{/* 计费切换 */}
{/* 主要价格卡片 */}
{pricingPlans.map((plan, index) => (

{plan.title}

${plan.price} //{billingType === "month" ? "mo" : "year"}

{plan.credits}

* Billed monthly until cancelled

    {plan.features.map((feature, featureIndex) => (
  • {feature}
  • ))}
))}
); }