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

'data'

Browse Source
This commit is contained in:
eric
2026-03-16 09:32:35 -05:00
parent c54c236d1b
commit 14b0cd2429
21 changed files with 1058 additions and 706 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
README.md
View File

@@ -13,9 +13,11 @@
### 前端 (salon)
- `PAYMENT_API_URL`: payjsapi 公网地址，**生产环境必填**（如 `https://api.example.com`），否则会连不上 payjsapi 导致「服务不可用」
- `ROOT_DOMAIN`: 根域名，未设 PAYMENT_API_URL 时用于推导 `https://api.${ROOT_DOMAIN}`，默认 `hackrobot.cn`
- `PAYJSAPI_PORT`: 开发时 payjsapi 端口，默认 `8007`
- `PAYMENT_API_URL`: salonapi 公网地址，**生产环境必填**（如 `https://api.nomadyt.com`）
- `ROOT_DOMAIN`: 根域名，未设 PAYMENT_API_URL 时用于推导 `https://api.${ROOT_DOMAIN}`，默认 `nomadyt.com`
- `NEXT_PUBLIC_SITE_URL`: 前端站点地址，线上 `https://nomadyt.com`
- `PAYJSAPI_PORT`: 开发时 salonapi 端口，默认 `8007`
- `ZPAY_PID` / `ZPAY_KEY`、`XORPAY_AID` / `XORPAY_SECRET`：支付平台凭证，与 salonapi 一致。用于 pay/status 兜底直接查询，**本地无回调时依赖此检测支付**
- `NEXT_PUBLIC_POCKETBASE_URL` / `POCKETBASE_URL`: PocketBase 地址
- `POCKETBASE_EMAIL` / `POCKETBASE_PASSWORD`: PocketBase 管理员账号（用于 join API 写 solanRed）
@@ -27,8 +29,8 @@
## 启动
```bash
# 1. 启动 payjsapi
cd C:\project\payjsapi
# 1. 启动 salonapi（后端，端口 8007）
cd C:\project\salonapi
python run.py
# 2. 启动 salon 前端
@@ -39,6 +41,15 @@ npm run dev
访问 http://localhost:3002
## 本地支付测试
PC 扫码支付后自动检测逻辑（参考 nomadvip）：
1. 优先 salonapi `/salon/order_status`
2. 失败时 **直接向 zpay/xorpay 查询** 兜底（不依赖回调）
3. 检测到 paid 后调用 complete-order → 跳转报名成功页
若仍无反应：点击「支付完成？点此手动检查」；确认 ZPAY_PID/KEY、XORPAY_AID/SECRET 与 salonapi 一致
## Getting started
To make it easy for you to get started with GitLab, here's a list of recommended next steps.

11
app/api/join/by-wechat/route.ts
View File

@@ -21,7 +21,11 @@ export async function GET(request: NextRequest) {
}
try {
const { status, data } = await getSalonApi(request, `/api/salon/join/by-wechat?wechat_id=${encodeURIComponent(wechatId)}`);
const { status, data } = await getSalonApi(
request,
`/api/salon/join/by-wechat?wechat_id=${encodeURIComponent(wechatId)}`,
{ timeoutMs: 8000 }
);
if (status === 200 && data && typeof data === "object") {
return NextResponse.json(data);
}
@@ -40,13 +44,16 @@ export async function GET(request: NextRequest) {
const filter = encodeURIComponent(`wechatId = "${escaped}"`);
try {
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 8000);
const res = await fetch(
`${base}/api/collections/${pb.joinCollection}/records?filter=${filter}&sort=-created&perPage=1`,
{
headers: { Authorization: `Bearer ${token}` },
cache: "no-store",
signal: controller.signal,
}
);
).finally(() => clearTimeout(timeoutId));
if (!res.ok) return NextResponse.json(empty);
const data = await res.json();
const items = Array.isArray(data?.items) ? data.items : [];

4
app/api/join/route.ts
View File

@@ -46,6 +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;
const qualify = !!formData.qualify; // 女性且小红书帖子>10 时自动通过审核
/** reason 仅存自我介绍，不合并其他字段 */
const contact = wechatOrPhone || wechat || phone;
if (!nickname || !session || !agreeRules) {
@@ -85,6 +86,7 @@ export async function POST(request: NextRequest) {
age_range: ageRangeForRecord,
first_time: firstTime,
is_volunteer: isVolunteer,
qualify,
};
if (phone.trim()) {
record.phone = phone.trim();
@@ -133,6 +135,7 @@ async function tryPocketBaseDirect(
const base = pb.url.replace(/\/$/, "");
const url = `${base}/api/collections/${pb.joinCollection}/records`;
const qualify = !!(record.qualify ?? false);
const body: Record<string, unknown> = {
user_id: record.user_id,
nickname: record.nickname,
@@ -149,6 +152,7 @@ async function tryPocketBaseDirect(
amount: record.amount ?? 0,
xiaohongshu_url: record.xiaohongshu_url ?? "",
is_volunteer: record.is_volunteer ?? false,
is_approved: qualify,
age_range: record.age_range ?? "",
first_time: record.first_time ?? "",
};

45
app/api/join/volunteers/route.ts
View File

@@ -1,19 +1,33 @@
import { NextResponse } from "next/server";
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";
/** 获取志愿者列表 - 优先 salonapi，回退直连 PocketBase */
export async function GET(request: NextRequest) {
try {
const { status, data } = await getSalonApi(request, "/api/salon/join/volunteers", {
timeoutMs: 8000,
});
if (status === 200 && data && typeof data === "object") {
const v = (data as { volunteer?: unknown }).volunteer;
const payload = v && typeof v === "object" ? { volunteer: v } : { volunteer: null };
return NextResponse.json(payload);
}
} catch {
// salonapi 不可用，回退直连 PocketBase
}
/** 获取志愿者列表 - solanRed 中 is_volunteer=true 的记录 */
export async function GET() {
const token = await getAdminToken();
if (!token) {
return NextResponse.json({ ok: true, volunteers: [] }, { status: 200 });
return NextResponse.json({ ok: true, volunteer: null }, { status: 200 });
}
const pb = getPocketBaseConfig();
const base = pb.url.replace(/\/$/, "");
try {
const filter = encodeURIComponent('is_volunteer=true && is_approved=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`,
{
@@ -22,19 +36,20 @@ export async function GET() {
}
);
if (!res.ok) {
return NextResponse.json({ ok: true, volunteers: [] }, { status: 200 });
return NextResponse.json({ ok: true, volunteer: null }, { status: 200 });
}
const data = await res.json();
const items = Array.isArray(data?.items) ? data.items : [];
const volunteers = items.map(
(r: { nickname?: string; xiaohongshu_nickname?: string; media?: string; xiaohongshu_url?: string }) => ({
nickname: String(r?.xiaohongshu_nickname || r?.nickname || "").trim() || "志愿者",
avatar: String(r?.media || "").trim() || undefined,
xiaohongshu_url: String(r?.xiaohongshu_url || "").trim() || undefined,
})
);
return NextResponse.json({ ok: true, volunteers });
const rec = items[0] ?? null;
const volunteer = rec
? {
nickname: String(rec?.xiaohongshu_nickname || rec?.nickname || "").trim() || "志愿者",
avatar: String(rec?.media || "").trim() || undefined,
xiaohongshu_url: String(rec?.xiaohongshu_url || "").trim() || undefined,
}
: null;
return NextResponse.json({ ok: true, volunteer });
} catch {
return NextResponse.json({ ok: true, volunteers: [] }, { status: 200 });
return NextResponse.json({ ok: true, volunteer: null }, { status: 200 });
}
}

151
app/api/pay/complete-order/route.ts Normal file
View File

@@ -0,0 +1,151 @@
/**
* 本地直接确认支付：检测到 paid 后立即写入 PocketBase，不依赖 salonapi
* 用于扫码页 doConfirm，避免「检测到支付，正在确认…」等待过久
*/
import { NextRequest, NextResponse } from "next/server";
import { getAdminToken } from "@/app/lib/pocketbase/admin";
import { getPocketBaseConfig, SITE_ID } from "@/config/services.config";
import { queryZPayOrderStatus } from "@/app/lib/zpayStatus";
import { queryXorPayOrderStatus } from "@/app/lib/xorpayStatus";
function parseOrderId(orderId: string): { userId: string; payType: string } {
const id = (orderId || "").trim();
if (!id.includes("_order_")) return { userId: "", payType: "unknown" };
const prefix = id.split("_order_")[0];
const lastUnderscore = prefix.lastIndexOf("_");
if (lastUnderscore > 0) {
return {
userId: prefix.substring(0, lastUnderscore),
payType: prefix.substring(lastUnderscore + 1).toLowerCase(),
};
}
return { userId: prefix, payType: "unknown" };
}
export async function POST(request: NextRequest) {
try {
const body = await request.json().catch(() => ({}));
const orderId = String(body?.order_id || "").trim();
if (!orderId) {
return NextResponse.json({ ok: false, error: "缺少 order_id" }, { status: 400 });
}
const { userId, payType } = parseOrderId(orderId);
if (!userId || payType !== "salon") {
return NextResponse.json({ ok: false, error: "订单格式无效" }, { status: 400 });
}
const [zpay, xorpay] = await Promise.all([
queryZPayOrderStatus(orderId, 5000),
queryXorPayOrderStatus(orderId, 5000),
]);
const paid = zpay?.paid || xorpay?.paid;
if (!paid) {
return NextResponse.json({ ok: false, error: "订单未支付" }, { status: 400 });
}
const moneyYuan = parseFloat(zpay?.money || xorpay?.payPrice || "0") || 0;
const amountCents = moneyYuan > 0 ? Math.round(moneyYuan * 100) : 100;
const token = await getAdminToken();
if (!token) {
return NextResponse.json({ ok: false, error: "PocketBase 未配置" }, { status: 503 });
}
const pb = getPocketBaseConfig();
const base = pb.url.replace(/\/$/, "");
const escapedUserId = userId.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
const filter = encodeURIComponent(`user_id = "${escapedUserId}"`);
const listRes = await fetch(
`${base}/api/collections/${pb.joinCollection}/records?filter=${filter}&sort=-created&perPage=1`,
{
headers: { Authorization: `Bearer ${token}` },
cache: "no-store",
}
);
if (!listRes.ok) {
return NextResponse.json({ ok: false, error: "查询记录失败" }, { status: 500 });
}
const listData = await listRes.json().catch(() => ({}));
const items = Array.isArray(listData?.items) ? listData.items : [];
const rec = items[0] ?? null;
if (rec?.id) {
const patchRes = await fetch(
`${base}/api/collections/${pb.joinCollection}/records/${rec.id}`,
{
method: "PATCH",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${token}`,
},
body: JSON.stringify({
order_id: orderId,
amount: amountCents,
vip: true,
}),
}
);
if (!patchRes.ok) {
const err = await patchRes.json().catch(() => ({}));
console.warn("[pay/complete-order] solanRed patch failed:", patchRes.status, err);
}
}
const siteVipFilter = encodeURIComponent(
`user_id = "${escapedUserId}" && site_id = "${SITE_ID}"`
);
const siteVipList = await fetch(
`${base}/api/collections/site_vip/records?filter=${siteVipFilter}&perPage=1`,
{
headers: { Authorization: `Bearer ${token}` },
cache: "no-store",
}
);
if (siteVipList.ok) {
const svData = await siteVipList.json().catch(() => ({}));
const svItems = svData?.items ?? [];
if (svItems.length > 0) {
await fetch(
`${base}/api/collections/site_vip/records/${svItems[0].id}`,
{
method: "PATCH",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${token}`,
},
body: JSON.stringify({ order_id: orderId }),
}
);
} else {
await fetch(`${base}/api/collections/site_vip/records`, {
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${token}`,
},
body: JSON.stringify({
user_id: userId,
site_id: SITE_ID,
order_id: orderId,
expires_at: "",
}),
});
}
}
return NextResponse.json({ ok: true });
} catch (error) {
console.error("[pay/complete-order] error:", error);
return NextResponse.json(
{ ok: false, error: error instanceof Error ? error.message : "操作失败" },
{ status: 500 }
);
}
}

64
app/api/pay/route.ts
View File

@@ -66,14 +66,13 @@ function buildQrHtml(
imgSrc: string,
returnUrl: string,
orderId: string,
opts?: { channel?: string; successDesc?: string; confirmUrl?: string }
opts?: { channel?: string; confirmUrl?: string }
): string {
const ch = (opts?.channel || "wxpay").toLowerCase();
const isWx = ch === "wxpay" || ch === "wx" || ch === "wechat";
const title = isWx ? "微信扫码支付" : "支付宝扫码支付";
const hint = isWx ? "请使用微信扫描下方二维码完成支付" : "请使用支付宝扫描下方二维码完成支付";
const successDesc = opts?.successDesc || "支付成功，即将跳转";
const confirmUrl = opts?.confirmUrl || "/api/salon/complete-order";
const confirmUrl = opts?.confirmUrl || "/api/pay/complete-order";
const esc = (s: string) =>
s.replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c] || c);
return `<!DOCTYPE html>
@@ -96,14 +95,6 @@ h2{color:#1e293b;margin:0 0 8px;font-size:1.5rem;}
.countdown-num{font-size:1rem;font-weight:700;color:#1e293b;line-height:1;}
.countdown-unit{font-size:9px;color:#94a3b8;}
.tip{font-size:13px;color:#64748b;margin-top:16px;}
.success-wrap{display:none;}
.success-wrap.show{display:block;}
.wait-wrap.hide{display:none;}
.success-icon{font-size:4rem;margin-bottom:16px;animation:scaleIn .4s ease;}
.success-title{font-size:1.25rem;color:#16a34a;font-weight:600;margin-bottom:8px;}
.success-desc{color:#64748b;font-size:14px;margin-bottom:24px;}
.success-countdown{font-size:1.5rem;font-weight:700;color:#667eea;}
@keyframes scaleIn{from{transform:scale(0);opacity:0;}to{transform:scale(1);opacity:1;}}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.7;}}
.pulse{animation:pulse 2s ease-in-out infinite;}
</style></head>
@@ -129,12 +120,6 @@ h2{color:#1e293b;margin:0 0 8px;font-size:1.5rem;}
</div>
<p class="tip pulse" id="tip">等待支付中...</p>
</div>
<div class="success-wrap" id="successWrap">
<div class="success-icon">✅</div>
<div class="success-title">支付成功</div>
<div class="success-desc">${esc(successDesc)}</div>
<div class="success-countdown" id="successCountdown">3 秒后跳转</div>
</div>
</div>
<script>
(function(){
@@ -143,11 +128,9 @@ h2{color:#1e293b;margin:0 0 8px;font-size:1.5rem;}
var returnUrl=${JSON.stringify(returnUrl)};
if(!orderId){return;}
var waitWrap=document.getElementById("waitWrap");
var successWrap=document.getElementById("successWrap");
var tip=document.getElementById("tip");
var countdownNum=document.getElementById("countdownNum");
var progressCircle=document.getElementById("progressCircle");
var successCountdown=document.getElementById("successCountdown");
var maxT=300,left=maxT;
var circumference=2*Math.PI*32;
function fmt(t){var m=Math.floor(t/60),s=t%60;return m+":"+(s<10?"0":"")+s;}
@@ -159,36 +142,46 @@ h2{color:#1e293b;margin:0 0 8px;font-size:1.5rem;}
},1000);
function showSuccess(){
clearInterval(countdownTimer);
waitWrap.classList.add("hide");
successWrap.classList.add("show");
var s=3;
var t=setInterval(function(){
s--;
successCountdown.textContent=s>0?s+" 秒后跳转":"跳转中…";
if(s<=0){clearInterval(t);window.location.href=returnUrl;}
},1000);
window.location.href=returnUrl;
}
var confirmUrl=${JSON.stringify(confirmUrl)};
var confirmTimeoutMs=8000;
function doConfirm(attempt){
if(attempt>=3){showSuccess();return;}
fetch(confirmUrl,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({order_id:orderId})})
if(tip){tip.textContent="检测到支付，正在确认…";}
var ctrl=new AbortController();
var tid=setTimeout(function(){ctrl.abort();},confirmTimeoutMs);
fetch(confirmUrl,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({order_id:orderId}),signal:ctrl.signal})
.then(function(r){return r.json();})
.then(function(cd){
clearTimeout(tid);
if(cd&&cd.ok){showSuccess();}
else{setTimeout(function(){doConfirm(attempt+1);},800);}
})
.catch(function(){setTimeout(function(){doConfirm(attempt+1);},800);});
.catch(function(){clearTimeout(tid);if(tip){tip.textContent="确认失败，重试中…";}setTimeout(function(){doConfirm(attempt+1);},800);});
}
function check(){
fetch("/api/pay/status?order_id="+encodeURIComponent(orderId),{cache:"no-store"})
fetch("/api/pay/status?order_id="+encodeURIComponent(orderId),{cache:"no-store",credentials:"same-origin"})
.then(function(r){return r.json();})
.then(function(d){
if(d.ok&&d.paid){doConfirm(0);return;}
setTimeout(check,500);
if(d&&d.paid){doConfirm(0);return;}
setTimeout(check,300);
})
.catch(function(){setTimeout(check,500);});
.catch(function(){setTimeout(check,1000);});
}
setTimeout(check,500);
var manualBtn=document.createElement("button");
manualBtn.textContent="支付完成？点此手动检查";
manualBtn.style.cssText="margin-top:12px;padding:8px 16px;font-size:13px;color:#64748b;background:#f1f5f9;border:none;border-radius:8px;cursor:pointer";
manualBtn.onclick=function(){
manualBtn.disabled=true;
manualBtn.textContent="检查中…";
fetch("/api/pay/status?order_id="+encodeURIComponent(orderId),{cache:"no-store",credentials:"same-origin"})
.then(function(r){return r.json();})
.then(function(d){if(d&&d.paid){doConfirm(0);}else{manualBtn.disabled=false;manualBtn.textContent="支付完成？点此手动检查";}})
.catch(function(){manualBtn.disabled=false;manualBtn.textContent="检查失败，重试";});
};
if(tip&&tip.parentNode){tip.parentNode.appendChild(manualBtn);}
setTimeout(check,300);
})();
</script>
</body></html>`;
@@ -401,8 +394,7 @@ export async function POST(request: NextRequest) {
const rawOrderId = String(resData.order_id || created.orderId).trim();
const html = buildQrHtml(imgSrc, safeReturnUrl, rawOrderId, {
channel: resData.channel || "wxpay",
successDesc: "支付成功，申请已提交",
confirmUrl: "/api/salon/complete-order",
confirmUrl: "/api/pay/complete-order",
});
const response = new NextResponse(html, {
status: 200,

31
app/api/pay/status/route.ts
View File

@@ -1,5 +1,7 @@
import { NextRequest, NextResponse } from "next/server";
import { getApiUrlFromRequest, getPaymentConfig } from "@/config/services.config";
import { queryXorPayOrderStatus } from "@/app/lib/xorpayStatus";
import { queryZPayOrderStatus } from "@/app/lib/zpayStatus";
function resolvePayApiUrl(request: NextRequest): string {
const config = getPaymentConfig();
@@ -8,6 +10,10 @@ function resolvePayApiUrl(request: NextRequest): string {
return (getApiUrlFromRequest(hostHeader) || config.apiUrl).replace(/\/$/, "");
}
/**
* 支付状态查询：salonapi 优先，失败时直接向 zpay/xorpay 查询兜底
* 参考 nomadvip，保证本地无回调时也能检测到支付
*/
export async function GET(request: NextRequest) {
const orderId = request.nextUrl.searchParams.get("order_id");
if (!orderId) {
@@ -20,27 +26,36 @@ export async function GET(request: NextRequest) {
const hostHeader =
request.headers.get("host") || request.headers.get("x-forwarded-host");
const apiUrl = resolvePayApiUrl(request);
const url = `${apiUrl}/salon/order_status?order_id=${encodeURIComponent(orderId)}`;
const salonUrl = `${apiUrl}/salon/order_status?order_id=${encodeURIComponent(orderId)}`;
// 并行查询 salonapi、xorpay、zpay，任一返回 paid 即立即返回，避免串行阻塞
const salonPaid = (async () => {
try {
const controller = new AbortController();
const timeout = setTimeout(() => controller.abort(), 3000);
const res = await fetch(url, {
const res = await fetch(salonUrl, {
cache: "no-store",
signal: controller.signal,
}).finally(() => clearTimeout(timeout));
const data = await res.json().catch(() => ({}));
const paid = !!data?.paid;
if (paid) {
return NextResponse.json({ ok: true, paid: true });
}
return !!data?.paid;
} catch (error) {
console.log(
"[pay/status] error order_id=%s error=%s",
console.warn(
"[pay/status] salonapi order_id=%s url=%s error=%s",
orderId,
salonUrl,
error instanceof Error ? error.message : String(error)
);
return false;
}
})();
const xorpayPaid = queryXorPayOrderStatus(orderId, 5000).then((r) => r?.paid ?? false);
const zpayPaid = queryZPayOrderStatus(orderId, 5000).then((r) => r?.paid ?? false);
const [salon, xorpay, zpay] = await Promise.all([salonPaid, xorpayPaid, zpayPaid]);
if (salon || xorpay || zpay) {
return NextResponse.json({ ok: true, paid: true });
}
return NextResponse.json({ ok: true, paid: false });
}

214
app/components/HomeContent.tsx Normal file
View File

@@ -0,0 +1,214 @@
"use client";
import { useEffect, useState } from "react";
import Link from "next/link";
import HeroSection from "./HeroSection";
import MyRegistrationStatus from "./MyRegistrationStatus";
import SessionCard from "./SessionCard";
import HostLink from "./HostLink";
import Footer from "./Footer";
import Header from "./Header";
import { getSessionsWithDates, HOSTS } from "@/config/home.config";
interface HomeContentProps {
initialVolunteer: { nickname: string; avatar?: string; xiaohongshu_url?: string } | null;
}
const VOLUNTEER_BIO = "签到、茶歇准备、拍照摄像。";
export default function HomeContent({ initialVolunteer }: HomeContentProps) {
const [volunteer, setVolunteer] = useState(initialVolunteer);
useEffect(() => {
fetch("/api/join/volunteers")
.then((r) => r.json())
.then((d) => d?.volunteer && setVolunteer(d.volunteer))
.catch(() => {});
}, []);
return (
<div className="min-h-screen bg-[#faf8f5] dark:bg-stone-950 pb-20 sm:pb-12">
<Header />
<HeroSection />
<main className="max-w-[900px] mx-auto px-4 sm:px-6 md:px-8 py-8 sm:py-12 md:py-14 space-y-10 sm:space-y-14">
<MyRegistrationStatus />
{/* 是什么 / 不是什么 - 小红书风格 */}
<section>
<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 overflow-hidden">
<div className="grid sm:grid-cols-2 gap-6 sm:gap-8">
<div>
<h3 className="text-base sm:text-lg font-semibold text-stone-800 dark:text-stone-100 mb-3 flex items-center gap-2">
<span className="text-amber-600 dark:text-amber-400">✓</span> 是什么 · 适合谁
</h3>
<ul className="space-y-1.5 text-sm text-stone-600 dark:text-stone-400">
<li>· 周末同城轻社交，loft民宿见～</li>
<li>· 4–8 人小圈子，聊得来就多聊</li>
<li>· 第一次来也完全 OK</li>
</ul>
</div>
<div>
<h3 className="text-base sm:text-lg font-semibold text-stone-800 dark:text-stone-100 mb-3 flex items-center gap-2">
<span className="text-stone-400 dark:text-stone-500">✗</span> 不是什么 · 不适合谁
</h3>
<ul className="space-y-1.5 text-sm text-stone-600 dark:text-stone-400">
<li>· 不是相亲局、卖课、强制破冰</li>
<li>· 只想线上聊、想加所有人微信的 pass</li>
<li>· 想销售引流、不尊重边界的 pass</li>
</ul>
</div>
</div>
</div>
</section>
{/* 报名流程 */}
<section>
<h2 className="text-lg sm:text-xl font-semibold text-stone-800 dark:text-stone-100 mb-4 sm:mb-5 flex items-center gap-2">
<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 grid-cols-3 gap-3 sm:gap-6 md:gap-8">
<div className="flex flex-col items-center text-center">
<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-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-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>
</section>
{/* 信任标签 */}
<div className="flex flex-wrap justify-center gap-x-6 gap-y-1.5 sm:gap-x-8 text-xs sm:text-sm text-stone-600 dark:text-stone-400">
<span>📍 公开场地</span>
<span>👥 4–8 人</span>
<span>✍️ 填表申请</span>
<span>☕ 茶歇</span>
</div>
{/* 本周场次 */}
<section>
<h2 className="text-lg sm:text-xl font-semibold text-stone-800 dark:text-stone-100 mb-4 sm:mb-5 flex items-center gap-2">
<span>📅</span> 本周活动
</h2>
<div className="grid gap-3 sm:gap-4 sm:grid-cols-2">
{getSessionsWithDates().map((s, i) => (
<SessionCard key={s.id} session={s} index={i} />
))}
</div>
</section>
{/* 活动亮点 */}
<section>
<h2 className="text-lg sm:text-xl font-semibold text-stone-800 dark:text-stone-100 mb-4 sm:mb-5 flex items-center gap-2">
<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-2 gap-4 sm:gap-6">
{[
{ icon: "😌", title: "氛围轻松", desc: "loft民宿里的小聚，不用尬聊，聊得来就多聊～" },
{ icon: "🛡️", title: "安全靠谱", desc: "公开场地，地址提前说。尊重边界，不追问隐私。" },
{ icon: "👍", title: "第一次也 OK", desc: "很多人都是第一次来，小圈子人数可控～" },
{ icon: "✍️", title: "填表就行", desc: "不用注册、不用先付，填个表就好。" },
].map((item) => (
<div key={item.title} className="flex gap-2.5 sm:gap-3">
<span className="text-xl sm:text-2xl shrink-0">{item.icon}</span>
<div>
<p className="font-medium text-stone-800 dark:text-stone-100 text-sm sm:text-base">{item.title}</p>
<p className="text-xs sm:text-sm text-stone-500 dark:text-stone-400 mt-0.5 leading-relaxed">{item.desc}</p>
</div>
</div>
))}
</div>
</div>
</section>
{/* 发起人 + 志愿者（有志愿者时替换 host-2 卡片） */}
<section>
<h2 className="text-lg sm:text-xl font-semibold text-stone-800 dark:text-stone-100 mb-4 sm:mb-5 flex items-center gap-2">
<span>👤</span> 发起人
</h2>
<div className="grid sm:grid-cols-2 gap-3 sm:gap-4 mb-4">
{HOSTS.map((host) => {
const isHost2 = host.id === "host-2";
const displayHost = isHost2 && volunteer
? { ...host, name: volunteer.nickname, avatar: volunteer.avatar || host.avatar, bio: VOLUNTEER_BIO }
: host;
return (
<HostLink
key={host.id}
host={displayHost}
noLink
{...(isHost2 && !volunteer && {
ctaText: "立即申请",
showFreeBadge: true,
})}
/>
);
})}
</div>
</section>
{/* FAQ */}
<section id="faq">
<h2 className="text-lg sm:text-xl font-semibold text-stone-800 dark:text-stone-100 mb-4 sm:mb-5 flex items-center gap-2">
<span>❓</span> 常见问题
</h2>
<div className="space-y-2 sm:space-y-3">
{[
{ q: "提交后多久会收到确认？", a: "活动前 1–2 天会联系，微信/短信确认。不匹配不会反复打扰～", icon: "⏱️" },
{ q: "第一次参加可以吗？", a: "可以呀！很多人都是第一次来。4–8 人小圈子、公开场地，聊得来就多聊～", icon: "✨" },
{ q: "临时有事怎么办？", a: "随时可以退出，提前说一声就行～", icon: "🔄" },
].map((faq) => (
<details
key={faq.q}
className="group rounded-lg sm:rounded-xl bg-white dark:bg-stone-900/80 border border-stone-200/80 dark:border-stone-700/80 overflow-hidden"
>
<summary className="flex items-center gap-2.5 sm:gap-3 p-3 sm:p-4 cursor-pointer list-none [&::-webkit-details-marker]:hidden select-none">
<span className="text-base sm:text-lg shrink-0">{faq.icon}</span>
<p className="font-medium text-stone-800 dark:text-stone-100 text-xs sm:text-sm flex-1">{faq.q}</p>
<span className="shrink-0 text-stone-400 text-xs transition-transform duration-200 group-open:rotate-180">▼</span>
</summary>
<div className="px-3 pb-3 sm:px-4 sm:pb-4 pt-0 flex gap-2.5 sm:gap-3">
<span className="w-[1.25rem] sm:w-[1.5rem] shrink-0" aria-hidden />
<p className="text-xs sm:text-sm text-stone-500 dark:text-stone-400 leading-relaxed">{faq.a}</p>
</div>
</details>
))}
</div>
</section>
{/* CTA - 移动端隐藏，只保留底部悬浮去报名 */}
<section className="pt-2 sm:pt-4 hidden sm:block">
<Link
href="/join"
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>
<p className="mt-3 text-center text-xs sm:text-sm text-stone-500 dark:text-stone-400">
先填表，我们会根据场次联系你～
</p>
</section>
</main>
{/* 移动端悬浮 CTA */}
<div className="fixed bottom-0 left-0 right-0 p-3 sm:p-4 bg-white/95 dark:bg-stone-900/95 backdrop-blur border-t border-stone-200 dark:border-stone-800 sm:hidden z-50 safe-area-pb">
<Link
href="/join"
className="block w-full bg-amber-600 hover:bg-amber-700 text-white text-center py-3 rounded-xl font-medium text-sm"
>
去报名
</Link>
</div>
<Footer />
</div>
);
}

41
app/components/HostLink.tsx
View File

@@ -8,14 +8,20 @@ interface HostLinkProps {
/** 志愿者招募：无审核通过时显示「立即申请」+ 免费标识 */
ctaText?: string;
showFreeBadge?: boolean;
/** 卡片有 link 样式但不可点击跳转 */
noLink?: boolean;
}
/** 移动端优先尝试唤醒小红书 app，PC 新窗口打开 */
export default function HostLink({ host, ctaText, showFreeBadge }: HostLinkProps) {
/** 移动端优先尝试唤醒小红书 app，PC 新窗口打开。noLink 时仅展示，不跳转 */
export default function HostLink({ host, ctaText, showFreeBadge, noLink }: 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 (noLink) {
e.preventDefault();
return;
}
if (!isXiaohongshu || typeof href !== "string") return;
const isMobile = /Android|iPhone|iPad|iPod|webOS|Mobile/i.test(navigator.userAgent);
if (isMobile) {
@@ -27,14 +33,9 @@ export default function HostLink({ host, ctaText, showFreeBadge }: HostLinkProps
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"
>
const cardClassName = "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";
const cardContent = (
<>
<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>
@@ -52,6 +53,26 @@ export default function HostLink({ host, ctaText, showFreeBadge }: HostLinkProps
{ctaText ?? "查看主页"} →
</span>
</div>
</>
);
if (noLink) {
return (
<div className={`${cardClassName} cursor-default`}>
{cardContent}
</div>
);
}
return (
<Link
href={href}
target={href.startsWith("http") ? "_blank" : undefined}
rel={href.startsWith("http") ? "noopener noreferrer" : undefined}
onClick={handleClick}
className={cardClassName}
>
{cardContent}
</Link>
);
}

154
app/components/MyRegistrationStatus.tsx Normal file
View File

@@ -0,0 +1,154 @@
"use client";
import { useEffect, useState } from "react";
import Image from "next/image";
import Link from "next/link";
const WECHAT_STORAGE_KEY = "salon_join_wechat";
interface RecordData {
id?: string;
wechatId?: string;
nickname?: string;
media?: string;
is_volunteer?: boolean;
}
interface UserRecord {
hasRecord: boolean;
record: RecordData | null;
isComplete: boolean;
isApproved: boolean;
isRejected: boolean;
vip: boolean;
}
function getStatusLabel(data: UserRecord): string {
if (data.isComplete || (data.vip && data.hasRecord)) return "报名成功";
if (data.isRejected) return "审核拒绝";
if (data.isApproved) return "审核通过";
return "审核中";
}
function getStatusColor(status: string): string {
if (status === "报名成功") return "bg-emerald-50 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300";
if (status === "审核通过") return "bg-emerald-50 dark:bg-emerald-900/30 text-emerald-600 dark:text-emerald-400";
if (status === "审核拒绝") return "bg-red-50 dark:bg-red-900/30 text-red-600 dark:text-red-400";
return "bg-amber-50 dark:bg-amber-900/30 text-amber-600 dark:text-amber-400";
}
export default function MyRegistrationStatus() {
const [data, setData] = useState<UserRecord | null>(null);
const [loading, setLoading] = useState(true);
const fetchStatus = () => {
if (typeof window === "undefined") return;
try {
const stored = localStorage.getItem(WECHAT_STORAGE_KEY);
const wechatId = (stored || "").trim();
if (!wechatId) {
setLoading(false);
setData(null);
return;
}
setLoading(true);
fetch(`/api/join/by-wechat?wechat_id=${encodeURIComponent(wechatId)}`)
.then((r) => r.json())
.then((d) => {
if (d?.hasRecord) {
const rec = d.record ?? null;
setData({
hasRecord: !!d.hasRecord,
record: rec ? { ...rec, wechatId: rec.wechatId || wechatId } : null,
isComplete: !!d.isComplete,
isApproved: !!d.isApproved,
isRejected: !!d.isRejected,
vip: !!d.vip,
});
} else {
setData(null);
}
})
.catch(() => setData(null))
.finally(() => setLoading(false));
} catch {
setLoading(false);
}
};
useEffect(() => {
if (typeof window === "undefined") return;
let cancelled = false;
fetchStatus();
const onUpdate = () => {
if (!cancelled) fetchStatus();
};
window.addEventListener("vip:updated", onUpdate);
return () => {
cancelled = true;
window.removeEventListener("vip:updated", onUpdate);
};
}, []);
if (loading || !data?.hasRecord || !data.record) return null;
const rec = data.record;
const status = getStatusLabel(data);
const statusColor = getStatusColor(status);
return (
<section className="mb-8 sm:mb-10">
<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 overflow-hidden">
<h3 className="text-sm font-medium text-stone-500 dark:text-stone-400 mb-3 flex items-center gap-2">
<span>👤</span> 我的报名
</h3>
<div className="flex items-center gap-3 sm:gap-4">
<div className="relative shrink-0">
<div className="relative w-12 h-12 sm:w-14 sm:h-14 rounded-full overflow-hidden border-2 border-stone-200 dark:border-stone-600">
{rec.media ? (
<Image
src={rec.media}
alt=""
fill
sizes="56px"
className="object-cover"
unoptimized
/>
) : (
<div className="w-full h-full flex items-center justify-center bg-amber-100 dark:bg-amber-900/40 text-xl sm:text-2xl">
👤
</div>
)}
</div>
{rec.is_volunteer && (
<span className="absolute -bottom-1 left-1/2 -translate-x-1/2 px-1.5 py-0.5 rounded text-[10px] font-medium bg-amber-500 text-white whitespace-nowrap">
志愿者
</span>
)}
</div>
<div className="flex-1 min-w-0">
<p className="font-semibold text-stone-800 dark:text-stone-100 truncate">
{rec.nickname || "—"}
</p>
{rec.wechatId && (
<p className="text-xs text-stone-500 dark:text-stone-400 font-mono truncate mt-0.5">
微信号: {rec.wechatId}
</p>
)}
<span
className={`inline-block mt-2 px-2.5 py-1 rounded-lg text-xs font-medium ${statusColor}`}
>
{status}
</span>
</div>
<Link
href="/join"
className="shrink-0 text-sm font-medium text-amber-600 dark:text-amber-400 hover:text-amber-700 dark:hover:text-amber-300"
>
查看详情 →
</Link>
</div>
</div>
</section>
);
}

182
app/join/page.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import { useState, useEffect, type FormEvent } from "react";
import { useState, useEffect, useRef, type FormEvent } from "react";
import Link from "next/link";
import ThemeToggle from "../components/ThemeToggle";
import { DIGITAL_NOMAD_WECHAT_QR } from "@/config/home.config";
@@ -11,9 +11,21 @@ const ageRangeOptions = ["18-22", "23-27", "28-32", "33-37", "38+"];
/** 微信号仅允许英文字母、数字、下划线、连字符 */
const WECHAT_REGEX = /^[a-zA-Z0-9_-]*$/;
const WECHAT_STORAGE_KEY = "salon_join_wechat";
interface UserRecord {
hasRecord: boolean;
record: { user_id?: string; amount?: number; order_id?: string; vip?: boolean } | null;
record: {
id?: string;
wechatId?: string;
user_id?: string;
nickname?: string;
media?: string;
amount?: number;
order_id?: string;
vip?: boolean;
is_volunteer?: boolean;
} | null;
isComplete: boolean;
isWechatFriend: boolean;
isApproved: boolean;
@@ -21,6 +33,39 @@ interface UserRecord {
vip: boolean;
}
function UserProfileCard({ record, showVolunteerTag }: { record: UserRecord["record"]; showVolunteerTag?: boolean }) {
if (!record || (!record.nickname && !record.media && !record.wechatId)) return null;
const isVolunteer = showVolunteerTag && record.is_volunteer;
return (
<div className="mt-6 flex items-center justify-center gap-3 rounded-xl bg-stone-50 dark:bg-stone-800/50 px-4 py-3">
<div className="relative shrink-0">
{record.media ? (
<img
src={record.media}
alt=""
className="h-12 w-12 rounded-full object-cover border border-stone-200 dark:border-stone-600"
/>
) : (
<div className="flex h-12 w-12 items-center justify-center rounded-full bg-amber-100 dark:bg-amber-900/40 text-xl">
👤
</div>
)}
{isVolunteer && (
<span className="absolute -bottom-1 left-1/2 -translate-x-1/2 px-1.5 py-0.5 rounded text-[10px] font-medium bg-amber-500 text-white whitespace-nowrap">
志愿者
</span>
)}
</div>
<div className="text-left">
<p className="font-medium text-stone-800 dark:text-stone-100">{record.nickname || "—"}</p>
{record.wechatId && (
<p className="text-xs text-stone-500 dark:text-stone-400 font-mono">微信号: {record.wechatId}</p>
)}
</div>
</div>
);
}
export default function JoinPage() {
const [wechat, setWechat] = useState("");
const [userRecord, setUserRecord] = useState<UserRecord | null>(null);
@@ -48,9 +93,9 @@ export default function JoinPage() {
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 [fromPaid, setFromPaid] = useState(false);
const [fromVolunteer, setFromVolunteer] = useState(false);
const initialWechatCheckDone = useRef(false);
const fetchByWechat = async (w: string) => {
if (!w.trim()) return;
@@ -79,6 +124,11 @@ export default function JoinPage() {
const w = wechat.trim();
if (!w) {
setUserRecord(null);
try {
typeof window !== "undefined" && localStorage.removeItem(WECHAT_STORAGE_KEY);
} catch {
/* ignore */
}
return;
}
if (!WECHAT_REGEX.test(w)) {
@@ -86,6 +136,11 @@ export default function JoinPage() {
return;
}
setError(null);
try {
typeof window !== "undefined" && localStorage.setItem(WECHAT_STORAGE_KEY, w);
} catch {
/* ignore */
}
fetchByWechat(w);
};
@@ -181,7 +236,7 @@ export default function JoinPage() {
intro: "",
age_range: ageRange,
city: "深圳",
session: "digital-nomad",
session: fromVolunteer ? "volunteer" : "digital-nomad",
education: "",
graduation_year: "",
agree_rules: true,
@@ -191,6 +246,8 @@ export default function JoinPage() {
why_join: "",
region: "",
available_time: "",
qualify, // 女性且小红书帖子>10 时自动通过审核
is_volunteer: fromVolunteer,
}),
});
const data = await res.json();
@@ -199,6 +256,8 @@ export default function JoinPage() {
}
setQualify(qualify);
setSubmitted(true);
// 提交成功后立即按微信号查询，用真实记录状态展示（审核中/审核通过等），避免刷新后状态不一致
fetchByWechat(wechat.trim());
} catch (err) {
setError(err instanceof Error ? err.message : "网络错误，请重试");
} finally {
@@ -206,6 +265,32 @@ export default function JoinPage() {
}
};
const clearWechatAndRecord = () => {
setUserRecord(null);
setWechat("");
setXiaohongshuUrl("");
setProfession("");
setGender("");
setAgeRange("");
setAgreeRules(true);
setUrlError(null);
setProfile(null);
setValidating(false);
setSubmitted(false);
setSubmitting(false);
setQualify(false);
setError(null);
try {
if (typeof window !== "undefined") {
localStorage.removeItem(WECHAT_STORAGE_KEY);
localStorage.removeItem("join_pay_order");
document.cookie = "join_pay_order=; path=/; max-age=0";
}
} catch {
/* ignore */
}
};
const handlePayNow = () => {
const rec = userRecord?.record;
if (!rec?.user_id) return;
@@ -221,10 +306,27 @@ export default function JoinPage() {
};
useEffect(() => {
if (typeof window === "undefined") return;
const params = new URLSearchParams(window.location.search);
setFromPaid(params.get("paid") === "1");
setFromVolunteer(params.get("volunteer") === "1");
if (!initialWechatCheckDone.current) {
initialWechatCheckDone.current = true;
try {
const stored = localStorage.getItem(WECHAT_STORAGE_KEY);
const w = (stored || "").trim();
if (w && WECHAT_REGEX.test(w)) {
setWechat(w);
fetchByWechat(w);
}
} catch {
/* ignore */
}
}
setHydrated(true);
}, []);
// 成功报名：已支付 或 支付成功跳转 或 (好友且vip)
// 成功报名：已支付 或 支付成功跳转 或 (好友且vip) —— 仅以数据库状态为准，不依赖 submitted
const showSuccess = fromPaid || (userRecord?.hasRecord && userRecord.isComplete) || (userRecord?.hasRecord && userRecord.isWechatFriend && userRecord.vip);
// 有数据、非好友 → 只展示状态页：审核中/审核通过/审核拒绝
@@ -233,18 +335,20 @@ export default function JoinPage() {
// 有数据、好友、非vip、未支付 → 支付状态页
const showPayPage = userRecord?.hasRecord && userRecord.isWechatFriend && !userRecord.vip && !userRecord.isComplete;
if (submitted || showSuccess) {
if (showSuccess) {
const baseRecord = userRecord?.record ?? null;
const displayRecord = baseRecord
? { ...baseRecord, wechatId: baseRecord.wechatId || wechat || undefined }
: (wechat ? { wechatId: wechat } : null);
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">
<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 className="mt-2 text-sm text-stone-500 dark:text-stone-400">
{displayRecord?.is_volunteer ? "要提前到场，金额可退" : "感谢报名，活动前会联系你确认～"}
</p>
<UserProfileCard record={displayRecord} showVolunteerTag />
<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>
@@ -281,18 +385,16 @@ export default function JoinPage() {
<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>
<UserProfileCard record={userRecord?.record ?? null} showVolunteerTag />
{status !== "approved" && (
<button
type="button"
onClick={() => { setUserRecord(null); setWechat(""); }}
onClick={clearWechatAndRecord}
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>
@@ -314,7 +416,14 @@ export default function JoinPage() {
<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>
<p className="mt-2 text-sm text-stone-500 dark:text-stone-400">1元/人，用于覆盖民宿/场地基础成本</p>
<UserProfileCard record={userRecord?.record ?? null} showVolunteerTag />
{userRecord?.record?.is_volunteer && (
<p className="mt-3 text-xs text-emerald-600 dark:text-emerald-400">
🌿 志愿者预付活动结束可退<br />
用于防止临时爽约
</p>
)}
<button
type="button"
onClick={handlePayNow}
@@ -322,13 +431,6 @@ export default function JoinPage() {
>
立即报名
</button>
<button
type="button"
onClick={() => { setUserRecord(null); setWechat(""); }}
className="mt-3 text-sm text-stone-500 hover:text-stone-700"
>
更换微信号
</button>
</div>
</div>
</div>
@@ -419,6 +521,16 @@ export default function JoinPage() {
</div>
</div>
<div className="px-4 sm:px-6 py-5 sm:py-6">
{fromVolunteer && (
<div className="mb-6 rounded-xl bg-amber-50 dark:bg-amber-900/20 p-4">
<h3 className="font-semibold text-stone-800 dark:text-stone-100 text-sm mb-2">🙌 志愿者工作内容</h3>
<ul className="text-xs sm:text-sm text-stone-600 dark:text-stone-400 space-y-1">
<li>· 签到：现场签到、引导参与者</li>
<li>· 茶歇准备：协助布置茶歇、收拾整理</li>
<li>· 拍照摄像：记录活动现场，分享精彩瞬间</li>
</ul>
</div>
)}
<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>
@@ -460,6 +572,14 @@ export default function JoinPage() {
<option value="男">男</option>
</select>
</div>
{fromVolunteer && (
<div>
<label className="flex items-center gap-3 cursor-default">
<input type="checkbox" checked readOnly disabled className="rounded border-stone-300 text-amber-600" />
<span className="text-sm font-medium text-stone-700 dark:text-stone-300">🙌 志愿者</span>
</label>
</div>
)}
<div className="hidden">
<select value={ageRange} onChange={(e) => setAgeRange(e.target.value)} className="form-input">
<option value="">请选择</option>
@@ -476,14 +596,14 @@ export default function JoinPage() {
<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">
{submitting ? "🔄 提交中…" : "📤 提交报名"}
{submitting ? "🔄 提交中…" : fromVolunteer ? "📤 提交志愿者申请" : "📤 提交报名"}
</button>
</form>
</div>
</div>
<div className="mt-4 text-center">
<button type="button" onClick={() => { setUserRecord(null); setWechat(""); }} className="text-xs sm:text-sm text-stone-500 hover:text-amber-600">
更换微信号
<button type="button" onClick={clearWechatAndRecord} 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>

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

@@ -3,6 +3,8 @@
import { useState, useEffect } from "react";
import Link from "next/link";
const WECHAT_STORAGE_KEY = "salon_join_wechat";
function clearPendingOrder(): void {
try {
localStorage.removeItem("join_pay_order");
@@ -14,11 +16,12 @@ export default function JoinPaidPage() {
const [completeStatus, setCompleteStatus] = useState<"pending" | "success" | "error">("pending");
const [errorDetail, setErrorDetail] = useState<string | null>(null);
const [countdown, setCountdown] = useState<number | null>(null);
const [wechatId, setWechatId] = useState<string | null>(null);
useEffect(() => {
let cancelled = false;
const tryComplete = async (orderId: string): Promise<{ ok: boolean; error?: string }> => {
const tryComplete = async (orderId: string): Promise<{ ok: boolean; error?: string; record?: { wechatId?: string } }> => {
const r = await fetch("/api/salon/complete-order", {
method: "POST",
headers: { "Content-Type": "application/json" },
@@ -40,7 +43,7 @@ export default function JoinPaidPage() {
}
window.dispatchEvent(new CustomEvent("auth:updated"));
window.dispatchEvent(new CustomEvent("vip:updated"));
return { ok: true };
return { ok: true, record: d?.record };
};
const run = async () => {
@@ -73,7 +76,10 @@ export default function JoinPaidPage() {
const result = await tryComplete(orderId);
if (result.ok) {
clearPendingOrder();
if (!cancelled) setCompleteStatus("success");
if (!cancelled) {
setCompleteStatus("success");
if (result.record?.wechatId) setWechatId(result.record.wechatId);
}
return;
}
lastError = result.error || "unknown";
@@ -94,6 +100,15 @@ export default function JoinPaidPage() {
return () => { cancelled = true; };
}, []);
useEffect(() => {
try {
const stored = localStorage.getItem(WECHAT_STORAGE_KEY)?.trim();
if (stored) setWechatId(stored);
} catch {
/* ignore */
}
}, []);
const COUNTDOWN_SECONDS = 5;
useEffect(() => {
if (completeStatus !== "success") return;
@@ -123,12 +138,15 @@ export default function JoinPaidPage() {
<p className="mt-3 text-slate-500 dark:text-slate-400">
{completeStatus === "success"
? countdown != null
? `${countdown} 秒后跳转报名页`
? `${countdown} 秒后跳转报名成功页`
: "感谢您的支持"
: completeStatus === "error"
? "请稍后刷新页面重试"
: "正在确认支付状态…"}
</p>
{wechatId && (
<p className="mt-2 text-xs text-slate-400 dark:text-slate-500 font-mono">微信号: {wechatId}</p>
)}
{completeStatus === "error" && errorDetail && (
<p className="mt-1 text-xs text-slate-400 dark:text-slate-500">{errorDetail}</p>
)}
@@ -141,12 +159,18 @@ export default function JoinPaidPage() {
刷新重试
</button>
)}
{completeStatus === "pending" ? (
<span className="mt-8 inline-flex items-center gap-2 rounded-full bg-stone-200 dark:bg-stone-700 px-8 py-3 font-semibold text-stone-400 dark:text-stone-500 cursor-not-allowed">
← 查看报名状态
</span>
) : (
<Link
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>
);

3
app/lib/env.ts
View File

@@ -1,5 +1,6 @@
const isDev = process.env.NODE_ENV === "development";
/** 前端站点地址。线上 nomadyt.com，开发 localhost:3002 */
export const SITE_URL =
process.env.NEXT_PUBLIC_SITE_URL ||
(isDev ? "http://localhost:3002" : "http://localhost:3002");
(isDev ? "http://localhost:3002" : "https://nomadyt.com");

8
app/lib/salonApi.ts
View File

@@ -28,7 +28,7 @@ function getApiCandidates(request: NextRequest): string[] {
return urls.filter((u, i) => u && urls.indexOf(u) === i);
}
const TIMEOUT_MS = 20000;
const TIMEOUT_MS = 15000;
export async function postSalonApi(
request: NextRequest,
@@ -67,16 +67,18 @@ export async function postSalonApi(
export async function getSalonApi(
request: NextRequest,
path: string
path: string,
options?: { timeoutMs?: number }
): Promise<{ status: number; data: unknown }> {
const candidates = getApiCandidates(request);
if (!candidates.length) throw new Error("PAYMENT_API_URL 未配置");
const timeoutMs = options?.timeoutMs ?? TIMEOUT_MS;
let lastError: unknown = null;
for (const apiUrl of candidates) {
const url = `${apiUrl}${path}`;
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), TIMEOUT_MS);
const timeoutId = setTimeout(() => controller.abort(), timeoutMs);
try {
const res = await fetch(url, { cache: "no-store", signal: controller.signal });
clearTimeout(timeoutId);

21
app/lib/volunteers.ts Normal file
View File

@@ -0,0 +1,21 @@
import { headers } from "next/headers";
/** 服务端获取第一个志愿者，用于替换发起人志愿者卡片。调用内部 API（API 优先走 salonapi 后端） */
export async function getVolunteer(): Promise<{
nickname: string;
avatar?: string;
xiaohongshu_url?: string;
} | null> {
try {
const headersList = await headers();
const host = headersList.get("host") || headersList.get("x-forwarded-host") || "localhost:3002";
const proto = headersList.get("x-forwarded-proto") || (host.includes("localhost") ? "http" : "https");
const base = `${proto}://${host}`;
const res = await fetch(`${base}/api/join/volunteers`, { cache: "no-store" });
const data = await res.json();
const v = data?.volunteer;
return v && typeof v === "object" && v.nickname ? v : null;
} catch {
return null;
}
}

76
app/lib/xorpayStatus.ts Normal file
View File

@@ -0,0 +1,76 @@
/**
* XorPay 订单状态直接查询（兜底）
* salonapi 不可用时，前端直接向 xorpay 查询，保证本地支付能检测到
*/
import { createHash } from "crypto";
/** 与 salonapi 保持一致，用于直接查询 xorpay 兜底 */
const XORPAY_AID = process.env.XORPAY_AID || process.env.NEXT_PUBLIC_XORPAY_AID || "8220";
const XORPAY_SECRET =
process.env.XORPAY_SECRET || process.env.NEXT_PUBLIC_XORPAY_SECRET || "afcacd99570945f88de62624aaa3578e";
const XORPAY_QUERY_URL =
process.env.XORPAY_QUERY_URL || process.env.NEXT_PUBLIC_XORPAY_QUERY_URL || "https://xorpay.com/api/query2";
const XORPAY_QUERY_TIMEOUT_MS = Number(
process.env.XORPAY_QUERY_TIMEOUT_MS || 5000
);
export type XorPayStatusResult = {
ok: boolean;
paid: boolean;
status?: string;
payPrice?: string;
error?: string;
url: string;
};
function buildXorPaySign(orderId: string): string {
return createHash("md5")
.update(`${orderId}${XORPAY_SECRET}`, "utf8")
.digest("hex")
.toLowerCase();
}
export async function queryXorPayOrderStatus(
orderId: string,
timeoutMs = XORPAY_QUERY_TIMEOUT_MS
): Promise<XorPayStatusResult | null> {
const normalizedOrderId = orderId.trim();
if (!normalizedOrderId || !XORPAY_AID || !XORPAY_SECRET) {
return null;
}
const url = new URL(
`${XORPAY_QUERY_URL.replace(/\/$/, "")}/${encodeURIComponent(XORPAY_AID)}`
);
url.searchParams.set("order_id", normalizedOrderId);
url.searchParams.set("sign", buildXorPaySign(normalizedOrderId));
try {
const controller = new AbortController();
const timeout = setTimeout(() => controller.abort(), timeoutMs);
const res = await fetch(url.toString(), {
cache: "no-store",
signal: controller.signal,
}).finally(() => clearTimeout(timeout));
const data = await res.json().catch(() => ({}));
const status = String(data?.status ?? "")
.trim()
.toLowerCase();
return {
ok: res.ok,
paid: res.ok && (status === "payed" || status === "success"),
status,
payPrice: String(data?.pay_price ?? data?.price ?? "").trim() || undefined,
url: url.toString(),
error: res.ok ? undefined : `status=${res.status}`,
};
} catch (error) {
return {
ok: false,
paid: false,
url: url.toString(),
error: error instanceof Error ? error.message : String(error),
};
}
}

68
app/lib/zpayStatus.ts Normal file
View File

@@ -0,0 +1,68 @@
/**
* ZPAY 订单状态直接查询（兜底）
* salonapi 不可用时，前端直接向 zpayz.cn 查询，保证本地支付能检测到
*/
/** 与 salonapi 保持一致，用于直接查询 zpay 兜底 */
const ZPAY_PID = process.env.ZPAY_PID || process.env.NEXT_PUBLIC_ZPAY_PID || "2025121809351743";
const ZPAY_KEY = process.env.ZPAY_KEY || process.env.NEXT_PUBLIC_ZPAY_KEY || "tpEi7wWIWI2kXiYVTpIG6j7it0mjVW89";
const ZPAY_QUERY_URL =
process.env.ZPAY_QUERY_URL || process.env.NEXT_PUBLIC_ZPAY_QUERY_URL || "https://zpayz.cn/api.php";
const ZPAY_QUERY_TIMEOUT_MS = Number(
process.env.ZPAY_QUERY_TIMEOUT_MS || 5000
);
export type ZPayStatusResult = {
ok: boolean;
paid: boolean;
status?: string;
money?: string;
error?: string;
url: string;
};
export async function queryZPayOrderStatus(
orderId: string,
timeoutMs = ZPAY_QUERY_TIMEOUT_MS
): Promise<ZPayStatusResult | null> {
const normalizedOrderId = orderId.trim();
if (!normalizedOrderId || !ZPAY_PID || !ZPAY_KEY) {
return null;
}
const url = new URL(ZPAY_QUERY_URL);
url.searchParams.set("act", "order");
url.searchParams.set("pid", ZPAY_PID);
url.searchParams.set("key", ZPAY_KEY);
url.searchParams.set("out_trade_no", normalizedOrderId);
try {
const controller = new AbortController();
const timeout = setTimeout(() => controller.abort(), timeoutMs);
const res = await fetch(url.toString(), {
cache: "no-store",
signal: controller.signal,
}).finally(() => clearTimeout(timeout));
const data = await res.json().catch(() => ({}));
const code = String(data?.code ?? "").trim();
const status = String(data?.status ?? "").trim();
return {
ok: res.ok,
paid: res.ok && code === "1" && status === "1",
status,
money: String(data?.money ?? "").trim() || undefined,
url: url.toString(),
error:
res.ok && code === "1"
? undefined
: String(data?.msg || `status=${res.status}`),
};
} catch (error) {
return {
ok: false,
paid: false,
url: url.toString(),
error: error instanceof Error ? error.message : String(error),
};
}
}

247
app/page.tsx
View File

@@ -1,243 +1,10 @@
"use client";
import { getVolunteer } from "@/app/lib/volunteers";
import HomeContent from "./components/HomeContent";
import { useEffect, useState } from "react";
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";
export const dynamic = "force-dynamic";
export default function Home() {
const [volunteers, setVolunteers] = useState<{ nickname: string; avatar?: string; xiaohongshu_url?: string }[]>([]);
useEffect(() => {
fetch("/api/join/volunteers")
.then((r) => r.json())
.then((d) => d?.volunteers && setVolunteers(d.volunteers))
.catch(() => {});
}, []);
return (
<div className="min-h-screen bg-[#faf8f5] dark:bg-stone-950 pb-20 sm:pb-12">
<Header />
<HeroSection />
<main className="max-w-[900px] mx-auto px-4 sm:px-6 md:px-8 py-8 sm:py-12 md:py-14 space-y-10 sm:space-y-14">
{/* 是什么 / 不是什么 - 小红书风格 */}
<section>
<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 overflow-hidden">
<div className="grid sm:grid-cols-2 gap-6 sm:gap-8">
<div>
<h3 className="text-base sm:text-lg font-semibold text-stone-800 dark:text-stone-100 mb-3 flex items-center gap-2">
<span className="text-amber-600 dark:text-amber-400">✓</span> 是什么 · 适合谁
</h3>
<ul className="space-y-1.5 text-sm text-stone-600 dark:text-stone-400">
<li>· 周末同城轻社交，loft民宿见～</li>
<li>· 4–8 人小圈子，聊得来就多聊</li>
<li>· 第一次来也完全 OK</li>
</ul>
</div>
<div>
<h3 className="text-base sm:text-lg font-semibold text-stone-800 dark:text-stone-100 mb-3 flex items-center gap-2">
<span className="text-stone-400 dark:text-stone-500">✗</span> 不是什么 · 不适合谁
</h3>
<ul className="space-y-1.5 text-sm text-stone-600 dark:text-stone-400">
<li>· 不是相亲局、卖课、强制破冰</li>
<li>· 只想线上聊、想加所有人微信的 pass</li>
<li>· 想销售引流、不尊重边界的 pass</li>
</ul>
</div>
</div>
</div>
</section>
{/* 报名流程 */}
<section>
<h2 className="text-lg sm:text-xl font-semibold text-stone-800 dark:text-stone-100 mb-4 sm:mb-5 flex items-center gap-2">
<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 grid-cols-3 gap-3 sm:gap-6 md:gap-8">
<div className="flex flex-col items-center text-center">
<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-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-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>
</section>
{/* 信任标签 */}
<div className="flex flex-wrap justify-center gap-x-6 gap-y-1.5 sm:gap-x-8 text-xs sm:text-sm text-stone-600 dark:text-stone-400">
<span>📍 公开场地</span>
<span>👥 4–8 人</span>
<span>✍️ 填表申请</span>
<span>☕ 茶歇</span>
</div>
{/* 本周场次 */}
<section>
<h2 className="text-lg sm:text-xl font-semibold text-stone-800 dark:text-stone-100 mb-4 sm:mb-5 flex items-center gap-2">
<span>📅</span> 本周活动
</h2>
<div className="grid gap-3 sm:gap-4 sm:grid-cols-2">
{getSessionsWithDates().map((s, i) => (
<SessionCard key={s.id} session={s} index={i} />
))}
</div>
</section>
{/* 活动亮点 */}
<section>
<h2 className="text-lg sm:text-xl font-semibold text-stone-800 dark:text-stone-100 mb-4 sm:mb-5 flex items-center gap-2">
<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-2 gap-4 sm:gap-6">
{[
{ icon: "😌", title: "氛围轻松", desc: "loft民宿里的小聚，不用尬聊，聊得来就多聊～" },
{ icon: "🛡️", title: "安全靠谱", desc: "公开场地，地址提前说。尊重边界，不追问隐私。" },
{ icon: "👍", title: "第一次也 OK", desc: "很多人都是第一次来，小圈子人数可控～" },
{ icon: "✍️", title: "填表就行", desc: "不用注册、不用先付，填个表就好。" },
].map((item) => (
<div key={item.title} className="flex gap-2.5 sm:gap-3">
<span className="text-xl sm:text-2xl shrink-0">{item.icon}</span>
<div>
<p className="font-medium text-stone-800 dark:text-stone-100 text-sm sm:text-base">{item.title}</p>
<p className="text-xs sm:text-sm text-stone-500 dark:text-stone-400 mt-0.5 leading-relaxed">{item.desc}</p>
</div>
</div>
))}
</div>
</div>
</section>
{/* 发起人 + 志愿者 */}
<section>
<h2 className="text-lg sm:text-xl font-semibold text-stone-800 dark:text-stone-100 mb-4 sm:mb-5 flex items-center gap-2">
<span>👤</span> 发起人
</h2>
<div className="grid sm:grid-cols-2 gap-3 sm:gap-4 mb-4">
{HOSTS.map((host) => (
<HostLink
key={host.id}
host={host}
{...(host.id === "host-2" && volunteers.length === 0 && {
ctaText: "立即申请",
showFreeBadge: true,
})}
/>
))}
</div>
{volunteers.length > 0 && (
<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-5">
<h4 className="text-sm font-medium text-stone-700 dark:text-stone-300 mb-3">🙌 志愿者</h4>
<div className="flex flex-wrap items-center gap-3">
{volunteers.map((v, i) => {
const content = (
<>
<div className="relative w-10 h-10 rounded-full overflow-hidden border-2 border-amber-100 dark:border-amber-900/30 shrink-0">
{v.avatar ? (
<Image src={v.avatar} alt={v.nickname} fill sizes="40px" className="object-cover" unoptimized />
) : (
<div className="w-full h-full flex items-center justify-center bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300 text-sm font-medium">
{v.nickname.slice(0, 1) || "?"}
</div>
)}
</div>
<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 ? (
<a
key={i}
href={v.xiaohongshu_url}
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-2 hover:opacity-80"
title={v.nickname}
>
{content}
</a>
) : (
<span key={i} className="flex items-center gap-2" title={v.nickname}>
{content}
</span>
);
})}
</div>
</div>
)}
</section>
{/* FAQ */}
<section id="faq">
<h2 className="text-lg sm:text-xl font-semibold text-stone-800 dark:text-stone-100 mb-4 sm:mb-5 flex items-center gap-2">
<span>❓</span> 常见问题
</h2>
<div className="space-y-2 sm:space-y-3">
{[
{ q: "提交后多久会收到确认？", a: "活动前 1–2 天会联系，微信/短信确认。不匹配不会反复打扰～", icon: "⏱️" },
{ q: "第一次参加可以吗？", a: "可以呀！很多人都是第一次来。4–8 人小圈子、公开场地，聊得来就多聊～", icon: "✨" },
{ q: "临时有事怎么办？", a: "随时可以退出，提前说一声就行～", icon: "🔄" },
].map((faq) => (
<details
key={faq.q}
className="group rounded-lg sm:rounded-xl bg-white dark:bg-stone-900/80 border border-stone-200/80 dark:border-stone-700/80 overflow-hidden"
>
<summary className="flex items-center gap-2.5 sm:gap-3 p-3 sm:p-4 cursor-pointer list-none [&::-webkit-details-marker]:hidden select-none">
<span className="text-base sm:text-lg shrink-0">{faq.icon}</span>
<p className="font-medium text-stone-800 dark:text-stone-100 text-xs sm:text-sm flex-1">{faq.q}</p>
<span className="shrink-0 text-stone-400 text-xs transition-transform duration-200 group-open:rotate-180">▼</span>
</summary>
<div className="px-3 pb-3 sm:px-4 sm:pb-4 pt-0 flex gap-2.5 sm:gap-3">
<span className="w-[1.25rem] sm:w-[1.5rem] shrink-0" aria-hidden />
<p className="text-xs sm:text-sm text-stone-500 dark:text-stone-400 leading-relaxed">{faq.a}</p>
</div>
</details>
))}
</div>
</section>
{/* CTA - 移动端隐藏，只保留底部悬浮去报名 */}
<section className="pt-2 sm:pt-4 hidden sm:block">
<Link
href="/join"
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>
<p className="mt-3 text-center text-xs sm:text-sm text-stone-500 dark:text-stone-400">
先填表，我们会根据场次联系你～
</p>
</section>
</main>
{/* 移动端悬浮 CTA */}
<div className="fixed bottom-0 left-0 right-0 p-3 sm:p-4 bg-white/95 dark:bg-stone-900/95 backdrop-blur border-t border-stone-200 dark:border-stone-800 sm:hidden z-50 safe-area-pb">
<Link
href="/join"
className="block w-full bg-amber-600 hover:bg-amber-700 text-white text-center py-3 rounded-xl font-medium text-sm"
>
去报名
</Link>
</div>
<Footer />
</div>
);
/** 首页：服务端先查询第一个志愿者，替换发起人志愿者卡片 */
export default async function Home() {
const volunteer = await getVolunteer();
return <HomeContent initialVolunteer={volunteer} />;
}

329
app/volunteer/page.tsx
View File

@@ -1,330 +1,17 @@
"use client";
import { useState, type FormEvent } from "react";
import Link from "next/link";
import ThemeToggle from "../components/ThemeToggle";
const ageRangeOptions = ["18-22", "23-27", "28-32", "33-37", "38+"];
const WECHAT_REGEX = /^[a-zA-Z0-9_-]*$/;
import { useEffect } from "react";
/** 志愿者报名跳转到 /join 页面，带 volunteer=1 参数 */
export default function VolunteerPage() {
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 [urlError, setUrlError] = useState<string | null>(null);
const [profile, setProfile] = useState<{
nickname: string;
avatarUrl?: string;
resolvedUrl?: string;
postCountText?: string;
postCount?: number;
} | null>(null);
const [validating, setValidating] = useState(false);
const [submitted, setSubmitted] = useState(false);
const [submitting, setSubmitting] = useState(false);
const [error, setError] = useState<string | null>(null);
const handleUrlBlur = async () => {
const url = xiaohongshuUrl.trim();
if (!url) {
setUrlError(null);
setProfile(null);
return;
useEffect(() => {
if (typeof window !== "undefined") {
window.location.replace("/join?volunteer=1");
}
setValidating(true);
setUrlError(null);
setProfile(null);
try {
const validateRes = await fetch("/api/xiaohongshu/validate", {
method: "POST",
headers: { "Content-Type": "application/json" },
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,
avatarUrl: profileData.avatarUrl,
resolvedUrl: profileData.resolvedUrl,
postCountText: profileData.postCountText,
postCount: profileData.postCount ?? 0,
});
} else {
setUrlError(profileData.error || "获取资料失败");
}
} catch {
setUrlError("网络异常，请重试");
} finally {
setValidating(false);
}
};
const handleSubmit = async (e: FormEvent) => {
e.preventDefault();
setError(null);
if (xiaohongshuUrl.trim() && urlError) {
setError("请先修正小红书链接");
return;
}
if (!profession.trim()) {
setError("请填写职业");
return;
}
if (!wechat.trim()) {
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 genderLabel = gender === "女" ? "女" : gender === "男" ? "男" : "无";
const submitXiaohongshuUrl = profile?.resolvedUrl || xiaohongshuUrl.trim() || "";
const res = await fetch("/api/join", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
nickname: profile?.nickname || "匿名",
wechat: wechat.trim(),
phone: "",
profession: profession.trim(),
xiaohongshu_url: submitXiaohongshuUrl,
xiaohongshu_avatar_url: profile?.avatarUrl || "",
gender: genderLabel,
intro: "",
age_range: ageRange,
city: "深圳",
session: "volunteer",
education: "",
graduation_year: "",
agree_rules: true,
is_volunteer: true,
first_time: "",
status: "",
activity_type: "",
why_join: "",
region: "",
available_time: "",
}),
});
const data = await res.json();
if (!res.ok || !data?.ok) {
throw new Error(data?.error || "提交失败，请稍后重试");
}
setSubmitted(true);
} catch (err) {
setError(err instanceof Error ? err.message : "网络错误，请重试");
} finally {
setSubmitting(false);
}
};
if (submitted) {
}, []);
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">
<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>
<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>
</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">
<div className="mb-6 rounded-xl bg-amber-50 dark:bg-amber-900/20 p-4">
<h3 className="font-semibold text-stone-800 dark:text-stone-100 text-sm mb-2">志愿者工作内容</h3>
<ul className="text-xs sm:text-sm text-stone-600 dark:text-stone-400 space-y-1">
<li>· 签到：现场签到、引导参与者</li>
<li>· 茶歇准备：协助布置茶歇、收拾整理</li>
<li>· 拍照摄像：记录活动现场，分享精彩瞬间</li>
</ul>
</div>
<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="url"
value={xiaohongshuUrl}
onChange={(e) => { setXiaohongshuUrl(e.target.value); setUrlError(null); }}
onBlur={handleUrlBlur}
placeholder="https://www.xiaohongshu.com/user/profile/xxx"
required
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>
<input
type="text"
maxLength={140}
placeholder="用于联系"
value={wechat}
onChange={(e) => setWechat(e.target.value.replace(/[^a-zA-Z0-9_-]/g, ""))}
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="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>
</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>
)}
<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"
>
{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>
</div>
</div>
<div className="flex min-h-screen items-center justify-center bg-[#faf8f5] dark:bg-stone-950">
<span className="text-stone-400">跳转中…</span>
</div>
);
}

12
config/domain.config.ts
View File

@@ -1,19 +1,21 @@
/**
* 域名与 payjsapi 地址配置
* 生产环境必须设置 PAYMENT_API_URL 或 ROOT_DOMAIN，否则无法连接 payjsapi
* 域名配置
* - salon 前端线上: nomadyt.com
* - salonapi 后端线上: api.nomadyt.com（join、支付等）
*/
const isDev = process.env.NODE_ENV === "development";
/** 根域名。前端 nomadyt.com，后端 api.nomadyt.com */
export const ROOT_DOMAIN =
process.env.ROOT_DOMAIN || process.env.NEXT_PUBLIC_ROOT_DOMAIN || "hackrobot.cn";
process.env.ROOT_DOMAIN || process.env.NEXT_PUBLIC_ROOT_DOMAIN || "nomadyt.com";
/** 支付 API 默认地址。生产环境使用 api 子域，避免 127.0.0.1 导致连接失败 */
/** salonapi 默认地址。开发连本地 8007，生产连 api.nomadyt.com */
export const DEFAULT_PAYMENT_API_URL = isDev
? "http://127.0.0.1:8007"
: `https://api.${ROOT_DOMAIN}`;
/** 若 PAYMENT_API_URL 指向 localhost，生产环境自动使用 api 子域 */
/** 解析 salonapi 地址（api.nomadyt.com） */
export function resolvePaymentApiUrl(): string {
const url = process.env.PAYMENT_API_URL || DEFAULT_PAYMENT_API_URL;
if (!isDev && /^(https?:\/\/)?(127\.0\.0\.1|localhost)(:\d+)?(\/|$)/i.test(url)) {

6
config/services.config.ts
View File

@@ -1,6 +1,6 @@
/**
* salon 服务配置 - PocketBase、支付
* 使用 site_id=salon，支付调用 payjsapi /salon/*
* 前端 nomadyt.com，后端 salonapi api.nomadyt.com
*/
import { resolvePaymentApiUrl } from "./domain.config";
@@ -58,8 +58,8 @@ export function getPaymentConfig(): PaymentConfig {
};
}
/** 茶歇费 29元/人 */
export const JOIN_TEA_FEE = 2900;
/** 茶歇费 1元/人（本地测试用，正式环境可改为 2900） */
export const JOIN_TEA_FEE = 100;
export function getJoinPaymentConfig(): { amount: number; type: string } {
return {