Add visitor phone lookup flow
This commit is contained in:
wangxuming
168
web/src/pages/VisitorPhonePage.tsx
Normal file
168
web/src/pages/VisitorPhonePage.tsx
Normal file
@@ -0,0 +1,168 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useLocation, useNavigate } from "react-router-dom";
|
||||
import { api } from "../api";
|
||||
import { EmptyState, FeedbackBanner, FreshnessBanner, LoadingState } from "../components/Feedback";
|
||||
import { usePollingResource } from "../hooks/usePollingResource";
|
||||
import { isTimestampStale, visitorStatusMeta } from "../lib/format";
|
||||
import type { PublicStatusDto } from "../types";
|
||||
import { VisitorTicketCard } from "./VisitorTicketCard";
|
||||
|
||||
const PHONE_STORAGE_KEY = "scenic-visitor-query-phone";
|
||||
|
||||
function ticketKey(ticket: PublicStatusDto): string {
|
||||
return `${ticket.project?.id ?? ticket.project_name}:${ticket.ticket_number}`;
|
||||
}
|
||||
|
||||
function readStoredPhone(): string {
|
||||
try {
|
||||
return window.sessionStorage.getItem(PHONE_STORAGE_KEY) ?? "";
|
||||
} catch {
|
||||
return "";
|
||||
}
|
||||
}
|
||||
|
||||
function storePhone(phone: string): void {
|
||||
try {
|
||||
window.sessionStorage.setItem(PHONE_STORAGE_KEY, phone);
|
||||
} catch {
|
||||
// Session storage is only a refresh convenience for this temporary flow.
|
||||
}
|
||||
}
|
||||
|
||||
function clearStoredPhone(): void {
|
||||
try {
|
||||
window.sessionStorage.removeItem(PHONE_STORAGE_KEY);
|
||||
} catch {
|
||||
// Ignore storage failures; the page can still navigate normally.
|
||||
}
|
||||
}
|
||||
|
||||
interface VisitorPhoneLocationState {
|
||||
phone?: string;
|
||||
}
|
||||
|
||||
export function VisitorPhonePage() {
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
const locationPhone = (location.state as VisitorPhoneLocationState | null)?.phone?.trim() ?? "";
|
||||
const [phone] = useState(() => locationPhone || readStoredPhone());
|
||||
const [selectedKey, setSelectedKey] = useState<string | null>(null);
|
||||
const resource = usePollingResource((signal) => api.publicStatusByPhone(phone, signal), {
|
||||
enabled: Boolean(phone),
|
||||
intervalMs: 3_000,
|
||||
resourceKey: phone || "visitor-phone",
|
||||
});
|
||||
const data = resource.data;
|
||||
const tickets = data?.tickets ?? [];
|
||||
const selectedTicket = tickets.find((ticket) => ticketKey(ticket) === selectedKey) ?? tickets[0];
|
||||
const freshnessTime = resource.lastClientSuccessAt;
|
||||
const stale = Boolean(data) && isTimestampStale(freshnessTime, 30_000);
|
||||
|
||||
useEffect(() => {
|
||||
if (locationPhone) storePhone(locationPhone);
|
||||
}, [locationPhone]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!tickets.length) {
|
||||
setSelectedKey(null);
|
||||
return;
|
||||
}
|
||||
const currentKey = selectedKey && tickets.some((ticket) => ticketKey(ticket) === selectedKey)
|
||||
? selectedKey
|
||||
: ticketKey(tickets[0]);
|
||||
if (currentKey !== selectedKey) setSelectedKey(currentKey);
|
||||
}, [selectedKey, tickets]);
|
||||
|
||||
function returnToLookup() {
|
||||
clearStoredPhone();
|
||||
navigate("/visitor");
|
||||
}
|
||||
|
||||
const liveTone = resource.offline ? "offline" : stale || resource.error ? "stale" : "live";
|
||||
const liveLabel = resource.offline ? "连接中断" : stale || resource.error ? "更新延迟" : "实时更新";
|
||||
|
||||
return (
|
||||
<main className="visitor-page visitor-page--mobile visitor-phone-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">
|
||||
{!phone ? (
|
||||
<FeedbackBanner tone="warning" title="查询会话已失效" action={<button className="button button--secondary button--small" onClick={returnToLookup}>重新查询</button>}>
|
||||
请返回输入手机号后再次查询。
|
||||
</FeedbackBanner>
|
||||
) : null}
|
||||
{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}
|
||||
{data ? (
|
||||
<>
|
||||
<FreshnessBanner
|
||||
offline={resource.offline}
|
||||
stale={stale}
|
||||
timestamp={freshnessTime}
|
||||
refreshing={resource.refreshing}
|
||||
errorMessage={resource.error?.message}
|
||||
onRetry={resource.refresh}
|
||||
/>
|
||||
{tickets.length === 0 ? (
|
||||
<>
|
||||
<EmptyState title="暂未找到活动排队号码" description="请核对手机号，或联系现场工作人员。" />
|
||||
<button className="button button--secondary visitor-refresh" onClick={returnToLookup}>重新输入手机号</button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{tickets.length > 1 ? (
|
||||
<section className="visitor-lookup-results" aria-labelledby="visitor-lookup-results-title">
|
||||
<div className="visitor-lookup-results__heading">
|
||||
<div>
|
||||
<span>当前活动号码</span>
|
||||
<h2 id="visitor-lookup-results-title">找到 {tickets.length} 张排队单</h2>
|
||||
</div>
|
||||
<small>请选择要查看的号码</small>
|
||||
</div>
|
||||
<div className="visitor-lookup-options" role="list">
|
||||
{tickets.map((ticket) => {
|
||||
const key = ticketKey(ticket);
|
||||
const statusMeta = visitorStatusMeta(ticket.status, ticket.people_ahead);
|
||||
return (
|
||||
<div key={key} role="listitem">
|
||||
<button
|
||||
className="visitor-lookup-option"
|
||||
type="button"
|
||||
aria-pressed={selectedTicket ? key === ticketKey(selectedTicket) : false}
|
||||
onClick={() => setSelectedKey(key)}
|
||||
>
|
||||
<span>{ticket.project_name}</span>
|
||||
<strong>{ticket.ticket_number}</strong>
|
||||
<small>{statusMeta.label}</small>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
) : null}
|
||||
{selectedTicket ? <VisitorTicketCard data={selectedTicket} lastUpdatedAt={freshnessTime} /> : null}
|
||||
<button className="button button--secondary visitor-refresh" onClick={resource.refresh}>刷新状态</button>
|
||||
<button className="button button--ghost visitor-refresh" onClick={returnToLookup}>查询其他手机号</button>
|
||||
<p className="visitor-trust">排队数据会自动更新，现场以工作人员指引为准。</p>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user