431 lines
15 KiB
TypeScript
431 lines
15 KiB
TypeScript
"use client";
|
||
|
||
import { useState, useRef, type FormEvent, type ChangeEvent } from "react";
|
||
|
||
const genderOptions = ["男", "女"];
|
||
const singleOptions = ["单身", "恋爱中", "已婚"];
|
||
const educationOptions = ["高中及以下", "大专", "本科", "硕士", "博士"];
|
||
const graduationYears = Array.from({ length: 41 }, (_, i) => String(2026 - i));
|
||
|
||
interface FormData {
|
||
nickname: string;
|
||
gender: string;
|
||
single: string;
|
||
profession: string;
|
||
intro: string;
|
||
wechat: string;
|
||
education: string;
|
||
graduationYear: string;
|
||
phone: string;
|
||
}
|
||
|
||
interface MediaFile {
|
||
file: File;
|
||
preview: string;
|
||
type: "image" | "video";
|
||
}
|
||
|
||
export default function JoinPage() {
|
||
const [form, setForm] = useState<FormData>({
|
||
nickname: "",
|
||
gender: "",
|
||
single: "",
|
||
profession: "",
|
||
intro: "",
|
||
wechat: "",
|
||
education: "",
|
||
graduationYear: "",
|
||
phone: "",
|
||
});
|
||
const [media, setMedia] = useState<MediaFile | null>(null);
|
||
const fileRef = useRef<HTMLInputElement>(null);
|
||
const [submitted, setSubmitted] = useState(false);
|
||
|
||
const set = (key: keyof FormData, value: string) =>
|
||
setForm((prev) => ({ ...prev, [key]: value }));
|
||
|
||
const handleSubmit = (e: FormEvent) => {
|
||
e.preventDefault();
|
||
setSubmitted(true);
|
||
};
|
||
|
||
if (submitted) {
|
||
return (
|
||
<div className="flex min-h-screen items-center justify-center bg-[#f0f4f8] px-4">
|
||
<div className="w-full max-w-md animate-fade-in rounded-2xl bg-white p-10 text-center shadow-lg">
|
||
<div className="mx-auto mb-5 flex h-20 w-20 items-center justify-center rounded-full bg-emerald-50 text-5xl">
|
||
✅
|
||
</div>
|
||
<h2 className="text-2xl font-bold text-slate-800">申请已提交</h2>
|
||
<p className="mt-3 text-slate-500">
|
||
我们会尽快审核你的信息
|
||
<br />
|
||
审核通过后将通过微信邀请你入群
|
||
</p>
|
||
<a
|
||
href="/"
|
||
className="mt-8 inline-flex items-center gap-2 rounded-full bg-sky-500 px-8 py-3 font-semibold text-white transition-colors hover:bg-sky-600"
|
||
>
|
||
← 返回首页
|
||
</a>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="min-h-screen bg-[#f0f4f8]">
|
||
{/* ── PC: center column / H5: full width ── */}
|
||
<div className="mx-auto max-w-2xl px-0 py-0 sm:px-6 sm:py-10 lg:py-14">
|
||
{/* ── Banner ── */}
|
||
<div className="overflow-hidden bg-white shadow-sm sm:rounded-t-2xl">
|
||
{/* Hero image area */}
|
||
<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="mt-2 text-sm font-medium opacity-80">
|
||
Digital Nomad Community
|
||
</div>
|
||
</div>
|
||
{/* Decorative blobs */}
|
||
<div className="absolute -top-10 -left-10 h-40 w-40 rounded-full bg-white/10 blur-2xl" />
|
||
<div className="absolute -right-10 -bottom-10 h-48 w-48 rounded-full bg-white/10 blur-2xl" />
|
||
</div>
|
||
|
||
{/* Title block */}
|
||
<div className="px-5 py-5 text-center sm:px-8 sm:py-7">
|
||
<h1 className="text-xl font-bold text-slate-800 sm:text-2xl">
|
||
🌍 数字游民社区报名
|
||
</h1>
|
||
<p className="mt-3 whitespace-pre-line text-sm leading-relaxed text-slate-400 sm:text-base">
|
||
{"💼 结识志同道合的伙伴\n📍 线下聚会 + 线上分享\n🤝 互助成长，资源共享"}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* ── Form card ── */}
|
||
<form
|
||
onSubmit={handleSubmit}
|
||
className="mt-0 bg-white px-5 pb-8 pt-2 shadow-sm sm:mt-5 sm:rounded-2xl sm:px-8 sm:py-8 sm:shadow-md"
|
||
>
|
||
{/* ---- Row group: nickname + gender (PC side-by-side) ---- */}
|
||
<div className="grid gap-0 sm:grid-cols-2 sm:gap-6">
|
||
<Field label="🌟 昵称">
|
||
<input
|
||
type="text"
|
||
maxLength={140}
|
||
placeholder="请输入您的昵称"
|
||
value={form.nickname}
|
||
onChange={(e) => set("nickname", e.target.value)}
|
||
required
|
||
className="form-input"
|
||
/>
|
||
</Field>
|
||
|
||
<Field label="👤 性别">
|
||
<select
|
||
value={form.gender}
|
||
onChange={(e) => set("gender", e.target.value)}
|
||
required
|
||
className={`form-input appearance-none ${
|
||
form.gender ? "text-slate-800" : "text-slate-400"
|
||
}`}
|
||
>
|
||
<option value="" disabled>
|
||
请选择
|
||
</option>
|
||
{genderOptions.map((o) => (
|
||
<option key={o} value={o}>
|
||
{o}
|
||
</option>
|
||
))}
|
||
</select>
|
||
<ChevronDown />
|
||
</Field>
|
||
</div>
|
||
|
||
{/* ---- Row group: single + profession ---- */}
|
||
<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" : "text-slate-400"
|
||
}`}
|
||
>
|
||
<option value="" disabled>
|
||
请选择
|
||
</option>
|
||
{singleOptions.map((o) => (
|
||
<option key={o} value={o}>
|
||
{o}
|
||
</option>
|
||
))}
|
||
</select>
|
||
<ChevronDown />
|
||
</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>
|
||
|
||
{/* ---- wechat + phone ---- */}
|
||
<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="^1[3-9]\d{9}$"
|
||
placeholder="请输入11位中国手机号"
|
||
value={form.phone}
|
||
onChange={(e) => {
|
||
const v = e.target.value.replace(/\D/g, "").slice(0, 11);
|
||
set("phone", v);
|
||
}}
|
||
className="form-input"
|
||
/>
|
||
</Field>
|
||
</div>
|
||
|
||
{/* ---- Intro (full width) ---- */}
|
||
<div className="border-b border-slate-100 py-4 sm:border-b-0 sm:py-5">
|
||
<label className="mb-2 block text-base font-bold text-slate-700 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">
|
||
{form.intro.length}/500
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* ---- Row group: education + graduation ---- */}
|
||
<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" : "text-slate-400"
|
||
}`}
|
||
>
|
||
<option value="" disabled>
|
||
请选择
|
||
</option>
|
||
{educationOptions.map((o) => (
|
||
<option key={o} value={o}>
|
||
{o}
|
||
</option>
|
||
))}
|
||
</select>
|
||
<ChevronDown />
|
||
</Field>
|
||
|
||
<Field label="📅 毕业时间">
|
||
<select
|
||
value={form.graduationYear}
|
||
onChange={(e) => set("graduationYear", e.target.value)}
|
||
className={`form-input appearance-none ${
|
||
form.graduationYear ? "text-slate-800" : "text-slate-400"
|
||
}`}
|
||
>
|
||
<option value="" disabled>
|
||
请选择
|
||
</option>
|
||
{graduationYears.map((y) => (
|
||
<option key={y} value={y}>
|
||
{y}
|
||
</option>
|
||
))}
|
||
</select>
|
||
<ChevronDown />
|
||
</Field>
|
||
</div>
|
||
|
||
{/* ---- Media upload (optional) ---- */}
|
||
<div className="py-4 sm:py-5">
|
||
<label className="mb-1 block text-[15px] font-bold text-slate-700 sm:text-[17px]">
|
||
📷 头像 / 自拍视频
|
||
<span className="ml-2 text-xs font-normal text-slate-400">
|
||
（可选）
|
||
</span>
|
||
</label>
|
||
<p className="mb-3 text-xs text-slate-400">
|
||
支持图片（JPG/PNG）或短视频（MP4），最大 20MB
|
||
</p>
|
||
|
||
<input
|
||
ref={fileRef}
|
||
type="file"
|
||
accept="image/jpeg,image/png,image/webp,video/mp4,video/quicktime"
|
||
className="hidden"
|
||
onChange={(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({ file, preview, type: isVideo ? "video" : "image" });
|
||
}}
|
||
/>
|
||
|
||
{media ? (
|
||
<div className="relative inline-block">
|
||
{media.type === "image" ? (
|
||
// eslint-disable-next-line @next/next/no-img-element
|
||
<img
|
||
src={media.preview}
|
||
alt="preview"
|
||
className="h-32 w-32 rounded-xl border border-slate-200 object-cover sm:h-40 sm:w-40"
|
||
/>
|
||
) : (
|
||
<video
|
||
src={media.preview}
|
||
className="h-32 w-32 rounded-xl border border-slate-200 object-cover sm:h-40 sm:w-40"
|
||
muted
|
||
playsInline
|
||
controls
|
||
/>
|
||
)}
|
||
<button
|
||
type="button"
|
||
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"
|
||
>
|
||
✕
|
||
</button>
|
||
</div>
|
||
) : (
|
||
<button
|
||
type="button"
|
||
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 text-slate-400 transition-colors hover:border-sky-300 hover:text-sky-500 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">点击上传</span>
|
||
</button>
|
||
)}
|
||
</div>
|
||
|
||
{/* ── Submit ── */}
|
||
<div className="mt-8 sm:mt-10">
|
||
<button
|
||
type="submit"
|
||
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] sm:py-4"
|
||
>
|
||
提交申请
|
||
</button>
|
||
|
||
<p className="mt-4 whitespace-pre-line text-center text-sm leading-relaxed text-amber-500">
|
||
{"🔍 提交后将进行审核\n💰 需支付基本场地/管理费"}
|
||
</p>
|
||
</div>
|
||
</form>
|
||
|
||
{/* ── Back link (PC) ── */}
|
||
<div className="mt-6 hidden text-center sm:block">
|
||
<a
|
||
href="/"
|
||
className="text-sm text-slate-400 transition-colors hover:text-sky-500"
|
||
>
|
||
← 返回首页
|
||
</a>
|
||
</div>
|
||
|
||
{/* ── Back link (H5, fixed bottom) ── */}
|
||
<div className="mt-4 pb-6 text-center sm:hidden">
|
||
<a
|
||
href="/"
|
||
className="text-sm text-slate-400 transition-colors hover:text-sky-500"
|
||
>
|
||
← 返回首页
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/* ─── Reusable field wrapper ─── */
|
||
function Field({
|
||
label,
|
||
children,
|
||
noBorder,
|
||
}: {
|
||
label: string;
|
||
children: React.ReactNode;
|
||
noBorder?: boolean;
|
||
}) {
|
||
return (
|
||
<div
|
||
className={`relative flex items-center gap-3 py-3.5 sm:flex-col sm:items-stretch sm:gap-0 sm:py-4 ${
|
||
noBorder ? "" : "border-b border-slate-100 sm:border-b-0"
|
||
}`}
|
||
>
|
||
<label className="w-[90px] shrink-0 text-[15px] font-bold text-slate-700 sm:mb-2 sm:w-auto sm:text-[17px]">
|
||
{label}
|
||
</label>
|
||
<div className="relative min-w-0 flex-1">{children}</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/* ─── Chevron icon for selects ─── */
|
||
function ChevronDown() {
|
||
return (
|
||
<svg
|
||
className="pointer-events-none absolute top-1/2 right-2 h-4 w-4 -translate-y-1/2 text-slate-400 sm:right-3"
|
||
fill="none"
|
||
viewBox="0 0 24 24"
|
||
stroke="currentColor"
|
||
>
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth={2}
|
||
d="M19 9l-7 7-7-7"
|
||
/>
|
||
</svg>
|
||
);
|
||
}
|