eric/gitlab-instance-0a899031_salon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

's'

Browse Source
This commit is contained in:
eric
2026-03-16 06:53:23 -05:00
parent c54d46517c
commit c54c236d1b
13 changed files with 538 additions and 359 deletions
Download Patch File Download Diff File Expand all files Collapse all files

546
app/join/page.tsx
View File

@@ -1,50 +1,43 @@
"use client";
import { useState, type FormEvent } from "react";
import { useState, useEffect, type FormEvent } from "react";
import Link from "next/link";
import ThemeToggle from "../components/ThemeToggle";
import { DIGITAL_NOMAD_WECHAT_QR } from "@/config/home.config";
import { redirectToPay, getDeviceFromEnv } from "@/app/lib/payment/client";
const ageRangeOptions = ["18-22", "23-27", "28-32", "33-37", "38+"];
function getDisplayCount(text?: string, value?: number | string, suffix = ""): string | null {
if (typeof text === "string" && text.trim()) {
return `${text}${suffix}`;
}
if (typeof value === "number" || typeof value === "string") {
return `${value}${suffix}`;
}
return null;
}
/** 微信号仅允许英文字母、数字、下划线、连字符 */
const WECHAT_REGEX = /^[a-zA-Z0-9_-]*$/;
function getGenderLabel(gender?: string): string {
if (gender === "female") return "\u5973";
if (gender === "male") return "\u7537";
return "\u65e0";
interface UserRecord {
hasRecord: boolean;
record: { user_id?: string; amount?: number; order_id?: string; vip?: boolean } | null;
isComplete: boolean;
isWechatFriend: boolean;
isApproved: boolean;
isRejected: boolean;
vip: boolean;
}
export default function JoinPage() {
const [wechat, setWechat] = useState("");
const [userRecord, setUserRecord] = useState<UserRecord | null>(null);
const [checkingWechat, setCheckingWechat] = useState(false);
const [xiaohongshuUrl, setXiaohongshuUrl] = useState("");
const [profession, setProfession] = useState("");
const [wechat, setWechat] = useState("");
const [gender, setGender] = useState("");
const [ageRange, setAgeRange] = useState("");
const [agreeRules, setAgreeRules] = useState(false);
const [agreeRules, setAgreeRules] = useState(true);
const [urlError, setUrlError] = useState<string | null>(null);
const [profile, setProfile] = useState<{
nickname: string;
gender?: string;
followers: number | string;
followersText?: string;
following?: number | string;
followingText?: string;
likesAndCollects?: number | string;
likesAndCollectsText?: string;
postCount: number;
postCountText?: string;
redbookId?: string;
ipLocation?: string;
personalLink?: string;
avatarUrl?: string;
resolvedUrl?: string;
} | null>(null);
@@ -53,6 +46,48 @@ export default function JoinPage() {
const [submitting, setSubmitting] = useState(false);
const [qualify, setQualify] = useState(false);
const [error, setError] = useState<string | null>(null);
const [hydrated, setHydrated] = useState(false);
const [fromPaid, setFromPaid] = useState(() =>
typeof window !== "undefined" && new URLSearchParams(window.location.search).get("paid") === "1"
);
const fetchByWechat = async (w: string) => {
if (!w.trim()) return;
setError(null);
setCheckingWechat(true);
try {
const res = await fetch(`/api/join/by-wechat?wechat_id=${encodeURIComponent(w.trim())}`);
const data = await res.json();
setUserRecord({
hasRecord: !!data.hasRecord,
record: data.record ?? null,
isComplete: !!data.isComplete,
isWechatFriend: !!data.isWechatFriend,
isApproved: !!data.isApproved,
isRejected: !!data.isRejected,
vip: !!data.vip,
});
} catch {
setUserRecord({ hasRecord: false, record: null, isComplete: false, isWechatFriend: false, isApproved: false, isRejected: false, vip: false });
} finally {
setCheckingWechat(false);
}
};
const handleWechatBlur = () => {
const w = wechat.trim();
if (!w) {
setUserRecord(null);
return;
}
if (!WECHAT_REGEX.test(w)) {
setError("微信号仅允许英文字母、数字、下划线和连字符");
return;
}
setError(null);
fetchByWechat(w);
};
const handleUrlBlur = async () => {
const url = xiaohongshuUrl.trim();
@@ -61,11 +96,9 @@ export default function JoinPage() {
setProfile(null);
return;
}
setValidating(true);
setUrlError(null);
setProfile(null);
try {
const validateRes = await fetch("/api/xiaohongshu/validate", {
method: "POST",
@@ -73,34 +106,23 @@ export default function JoinPage() {
body: JSON.stringify({ url }),
});
const validateData = await validateRes.json();
if (!validateData.valid) {
setUrlError(validateData.error || "小红书link异常");
return;
}
const profileRes = await fetch("/api/xiaohongshu/profile", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ url }),
});
const profileData = await profileRes.json();
if (profileData.ok) {
setProfile({
nickname: profileData.nickname,
gender: profileData.gender,
followers: profileData.followers ?? 0,
followersText: profileData.followersText,
following: profileData.following,
followingText: profileData.followingText,
likesAndCollects: profileData.likesAndCollects,
likesAndCollectsText: profileData.likesAndCollectsText,
postCount: profileData.postCount ?? 0,
postCountText: profileData.postCountText,
redbookId: profileData.redbookId,
ipLocation: profileData.ipLocation,
personalLink: profileData.personalLink,
avatarUrl: profileData.avatarUrl,
resolvedUrl: profileData.resolvedUrl,
});
@@ -117,7 +139,6 @@ export default function JoinPage() {
const handleSubmit = async (e: FormEvent) => {
e.preventDefault();
setError(null);
if (xiaohongshuUrl.trim() && urlError) {
setError("请先修正小红书链接");
return;
@@ -130,43 +151,22 @@ export default function JoinPage() {
setError("请填写微信号");
return;
}
if (!WECHAT_REGEX.test(wechat)) {
setError("微信号仅允许英文字母、数字、下划线和连字符");
return;
}
if (!gender) {
setError("请选择性别");
return;
}
if (!ageRange) {
setError("请选择年龄区间");
return;
}
if (!agreeRules) {
setError("请同意社区规则");
return;
}
setSubmitting(true);
try {
const formGenderFemale = gender === "女" || gender === "female";
const xiaohongshuGenderFemale = profile?.gender === "female";
const postCountOk = (profile?.postCount ?? 0) > 10;
const ipInGuangdong = profile?.ipLocation?.includes("广东") ?? false;
const qualify =
formGenderFemale &&
xiaohongshuGenderFemale &&
postCountOk &&
ipInGuangdong;
const qualify = formGenderFemale && postCountOk;
const genderLabel = gender === "女" ? "女" : gender === "男" ? "男" : "无";
const postCountLabel = getDisplayCount(profile?.postCountText, profile?.postCount) ?? "0";
const submitXiaohongshuUrl = profile?.resolvedUrl || xiaohongshuUrl.trim() || "";
const submitReasonParts = [
`职业:${profession.trim()}`,
`性别:${genderLabel}`,
`年龄:${ageRange}`,
profile && `发帖:${postCountLabel}`,
profile?.ipLocation && `IP:${profile.ipLocation}`,
].filter(Boolean);
const res = await fetch("/api/join", {
method: "POST",
headers: { "Content-Type": "application/json" },
@@ -178,7 +178,7 @@ export default function JoinPage() {
xiaohongshu_url: submitXiaohongshuUrl,
xiaohongshu_avatar_url: profile?.avatarUrl || "",
gender: genderLabel,
intro: submitReasonParts.join(" | "),
intro: "",
age_range: ageRange,
city: "深圳",
session: "digital-nomad",
@@ -194,11 +194,9 @@ export default function JoinPage() {
}),
});
const data = await res.json();
if (!res.ok || !data?.ok) {
throw new Error(data?.error || "提交失败，请稍后重试");
}
setQualify(qualify);
setSubmitted(true);
} catch (err) {
@@ -208,60 +206,46 @@ export default function JoinPage() {
}
};
const followingDisplay = getDisplayCount(profile?.followingText, profile?.following);
const followersDisplay = getDisplayCount(profile?.followersText, profile?.followers);
const likesDisplay = getDisplayCount(profile?.likesAndCollectsText, profile?.likesAndCollects);
const safePostCountDisplay = getDisplayCount(profile?.postCountText, profile?.postCount, " \u7bc7");
const handlePayNow = () => {
const rec = userRecord?.record;
if (!rec?.user_id) return;
const origin = typeof window !== "undefined" ? window.location.origin : "";
const device = typeof navigator !== "undefined" && /Android|iPhone|iPad|iPod|webOS|Mobile/i.test(navigator.userAgent) ? "h5" : "pc";
redirectToPay({
user_id: rec.user_id,
return_url: `${origin}/join/paid`,
useJoinConfig: true,
channel: "wxpay",
device: getDeviceFromEnv(device),
});
};
const profileGenderLabel = getGenderLabel(profile?.gender);
useEffect(() => {
setHydrated(true);
}, []);
if (submitted) {
// 成功报名：已支付 或 支付成功跳转 或 (好友且vip)
const showSuccess = fromPaid || (userRecord?.hasRecord && userRecord.isComplete) || (userRecord?.hasRecord && userRecord.isWechatFriend && userRecord.vip);
// 有数据、非好友 → 只展示状态页：审核中/审核通过/审核拒绝
const showStatusPage = userRecord?.hasRecord && !userRecord.isWechatFriend;
// 有数据、好友、非vip、未支付 → 支付状态页
const showPayPage = userRecord?.hasRecord && userRecord.isWechatFriend && !userRecord.vip && !userRecord.isComplete;
if (submitted || showSuccess) {
return (
<div className="flex min-h-screen items-center justify-center bg-[#faf8f5] dark:bg-stone-950 px-4 py-8">
<div className="w-full max-w-md animate-fade-in rounded-2xl bg-white dark:bg-stone-900 p-6 sm:p-10 text-center shadow-lg border border-stone-200 dark:border-stone-800">
{qualify ? (
<>
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-emerald-50 dark:bg-emerald-900/30 text-4xl">
🎉
</div>
<h2 className="text-xl sm:text-2xl font-bold text-stone-800 dark:text-stone-100">
审核通过
</h2>
<p className="mt-2 text-sm text-stone-500 dark:text-stone-400">
扫码添加好友，加入活动群
</p>
<div className="mt-6 flex justify-center">
<img
src={DIGITAL_NOMAD_WECHAT_QR}
alt="微信二维码"
className="w-40 h-40 object-contain border border-stone-200 dark:border-stone-700 rounded-lg"
/>
</div>
<p className="mt-4 text-xs text-stone-400 dark:text-stone-500">
📝 添加时请备注：活动报名
</p>
</>
) : (
<>
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-amber-50 dark:bg-amber-900/30 text-4xl">
⏳
</div>
<h2 className="text-xl sm:text-2xl font-bold text-stone-800 dark:text-stone-100">
资料审核中
</h2>
<p className="mt-2 text-sm text-stone-500 dark:text-stone-400">
⏰ 通常会在 24 小时内完成审核，通过后用微信联系你。
</p>
</>
)}
<p className="mt-6 text-xs text-stone-400 dark:text-stone-500 leading-relaxed">
💰 本场收取少量场地分摊费29/人，用于覆盖民宿/场地基础成本。<br />
通过审核后再确认名额，未确认无需支付。
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-emerald-50 dark:bg-emerald-900/30 text-4xl">🎉</div>
<h2 className="text-xl sm:text-2xl font-bold text-stone-800 dark:text-stone-100">报名成功</h2>
<p className="mt-2 text-sm text-stone-500 dark:text-stone-400">感谢报名，活动前会联系你确认～</p>
<p className="mt-6 text-xs text-stone-400 dark:text-stone-500 leading-relaxed whitespace-pre-line">
{`本场收取少量场地分摊费29/人
用于覆盖民宿/场地基础成本。
通过审核后再确认名额，未确认无需支付。`}
</p>
<Link
href="/"
className="mt-6 sm:mt-8 inline-flex items-center gap-2 rounded-xl bg-amber-600 px-6 sm:px-8 py-2.5 sm:py-3 font-medium text-white text-sm sm:text-base transition-colors hover:bg-amber-700"
>
<Link href="/" className="mt-6 sm:mt-8 inline-flex items-center justify-center rounded-xl bg-amber-600 px-6 sm:px-8 py-2.5 sm:py-3 font-medium text-white text-sm sm:text-base transition-colors hover:bg-amber-700">
🏠 返回首页
</Link>
</div>
@@ -269,81 +253,116 @@ export default function JoinPage() {
);
}
return (
<div className="min-h-screen bg-[#faf8f5] dark:bg-stone-950">
<header className="sticky top-0 z-40 w-full border-b border-stone-200/80 dark:border-stone-800 bg-[#faf8f5]/95 dark:bg-stone-950/95 backdrop-blur">
<div className="max-w-2xl mx-auto px-4 h-12 sm:h-14 flex items-center justify-between">
<Link href="/" className="text-sm font-medium text-stone-600 dark:text-stone-400">
← 返回
if (showStatusPage) {
const status = userRecord!.isRejected ? "rejected" : userRecord!.isApproved ? "approved" : "pending";
return (
<div className="flex min-h-screen items-center justify-center bg-[#faf8f5] dark:bg-stone-950 px-4 py-8">
<div className="w-full max-w-md animate-fade-in rounded-2xl bg-white dark:bg-stone-900 p-6 sm:p-10 text-center shadow-lg border border-stone-200 dark:border-stone-800">
{status === "approved" ? (
<>
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-emerald-50 dark:bg-emerald-900/30 text-4xl">🎉</div>
<h2 className="text-xl sm:text-2xl font-bold text-stone-800 dark:text-stone-100">审核通过</h2>
<p className="mt-2 text-sm text-stone-500 dark:text-stone-400">扫码添加好友，加入活动群</p>
<div className="mt-6 flex justify-center">
<img src={DIGITAL_NOMAD_WECHAT_QR} alt="微信二维码" className="w-40 h-40 object-contain border border-stone-200 dark:border-stone-700 rounded-lg" />
</div>
<p className="mt-4 text-xs text-stone-400 dark:text-stone-500">📝 添加时请备注：活动报名</p>
</>
) : status === "rejected" ? (
<>
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-50 dark:bg-red-900/30 text-4xl">❌</div>
<h2 className="text-xl sm:text-2xl font-bold text-stone-800 dark:text-stone-100">审核拒绝</h2>
<p className="mt-2 text-sm text-stone-500 dark:text-stone-400">很抱歉，本次申请未通过审核。如有疑问可联系发起人。</p>
</>
) : (
<>
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-amber-50 dark:bg-amber-900/30 text-4xl">⏳</div>
<h2 className="text-xl sm:text-2xl font-bold text-stone-800 dark:text-stone-100">审核中</h2>
<p className="mt-2 text-sm text-stone-500 dark:text-stone-400">⏰ 通常会在 24 小时内完成审核，通过后用微信联系你。</p>
</>
)}
<p className="mt-6 text-xs text-stone-400 dark:text-stone-500 leading-relaxed whitespace-pre-line">
{`本场收取少量场地分摊费29/人
用于覆盖民宿/场地基础成本。
通过审核后再确认名额，未确认无需支付。`}
</p>
<button
type="button"
onClick={() => { setUserRecord(null); setWechat(""); }}
className="mt-6 text-sm text-stone-500 hover:text-amber-600"
>
更换微信号
</button>
<Link href="/" className="mt-4 block text-sm text-amber-600 hover:text-amber-700">
🏠 返回首页
</Link>
<ThemeToggle />
</div>
</header>
</div>
);
}
<div className="mx-auto max-w-2xl px-4 sm:px-6 py-8 lg:py-10">
<div className="overflow-hidden bg-white dark:bg-stone-900 shadow-sm sm:rounded-2xl">
<div className="relative h-28 sm:h-36 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-4xl sm:text-5xl" aria-hidden>🌍</div>
</div>
if (showPayPage) {
return (
<div className="min-h-screen bg-[#faf8f5] dark:bg-stone-950">
<header className="sticky top-0 z-40 w-full border-b border-stone-200/80 dark:border-stone-800 bg-[#faf8f5]/95 dark:bg-stone-950/95 backdrop-blur">
<div className="max-w-2xl mx-auto px-4 h-12 sm:h-14 flex items-center justify-between">
<Link href="/" className="text-sm font-medium text-stone-600 dark:text-stone-400">← 返回</Link>
<ThemeToggle />
</div>
</header>
<div className="mx-auto max-w-2xl px-4 sm:px-6 py-8 lg:py-10">
<div className="overflow-hidden bg-white dark:bg-stone-900 shadow-sm sm:rounded-2xl p-6 sm:p-10 text-center">
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-amber-50 dark:bg-amber-900/30 text-4xl">💰</div>
<h2 className="text-xl sm:text-2xl font-bold text-stone-800 dark:text-stone-100">支付场地茶歇费</h2>
<p className="mt-2 text-sm text-stone-500 dark:text-stone-400">29元/人，用于覆盖民宿/场地基础成本</p>
<button
type="button"
onClick={handlePayNow}
className="mt-6 w-full rounded-xl bg-amber-600 py-3.5 text-base font-medium text-white transition-colors hover:bg-amber-700"
>
立即报名
</button>
<button
type="button"
onClick={() => { setUserRecord(null); setWechat(""); }}
className="mt-3 text-sm text-stone-500 hover:text-stone-700"
>
更换微信号
</button>
</div>
</div>
</div>
);
}
<div className="px-4 sm:px-6 py-5 sm:py-6">
<form onSubmit={handleSubmit} className="space-y-5">
<div>
<label className="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">
📱 小红书主页链接
</label>
<p className="text-xs text-stone-500 dark:text-stone-400 mb-1.5">
💡 建议填写，可加快审核
</p>
<input
type="url"
value={xiaohongshuUrl}
onChange={(e) => {
setXiaohongshuUrl(e.target.value);
setUrlError(null);
}}
onBlur={handleUrlBlur}
placeholder="https://www.xiaohongshu.com/user/profile/xxx"
className="form-input"
/>
{validating && (
<p className="mt-1.5 text-xs text-amber-600 dark:text-amber-400">🔄 校验中…</p>
)}
{urlError && !validating && (
<p className="mt-1.5 text-xs text-red-600 dark:text-red-400">⚠️ {urlError}</p>
)}
{profile && !urlError && (
<p className="mt-1.5 text-xs text-emerald-600 dark:text-emerald-400">
✅ 已获取：{profile.nickname}
{profile.redbookId && ` \u00b7 @${profile.redbookId}`}
{profile.ipLocation && ` \u00b7 ${profile.ipLocation}`}
{profile.personalLink && ` \u00b7 ${profile.personalLink}`}
{followingDisplay && ` \u00b7 \u5173\u6ce8 ${followingDisplay}`}
{followersDisplay && ` \u00b7 \u7c89\u4e1d ${followersDisplay}`}
{likesDisplay && ` \u00b7 \u83b7\u8d5e\u4e0e\u6536\u85cf ${likesDisplay}`}
{safePostCountDisplay && ` \u00b7 \u53d1\u5e16 ${safePostCountDisplay}`}
{` \u00b7 ${profileGenderLabel}`}
</p>
)}
if (!hydrated) {
return (
<div className="min-h-screen bg-[#faf8f5] dark:bg-stone-950 flex items-center justify-center">
<span className="text-stone-400">加载中…</span>
</div>
);
}
// 微信号输入区：失焦时查询，查询中不展示其他元素
const wechatOnlyView = !userRecord || checkingWechat;
if (wechatOnlyView) {
return (
<div className="min-h-screen bg-[#faf8f5] dark:bg-stone-950">
<header className="sticky top-0 z-40 w-full border-b border-stone-200/80 dark:border-stone-800 bg-[#faf8f5]/95 dark:bg-stone-950/95 backdrop-blur">
<div className="max-w-2xl mx-auto px-4 h-12 sm:h-14 flex items-center justify-between">
<Link href="/" className="text-sm font-medium text-stone-600 dark:text-stone-400">← 返回</Link>
<ThemeToggle />
</div>
</header>
<div className="mx-auto max-w-2xl px-4 sm:px-6 py-8 lg:py-10">
<div className="overflow-hidden bg-white dark:bg-stone-900 shadow-sm sm:rounded-2xl">
<div className="relative h-28 sm:h-36 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-4xl sm:text-5xl" aria-hidden>☕</div>
</div>
<div>
<label className="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">
💼 职业 <span className="text-red-500">*</span>
</label>
<input
type="text"
maxLength={140}
placeholder="您的职业或专业"
value={profession}
onChange={(e) => setProfession(e.target.value)}
required
className="form-input"
/>
</div>
</div>
<div className="px-4 sm:px-6 py-5 sm:py-6">
<div>
<label className="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">
💬 微信号 <span className="text-red-500">*</span>
@@ -353,82 +372,121 @@ export default function JoinPage() {
maxLength={140}
placeholder="用于拉群"
value={wechat}
onChange={(e) => setWechat(e.target.value)}
onChange={(e) => setWechat(e.target.value.replace(/[^a-zA-Z0-9_-]/g, ""))}
onBlur={handleWechatBlur}
className="form-input"
autoFocus
/>
</div>
{checkingWechat && (
<p className="mt-3 text-sm text-amber-600 dark:text-amber-400">🔄 查询中…</p>
)}
{error && (
<p className="mt-3 rounded-lg bg-red-50 dark:bg-red-900/30 px-4 py-3 text-sm text-red-600 dark:text-red-400">⚠️ {error}</p>
)}
<button
type="button"
disabled
className="mt-5 w-full rounded-xl bg-amber-600/50 py-3.5 text-base font-medium text-white cursor-not-allowed"
>
📤 提交报名
</button>
<p className="mt-2 text-xs text-stone-400 dark:text-stone-500">填写微信号并完成查询后显示完整表单</p>
</div>
</div>
<div className="mt-4 text-center">
<Link href="/" className="text-xs sm:text-sm text-stone-400 dark:text-stone-500 hover:text-amber-600">🏠 返回首页</Link>
</div>
</div>
</div>
);
}
// 无记录 → 显示完整表单
return (
<div className="min-h-screen bg-[#faf8f5] dark:bg-stone-950">
<header className="sticky top-0 z-40 w-full border-b border-stone-200/80 dark:border-stone-800 bg-[#faf8f5]/95 dark:bg-stone-950/95 backdrop-blur">
<div className="max-w-2xl mx-auto px-4 h-12 sm:h-14 flex items-center justify-between">
<Link href="/" className="text-sm font-medium text-stone-600 dark:text-stone-400">← 返回</Link>
<ThemeToggle />
</div>
</header>
<div className="mx-auto max-w-2xl px-4 sm:px-6 py-8 lg:py-10">
<div className="overflow-hidden bg-white dark:bg-stone-900 shadow-sm sm:rounded-2xl">
<div className="relative h-28 sm:h-36 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-4xl sm:text-5xl" aria-hidden>☕</div>
</div>
</div>
<div className="px-4 sm:px-6 py-5 sm:py-6">
<form onSubmit={handleSubmit} className="space-y-5">
<div>
<label className="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">💬 微信号 <span className="text-red-500">*</span></label>
<input
type="text"
maxLength={140}
placeholder="用于拉群"
value={wechat}
onChange={(e) => setWechat(e.target.value.replace(/[^a-zA-Z0-9_-]/g, ""))}
onBlur={handleWechatBlur}
required
className="form-input"
/>
</div>
<div className="grid sm:grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">
👤 性别 <span className="text-red-500">*</span>
</label>
<select
value={gender}
onChange={(e) => setGender(e.target.value)}
required
className={`form-input appearance-none ${gender ? "text-stone-800 dark:text-stone-100" : "text-stone-400 dark:text-stone-500"}`}
>
<option value="">请选择</option>
<option value="女">女</option>
<option value="男">男</option>
</select>
</div>
<div>
<label className="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">
📅 年龄区间 <span className="text-red-500">*</span>
</label>
<select
value={ageRange}
onChange={(e) => setAgeRange(e.target.value)}
required
className={`form-input appearance-none ${ageRange ? "text-stone-800 dark:text-stone-100" : "text-stone-400 dark:text-stone-500"}`}
>
<option value="">请选择</option>
{ageRangeOptions.map((o) => (
<option key={o} value={o}>{o}</option>
))}
</select>
</div>
</div>
<div>
<label className="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">📱 小红书主页链接</label>
<p className="text-xs text-stone-500 dark:text-stone-400 mb-1.5">💡 建议填写，可加快审核</p>
<input
type="url"
value={xiaohongshuUrl}
onChange={(e) => { setXiaohongshuUrl(e.target.value); setUrlError(null); }}
onBlur={handleUrlBlur}
placeholder="https://www.xiaohongshu.com/user/profile/xxx"
className="form-input"
/>
{validating && <p className="mt-1.5 text-xs text-amber-600 dark:text-amber-400">🔄 校验中…</p>}
{urlError && !validating && <p className="mt-1.5 text-xs text-red-600 dark:text-red-400">⚠️ {urlError}</p>}
{profile && !urlError && <p className="mt-1.5 text-xs text-emerald-600 dark:text-emerald-400">已验证</p>}
</div>
<div>
<label className="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">💼 职业 <span className="text-red-500">*</span></label>
<input type="text" maxLength={140} placeholder="您的职业或专业" value={profession} onChange={(e) => setProfession(e.target.value)} required className="form-input" />
</div>
<div>
<label className="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">👤 性别 <span className="text-red-500">*</span></label>
<select value={gender} onChange={(e) => setGender(e.target.value)} required className={`form-input appearance-none ${gender ? "text-stone-800 dark:text-stone-100" : "text-stone-400 dark:text-stone-500"}`}>
<option value="">请选择</option>
<option value="女">女</option>
<option value="男">男</option>
</select>
</div>
<div className="hidden">
<select value={ageRange} onChange={(e) => setAgeRange(e.target.value)} className="form-input">
<option value="">请选择</option>
{ageRangeOptions.map((o) => <option key={o} value={o}>{o}</option>)}
</select>
</div>
<div className="hidden">
<label className="flex items-start gap-3 cursor-pointer">
<input
type="checkbox"
checked={agreeRules}
onChange={(e) => setAgreeRules(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>
<input type="checkbox" checked={agreeRules} onChange={(e) => setAgreeRules(e.target.checked)} 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>
{error && (
<p className="rounded-lg bg-red-50 dark:bg-red-900/30 px-4 py-3 text-sm text-red-600 dark:text-red-400 flex items-center gap-2">
⚠️ {error}
</p>
<p className="rounded-lg bg-red-50 dark:bg-red-900/30 px-4 py-3 text-sm text-red-600 dark:text-red-400">⚠️ {error}</p>
)}
<button
type="submit"
disabled={submitting || !!urlError || validating}
className="w-full rounded-xl bg-amber-600 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 flex items-center justify-center gap-2"
>
<button type="submit" disabled={submitting || !!urlError || validating} className="w-full rounded-xl bg-amber-600 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">
{submitting ? "🔄 提交中…" : "📤 提交报名"}
</button>
</form>
</div>
</div>
<div className="mt-4 text-center">
<Link href="/" className="text-xs sm:text-sm text-stone-400 dark:text-stone-500 hover:text-amber-600 inline-flex items-center gap-1">
🏠 返回首页
</Link>
<button type="button" onClick={() => { setUserRecord(null); setWechat(""); }} className="text-xs sm:text-sm text-stone-500 hover:text-amber-600">
更换微信号
</button>
<span className="mx-2 text-stone-300">|</span>
<Link href="/" className="text-xs sm:text-sm text-stone-500 hover:text-amber-600">🏠 返回首页</Link>
</div>
</div>
</div>

22
app/join/paid/page.tsx
View File

@@ -99,14 +99,14 @@ export default function JoinPaidPage() {
if (completeStatus !== "success") return;
setCountdown(COUNTDOWN_SECONDS);
const timer = setInterval(() => {
setCountdown((prev) => {
if (prev == null || prev <= 1) {
clearInterval(timer);
window.location.replace("/");
return 0;
}
return prev - 1;
});
setCountdown((prev) => {
if (prev == null || prev <= 1) {
clearInterval(timer);
window.location.replace("/join?paid=1");
return 0;
}
return prev - 1;
});
}, 1000);
return () => clearInterval(timer);
}, [completeStatus]);
@@ -123,7 +123,7 @@ export default function JoinPaidPage() {
<p className="mt-3 text-slate-500 dark:text-slate-400">
{completeStatus === "success"
? countdown != null
? `${countdown} 秒后返回首页`
? `${countdown} 秒后跳转报名页`
: "感谢您的支持"
: completeStatus === "error"
? "请稍后刷新页面重试"
@@ -142,10 +142,10 @@ export default function JoinPaidPage() {
</button>
)}
<Link
href="/"
href="/join?paid=1"
className="mt-8 inline-flex items-center gap-2 rounded-full bg-[#ff4d4f] px-8 py-3 font-semibold text-white transition-colors hover:bg-[#ff7a45]"
>
← 返回首页
← 查看报名状态
</Link>
</div>
</div>