"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() { return (
{/* Main Content */}
); } /**价格方案 */ function HomeModule5() { const [billingType, setBillingType] = useState<"month" | "year">("month"); const [plans, setPlans] = useState([]); const [loadingPlan, setLoadingPlan] = useState(null); // 跟踪哪个计划正在加载 // 监听支付完成消息 useEffect(() => { const handlePaymentResult = (ev: MessageEvent) => { if (ev.data.type === 'payment-result') { // 支付完成后清除loading状态 setLoadingPlan(null); } }; window.addEventListener('message', handlePaymentResult); return () => window.removeEventListener('message', handlePaymentResult); }, []); // 从后端获取订阅计划数据 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[]; issubscribed: boolean; }[] >(() => { 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", issubscribed: plan.is_subscribed, features: plan.features || [], }; }); }, [plans, billingType]); const handleSubscribe = async (planName: string) => { setLoadingPlan(planName); // 改为直接携带参数打开 pay-redirect，由其内部完成创建与跳转 const url = `/pay-redirect?type=subscription&plan=${encodeURIComponent(planName)}&billing=${encodeURIComponent(billingType)}`; const win = window.open(url, '_blank'); // 通知当前窗口等待支付（显示loading模态框） window.postMessage({ type: 'waiting-payment', paymentType: 'subscription', }, '*'); if (!win) { setLoadingPlan(null); throw new Error('Unable to open redirect window, please check popup settings'); } }; return (

Pick a plan and make it yours

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

{plan.title}

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

{plan.credits}

{plan.issubscribed ? ( ) : ( )}

* Billed monthly until cancelled

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