'style4'

app/join/page.tsx

@@ -8,16 +8,46 @@ import CitySelect from "../components/CitySelect";
 import ThemeToggle from "../components/ThemeToggle";
 
 const ageOptions = ["18-24", "25-30", "31-35", "36-40", "40+"];
+const statusOptions = [
+  { value: "student", label: "学生" },
+  { value: "working", label: "上班" },
+  { value: "freelance", label: "自由职业" },
+  { value: "startup", label: "创业" },
+  { value: "other", label: "其他" },
+];
+const activityTypeOptions = [
+  { value: "cafe", label: "咖啡馆聊天" },
+  { value: "bookstore", label: "书店" },
+  { value: "citywalk", label: "Citywalk" },
+  { value: "side-hustle", label: "轻副业交流" },
+  { value: "any", label: "都可以" },
+];
 const firstTimeOptions = ["是，第一次参加", "否，参加过类似活动"];
+const availableTimeOptions = [
+  { value: "sat-pm", label: "周六下午" },
+  { value: "sun-pm", label: "周日下午" },
+  { value: "both", label: "都可以" },
+];
+
+const REGIONS: Record<string, string[]> = {
+  深圳: ["南山区", "福田区", "罗湖区", "宝安区", "龙岗区", "其他"],
+  广州: ["天河区", "越秀区", "海珠区", "荔湾区", "白云区", "其他"],
+  惠州: ["惠城区", "惠阳区", "其他"],
+};
 
 interface FormData {
   city: string;
   session: string;
-  nickname: string;
   ageRange: string;
-  wechatOrPhone: string;
+  status: string;
+  activityType: string;
   intro: string;
+  whyJoin: string;
+  nickname: string;
+  wechatOrPhone: string;
+  region: string;
   firstTime: string;
+  availableTime: string;
   agreeRules: boolean;
 }
 
@@ -31,14 +61,20 @@ function getSessionInfo(sessionId: string) {
 }
 
 export default function JoinPage() {
+  const [step, setStep] = useState<1 | 2>(1);
   const [form, setForm] = useState<FormData>({
     city: "",
     session: "",
-    nickname: "",
     ageRange: "",
-    wechatOrPhone: "",
+    status: "",
+    activityType: "",
     intro: "",
+    whyJoin: "",
+    nickname: "",
+    wechatOrPhone: "",
+    region: "",
     firstTime: "",
+    availableTime: "",
     agreeRules: false,
   });
   const [submitted, setSubmitted] = useState(false);
@@ -60,11 +96,22 @@ export default function JoinPage() {
   const set = (key: keyof FormData, value: string | boolean) =>
     setForm((prev) => ({ ...prev, [key]: value }));
 
+  const canProceedStep1 = form.city && form.session && form.ageRange && form.status && form.activityType && form.intro.trim() && form.whyJoin.trim();
+
   const handleSubmit = async (e: FormEvent) => {
     e.preventDefault();
     setError(null);
     setSubmitting(true);
     try {
+      const reasonParts = [
+        form.intro,
+        form.whyJoin,
+        form.status && `状态: ${statusOptions.find((o) => o.value === form.status)?.label || form.status}`,
+        form.activityType && `活动偏好: ${activityTypeOptions.find((o) => o.value === form.activityType)?.label || form.activityType}`,
+        form.region && `常活动区域: ${form.region}`,
+        form.availableTime && `可参加时间: ${availableTimeOptions.find((o) => o.value === form.availableTime)?.label || form.availableTime}`,
+      ].filter(Boolean);
+
       const res = await fetch("/api/join", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
@@ -74,9 +121,14 @@ export default function JoinPage() {
           nickname: form.nickname,
           age_range: form.ageRange,
           wechat_or_phone: form.wechatOrPhone,
-          intro: form.intro,
+          intro: reasonParts.join(" | "),
           first_time: form.firstTime,
           agree_rules: form.agreeRules,
+          status: form.status,
+          activity_type: form.activityType,
+          why_join: form.whyJoin,
+          region: form.region,
+          available_time: form.availableTime,
         }),
       });
       const data = await res.json();
@@ -92,6 +144,7 @@ export default function JoinPage() {
   };
 
   const selectedSession = getSessionInfo(form.session);
+  const regions = form.city ? (REGIONS[form.city] || []) : [];
 
   if (submitted) {
     return (
@@ -102,7 +155,7 @@ export default function JoinPage() {
           </div>
           <h2 className="text-xl sm:text-2xl font-bold text-stone-800 dark:text-stone-100">报名成功</h2>
           <p className="mt-2 sm:mt-3 text-sm sm:text-base text-stone-500 dark:text-stone-400">
-            我们会尽快通过您留下的联系方式与您确认
+            我们会尽快通过您留下的联系方式与您确认。不是所有报名都会自动确认，我们会根据场次与匹配度联系合适报名者。
           </p>
           <Link
             href="/"
@@ -128,10 +181,18 @@ export default function JoinPage() {
       </header>
 
       <div className="mx-auto max-w-2xl px-0 py-0 sm:px-6 sm:py-8 lg:py-10">
+        {/* Trust bar */}
+        <div className="mx-4 sm:mx-0 mt-4 flex flex-wrap justify-center gap-x-6 gap-y-2 text-xs sm:text-sm text-stone-600 dark:text-stone-400 py-3">
+          <span>📍 公开场地</span>
+          <span>👥 6–8 人小组</span>
+          <span>🆓 不收费</span>
+          <span>🤝 尊重边界</span>
+        </div>
+
         <div className="overflow-hidden bg-white dark:bg-stone-900 shadow-sm sm:rounded-t-2xl">
-          <div className="relative h-32 sm:h-40 md:h-52 overflow-hidden bg-gradient-to-br from-amber-500 via-amber-600 to-amber-700">
+          <div className="relative h-28 sm:h-36 md:h-44 overflow-hidden bg-gradient-to-br from-amber-500 via-amber-600 to-amber-700">
             <div className="absolute inset-0 flex flex-col items-center justify-center text-white">
-              <div className="text-5xl sm:text-6xl md:text-7xl" aria-hidden>☕</div>
+              <div className="text-4xl sm:text-5xl md:text-6xl" aria-hidden>☕</div>
               <div className="mt-1.5 sm:mt-2 text-xs sm:text-sm font-medium opacity-90 flex items-center gap-1.5">
                 <span>📍</span> 深圳 · 广州 · 惠州
               </div>
@@ -143,8 +204,20 @@ export default function JoinPage() {
               活动报名
             </h1>
             <p className="mt-2 sm:mt-3 text-xs sm:text-sm leading-relaxed text-stone-500 dark:text-stone-400">
-              ✍️ 填表即可 · 无需注册 · 不收费
+              先填表，我们会根据场次与匹配度联系合适报名者
             </p>
+            <p className="mt-1.5 text-xs text-stone-400 dark:text-stone-500">
+              不是所有报名都会自动确认
+            </p>
+
+            {/* 进度提示 */}
+            <div className="mt-4 flex items-center justify-center gap-2">
+              <div className={`h-1.5 flex-1 max-w-[120px] rounded-full transition-colors ${step === 1 ? "bg-amber-500" : "bg-amber-200 dark:bg-amber-800"}`} />
+              <span className="text-xs font-medium text-stone-500 dark:text-stone-400">
+                {step === 1 ? "第一步" : "第二步"}
+              </span>
+              <div className={`h-1.5 flex-1 max-w-[120px] rounded-full transition-colors ${step === 2 ? "bg-amber-500" : "bg-stone-200 dark:bg-stone-700"}`} />
+            </div>
           </div>
         </div>
 
@@ -152,7 +225,7 @@ export default function JoinPage() {
           <div className="mt-4 sm:mt-5 mx-4 sm:mx-0 rounded-xl bg-white dark:bg-stone-900 px-4 sm:px-5 py-3 sm:py-4 shadow-sm border border-stone-200 dark:border-stone-800 flex gap-3">
             {selectedSession.coverImage && (
               <div className="relative w-16 h-16 sm:w-20 sm:h-20 shrink-0 rounded-lg overflow-hidden">
-                <SessionCoverImage src={selectedSession.coverImage} alt="" type={selectedSession.type} fill sizes="80px" className="object-cover" />
+                <SessionCoverImage src={selectedSession.coverImage} alt="" type={selectedSession.type} fill sizes="72px" className="object-cover" />
               </div>
             )}
             <div className="min-w-0 flex-1 text-left">
@@ -167,136 +240,221 @@ export default function JoinPage() {
           onSubmit={handleSubmit}
           className="mt-0 sm:mt-5 bg-white dark:bg-stone-900 px-4 sm:px-6 md:px-8 pb-8 pt-6 sm:pt-8 shadow-sm sm:rounded-b-2xl sm:shadow-md border border-t-0 sm:border border-stone-200 dark:border-stone-800"
         >
-          <div className="space-y-4 sm:space-y-0 sm:grid sm:grid-cols-2 sm:gap-6">
-            <Field label="📍 城市">
-              <CitySelect value={form.city} onChange={(v) => set("city", v)} required />
-            </Field>
+          {step === 1 ? (
+            <div className="space-y-6">
+              <div className="space-y-4">
+                <h3 className="text-sm font-semibold text-stone-700 dark:text-stone-300">基本信息</h3>
+                <Field label="城市">
+                  <CitySelect value={form.city} onChange={(v) => set("city", v)} required />
+                </Field>
+                <Field label="想参加的场次">
+                  <select
+                    value={form.session}
+                    onChange={(e) => {
+                      const sid = e.target.value;
+                      const s = SESSIONS.find((x) => x.id === sid);
+                      setForm((prev) => ({ ...prev, session: sid, city: s?.city || prev.city }));
+                    }}
+                    required
+                    className={`form-input appearance-none ${form.session ? "text-stone-800 dark:text-stone-100" : "text-stone-400 dark:text-stone-500"}`}
+                  >
+                    <option value="" disabled>请选择</option>
+                    {SESSIONS.map((s) => (
+                      <option key={s.id} value={s.id}>
+                        {s.title} · {s.city} · {s.date} {s.time}
+                      </option>
+                    ))}
+                  </select>
+                </Field>
+                <Field label="年龄段">
+                  <select
+                    value={form.ageRange}
+                    onChange={(e) => set("ageRange", e.target.value)}
+                    required
+                    className={`form-input appearance-none ${form.ageRange ? "text-stone-800 dark:text-stone-100" : "text-stone-400 dark:text-stone-500"}`}
+                  >
+                    <option value="" disabled>请选择</option>
+                    {ageOptions.map((o) => (
+                      <option key={o} value={o}>{o}</option>
+                    ))}
+                  </select>
+                </Field>
+                <Field label="当前状态">
+                  <select
+                    value={form.status}
+                    onChange={(e) => set("status", e.target.value)}
+                    required
+                    className={`form-input appearance-none ${form.status ? "text-stone-800 dark:text-stone-100" : "text-stone-400 dark:text-stone-500"}`}
+                  >
+                    <option value="" disabled>请选择</option>
+                    {statusOptions.map((o) => (
+                      <option key={o.value} value={o.value}>{o.label}</option>
+                    ))}
+                  </select>
+                </Field>
+                <Field label="想参加的活动类型">
+                  <select
+                    value={form.activityType}
+                    onChange={(e) => set("activityType", e.target.value)}
+                    required
+                    className={`form-input appearance-none ${form.activityType ? "text-stone-800 dark:text-stone-100" : "text-stone-400 dark:text-stone-500"}`}
+                  >
+                    <option value="" disabled>请选择</option>
+                    {activityTypeOptions.map((o) => (
+                      <option key={o.value} value={o.value}>{o.label}</option>
+                    ))}
+                  </select>
+                </Field>
+              </div>
 
-            <Field label="📅 想参加的场次">
-              <select
-                value={form.session}
-                onChange={(e) => {
-                  const sid = e.target.value;
-                  const s = SESSIONS.find((x) => x.id === sid);
-                  setForm((prev) => ({ ...prev, session: sid, city: s?.city || prev.city }));
-                }}
-                required
-                className={`form-input appearance-none ${form.session ? "text-stone-800 dark:text-stone-100" : "text-stone-400 dark:text-stone-500"}`}
+              <div className="pt-4 border-t border-stone-100 dark:border-stone-700 space-y-4">
+                <h3 className="text-sm font-semibold text-stone-700 dark:text-stone-300">简单介绍</h3>
+                <Field label="一句话介绍自己">
+                  <input
+                    type="text"
+                    maxLength={140}
+                    placeholder="简单介绍一下自己"
+                    value={form.intro}
+                    onChange={(e) => set("intro", e.target.value)}
+                    required
+                    className="form-input"
+                  />
+                </Field>
+                <Field label="为什么想参加">
+                  <input
+                    type="text"
+                    maxLength={200}
+                    placeholder="简单说说你的期待"
+                    value={form.whyJoin}
+                    onChange={(e) => set("whyJoin", e.target.value)}
+                    required
+                    className="form-input"
+                  />
+                </Field>
+              </div>
+
+              <button
+                type="button"
+                onClick={() => setStep(2)}
+                disabled={!canProceedStep1}
+                className="w-full rounded-xl bg-amber-600 py-3 sm:py-3.5 text-base font-medium text-white transition-colors hover:bg-amber-700 active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-amber-600 mt-6"
               >
-                <option value="" disabled>请选择</option>
-                {SESSIONS.map((s) => (
-                  <option key={s.id} value={s.id}>
-                    {s.title} · {s.city} · {s.date} {s.time}
-                  </option>
-                ))}
-              </select>
-            </Field>
-          </div>
-
-          <div className="mt-4 sm:mt-6 space-y-4 sm:space-y-0 sm:grid 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
-                className="form-input"
-              />
-            </Field>
-
-            <Field label="年龄段">
-              <select
-                value={form.ageRange}
-                onChange={(e) => set("ageRange", e.target.value)}
-                required
-                className={`form-input appearance-none ${form.ageRange ? "text-stone-800 dark:text-stone-100" : "text-stone-400 dark:text-stone-500"}`}
+                下一步：填写联系方式
+              </button>
+            </div>
+          ) : (
+            <div className="space-y-6">
+              <button
+                type="button"
+                onClick={() => setStep(1)}
+                className="text-sm text-stone-500 dark:text-stone-400 hover:text-amber-600 dark:hover:text-amber-400"
               >
-                <option value="" disabled>请选择</option>
-                {ageOptions.map((o) => (
-                  <option key={o} value={o}>{o}</option>
-                ))}
-              </select>
-            </Field>
-          </div>
+                ← 返回上一步
+              </button>
 
-          <div className="mt-4 sm:mt-6 pt-4 sm:pt-5 border-t border-stone-100 dark:border-stone-700">
-            <label className="mb-2 block text-sm sm:text-base font-bold text-stone-700 dark:text-stone-300">
-              微信号或手机号
-            </label>
-            <input
-              type="text"
-              maxLength={50}
-              placeholder="用于活动联系"
-              value={form.wechatOrPhone}
-              onChange={(e) => set("wechatOrPhone", e.target.value)}
-              required
-              className="form-input"
-            />
-          </div>
+              <div className="space-y-4">
+                <h3 className="text-sm font-semibold text-stone-700 dark:text-stone-300">联系方式与确认</h3>
+                <Field label="昵称">
+                  <input
+                    type="text"
+                    maxLength={40}
+                    placeholder="活动中使用的称呼"
+                    value={form.nickname}
+                    onChange={(e) => set("nickname", e.target.value)}
+                    required
+                    className="form-input"
+                  />
+                </Field>
+                <Field label="微信号或手机号">
+                  <div>
+                    <input
+                      type="text"
+                      maxLength={50}
+                      placeholder="用于活动联系"
+                      value={form.wechatOrPhone}
+                      onChange={(e) => set("wechatOrPhone", e.target.value)}
+                      required
+                      className="form-input"
+                    />
+                    <p className="mt-1.5 text-xs text-stone-500 dark:text-stone-400">
+                      仅用于活动确认，不会公开给其他报名者
+                    </p>
+                  </div>
+                </Field>
+                <Field label="平时常活动区域">
+                  <select
+                    value={form.region}
+                    onChange={(e) => set("region", e.target.value)}
+                    className={`form-input appearance-none ${form.region ? "text-stone-800 dark:text-stone-100" : "text-stone-400 dark:text-stone-500"}`}
+                  >
+                    <option value="">请选择（选填）</option>
+                    {regions.map((r) => (
+                      <option key={r} value={r}>{r}</option>
+                    ))}
+                  </select>
+                </Field>
+                <Field label="是否第一次参加类似活动">
+                  <select
+                    value={form.firstTime}
+                    onChange={(e) => set("firstTime", e.target.value)}
+                    required
+                    className={`form-input appearance-none ${form.firstTime ? "text-stone-800 dark:text-stone-100" : "text-stone-400 dark:text-stone-500"}`}
+                  >
+                    <option value="" disabled>请选择</option>
+                    {firstTimeOptions.map((o) => (
+                      <option key={o} value={o}>{o}</option>
+                    ))}
+                  </select>
+                </Field>
+                <Field label="可参加时间">
+                  <select
+                    value={form.availableTime}
+                    onChange={(e) => set("availableTime", e.target.value)}
+                    className={`form-input appearance-none ${form.availableTime ? "text-stone-800 dark:text-stone-100" : "text-stone-400 dark:text-stone-500"}`}
+                  >
+                    <option value="">请选择（选填）</option>
+                    {availableTimeOptions.map((o) => (
+                      <option key={o.value} value={o.value}>{o.label}</option>
+                    ))}
+                  </select>
+                </Field>
+              </div>
 
-          <div className="mt-4 sm:mt-5 pt-4 sm:pt-5 border-t border-stone-100 dark:border-stone-700">
-            <label className="mb-2 block text-sm sm:text-base font-bold text-stone-700 dark:text-stone-300">
-              一句话自我介绍
-            </label>
-            <input
-              type="text"
-              maxLength={140}
-              placeholder="简单介绍一下自己"
-              value={form.intro}
-              onChange={(e) => set("intro", e.target.value)}
-              required
-              className="form-input"
-            />
-          </div>
+              <div className="pt-4 border-t border-stone-100 dark:border-stone-700">
+                <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-stone-300 text-amber-600 focus:ring-amber-500"
+                  />
+                  <span className="text-xs sm:text-sm text-stone-600 dark:text-stone-400">
+                    我已阅读并同意活动规则（公开场地、尊重边界、如有不适可随时离开）
+                  </span>
+                </label>
+              </div>
 
-          <div className="mt-4 sm:mt-5 pt-4 sm:pt-5 border-t border-stone-100 dark:border-stone-700">
-            <label className="mb-2 block text-sm sm:text-base font-bold text-stone-700 dark:text-stone-300">
-              是否第一次参加类似活动
-            </label>
-            <select
-              value={form.firstTime}
-              onChange={(e) => set("firstTime", e.target.value)}
-              required
-              className={`form-input appearance-none ${form.firstTime ? "text-stone-800 dark:text-stone-100" : "text-stone-400 dark:text-stone-500"}`}
-            >
-              <option value="" disabled>请选择</option>
-              {firstTimeOptions.map((o) => (
-                <option key={o} value={o}>{o}</option>
-              ))}
-            </select>
-          </div>
-
-          <div className="mt-4 sm:mt-5 pt-4 sm:pt-5 border-t border-stone-100 dark:border-stone-700">
-            <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-stone-300 text-amber-600 focus:ring-amber-500"
-              />
-              <span className="text-xs sm:text-sm text-stone-600 dark:text-stone-400">
-                我已阅读并同意活动规则（公开场地、尊重边界、如有不适可随时离开）
-              </span>
-            </label>
-          </div>
-
-          <div className="mt-6 sm:mt-8 sm:mt-10">
-            {error && (
-              <p className="mb-4 rounded-lg bg-red-50 dark:bg-red-900/30 px-4 py-3 text-center text-sm text-red-600 dark:text-red-400">
-                {error}
+              <p className="text-xs text-stone-500 dark:text-stone-400">
+                提交后我们会根据场次与匹配度联系合适报名者，通过微信/短信确认地点与时间。若当前场次不匹配，不会反复打扰。
               </p>
-            )}
-            <button
-              type="submit"
-              disabled={submitting}
-              className="w-full rounded-xl bg-amber-600 py-3 sm:py-3.5 sm:py-4 text-base sm:text-lg font-medium text-white transition-colors hover:bg-amber-700 active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-70"
-            >
-              {submitting ? "提交中…" : "提交报名"}
-            </button>
-          </div>
+
+              <div className="pt-2">
+                {error && (
+                  <p className="mb-4 rounded-lg bg-red-50 dark:bg-red-900/30 px-4 py-3 text-center text-sm text-red-600 dark:text-red-400">
+                    {error}
+                  </p>
+                )}
+                <button
+                  type="submit"
+                  disabled={submitting}
+                  className="w-full rounded-xl bg-amber-600 py-3 sm:py-3.5 sm:py-4 text-base sm:text-lg font-medium text-white transition-colors hover:bg-amber-700 active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-70"
+                >
+                  {submitting ? "提交中…" : "提交报名"}
+                </button>
+              </div>
+            </div>
+          )}
         </form>
 
         <div className="mt-4 sm:mt-6 text-center px-4">
@@ -317,11 +475,11 @@ function Field({
   children: React.ReactNode;
 }) {
   return (
-    <div className="relative flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-0 py-3 sm:py-4 border-b border-stone-100 dark:border-stone-700 sm:border-b-0 last:border-b-0">
-      <label className="shrink-0 text-sm sm:text-base font-bold text-stone-700 dark:text-stone-300 sm:mb-0 sm:w-[100px]">
+    <div className="flex flex-col gap-2 py-3">
+      <label className="text-sm sm:text-base font-medium text-stone-700 dark:text-stone-300">
         {label}
       </label>
-      <div className="relative min-w-0 flex-1">{children}</div>
+      <div className="min-w-0">{children}</div>
     </div>
   );
 }