Add visitor phone lookup flow

2026-07-15 11:26:37 +08:00
parent 331e30894b
commit 7f751bebae
21 changed files with 971 additions and 104 deletions
--- a/web/src/pages/VisitorLookupPage.tsx
+++ b/web/src/pages/VisitorLookupPage.tsx
@@ -0,0 +1,107 @@
+import { useEffect, useState } from "react";
+import type { FormEvent } from "react";
+import { useNavigate } from "react-router-dom";
+import { api } from "../api";
+import { FeedbackBanner, LoadingState } from "../components/Feedback";
+import { usePollingResource } from "../hooks/usePollingResource";
+
+function isPhoneInputValid(value: string): boolean {
+  const digits = value.replace(/\D/g, "");
+  return /^[+\d\s\-()]+$/.test(value) && digits.length >= 7 && digits.length <= 15;
+}
+
+export function VisitorLookupPage() {
+  const navigate = useNavigate();
+  const [phoneInput, setPhoneInput] = useState("");
+  const [submittedPhone, setSubmittedPhone] = useState("");
+  const [formError, setFormError] = useState<string | null>(null);
+  const resource = usePollingResource((signal) => api.publicStatusByPhone(submittedPhone, signal), {
+    enabled: Boolean(submittedPhone),
+    intervalMs: 3_000,
+    resourceKey: submittedPhone,
+  });
+  const data = resource.data;
+
+  useEffect(() => {
+    if (!data || !submittedPhone) return;
+    navigate("/visitor/phone", {
+      replace: true,
+      state: { phone: submittedPhone },
+    });
+  }, [data, navigate, submittedPhone]);
+
+  function submit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    const nextPhone = phoneInput.trim();
+    if (!isPhoneInputValid(nextPhone)) {
+      setFormError("请输入有效的手机号（7-15 位数字）");
+      return;
+    }
+    setFormError(null);
+    if (nextPhone === submittedPhone) {
+      void resource.refresh();
+      return;
+    }
+    setSubmittedPhone(nextPhone);
+  }
+
+  const liveTone = resource.offline ? "offline" : resource.error ? "stale" : "live";
+  const liveLabel = resource.offline ? "连接中断" : resource.error ? "查询延迟" : "手机号查询";
+
+  return (
+    <main className="visitor-page visitor-page--mobile visitor-lookup-page">
+      <header className="public-header visitor-public-header">
+        <div className="brand-lockup">
+          <img className="brand-logo" src="/xiaoqikong-logo.jpg" alt="" aria-hidden="true" />
+          <span><strong>小七孔文旅集团</strong><small>排队服务</small></span>
+        </div>
+        <span className={`visitor-header__meta visitor-header__meta--${liveTone}`}><i aria-hidden="true" />{liveLabel}</span>
+      </header>
+      <div className="visitor-content">
+        <section className="visitor-lookup-card" aria-labelledby="visitor-lookup-title">
+          <div className="visitor-lookup-card__intro">
+            <span>游客查询</span>
+            <h1 id="visitor-lookup-title">输入手机号查看排队情况</h1>
+            <p>请输入取号时登记的手机号，查询当前仍在排队或已叫到的号码。</p>
+          </div>
+          <form className="visitor-lookup-form" onSubmit={submit} noValidate>
+            <label className="field" htmlFor="visitor-phone">
+              <span>手机号</span>
+              <input
+                id="visitor-phone"
+                name="phone"
+                type="tel"
+                inputMode="tel"
+                autoComplete="tel"
+                placeholder="请输入手机号"
+                value={phoneInput}
+                onChange={(event) => {
+                  setPhoneInput(event.target.value);
+                  if (formError) setFormError(null);
+                }}
+                aria-invalid={formError ? "true" : "false"}
+                aria-describedby={formError ? "visitor-phone-error" : "visitor-phone-help"}
+              />
+              {formError ? <small id="visitor-phone-error" className="field-error" role="alert">{formError}</small> : null}
+            </label>
+            <button className="button button--primary button--wide" type="submit" disabled={resource.loading}>
+              {resource.loading ? "正在查询…" : "查询排队状态"}
+            </button>
+          </form>
+          <p id="visitor-phone-help" className="visitor-lookup-card__help">当前为运营测试入口，后续将切换为验证码或正式接口。</p>
+        </section>
+
+        {resource.loading && !data ? <LoadingState label="正在查询您的排队号码" /> : null}
+        {resource.error && !data ? (
+          <FeedbackBanner
+            tone="danger"
+            title="暂时无法查询排队状态"
+            action={<button className="button button--secondary button--small" onClick={resource.refresh}>重试</button>}
+          >
+            {resource.error.status === 429 ? "查询次数过多，请稍后再试。" : resource.error.message}
+          </FeedbackBanner>
+        ) : null}
+      </div>
+    </main>
+  );
+}