's'

app/digital/components/course/CTASection.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import { Link } from "@/app/digital/i18n/navigation";
+import { CTA_CONFIG } from "@/config/digital/course";
+import { useAuthAndVip } from "@/app/digital/lib/useAuthAndVip";
+import { getStoredToken, getStoredUser } from "@/app/digital/lib/pocketbase";
+import AuthModal from "@/app/digital/components/AuthModal";
+import {
+  getPayEnv,
+  redirectToPay,
+  getDeviceFromEnv,
+} from "@/app/digital/lib/payment";
+import { useState } from "react";
+
+export function CTASection() {
+  const { user, vip, refetch } = useAuthAndVip();
+  const paid = !!user && vip;
+  const [authOpen, setAuthOpen] = useState(false);
+  const [payRedirecting, setPayRedirecting] = useState(false);
+
+  const startPay = (userId: string) => {
+    const env = getPayEnv();
+    const channel = "wxpay";
+    const device = getDeviceFromEnv(env);
+    const returnUrl = `${window.location.origin}/`;
+
+    redirectToPay({
+      user_id: userId,
+      return_url: returnUrl,
+      channel,
+      device,
+      type: "video",
+      useJoinConfig: true,
+    });
+  };
+
+  const handleEnroll = async () => {
+    if (payRedirecting) return;
+    setPayRedirecting(true);
+
+    try {
+      // 先验证登录态
+      let meRes = await fetch("/api/digital/auth/me", { credentials: "include" });
+      let meData = await meRes.json().catch(() => ({}));
+      if (meData?.user?.id) {
+        // 已登录：先校验 VIP，已是 VIP 则无需支付
+        const vipRes = await fetch(`/api/digital/vip/check?email=${encodeURIComponent(meData.user.email)}`, { credentials: "include" });
+        const vipData = await vipRes.json().catch(() => ({}));
+        if (vipData?.vip) {
+          await refetch();
+          return;
+        }
+        startPay(meData.user.id);
+        return;
+      }
+
+      const storedUser = getStoredUser();
+      const storedToken = getStoredToken();
+      if (storedUser?.id && storedToken) {
+        await fetch("/api/digital/auth/sync-session", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ token: storedToken, record: storedUser }),
+          credentials: "include",
+        }).catch(() => null);
+        meRes = await fetch("/api/digital/auth/me", { credentials: "include" });
+        meData = await meRes.json().catch(() => ({}));
+        if (meData?.user?.id) {
+          const vipRes = await fetch(`/api/digital/vip/check?email=${encodeURIComponent(meData.user.email)}`, { credentials: "include" });
+          const vipData = await vipRes.json().catch(() => ({}));
+          if (vipData?.vip) {
+            await refetch();
+            return;
+          }
+          startPay(meData.user.id);
+          return;
+        }
+      }
+
+      setAuthOpen(true);
+    } finally {
+      setPayRedirecting(false);
+    }
+  };
+
+  return (
+    <section className="border-t border-[var(--border)] py-16 sm:py-20 md:py-24">
+      <div className="mx-auto max-w-3xl px-4 text-center sm:px-6">
+        <h2 className="mb-4 text-xl font-bold sm:text-2xl md:text-3xl">{CTA_CONFIG.title}</h2>
+        <p className="mx-auto mb-6 max-w-[17rem] break-all text-[var(--muted-foreground)] sm:mb-8 sm:max-w-2xl">{CTA_CONFIG.subtitle}</p>
+        <div className="mb-8 flex flex-wrap justify-center gap-4 text-sm text-[var(--muted-foreground)] sm:mb-10 sm:gap-6">
+          {CTA_CONFIG.badges.map((b, i) => (
+            <span
+              key={b}
+              className="animate-float-badge rounded-full border border-[var(--border)] bg-[var(--card)] px-4 py-2"
+              style={{ animationDelay: `${i * 0.2}s` }}
+            >
+              {b}
+            </span>
+          ))}
+        </div>
+        {paid ? (
+          <Link
+            href="/course/0/0"
+            className="inline-flex items-center gap-2 rounded-full bg-[var(--accent)] px-8 py-4 text-lg font-semibold text-[var(--accent-foreground)] shadow-lg shadow-[var(--accent)]/25 transition-all duration-300 hover:scale-105 hover:opacity-95 hover:shadow-xl hover:shadow-[var(--accent)]/30 sm:px-10"
+          >
+            开始学习 →
+          </Link>
+        ) : (
+          <button
+            type="button"
+            onClick={handleEnroll}
+            disabled={payRedirecting}
+            className="inline-flex items-center gap-2 rounded-full bg-[var(--accent)] px-8 py-4 text-lg font-semibold text-[var(--accent-foreground)] shadow-lg shadow-[var(--accent)]/25 transition hover:opacity-95 disabled:opacity-70 sm:px-10"
+          >
+            {payRedirecting ? "跳转支付中..." : "立即报名 →"}
+          </button>
+        )}
+      </div>
+      <AuthModal
+        isOpen={authOpen}
+        onClose={() => setAuthOpen(false)}
+        onSuccess={() => {
+          setAuthOpen(false);
+          void refetch();
+        }}
+      />
+    </section>
+  );
+}