107 lines
4.5 KiB
TypeScript
107 lines
4.5 KiB
TypeScript
import { useEffect, useMemo } from 'react';
|
|
import { useLocation, useNavigate } from 'react-router-dom';
|
|
import { notifyRedeemSuccess } from '../lib/useRedeemSuccessBus';
|
|
import { formatMoney, toMoneyNumber } from '../lib/money';
|
|
|
|
export default function RedeemSuccessPage() {
|
|
const navigate = useNavigate();
|
|
const location = useLocation();
|
|
|
|
const result = useMemo(() => {
|
|
const stateResult = (location.state as { result?: Record<string, unknown> })?.result;
|
|
if (stateResult) return stateResult;
|
|
try {
|
|
const cached = sessionStorage.getItem('lastRedeemResult');
|
|
return cached ? (JSON.parse(cached) as Record<string, unknown>) : null;
|
|
} catch {
|
|
return null;
|
|
}
|
|
}, [location.state]);
|
|
|
|
const storeName = (location.state as { storeName?: string })?.storeName || '当前门店';
|
|
const user = (location.state as { user?: { nickname?: string; phone?: string; userNo?: string } })?.user;
|
|
const userLabel = user?.nickname || user?.phone || '—';
|
|
const amount = toMoneyNumber(result?.amount);
|
|
const redeemNo = String(result?.redeemNo || '—');
|
|
const createdAt = result?.createdAt
|
|
? new Date(String(result.createdAt)).toLocaleString('zh-CN')
|
|
: new Date().toLocaleString('zh-CN');
|
|
|
|
// v3.5.1 #2：核销成功后广播事件，通知门店信息页 / 提现页即时刷新
|
|
useEffect(() => {
|
|
notifyRedeemSuccess({
|
|
redeemNo: redeemNo !== '—' ? redeemNo : undefined,
|
|
amount,
|
|
});
|
|
}, [redeemNo, amount]);
|
|
|
|
return (
|
|
<div className="shop-success-page">
|
|
<header className="shop-success-header">
|
|
<button type="button" className="shop-redeem-back" onClick={() => navigate('/')} aria-label="返回">
|
|
<span className="material-symbols-outlined">arrow_back</span>
|
|
</button>
|
|
<h1 className="app-page-title">杜康好客</h1>
|
|
</header>
|
|
|
|
<section className="shop-success-hero">
|
|
<div className="shop-success-icon-wrap">
|
|
<span className="material-symbols-outlined">check_circle</span>
|
|
</div>
|
|
<h2 className="shop-success-title">核销成功</h2>
|
|
<p className="shop-success-amount">¥ {formatMoney(amount)}</p>
|
|
<p className="shop-success-sub">已入账到余额</p>
|
|
<p className="shop-success-note">核销成功，账单通知已发送至老板手机</p>
|
|
</section>
|
|
|
|
<div className="shop-success-details">
|
|
<div className="shop-success-detail-row">
|
|
<span className="shop-success-detail-label">核销门店</span>
|
|
<span className="shop-success-detail-value">{storeName}</span>
|
|
</div>
|
|
<div className="shop-success-detail-row">
|
|
<span className="shop-success-detail-label">核销用户</span>
|
|
<div className="shop-success-user">
|
|
<div className="shop-success-user-avatar">
|
|
<span className="material-symbols-outlined">person</span>
|
|
</div>
|
|
<div style={{ textAlign: 'right' }}>
|
|
<div className="shop-success-detail-value">{userLabel}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="shop-success-detail-row">
|
|
<span className="shop-success-detail-label">核销时间</span>
|
|
<span className="shop-success-detail-value" style={{ fontWeight: 400, color: 'var(--color-on-surface-variant)' }}>
|
|
{createdAt}
|
|
</span>
|
|
</div>
|
|
<div className="shop-success-detail-row">
|
|
<span className="shop-success-detail-label">订单编号</span>
|
|
<span className="shop-success-detail-value" style={{ fontFamily: 'monospace', fontWeight: 400 }}>
|
|
{redeemNo}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="shop-success-actions">
|
|
<button type="button" className="shop-success-primary-btn" onClick={() => navigate('/')}>
|
|
<span>继续核销</span>
|
|
<span className="material-symbols-outlined" style={{ fontSize: 20 }}>qr_code_scanner</span>
|
|
</button>
|
|
<button type="button" className="shop-success-outline-btn" onClick={() => navigate('/')}>
|
|
<span>返回首页</span>
|
|
<span className="material-symbols-outlined" style={{ fontSize: 20 }}>home</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div className="shop-success-brand">
|
|
<div className="shop-success-brand-icon">
|
|
<span className="material-symbols-outlined shop-fill-icon" style={{ fontSize: 12 }}>verified</span>
|
|
</div>
|
|
<p className="shop-success-brand-text">山西领势酒业有限责任公司</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|