''

app/[locale]/course/[moduleIndex]/[lessonIndex]/page.tsx

@@ -8,16 +8,27 @@ import { LessonMarkdown } from "./LessonMarkdown";
 import { getLesson } from "@/config/lessons";
 import { canWatchLesson } from "@/app/lib/course-payment";
 import { useAuthAndVip } from "@/app/lib/useAuthAndVip";
+import { getStoredToken, getStoredUser } from "@/app/lib/pocketbase";
 import { setLastWatched, markCompleted } from "@/app/lib/learning";
 import { DOWNLOAD_CONFIG } from "@/config/course";
 import Header from "@/app/components/Header";
+import AuthModal from "@/app/components/AuthModal";
+import {
+  getPayEnv,
+  getRecommendedChannel,
+  mustUseWxPay,
+  redirectToPay,
+  getDeviceFromEnv,
+} from "@/app/lib/payment";
 
 export default function LessonPage() {
   const params = useParams();
   const router = useRouter();
   const { t } = useTranslation("community");
-  const { vip } = useAuthAndVip();
+  const { user, vip } = useAuthAndVip();
   const [toast, setToast] = useState(false);
+  const [authOpen, setAuthOpen] = useState(false);
+  const [payRedirecting, setPayRedirecting] = useState(false);
   const moduleIndex = Number(params.moduleIndex);
   const lessonIndex = Number(params.lessonIndex);
 
@@ -29,6 +40,57 @@ export default function LessonPage() {
     if (lesson && unlocked) setLastWatched(moduleIndex, lessonIndex, lesson.name);
   }, [moduleIndex, lessonIndex, lesson?.name, unlocked]);
 
+  const startPay = (userId: string) => {
+    const env = getPayEnv();
+    const channel = mustUseWxPay(env) ? "wxpay" : getRecommendedChannel(env);
+    const device = getDeviceFromEnv(env);
+    const returnUrl = `${window.location.origin}${window.location.pathname}`;
+
+    redirectToPay({
+      user_id: userId,
+      return_url: returnUrl,
+      channel,
+      device,
+      useJoinConfig: true,
+    });
+  };
+
+  const handleEnroll = async () => {
+    if (payRedirecting) return;
+    setPayRedirecting(true);
+
+    try {
+      if (user?.id) {
+        startPay(user.id);
+        return;
+      }
+
+      const meRes = await fetch("/api/auth/me", { credentials: "include" });
+      const meData = await meRes.json().catch(() => ({}));
+      if (meData?.user?.id) {
+        startPay(meData.user.id);
+        return;
+      }
+
+      const storedUser = getStoredUser();
+      const storedToken = getStoredToken();
+      if (storedUser?.id && storedToken) {
+        await fetch("/api/auth/sync-session", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ token: storedToken, record: storedUser }),
+          credentials: "include",
+        }).catch(() => null);
+        startPay(storedUser.id);
+        return;
+      }
+
+      setAuthOpen(true);
+    } finally {
+      setPayRedirecting(false);
+    }
+  };
+
   if (!lesson || isNaN(moduleIndex) || isNaN(lessonIndex)) {
     return (
       <div className="min-h-screen bg-[var(--background)]">
@@ -36,14 +98,12 @@ export default function LessonPage() {
         <main className="pt-20 pb-16">
           <div className="mx-auto max-w-4xl px-4 py-16 text-center">
             <h1 className="mb-4 text-2xl font-bold">章节不存在</h1>
-            <p className="mb-6 text-[var(--muted-foreground)]">
-              请检查链接或返回课程首页
-            </p>
+            <p className="mb-6 text-[var(--muted-foreground)]">请检查链接或返回课程首页</p>
             <Link
               href="/course"
               className="inline-flex items-center gap-2 rounded-full bg-[var(--accent)] px-6 py-3 font-medium text-[var(--accent-foreground)] transition hover:opacity-90"
             >
-              ← 返回首页
+              返回首页
             </Link>
           </div>
         </main>
@@ -56,7 +116,6 @@ export default function LessonPage() {
       <Header />
       <main className="pt-14 pb-16 md:pt-16">
         <div className="mx-auto max-w-4xl px-4 sm:px-6">
-          {/* 返回导航 */}
           <nav className="mb-6 flex items-center gap-2 text-sm">
             <button
               type="button"
@@ -74,7 +133,6 @@ export default function LessonPage() {
             </Link>
           </nav>
 
-          {/* 标题 */}
           <h1 className="mb-2 flex items-center gap-2 text-xl font-bold sm:text-2xl md:text-3xl">
             {lesson.name}
             {isFreeTrial && (
@@ -83,11 +141,8 @@ export default function LessonPage() {
               </span>
             )}
           </h1>
-          <p className="mb-8 text-sm text-[var(--muted-foreground)]">
-            时长 {lesson.duration}
-          </p>
+          <p className="mb-8 text-sm text-[var(--muted-foreground)]">时长 {lesson.duration}</p>
 
-          {/* 视频播放器 / 锁定 overlay */}
           <div className="relative mb-12">
             {unlocked ? (
               <VideoPlayer
@@ -102,18 +157,19 @@ export default function LessonPage() {
                 <div className="aspect-video flex flex-col items-center justify-center gap-4 bg-zinc-900">
                   <span className="text-6xl">🔒</span>
                   <p className="text-lg text-white/90">报名解锁本章节</p>
-                  <Link
-                    href="/join"
-                    className="rounded-full bg-[var(--accent)] px-6 py-3 font-medium text-[var(--accent-foreground)] transition hover:opacity-90"
+                  <button
+                    type="button"
+                    onClick={handleEnroll}
+                    disabled={payRedirecting}
+                    className="rounded-full bg-[var(--accent)] px-6 py-3 font-medium text-[var(--accent-foreground)] transition hover:opacity-90 disabled:opacity-70"
                   >
-                    立即报名
-                  </Link>
+                    {payRedirecting ? "跳转支付中..." : "立即报名"}
+                  </button>
                 </div>
               </div>
             )}
           </div>
 
-          {/* 配套文档 - 仅解锁后显示 */}
           {unlocked && (
             <div className="relative rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm md:rounded-2xl md:p-8">
               <h2 className="mb-6 flex items-center gap-2 text-lg font-semibold">
@@ -126,7 +182,6 @@ export default function LessonPage() {
             </div>
           )}
 
-          {/* 网盘下载 */}
           {DOWNLOAD_CONFIG.enabled && unlocked && (
             <div className="mt-8 rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm md:rounded-2xl md:p-8">
               <h2 className="mb-4 flex items-center gap-2 text-lg font-semibold">
@@ -135,9 +190,7 @@ export default function LessonPage() {
                 </svg>
                 {DOWNLOAD_CONFIG.title}
               </h2>
-              <p className="mb-4 text-sm text-[var(--muted-foreground)]">
-                课程配套资料已上传至网盘，报名后可前往下载
-              </p>
+              <p className="mb-4 text-sm text-[var(--muted-foreground)]">课程配套资料已上传至网盘，报名后可前往下载</p>
               <a
                 href={DOWNLOAD_CONFIG.url}
                 target="_blank"
@@ -161,6 +214,14 @@ export default function LessonPage() {
           {t("updating")}
         </div>
       )}
+      <AuthModal
+        isOpen={authOpen}
+        onClose={() => setAuthOpen(false)}
+        onSuccess={() => {
+          setAuthOpen(false);
+          void handleEnroll();
+        }}
+      />
     </div>
   );
 }