's'

README.md

@@ -22,7 +22,7 @@
 ### 后端 (payjsapi)
 
 - 与 cnomadcna 相同，需配置 PocketBase、支付渠道等
-- **PocketBase 需创建 `solanRed` 集合**（可克隆自 solan），字段：user_id, nickname, occupation, reason, wechatId, gender, education, gradYear, phone, single, media, type, order_id, amount, is_volunteer（布尔）, xiaohongshu_url
+- **PocketBase 需创建 `solanRed` 集合**（可克隆自 solan），字段：user_id, nickname, occupation, reason, wechatId, gender, education, gradYear, phone, single, media, type, order_id, amount, is_volunteer（布尔）, is_approved（布尔，审核通过）, is_rejected（布尔，审核拒绝）, is_wechat_friend（布尔，是否微信好友，默认 false）, xiaohongshu_url, vip（布尔）
 
 ## 启动
 

app/api/join/by-wechat/route.ts

@@ -0,0 +1,74 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getAdminToken } from "@/app/lib/pocketbase/admin";
+import { getPocketBaseConfig } from "@/config/services.config";
+import { getSalonApi } from "@/app/lib/salonApi";
+
+const empty = {
+  hasRecord: false,
+  record: null,
+  isComplete: false,
+  isWechatFriend: false,
+  isApproved: false,
+  isRejected: false,
+  vip: false,
+};
+
+/** 按 wechatId 查询 solanRed 记录，优先 salonapi */
+export async function GET(request: NextRequest) {
+  const wechatId = request.nextUrl.searchParams.get("wechat_id")?.trim();
+  if (!wechatId) {
+    return NextResponse.json(empty);
+  }
+
+  try {
+    const { status, data } = await getSalonApi(request, `/api/salon/join/by-wechat?wechat_id=${encodeURIComponent(wechatId)}`);
+    if (status === 200 && data && typeof data === "object") {
+      return NextResponse.json(data);
+    }
+  } catch {
+    // salonapi 不可用，回退到直连 PocketBase
+  }
+
+  const token = await getAdminToken();
+  if (!token) {
+    return NextResponse.json(empty);
+  }
+
+  const pb = getPocketBaseConfig();
+  const base = pb.url.replace(/\/$/, "");
+  const escaped = wechatId.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
+  const filter = encodeURIComponent(`wechatId = "${escaped}"`);
+
+  try {
+    const res = await fetch(
+      `${base}/api/collections/${pb.joinCollection}/records?filter=${filter}&sort=-created&perPage=1`,
+      {
+        headers: { Authorization: `Bearer ${token}` },
+        cache: "no-store",
+      }
+    );
+    if (!res.ok) return NextResponse.json(empty);
+    const data = await res.json();
+    const items = Array.isArray(data?.items) ? data.items : [];
+    const rec = items[0] ?? null;
+    const hasRecord = !!rec;
+    const amount = rec ? Number(rec.amount) || 0 : 0;
+    const isComplete = hasRecord && !!rec.order_id && amount > 0;
+    const isWechatFriend = !!rec?.is_wechat_friend;
+    const isApproved = !!rec?.is_approved;
+    const isRejected = !!rec?.is_rejected;
+    const vip = !!rec?.vip;
+
+    return NextResponse.json({
+      hasRecord,
+      record: rec,
+      isComplete,
+      isWechatFriend,
+      isApproved,
+      isRejected,
+      vip,
+    });
+  } catch {
+    return NextResponse.json(empty);
+  }
+}

app/api/join/route.ts

@@ -46,12 +46,7 @@ export async function POST(request: NextRequest) {
     const region = String(formData.region || "").trim();
     const availableTime = String(formData.available_time || "").trim();
     const isVolunteer = !!formData.is_volunteer;
-    if (!intro && (status || activityType || whyJoin || region || availableTime)) {
-      const extra = [status && `状态:${status}`, activityType && `活动偏好:${activityType}`, whyJoin && `原因:${whyJoin}`, region && `区域:${region}`, availableTime && `时间:${availableTime}`].filter(Boolean).join(" | ");
-      intro = extra;
-    }
-
-    const isDigitalNomad = session === "digital-nomad";
+    /** reason 仅存自我介绍，不合并其他字段 */
     const contact = wechatOrPhone || wechat || phone;
     if (!nickname || !session || !agreeRules) {
       return NextResponse.json(
@@ -69,18 +64,19 @@ export async function POST(request: NextRequest) {
     const userId = getUserIdFromCookie(request) || generateAnonId();
 
     const ageRangeForRecord = ageRange || "";
+    /** occupation: 职业/城市，reason: 仅自我介绍 */
+    const occupationValue = profession || city;
 
-    const record = {
+    const record: Record<string, unknown> = {
       user_id: userId,
       nickname,
-      occupation: isDigitalNomad ? profession : city,
+      occupation: occupationValue,
       reason: intro,
       wechatId: wechat || wechatOrPhone,
       xiaohongshu_url: xiaohongshuUrl,
       gender,
       education: education,
       gradYear: graduationYear,
-      phone: phone || wechatOrPhone,
       single: "",
       media: xiaohongshuAvatarUrl,
       type: session,
@@ -90,7 +86,9 @@ export async function POST(request: NextRequest) {
       first_time: firstTime,
       is_volunteer: isVolunteer,
     };
-
+    if (phone.trim()) {
+      record.phone = phone.trim();
+    }
     try {
       const { status, data } = await postSalonApi(request, "/api/salon/join", record);
       if (status >= 500) {
@@ -135,26 +133,28 @@ async function tryPocketBaseDirect(
   const base = pb.url.replace(/\/$/, "");
   const url = `${base}/api/collections/${pb.joinCollection}/records`;
 
-  const reasonParts = [record.reason, record.age_range, record.first_time];
-  if (record.xiaohongshu_url) reasonParts.push(`小红书:${record.xiaohongshu_url}`);
   const body: Record<string, unknown> = {
     user_id: record.user_id,
     nickname: record.nickname,
     occupation: record.occupation ?? "",
-    reason: reasonParts.filter(Boolean).join(" | "),
+    reason: record.reason ?? "",
     wechatId: record.wechatId ?? "",
     gender: record.gender ?? "",
     education: record.education ?? "",
     gradYear: record.gradYear ?? "",
-    phone: record.phone ?? "",
     single: record.single ?? "",
     media: record.media ?? "",
     type: record.type ?? "",
     order_id: record.order_id ?? "",
     amount: record.amount ?? 0,
-    is_volunteer: record.is_volunteer ?? false,
     xiaohongshu_url: record.xiaohongshu_url ?? "",
+    is_volunteer: record.is_volunteer ?? false,
+    age_range: record.age_range ?? "",
+    first_time: record.first_time ?? "",
   };
+  if (record.phone != null && String(record.phone).trim()) {
+    body.phone = record.phone;
+  }
 
   try {
     const res = await fetch(url, {

app/api/join/volunteers/route.ts

@@ -13,7 +13,7 @@ export async function GET() {
   const base = pb.url.replace(/\/$/, "");
 
   try {
-    const filter = encodeURIComponent('is_volunteer=true');
+    const filter = encodeURIComponent('is_volunteer=true && is_approved=true');
     const res = await fetch(
       `${base}/api/collections/${pb.joinCollection}/records?filter=${filter}&sort=-created&perPage=20`,
       {

app/components/AddressLink.tsx

@@ -8,12 +8,16 @@ interface AddressLinkProps {
   className?: string;
 }
 
+/** 红山地址展示：龙华区 | 🚇红山地铁站 | Loft民宿 */
+const HONGSHAN_DISPLAY = "龙华区 | 🚇 红山地铁站 | Loft民宿";
+
 /** 可点击的地址，点击打开地图（使用 span 避免嵌套在 Link 内时的 a 标签冲突） */
 export default function AddressLink({ place, city, className = "" }: AddressLinkProps) {
   const isHongshan = place.includes("红山");
   const mapUrl = isHongshan
-    ? `https://www.google.com/maps?q=${HONGSHAN_COORDS.lat},${HONGSHAN_COORDS.lng}`
-    : `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(`${city}${place}`)}`;
+    ? `https://api.map.baidu.com/marker?location=${HONGSHAN_COORDS.lat},${HONGSHAN_COORDS.lng}&title=${encodeURIComponent(place)}&output=html`
+    : `https://map.baidu.com/search?query=${encodeURIComponent(`${city}${place}`)}`;
+  const displayText = isHongshan ? HONGSHAN_DISPLAY : place;
 
   return (
     <span
@@ -35,7 +39,7 @@ export default function AddressLink({ place, city, className = "" }: AddressLink
       title="点击打开地图"
     >
       <span className="inline-block" aria-hidden>📍</span>
-      {place}
+      {displayText}
     </span>
   );
 }

app/components/HeroSection.tsx

@@ -31,24 +31,23 @@ export default function HeroSection() {
         }}
       />
 
-      <div className="relative max-w-[1000px] mx-auto px-4 sm:px-6 md:px-8 py-10 sm:py-16 md:py-20">
-        <div className="flex flex-col lg:flex-row lg:items-center lg:gap-12 xl:gap-16">
+      <div className="relative max-w-[1200px] mx-auto px-4 sm:px-6 md:px-8 py-14 sm:py-20 md:py-28">
+        <div className="flex flex-col lg:flex-row lg:items-center lg:gap-14 xl:gap-20">
           <div className="flex-1 min-w-0">
-            <h1 className="text-2xl sm:text-3xl md:text-4xl lg:text-[2.5rem] xl:text-[2.75rem] font-bold tracking-tight leading-[1.25]">
+            <h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-[3rem] xl:text-[3.5rem] font-bold tracking-tight leading-[1.2]">
               <span className="hero-gradient-text">周末2小时</span>
-              <br />
-              <span className="text-stone-800 dark:text-stone-100">认识更多有趣的人</span>
+              <span className="text-stone-800 dark:text-stone-100 whitespace-nowrap"> 认识更多有趣的人</span>
             </h1>
             <p className="mt-4 sm:mt-5 text-stone-600 dark:text-stone-400 text-sm sm:text-base max-w-lg leading-relaxed">
               深圳 · 4–8 人小圈子
             </p>
             <p className="mt-1.5 text-stone-500 dark:text-stone-450 text-xs sm:text-sm max-w-lg">
-              公开场地 · 填表申请 · 茶歇费 · 不尬聊
+              公开场地 · 填表申请 · 茶歇 · 不尬聊
             </p>
-            <div className="mt-6 sm:mt-8">
+            <div className="mt-6 sm:mt-8 hidden sm:block">
               <Link
                 href="/join"
-                className="inline-flex items-center justify-center bg-amber-600 hover:bg-amber-700 text-white px-5 py-2.5 sm:px-6 sm:py-3 rounded-xl text-sm font-medium shadow-lg shadow-amber-900/20 transition-all active:scale-[0.98]"
+                className="inline-flex items-center justify-center min-w-[180px] sm:min-w-[220px] bg-amber-600 hover:bg-amber-700 text-white px-8 py-2.5 sm:px-10 sm:py-3 rounded-xl text-sm font-medium shadow-lg shadow-amber-900/20 transition-all active:scale-[0.98]"
               >
                 立即报名
               </Link>
@@ -56,13 +55,13 @@ export default function HeroSection() {
           </div>
 
           {mainSession && (
-            <div className="w-full lg:w-[520px] xl:w-[580px] shrink-0 mt-8 lg:mt-0">
+            <div className="w-full max-w-[280px] sm:max-w-none lg:w-[520px] xl:w-[580px] shrink-0 mt-6 lg:mt-0 mx-auto lg:mx-0">
               <Link
                 href={`/join?session=${mainSession.id}`}
-                className="group flex flex-col lg:flex-row rounded-2xl overflow-hidden bg-white dark:bg-stone-900 shadow-xl shadow-stone-200/60 dark:shadow-stone-950/80 border border-stone-100 dark:border-stone-800 hover:shadow-2xl hover:shadow-amber-900/15 transition-all duration-300 hover:-translate-y-1"
+                className="group flex flex-col lg:flex-row rounded-xl lg:rounded-2xl overflow-hidden bg-white dark:bg-stone-900 shadow-lg lg:shadow-xl shadow-stone-200/60 dark:shadow-stone-950/80 border border-stone-100 dark:border-stone-800 hover:shadow-xl lg:hover:shadow-2xl hover:shadow-amber-900/15 transition-all duration-300 hover:-translate-y-0.5 lg:hover:-translate-y-1"
               >
                 {/* 图片区 - 左侧/上方 */}
-                <div className="relative lg:w-[44%] aspect-[4/3] lg:aspect-auto lg:min-h-[180px] w-full bg-stone-100 dark:bg-stone-800 overflow-hidden shrink-0">
+                <div className="relative lg:w-[44%] aspect-[16/10] sm:aspect-[4/3] lg:aspect-auto lg:min-h-[180px] w-full bg-stone-100 dark:bg-stone-800 overflow-hidden shrink-0">
                   {mainSession.coverImage ? (
                     <SessionCoverImage
                       src={mainSession.coverImage}
@@ -78,11 +77,11 @@ export default function HeroSection() {
                     </div>
                   )}
                   <div className="absolute inset-0 bg-gradient-to-r from-black/20 via-transparent to-transparent lg:from-transparent lg:via-transparent lg:to-black/30" aria-hidden />
-                  <div className="absolute bottom-2 left-2 flex flex-wrap gap-1.5 lg:bottom-3 lg:left-3">
+                  <div className="absolute bottom-1.5 left-1.5 sm:bottom-2 sm:left-2 lg:bottom-3 lg:left-3 flex flex-wrap gap-1 lg:gap-1.5">
                     {["周末", "4人成行"].map((tag) => (
                       <span
                         key={tag}
-                        className="inline-block text-[10px] font-semibold bg-white/95 dark:bg-stone-900/95 backdrop-blur-sm px-2.5 py-1 rounded-md text-stone-700 dark:text-stone-200"
+                        className="inline-block text-[9px] sm:text-[10px] font-semibold bg-white/95 dark:bg-stone-900/95 backdrop-blur-sm px-2 sm:px-2.5 py-0.5 sm:py-1 rounded text-stone-700 dark:text-stone-200"
                       >
                         {tag}
                       </span>
@@ -91,33 +90,33 @@ export default function HeroSection() {
                 </div>
 
                 {/* 内容区 - 右侧/下方 */}
-                <div className="flex-1 flex flex-col justify-center p-5 lg:p-6 lg:pl-6 min-w-0">
-                  <div className="inline-flex items-center gap-2 mb-3">
-                    <span className="w-1 h-4 rounded-full bg-amber-500 dark:bg-amber-500" aria-hidden />
-                    <p className="text-[10px] font-semibold text-amber-600 dark:text-amber-400 uppercase tracking-[0.2em]">
+                <div className="flex-1 flex flex-col justify-center p-3 sm:p-5 lg:p-6 lg:pl-6 min-w-0">
+                  <div className="inline-flex items-center gap-1.5 sm:gap-2 mb-2 sm:mb-3">
+                    <span className="w-0.5 sm:w-1 h-3 sm:h-4 rounded-full bg-amber-500 dark:bg-amber-500" aria-hidden />
+                    <p className="text-[9px] sm:text-[10px] font-semibold text-amber-600 dark:text-amber-400 uppercase tracking-[0.15em] sm:tracking-[0.2em]">
                       本周场次
                     </p>
                   </div>
-                  <h3 className="font-bold text-stone-800 dark:text-stone-100 text-lg lg:text-xl leading-tight tracking-tight">
+                  <h3 className="font-bold text-stone-800 dark:text-stone-100 text-sm sm:text-lg lg:text-xl leading-tight tracking-tight">
                     {mainSession.title}
                   </h3>
-                  <div className="mt-3 space-y-1.5">
-                    <p className="text-sm text-stone-500 dark:text-stone-400">
-                      <span className="inline-block w-14 text-stone-400 dark:text-stone-500">日期</span>
+                  <div className="mt-2 sm:mt-3 space-y-1 sm:space-y-1.5">
+                    <p className="text-xs sm:text-sm text-stone-500 dark:text-stone-400">
+                      <span className="inline-block w-12 sm:w-14 text-stone-400 dark:text-stone-500">日期</span>
                       {mainSession.date}
                     </p>
-                    <p className="text-sm text-stone-500 dark:text-stone-400">
-                      <span className="inline-block w-14 text-stone-400 dark:text-stone-500">时间</span>
+                    <p className="text-xs sm:text-sm text-stone-500 dark:text-stone-400">
+                      <span className="inline-block w-12 sm:w-14 text-stone-400 dark:text-stone-500">时间</span>
                       {mainSession.time}
                     </p>
-                    <p className="text-sm text-stone-500 dark:text-stone-400">
-                      <span className="inline-block w-14 text-stone-400 dark:text-stone-500">地点</span>
+                    <p className="text-xs sm:text-sm text-stone-500 dark:text-stone-400">
+                      <span className="inline-block w-12 sm:w-14 text-stone-400 dark:text-stone-500">地点</span>
                       <AddressLink place={mainSession.place} city={mainSession.city} />
                     </p>
                   </div>
-                  <div className="mt-4 pt-4 border-t border-stone-100 dark:border-stone-800 flex items-center justify-between gap-4">
-                    <div className="flex items-center gap-3 min-w-0">
-                      <div className="flex -space-x-2.5 shrink-0">
+                  <div className="mt-3 sm:mt-4 pt-3 sm:pt-4 border-t border-stone-100 dark:border-stone-800 flex items-center justify-between gap-2 sm:gap-4">
+                    <div className="flex items-center gap-2 sm:gap-3 min-w-0">
+                      <div className="flex -space-x-2 sm:-space-x-2.5 shrink-0">
                         {(stats?.joiners?.length ? stats.joiners : MOCK_JOINERS).slice(0, 5).map((j, i) => {
                           const nickname = "name" in j ? (j as { name: string }).name : (j as { nickname: string }).nickname;
                           const avatar = "avatar" in j ? (j as { avatar: string }).avatar : (j as { avatar?: string }).avatar;
@@ -126,7 +125,7 @@ export default function HeroSection() {
                           return (
                             <span
                               key={i}
-                              className={`relative w-8 h-8 rounded-full overflow-hidden border-2 border-white dark:border-stone-900 shrink-0 inline-block transition-transform hover:scale-110 ${xhUrl ? "cursor-pointer" : "cursor-default"} ${showAvatar ? "" : "bg-amber-100 dark:bg-amber-900/30 flex items-center justify-center text-xs font-medium text-amber-700 dark:text-amber-300"}`}
+                              className={`relative w-6 h-6 sm:w-8 sm:h-8 rounded-full overflow-hidden border-2 border-white dark:border-stone-900 shrink-0 inline-block transition-transform hover:scale-110 ${xhUrl ? "cursor-pointer" : "cursor-default"} ${showAvatar ? "" : "bg-amber-100 dark:bg-amber-900/30 flex items-center justify-center text-[10px] sm:text-xs font-medium text-amber-700 dark:text-amber-300"}`}
                               title={nickname}
                               onClick={(e) => {
                                 e.preventDefault();
@@ -143,11 +142,11 @@ export default function HeroSection() {
                           );
                         })}
                       </div>
-                      <span className="text-xs text-stone-500 dark:text-stone-400 truncate">
+                      <span className="text-[10px] sm:text-xs text-stone-500 dark:text-stone-400 truncate">
                         {stats?.count ? `${stats.count} 人已报名` : "有人报名中"}
                       </span>
                     </div>
-                    <span className="shrink-0 inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-amber-50 dark:bg-amber-900/20 text-amber-600 dark:text-amber-400 font-semibold text-sm group-hover:bg-amber-100 dark:group-hover:bg-amber-900/30 transition-all group-hover:gap-2">
+                    <span className="shrink-0 inline-flex items-center gap-1 sm:gap-1.5 px-2 sm:px-3 py-1 sm:py-1.5 rounded-md sm:rounded-lg bg-amber-50 dark:bg-amber-900/20 text-amber-600 dark:text-amber-400 font-semibold text-xs sm:text-sm group-hover:bg-amber-100 dark:group-hover:bg-amber-900/30 transition-all group-hover:gap-2">
                       报名
                       <span className="text-amber-500 dark:text-amber-400">→</span>
                     </span>

app/components/HostLink.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import Link from "next/link";
+import Image from "next/image";
+
+interface HostLinkProps {
+  host: { id: string; name: string; avatar: string; bio: string; link?: string };
+  /** 志愿者招募：无审核通过时显示「立即申请」+ 免费标识 */
+  ctaText?: string;
+  showFreeBadge?: boolean;
+}
+
+/** 移动端优先尝试唤醒小红书 app，PC 新窗口打开 */
+export default function HostLink({ host, ctaText, showFreeBadge }: HostLinkProps) {
+  const href = "link" in host ? host.link : `/host/${host.id}`;
+  const isXiaohongshu = typeof href === "string" && (href.includes("xhslink.com") || href.includes("xiaohongshu.com"));
+
+  const handleClick = (e: React.MouseEvent) => {
+    if (!isXiaohongshu || typeof href !== "string") return;
+    const isMobile = /Android|iPhone|iPad|iPod|webOS|Mobile/i.test(navigator.userAgent);
+    if (isMobile) {
+      e.preventDefault();
+      // 移动端：同窗口打开，xhslink.com 会尝试唤起小红书 app，未安装则打开网页
+      window.location.assign(href);
+    }
+  };
+
+  if (typeof href !== "string") return null;
+
+  return (
+    <Link
+      href={href}
+      target={href.startsWith("http") ? "_blank" : undefined}
+      rel={href.startsWith("http") ? "noopener noreferrer" : undefined}
+      onClick={handleClick}
+      className="flex gap-3 sm:gap-4 p-4 sm:p-5 rounded-xl sm:rounded-2xl bg-white dark:bg-stone-900/80 border border-stone-200/80 dark:border-stone-700/80 hover:border-amber-200 dark:hover:border-amber-900/50 hover:shadow-lg transition-all"
+    >
+      <div className="relative w-14 h-14 sm:w-16 sm:h-16 shrink-0 rounded-full overflow-hidden border-2 border-amber-100 dark:border-amber-900/30">
+        <Image src={host.avatar} alt={host.name} fill sizes="64px" className="object-cover" unoptimized />
+      </div>
+      <div className="min-w-0 flex-1 text-left">
+        <div className="flex items-center gap-2 flex-wrap">
+          <h3 className="font-semibold text-stone-800 dark:text-stone-100 text-sm sm:text-base">{host.name}</h3>
+          {showFreeBadge && (
+            <span className="inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded text-[10px] font-medium bg-emerald-100 dark:bg-emerald-900/40 text-emerald-700 dark:text-emerald-300">
+              FREE
+            </span>
+          )}
+        </div>
+        <p className="mt-0.5 text-xs sm:text-sm text-stone-500 dark:text-stone-400 line-clamp-2">{host.bio}</p>
+        <span className="inline-flex items-center gap-1 mt-2 text-amber-600 dark:text-amber-400 text-xs font-medium">
+          {ctaText ?? "查看主页"} →
+        </span>
+      </div>
+    </Link>
+  );
+}

app/history/page.tsx

@@ -2,6 +2,7 @@
 
 import Link from "next/link";
 import SessionCoverImage from "../components/SessionCoverImage";
+import AddressLink from "../components/AddressLink";
 import Header from "../components/Header";
 import Footer from "../components/Footer";
 import { PAST_SESSIONS } from "@/config/home.config";
@@ -55,10 +56,10 @@ export default function HistoryPage() {
                         {s.title}
                       </h2>
                       <p className="text-sm text-stone-500 dark:text-stone-400 mt-0.5">
-                        {s.date} {s.time} · {s.place}
+                        {s.date} {s.time} · <AddressLink place={s.place} city={s.city} />
                       </p>
                       <span className="inline-flex items-center gap-1 mt-2 text-amber-600 dark:text-amber-400 text-xs font-medium">
-                        查看详情 →
+                        查看主页 →
                       </span>
                     </div>
                   </div>

app/join/page.tsx

@@ -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>

app/join/paid/page.tsx

@@ -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>

app/page.tsx

@@ -5,6 +5,7 @@ import Link from "next/link";
 import Image from "next/image";
 import HeroSection from "./components/HeroSection";
 import SessionCard from "./components/SessionCard";
+import HostLink from "./components/HostLink";
 import Footer from "./components/Footer";
 import Header from "./components/Header";
 import { getSessionsWithDates, HOSTS } from "@/config/home.config";
@@ -58,18 +59,18 @@ export default function Home() {
             <span>📋</span> 怎么参加
           </h2>
           <div className="rounded-xl sm:rounded-2xl bg-white dark:bg-stone-900/80 border border-stone-200/80 dark:border-stone-700/80 p-4 sm:p-6 md:p-8">
-            <div className="grid sm:grid-cols-3 gap-6 sm:gap-8">
+            <div className="grid grid-cols-3 gap-3 sm:gap-6 md:gap-8">
               <div className="flex flex-col items-center text-center">
-                <div className="w-10 h-10 rounded-full bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300 font-bold text-lg flex items-center justify-center mb-3">1</div>
-                <h4 className="font-semibold text-stone-800 dark:text-stone-100 text-sm sm:text-base">填表</h4>
+                <div className="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300 font-bold text-sm sm:text-lg flex items-center justify-center mb-2 sm:mb-3">1</div>
+                <h4 className="font-semibold text-stone-800 dark:text-stone-100 text-xs sm:text-base">填表</h4>
               </div>
               <div className="flex flex-col items-center text-center">
-                <div className="w-10 h-10 rounded-full bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300 font-bold text-lg flex items-center justify-center mb-3">2</div>
-                <h4 className="font-semibold text-stone-800 dark:text-stone-100 text-sm sm:text-base">审核</h4>
+                <div className="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300 font-bold text-sm sm:text-lg flex items-center justify-center mb-2 sm:mb-3">2</div>
+                <h4 className="font-semibold text-stone-800 dark:text-stone-100 text-xs sm:text-base">审核</h4>
               </div>
               <div className="flex flex-col items-center text-center">
-                <div className="w-10 h-10 rounded-full bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300 font-bold text-lg flex items-center justify-center mb-3">3</div>
-                <h4 className="font-semibold text-stone-800 dark:text-stone-100 text-sm sm:text-base">通过后联系你确认</h4>
+                <div className="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300 font-bold text-sm sm:text-lg flex items-center justify-center mb-2 sm:mb-3">3</div>
+                <h4 className="font-semibold text-stone-800 dark:text-stone-100 text-xs sm:text-base leading-tight">通过后联系你确认</h4>
               </div>
             </div>
           </div>
@@ -80,7 +81,7 @@ export default function Home() {
           <span>📍 公开场地</span>
           <span>👥 4–8 人</span>
           <span>✍️ 填表申请</span>
-          <span>☕ 茶歇费</span>
+          <span>☕ 茶歇</span>
         </div>
 
         {/* 本周场次 */}
@@ -127,28 +128,14 @@ export default function Home() {
           </h2>
           <div className="grid sm:grid-cols-2 gap-3 sm:gap-4 mb-4">
             {HOSTS.map((host) => (
-              <Link
+              <HostLink
                 key={host.id}
-                href={"link" in host ? host.link : `/host/${host.id}`}
-                target={"link" in host && host.link.startsWith("http") ? "_blank" : undefined}
-                rel={"link" in host && host.link.startsWith("http") ? "noopener noreferrer" : undefined}
-                className="flex gap-3 sm:gap-4 p-4 sm:p-5 rounded-xl sm:rounded-2xl bg-white dark:bg-stone-900/80 border border-stone-200/80 dark:border-stone-700/80 hover:border-amber-200 dark:hover:border-amber-900/50 hover:shadow-lg transition-all"
-              >
-                <div className="relative w-14 h-14 sm:w-16 sm:h-16 shrink-0 rounded-full overflow-hidden border-2 border-amber-100 dark:border-amber-900/30">
-                  <Image src={host.avatar} alt={host.name} fill sizes="64px" className="object-cover" unoptimized />
-                </div>
-                <div className="min-w-0 flex-1 text-left">
-                  <h3 className="font-semibold text-stone-800 dark:text-stone-100 text-sm sm:text-base">
-                    {host.name}
-                  </h3>
-                  <p className="mt-0.5 text-xs sm:text-sm text-stone-500 dark:text-stone-400 line-clamp-2">
-                    {host.bio}
-                  </p>
-                  <span className="inline-flex items-center gap-1 mt-2 text-amber-600 dark:text-amber-400 text-xs font-medium">
-                    查看详情 →
-                  </span>
-                </div>
-              </Link>
+                host={host}
+                {...(host.id === "host-2" && volunteers.length === 0 && {
+                  ctaText: "立即申请",
+                  showFreeBadge: true,
+                })}
+              />
             ))}
           </div>
           {volunteers.length > 0 && (
@@ -167,7 +154,12 @@ export default function Home() {
                           </div>
                         )}
                       </div>
-                      <span className="text-xs text-stone-600 dark:text-stone-400">{v.nickname}</span>
+                      <div className="flex flex-col">
+                        <span className="text-xs text-stone-600 dark:text-stone-400">{v.nickname}</span>
+                        {v.xiaohongshu_url && (
+                          <span className="text-[10px] text-amber-600 dark:text-amber-400 font-medium">查看主页</span>
+                        )}
+                      </div>
                     </>
                   );
                   return v.xiaohongshu_url ? (
@@ -221,11 +213,11 @@ export default function Home() {
           </div>
         </section>
 
-        {/* CTA */}
-        <section className="pt-2 sm:pt-4">
+        {/* CTA - 移动端隐藏，只保留底部悬浮去报名 */}
+        <section className="pt-2 sm:pt-4 hidden sm:block">
           <Link
             href="/join"
-            className="block w-full bg-amber-600 hover:bg-amber-700 text-white text-center py-3.5 sm:py-4 rounded-xl font-semibold text-sm sm:text-base shadow-lg shadow-amber-900/20 transition-all"
+            className="block w-full min-w-[200px] bg-amber-600 hover:bg-amber-700 text-white text-center py-3.5 sm:py-4 rounded-xl font-semibold text-sm sm:text-base shadow-lg shadow-amber-900/20 transition-all"
           >
             立即报名
           </Link>

app/volunteer/page.tsx

@@ -5,12 +5,7 @@ import Link from "next/link";
 import ThemeToggle from "../components/ThemeToggle";
 
 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_-]*$/;
 
 export default function VolunteerPage() {
   const [xiaohongshuUrl, setXiaohongshuUrl] = useState("");
@@ -92,6 +87,10 @@ export default function VolunteerPage() {
       setError("请填写微信号");
       return;
     }
+    if (!WECHAT_REGEX.test(wechat)) {
+      setError("微信号仅允许英文字母、数字、下划线和连字符");
+      return;
+    }
     if (!gender) {
       setError("请选择性别");
       return;
@@ -107,15 +106,7 @@ export default function VolunteerPage() {
     setSubmitting(true);
     try {
       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}`,
-      ].filter(Boolean);
 
       const res = await fetch("/api/join", {
         method: "POST",
@@ -128,7 +119,7 @@ export default function VolunteerPage() {
           xiaohongshu_url: submitXiaohongshuUrl,
           xiaohongshu_avatar_url: profile?.avatarUrl || "",
           gender: genderLabel,
-          intro: submitReasonParts.join(" | "),
+          intro: "",
           age_range: ageRange,
           city: "深圳",
           session: "volunteer",
@@ -227,7 +218,7 @@ export default function VolunteerPage() {
                 {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}
+                    已验证
                   </p>
                 )}
               </div>
@@ -256,7 +247,7 @@ export default function VolunteerPage() {
                   maxLength={140}
                   placeholder="用于联系"
                   value={wechat}
-                  onChange={(e) => setWechat(e.target.value)}
+                  onChange={(e) => setWechat(e.target.value.replace(/[^a-zA-Z0-9_-]/g, ""))}
                   required
                   className="form-input"
                 />

config/services.config.ts

@@ -58,9 +58,12 @@ export function getPaymentConfig(): PaymentConfig {
   };
 }
 
+/** 茶歇费 29元/人 */
+export const JOIN_TEA_FEE = 2900;
+
 export function getJoinPaymentConfig(): { amount: number; type: string } {
   return {
-    amount: Number(process.env.PAYMENT_JOIN_AMOUNT) || MEETUP_JOIN_AMOUNT,
+    amount: Number(process.env.PAYMENT_JOIN_AMOUNT) || JOIN_TEA_FEE,
     type: "salon",
   };
 }