'style1'

app/join/page.tsx

@@ -1,138 +1,79 @@
 "use client";
 
-import { useState, useRef, useEffect, type FormEvent, type ChangeEvent } from "react";
+import { useState, useEffect, type FormEvent } from "react";
 import Link from "next/link";
-import {
-  getPayEnv,
-  redirectToPay,
-  getDeviceFromEnv,
-} from "@/app/lib/payment";
-import { usePayStatusPoll } from "@/app/lib/payment/usePayStatusPoll";
-import AuthModal from "@/app/components/AuthModal";
+import { SESSIONS } from "@/config/home.config";
 
-const genderOptions = ["男", "女"];
-const singleOptions = ["单身", "恋爱中", "已婚"];
-const educationOptions = ["高中及以下", "大专", "本科", "硕士", "博士"];
-const graduationYears = Array.from({ length: 41 }, (_, i) => String(2026 - i));
+const ageOptions = ["18-24", "25-30", "31-35", "36-40", "40+"];
+const firstTimeOptions = ["是，第一次参加", "否，参加过类似活动"];
 
 interface FormData {
+  city: string;
+  session: string;
   nickname: string;
-  gender: string;
-  single: string;
-  profession: string;
+  ageRange: string;
+  wechatOrPhone: string;
   intro: string;
-  wechat: string;
-  education: string;
-  graduationYear: string;
-  phone: string;
+  firstTime: string;
+  agreeRules: boolean;
 }
 
-interface MediaInfo {
-  preview: string;
-  url: string;
-  type: "image" | "video";
+function getSessionFromUrl(): string {
+  if (typeof window === "undefined") return "";
+  return new URLSearchParams(window.location.search).get("session") || "";
+}
+
+function getSessionInfo(sessionId: string) {
+  return SESSIONS.find((s) => s.id === sessionId);
 }
 
 export default function JoinPage() {
   const [form, setForm] = useState<FormData>({
+    city: "北京",
+    session: "",
     nickname: "",
-    gender: "",
-    single: "",
-    profession: "",
+    ageRange: "",
+    wechatOrPhone: "",
     intro: "",
-    wechat: "",
-    education: "",
-    graduationYear: "",
-    phone: "",
+    firstTime: "",
+    agreeRules: false,
   });
-  const [media, setMedia] = useState<MediaInfo | null>(null);
-  const [uploading, setUploading] = useState(false);
-  const fileRef = useRef<HTMLInputElement>(null);
   const [submitted, setSubmitted] = useState(false);
-  const [isVipSubmit, setIsVipSubmit] = useState(false);
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  const [payRedirecting, setPayRedirecting] = useState(false);
-  const [authOpen, setAuthOpen] = useState(false);
-  const [pendingSubmit, setPendingSubmit] = useState(false);
-  const [isAlreadyRecorded, setIsAlreadyRecorded] = useState(false);
-  const [checkingStatus, setCheckingStatus] = useState(true);
 
   useEffect(() => {
-    if (typeof window !== "undefined" && new URLSearchParams(window.location.search).get("paid") === "1") {
-      setSubmitted(true);
-      setCheckingStatus(false);
-      return;
-    }
-    const checkExisting = async () => {
-      const meRes = await fetch("/api/auth/me", { credentials: "include" });
-      const meData = await meRes.json();
-      if (!meData?.user) {
-        setCheckingStatus(false);
-        return;
-      }
-      const statusRes = await fetch("/api/join/status", { credentials: "include", cache: "no-store" });
-      const statusData = await statusRes.json();
-      if (statusData?.hasRecord && statusData?.isComplete) {
-        setIsAlreadyRecorded(true);
-        setSubmitted(true);
-      }
-      setCheckingStatus(false);
-    };
-    checkExisting();
+    const sid = getSessionFromUrl();
+    if (sid) setForm((prev) => ({ ...prev, session: sid }));
   }, []);
 
-  usePayStatusPoll((orderId) => {
-    if (typeof window === "undefined") return;
-    const paidPath = "/join/paid";
-    const url = orderId ? `${paidPath}?order_id=${encodeURIComponent(orderId)}` : paidPath;
-    window.location.replace(url);
-  });
-
-  const set = (key: keyof FormData, value: string) =>
+  const set = (key: keyof FormData, value: string | boolean) =>
     setForm((prev) => ({ ...prev, [key]: value }));
 
-  const doSubmit = async () => {
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
     setError(null);
     setSubmitting(true);
     try {
       const res = await fetch("/api/join", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ ...form, media: media?.url }),
-        credentials: "include",
+        body: JSON.stringify({
+          city: form.city,
+          session: form.session,
+          nickname: form.nickname,
+          age_range: form.ageRange,
+          wechat_or_phone: form.wechatOrPhone,
+          intro: form.intro,
+          first_time: form.firstTime,
+          agree_rules: form.agreeRules,
+        }),
       });
       const data = await res.json();
       if (!res.ok || !data?.ok) {
         throw new Error(data?.error || "提交失败，请稍后重试");
       }
-      const userId = data.user_id;
-      if (!userId) {
-        setSubmitted(true);
-        return;
-      }
-      const vipRes2 = await fetch("/api/vip/check", { credentials: "include", cache: "no-store" });
-      const vipData2 = await vipRes2.json();
-      if (vipData2?.vip) {
-        setIsVipSubmit(true);
-        setSubmitted(true);
-        setSubmitting(false);
-        return;
-      }
-      setSubmitting(false);
-      setPayRedirecting(true);
-      const returnUrl = `${window.location.origin}/join/paid`;
-      const env = getPayEnv();
-      const channel = "wxpay";
-      const device = getDeviceFromEnv(env);
-      redirectToPay({
-        user_id: userId,
-        return_url: returnUrl,
-        channel,
-        device,
-        useJoinConfig: true,
-      });
-      return;
+      setSubmitted(true);
     } catch (err) {
       setError(err instanceof Error ? err.message : "网络错误，请重试");
     } finally {
@@ -140,30 +81,7 @@ export default function JoinPage() {
     }
   };
 
-  const handleSubmit = async (e: FormEvent) => {
-    e.preventDefault();
-    const meRes = await fetch("/api/auth/me", { credentials: "include" });
-    const meData = await meRes.json();
-    if (!meData?.user) {
-      setPendingSubmit(true);
-      setAuthOpen(true);
-      return;
-    }
-    const vipRes = await fetch("/api/vip/check", { credentials: "include", cache: "no-store" });
-    const vipData = await vipRes.json();
-    if (vipData?.vip) {
-      setIsVipSubmit(true);
-    }
-    await doSubmit();
-  };
-
-  const handleAuthSuccess = () => {
-    setAuthOpen(false);
-    if (pendingSubmit) {
-      setPendingSubmit(false);
-      doSubmit();
-    }
-  };
+  const selectedSession = getSessionInfo(form.session);
 
   if (submitted) {
     return (
@@ -172,11 +90,9 @@ export default function JoinPage() {
           <div className="mx-auto mb-5 flex h-20 w-20 items-center justify-center rounded-full bg-emerald-50 dark:bg-emerald-900/30 text-5xl">
             ✅
           </div>
-          <h2 className="text-2xl font-bold text-slate-800 dark:text-slate-100">
-            {isAlreadyRecorded ? "资料已录入" : isVipSubmit ? "提交成功" : "支付成功"}
-          </h2>
+          <h2 className="text-2xl font-bold text-slate-800 dark:text-slate-100">报名成功</h2>
           <p className="mt-3 text-slate-500 dark:text-slate-400">
-            {isAlreadyRecorded ? "您的报名信息已录入，无需重复提交" : isVipSubmit ? "感谢您的参与" : "感谢您的支持"}
+            我们会尽快通过您留下的联系方式与您确认
           </p>
           <Link
             href="/"
@@ -189,47 +105,76 @@ export default function JoinPage() {
     );
   }
 
-  if (checkingStatus) {
-    return (
-      <div className="flex min-h-screen items-center justify-center bg-[#f0f4f8] dark:bg-gray-950 px-4">
-        <div className="text-slate-500 dark:text-slate-400">加载中…</div>
-      </div>
-    );
-  }
-
   return (
     <div className="min-h-screen bg-[#f0f4f8] dark:bg-gray-950">
       <div className="mx-auto max-w-2xl px-0 py-0 sm:px-6 sm:py-10 lg:py-14">
         <div className="overflow-hidden bg-white dark:bg-gray-900 shadow-sm sm:rounded-t-2xl">
           <div className="relative h-40 overflow-hidden bg-gradient-to-br from-sky-400 via-cyan-500 to-teal-400 sm:h-52">
             <div className="absolute inset-0 flex flex-col items-center justify-center text-white">
-              <div className="text-6xl sm:text-7xl">🌍</div>
+              <div className="text-6xl sm:text-7xl">📍</div>
               <div className="mt-2 text-sm font-medium opacity-80">
-                数字游民社区
+                北京周末新朋友活动
               </div>
             </div>
           </div>
 
           <div className="px-5 py-5 text-center sm:px-8 sm:py-7">
             <h1 className="text-xl font-bold text-slate-800 dark:text-slate-100 sm:text-2xl">
-              🌍 数字游民社区报名
+              活动报名
             </h1>
             <p className="mt-3 whitespace-pre-line text-sm leading-relaxed text-slate-400 dark:text-slate-500 sm:text-base">
-              {"💼 结识志同道合的伙伴\n📍 线下聚会 + 线上分享\n🤝 互助成长，资源共享"}
+              填个简单表单即可，无需注册登录
             </p>
           </div>
         </div>
 
+        {selectedSession && (
+          <div className="mt-5 rounded-2xl bg-white dark:bg-gray-900 px-5 py-4 shadow-sm border border-gray-100 dark:border-gray-800">
+            <p className="text-xs text-slate-500 dark:text-slate-500 mb-1">已选场次</p>
+            <p className="font-medium text-slate-800 dark:text-slate-100">{selectedSession.title}</p>
+            <p className="text-sm text-slate-500 dark:text-slate-500">{selectedSession.date} {selectedSession.time} · {selectedSession.place}</p>
+          </div>
+        )}
+
         <form
           onSubmit={handleSubmit}
           className="mt-0 bg-white dark:bg-gray-900 px-5 pb-8 pt-2 shadow-sm sm:mt-5 sm:rounded-2xl sm:px-8 sm:py-8 sm:shadow-md border border-gray-100 dark:border-gray-800"
         >
           <div className="grid gap-0 sm:grid-cols-2 sm:gap-6">
-            <Field label="🌟 昵称">
+            <Field label="📍 城市">
               <input
                 type="text"
-                maxLength={140}
-                placeholder="请输入您的昵称"
+                placeholder="如：北京"
+                value={form.city}
+                onChange={(e) => set("city", e.target.value)}
+                required
+                className="form-input"
+              />
+            </Field>
+
+            <Field label="📅 想参加的场次">
+              <select
+                value={form.session}
+                onChange={(e) => set("session", e.target.value)}
+                required
+                className={`form-input appearance-none ${form.session ? "text-slate-800 dark:text-slate-100" : "text-slate-400 dark:text-slate-500"}`}
+              >
+                <option value="" disabled>请选择</option>
+                {SESSIONS.map((s) => (
+                  <option key={s.id} value={s.id}>
+                    {s.title} · {s.date} {s.time}
+                  </option>
+                ))}
+              </select>
+            </Field>
+          </div>
+
+          <div className="grid gap-0 sm:grid-cols-2 sm:gap-6">
+            <Field label="昵称">
+              <input
+                type="text"
+                maxLength={40}
+                placeholder="活动中使用的称呼"
                 value={form.nickname}
                 onChange={(e) => set("nickname", e.target.value)}
                 required
@@ -237,222 +182,81 @@ export default function JoinPage() {
               />
             </Field>
 
-            <Field label="👤 性别">
+            <Field label="年龄段">
               <select
-                value={form.gender}
-                onChange={(e) => set("gender", e.target.value)}
+                value={form.ageRange}
+                onChange={(e) => set("ageRange", e.target.value)}
                 required
-                className={`form-input appearance-none ${form.gender ? "text-slate-800 dark:text-slate-100" : "text-slate-400 dark:text-slate-500"}`}
+                className={`form-input appearance-none ${form.ageRange ? "text-slate-800 dark:text-slate-100" : "text-slate-400 dark:text-slate-500"}`}
               >
                 <option value="" disabled>请选择</option>
-                {genderOptions.map((o) => (
+                {ageOptions.map((o) => (
                   <option key={o} value={o}>{o}</option>
                 ))}
               </select>
             </Field>
           </div>
 
-          <div className="grid gap-0 sm:grid-cols-2 sm:gap-6">
-            <Field label="💕 感情状态">
-              <select
-                value={form.single}
-                onChange={(e) => set("single", e.target.value)}
-                required
-                className={`form-input appearance-none ${form.single ? "text-slate-800 dark:text-slate-100" : "text-slate-400 dark:text-slate-500"}`}
-              >
-                <option value="" disabled>请选择</option>
-                {singleOptions.map((o) => (
-                  <option key={o} value={o}>{o}</option>
-                ))}
-              </select>
-            </Field>
-
-            <Field label="💼 职业">
-              <input
-                type="text"
-                maxLength={140}
-                placeholder="您的职业或专业"
-                value={form.profession}
-                onChange={(e) => set("profession", e.target.value)}
-                required
-                className="form-input"
-              />
-            </Field>
-          </div>
-
-          <div className="grid gap-0 sm:grid-cols-2 sm:gap-6">
-            <Field label="💬 微信号">
-              <input
-                type="text"
-                maxLength={140}
-                placeholder="用于拉群"
-                value={form.wechat}
-                onChange={(e) => set("wechat", e.target.value)}
-                required
-                className="form-input"
-              />
-            </Field>
-
-            <Field label="📱 手机号">
-              <input
-                type="tel"
-                maxLength={11}
-                pattern="^\d{11}$"
-                placeholder="请输入11位手机号"
-                value={form.phone}
-                onChange={(e) => {
-                  const v = e.target.value.replace(/\D/g, "").slice(0, 11);
-                  set("phone", v);
-                }}
-                required
-                className="form-input"
-              />
-            </Field>
-          </div>
-
           <div className="border-b border-slate-100 dark:border-gray-700 py-4 sm:py-5">
             <label className="mb-2 block text-base font-bold text-slate-700 dark:text-slate-300 sm:text-[17px]">
-              📝 自我介绍
+              微信号或手机号
             </label>
-            <div className="relative">
-              <textarea
-                maxLength={500}
-                rows={5}
-                placeholder="分享您的经历、兴趣或加入原因，越详细越好哦~"
-                value={form.intro}
-                onChange={(e) => set("intro", e.target.value)}
-                className="form-input min-h-[120px] resize-none sm:min-h-[140px]"
-              />
-              <span className="absolute right-3 bottom-3 text-xs text-slate-300 dark:text-slate-500">
-                {form.intro.length}/500
-              </span>
-            </div>
+            <input
+              type="text"
+              maxLength={50}
+              placeholder="用于活动联系"
+              value={form.wechatOrPhone}
+              onChange={(e) => set("wechatOrPhone", e.target.value)}
+              required
+              className="form-input"
+            />
           </div>
 
-          <div className="grid gap-0 sm:grid-cols-2 sm:gap-6">
-            <Field label="🎓 学历">
-              <select
-                value={form.education}
-                onChange={(e) => set("education", e.target.value)}
-                className={`form-input appearance-none ${form.education ? "text-slate-800 dark:text-slate-100" : "text-slate-400 dark:text-slate-500"}`}
-              >
-                <option value="" disabled>请选择</option>
-                {educationOptions.map((o) => (
-                  <option key={o} value={o}>{o}</option>
-                ))}
-              </select>
-            </Field>
+          <div className="border-b border-slate-100 dark:border-gray-700 py-4 sm:py-5">
+            <label className="mb-2 block text-base font-bold text-slate-700 dark:text-slate-300 sm:text-[17px]">
+              一句话自我介绍
+            </label>
+            <input
+              type="text"
+              maxLength={140}
+              placeholder="简单介绍一下自己"
+              value={form.intro}
+              onChange={(e) => set("intro", e.target.value)}
+              required
+              className="form-input"
+            />
+          </div>
 
-            <Field label="📅 毕业时间">
-              <select
-                value={form.graduationYear}
-                onChange={(e) => set("graduationYear", e.target.value)}
-                className={`form-input appearance-none ${form.graduationYear ? "text-slate-800 dark:text-slate-100" : "text-slate-400 dark:text-slate-500"}`}
-              >
-                <option value="" disabled>请选择</option>
-                {graduationYears.map((y) => (
-                  <option key={y} value={y}>{y}</option>
-                ))}
-              </select>
-            </Field>
+          <div className="border-b border-slate-100 dark:border-gray-700 py-4 sm:py-5">
+            <label className="mb-2 block text-base font-bold text-slate-700 dark:text-slate-300 sm:text-[17px]">
+              是否第一次参加类似活动
+            </label>
+            <select
+              value={form.firstTime}
+              onChange={(e) => set("firstTime", e.target.value)}
+              required
+              className={`form-input appearance-none ${form.firstTime ? "text-slate-800 dark:text-slate-100" : "text-slate-400 dark:text-slate-500"}`}
+            >
+              <option value="" disabled>请选择</option>
+              {firstTimeOptions.map((o) => (
+                <option key={o} value={o}>{o}</option>
+              ))}
+            </select>
           </div>
 
           <div className="py-4 sm:py-5">
-            <label className="mb-1 block text-[15px] font-bold text-slate-700 dark:text-slate-300 sm:text-[17px]">
-              📷 头像 / 自拍视频
-              <span className="ml-2 text-xs font-normal text-slate-400 dark:text-slate-500">（可选）</span>
+            <label className="flex items-start gap-3 cursor-pointer">
+              <input
+                type="checkbox"
+                checked={form.agreeRules}
+                onChange={(e) => set("agreeRules", e.target.checked)}
+                required
+                className="mt-1 rounded border-gray-300 text-[#ff4d4f] focus:ring-[#ff4d4f]"
+              />
+              <span className="text-sm text-slate-600 dark:text-slate-400">
+                我已阅读并同意活动规则（公开场地、尊重边界、如有不适可随时离开）
+              </span>
             </label>
-            <p className="mb-3 text-xs text-slate-400 dark:text-slate-500">
-              支持图片（JPG/PNG）或短视频（MP4），最大 20MB
-            </p>
-
-            <input
-              ref={fileRef}
-              type="file"
-              accept="image/jpeg,image/png,image/webp,video/mp4,video/quicktime"
-              className="hidden"
-              onChange={async (e: ChangeEvent<HTMLInputElement>) => {
-                const file = e.target.files?.[0];
-                if (!file) return;
-                if (file.size > 20 * 1024 * 1024) {
-                  alert("文件大小不能超过 20MB");
-                  return;
-                }
-                const isVideo = file.type.startsWith("video/");
-                const preview = URL.createObjectURL(file);
-                setMedia({ preview, url: "", type: isVideo ? "video" : "image" });
-                setUploading(true);
-                try {
-                  const fd = new FormData();
-                  fd.append("file", file);
-                  const res = await fetch("/api/upload-media", {
-                    method: "POST",
-                    body: fd,
-                  });
-                  const data = await res.json();
-                  if (!res.ok || !data?.ok) {
-                    throw new Error(data?.error || "上传失败");
-                  }
-                  setMedia((m) => (m ? { ...m, url: data.url } : null));
-                } catch (err) {
-                  alert(err instanceof Error ? err.message : "上传失败");
-                  URL.revokeObjectURL(preview);
-                  setMedia(null);
-                  if (fileRef.current) fileRef.current.value = "";
-                } finally {
-                  setUploading(false);
-                }
-              }}
-            />
-
-            {media ? (
-              <div className="relative inline-block">
-                {uploading && (
-                  <div className="absolute inset-0 z-10 flex items-center justify-center rounded-xl bg-black/40 text-sm font-medium text-white">
-                    上传中…
-                  </div>
-                )}
-                {media.type === "image" ? (
-                  <img
-                    src={media.preview}
-                    alt="preview"
-                    className="h-32 w-32 rounded-xl border border-slate-200 dark:border-gray-700 object-cover sm:h-40 sm:w-40"
-                  />
-                ) : (
-                  <video
-                    src={media.preview}
-                    className="h-32 w-32 rounded-xl border border-slate-200 dark:border-gray-700 object-cover sm:h-40 sm:w-40"
-                    muted
-                    playsInline
-                    controls
-                  />
-                )}
-                <button
-                  type="button"
-                  disabled={uploading}
-                  onClick={() => {
-                    URL.revokeObjectURL(media.preview);
-                    setMedia(null);
-                    if (fileRef.current) fileRef.current.value = "";
-                  }}
-                  className="absolute -top-2 -right-2 flex h-6 w-6 items-center justify-center rounded-full bg-red-500 text-xs text-white shadow-md transition-colors hover:bg-red-600 disabled:opacity-50"
-                >
-                  ✕
-                </button>
-              </div>
-            ) : (
-              <button
-                type="button"
-                disabled={uploading}
-                onClick={() => fileRef.current?.click()}
-                className="flex h-32 w-32 flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed border-slate-200 dark:border-gray-700 text-slate-400 dark:text-slate-500 transition-colors hover:border-sky-300 hover:text-sky-500 disabled:opacity-50 sm:h-40 sm:w-40"
-              >
-                <svg className="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 4v16m8-8H4" />
-                </svg>
-                <span className="text-xs">{uploading ? "上传中…" : "点击上传"}</span>
-              </button>
-            )}
           </div>
 
           <div className="mt-8 sm:mt-10">
@@ -463,10 +267,10 @@ export default function JoinPage() {
             )}
             <button
               type="submit"
-              disabled={submitting || uploading || payRedirecting}
-              className="w-full rounded-full bg-[#1aad19] py-3.5 text-lg font-semibold text-white shadow-md shadow-emerald-500/20 transition-all hover:bg-[#179b16] hover:shadow-lg hover:shadow-emerald-500/25 active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-70 sm:py-4"
+              disabled={submitting}
+              className="w-full rounded-full bg-[#ff4d4f] py-3.5 text-lg font-semibold text-white shadow-md transition-all hover:bg-[#ff3333] active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-70 sm:py-4"
             >
-              {uploading ? "媒体上传中…" : payRedirecting ? "跳转支付中…" : submitting ? "提交中…" : "提交申请"}
+              {submitting ? "提交中…" : "提交报名"}
             </button>
           </div>
         </form>
@@ -477,12 +281,6 @@ export default function JoinPage() {
           </Link>
         </div>
       </div>
-
-      <AuthModal
-        isOpen={authOpen}
-        onClose={() => { setAuthOpen(false); setPendingSubmit(false); }}
-        onSuccess={handleAuthSuccess}
-      />
     </div>
   );
 }