jacy/dukang
1
0
Fork 0
Code Issues Pull Requests Actions 8 Packages Projects Releases Wiki Activity

核销成功提示

Browse Source
This commit is contained in:
jacy-dukang
2026-07-07 11:46:12 +08:00
parent 1dcc9aa1f4
commit e25b208545
6 changed files with 339 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/h5-user/src/pages/RedeemPage.tsx
+81 -10
View File
@@ -1,8 +1,9 @@
import { useEffect, useRef, useState } from 'react';
import { useCallback, useEffect, useRef, useState } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { request } from '../lib/api';
const REDEEM_TOKEN_TTL_SECONDS = 300;
const POLL_INTERVAL_MS = 2500;
type BenefitSummary = {
totalBalance: number;
@@ -10,6 +11,21 @@ type BenefitSummary = {
activeCouponCount: number;
};
type RedeemTokenStatus =
| { status: 'PENDING'; expireInSeconds: number; amount: number }
| {
status: 'CONSUMED';
record: {
id: string;
redeemNo: string;
amount: number;
storeId: string;
storeName: string;
createdAt: string;
};
}
| { status: 'EXPIRED' };
function formatMoney(amount: number) {
return amount.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
}
@@ -37,10 +53,9 @@ export default function RedeemPage() {
const [timerSec, setTimerSec] = useState(REDEEM_TOKEN_TTL_SECONDS);
const timerRef = useRef<number | null>(null);
const presetApplied = useRef(false);
const successHandled = useRef(false);
const redeemableMax = couponId
? (couponBalance ?? 0)
: (summary?.totalBalance ?? 0);
const redeemableMax = couponId ? (couponBalance ?? 0) : (summary?.totalBalance ?? 0);
useEffect(() => {
request<BenefitSummary>('USER_H5', '/benefit/summary').then(setSummary).catch(() => {});
@@ -77,12 +92,41 @@ export default function RedeemPage() {
}
}
function closeModal() {
const closeModal = useCallback(() => {
stopTimer();
setModalOpen(false);
setToken('');
setTimerSec(REDEEM_TOKEN_TTL_SECONDS);
}
successHandled.current = false;
}, []);
const handleRedeemExpired = useCallback(() => {
if (successHandled.current) return;
successHandled.current = true;
closeModal();
sessionStorage.removeItem('redeemToken');
sessionStorage.removeItem('redeemAmount');
setMsg('核销码已失效，请重新生成');
}, [closeModal]);
const handleRedeemSuccess = useCallback(
(record: NonNullable<Extract<RedeemTokenStatus, { status: 'CONSUMED' }>['record']>) => {
if (successHandled.current) return;
successHandled.current = true;
stopTimer();
setModalOpen(false);
setToken('');
sessionStorage.setItem('lastRedeemRecordId', record.id);
sessionStorage.setItem('lastRedeemResult', JSON.stringify(record));
sessionStorage.removeItem('redeemToken');
sessionStorage.removeItem('redeemAmount');
navigate('/redeem/success', {
replace: true,
state: { record },
});
},
[navigate],
);
function startTimer() {
stopTimer();
@@ -91,10 +135,7 @@ export default function RedeemPage() {
setTimerSec((prev) => {
if (prev <= 1) {
stopTimer();
window.setTimeout(() => {
window.alert('核销码已失效，请重新生成');
closeModal();
}, 0);
window.setTimeout(() => handleRedeemExpired(), 0);
return 0;
}
return prev - 1;
@@ -102,6 +143,35 @@ export default function RedeemPage() {
}, 1000);
}
useEffect(() => {
if (!modalOpen || !token) return undefined;
let cancelled = false;
async function pollStatus() {
try {
const status = await request<RedeemTokenStatus>('USER_H5', `/redeem/tokens/${token}/status`);
if (cancelled || successHandled.current) return;
if (status.status === 'CONSUMED' && status.record) {
handleRedeemSuccess(status.record);
} else if (status.status === 'EXPIRED') {
handleRedeemExpired();
} else if (status.status === 'PENDING' && status.expireInSeconds > 0) {
setTimerSec((prev) => Math.min(prev, status.expireInSeconds));
}
} catch {
/* 轮询失败忽略，下次重试 */
}
}
void pollStatus();
const pollId = window.setInterval(() => void pollStatus(), POLL_INTERVAL_MS);
return () => {
cancelled = true;
window.clearInterval(pollId);
};
}, [modalOpen, token, handleRedeemSuccess, handleRedeemExpired]);
function parseAmount() {
const value = Number(amountInput);
return Number.isFinite(value) ? Math.round(value * 100) / 100 : 0;
@@ -129,6 +199,7 @@ export default function RedeemPage() {
setLoading(true);
setMsg('');
successHandled.current = false;
try {
const body: { amount: number; couponId?: string } = { amount };
if (couponId) body.couponId = couponId;
apps/h5-user/src/pages/RedeemSuccessPage.tsx
+91 -16
View File
@@ -1,53 +1,128 @@
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useMemo, useState } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import PageHeader from '@dukang/shared-ui/PageHeader';
import { request } from '../lib/api';
type RedeemRecord = {
id: string;
redeemNo: string;
amount: number;
storeId: string;
storeName: string;
createdAt: string;
};
function formatMoney(amount: number) {
return amount.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
}
function StarRating({
label,
value,
onChange,
}: {
label: string;
value: number;
onChange: (score: number) => void;
}) {
return (
<div className="redeem-rating-row">
<span className="redeem-rating-label">{label}</span>
<div className="redeem-star-row" role="group" aria-label={label}>
{[1, 2, 3, 4, 5].map((score) => (
<button
key={score}
type="button"
className={`redeem-star-btn${score <= value ? ' active' : ''}`}
aria-label={`${score} 星`}
onClick={() => onChange(score)}
>
★
</button>
))}
</div>
</div>
);
}
export default function RedeemSuccessPage() {
const navigate = useNavigate();
const location = useLocation();
const [serviceScore, setServiceScore] = useState(5);
const [envScore, setEnvScore] = useState(5);
const [loading, setLoading] = useState(false);
const record = useMemo<RedeemRecord | null>(() => {
const fromState = (location.state as { record?: RedeemRecord })?.record;
if (fromState) return fromState;
try {
const cached = sessionStorage.getItem('lastRedeemResult');
return cached ? (JSON.parse(cached) as RedeemRecord) : null;
} catch {
return null;
}
}, [location.state]);
const amount = Number(record?.amount ?? 0);
const storeName = record?.storeName || '门店';
const redeemNo = record?.redeemNo || '—';
const redeemedAt = record?.createdAt
? new Date(record.createdAt).toLocaleString('zh-CN')
: new Date().toLocaleString('zh-CN');
async function submit() {
setLoading(true);
try {
const redeemRecordId = sessionStorage.getItem('lastRedeemRecordId');
const redeemRecordId = record?.id || sessionStorage.getItem('lastRedeemRecordId');
if (redeemRecordId) {
await request('USER_H5', '/redeem/ratings', {
method: 'POST',
body: JSON.stringify({
redeemRecordId,
serviceScore,
environmentScore: envScore,
envScore,
}),
});
}
} catch {
/* preV1: allow navigate even if rating fails */
/* 评价失败不阻塞返回 */
} finally {
setLoading(false);
navigate('/benefit');
sessionStorage.removeItem('lastRedeemRecordId');
sessionStorage.removeItem('lastRedeemResult');
navigate('/benefit', { replace: true });
}
}
return (
<div className="page-no-tab redeem-success-page">
<PageHeader title="核销成功" onBack={() => navigate('/benefit')} />
<div style={{ textAlign: 'center', padding: '24px 0' }}>
<PageHeader title="核销成功" onBack={() => navigate('/benefit', { replace: true })} />
<div className="redeem-success-hero">
<div className="success-icon">✓</div>
<h2 className="headline-lg text-primary">核销成功</h2>
<p className="text-variant body-md" style={{ marginTop: 8 }}>请为门店服务评分</p>
<p className="redeem-success-amount">¥ {formatMoney(amount)}</p>
<p className="text-variant body-md">已在 {storeName} 完成核销</p>
</div>
<div className="card">
<div className="form-group">
<label>服务评分 (1-5)</label>
<input type="number" min={1} max={5} value={serviceScore} onChange={(e) => setServiceScore(Number(e.target.value))} />
<div className="card redeem-success-details">
<div className="redeem-success-detail-row">
<span>核销门店</span>
<span>{storeName}</span>
</div>
<div className="form-group">
<label>环境评分 (1-5)</label>
<input type="number" min={1} max={5} value={envScore} onChange={(e) => setEnvScore(Number(e.target.value))} />
<div className="redeem-success-detail-row">
<span>核销时间</span>
<span>{redeemedAt}</span>
</div>
<div className="redeem-success-detail-row">
<span>核销单号</span>
<span className="redeem-success-mono">{redeemNo}</span>
</div>
</div>
<div className="card redeem-success-rating">
<p className="redeem-success-rating-title">为门店服务评分</p>
<StarRating label="服务态度" value={serviceScore} onChange={setServiceScore} />
<StarRating label="用餐环境" value={envScore} onChange={setEnvScore} />
<button type="button" className="btn btn-primary btn-block" disabled={loading} onClick={submit}>
{loading ? '提交中...' : '完成'}
</button>
apps/h5-user/src/styles.css
+89
View File
@@ -1223,6 +1223,95 @@
font-weight: 700;
}
.redeem-success-page {
padding-bottom: 24px;
}
.redeem-success-hero {
text-align: center;
padding: 24px 16px 8px;
}
.redeem-success-amount {
margin-top: 12px;
font-size: 28px;
font-weight: 700;
color: var(--color-primary, #a02d30);
}
.redeem-success-details {
margin: 16px;
}
.redeem-success-detail-row {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
font-size: 14px;
}
.redeem-success-detail-row:last-child {
border-bottom: none;
}
.redeem-success-detail-row span:first-child {
color: var(--color-on-surface-variant, #666);
flex-shrink: 0;
}
.redeem-success-detail-row span:last-child {
text-align: right;
word-break: break-all;
}
.redeem-success-mono {
font-family: ui-monospace, monospace;
font-size: 13px;
}
.redeem-success-rating {
margin: 0 16px;
}
.redeem-success-rating-title {
margin: 0 0 16px;
font-weight: 600;
text-align: center;
}
.redeem-rating-row {
margin-bottom: 20px;
}
.redeem-rating-label {
display: block;
margin-bottom: 8px;
font-size: 14px;
color: var(--color-on-surface-variant, #666);
}
.redeem-star-row {
display: flex;
justify-content: center;
gap: 8px;
}
.redeem-star-btn {
border: none;
background: none;
font-size: 32px;
line-height: 1;
color: #ddd;
cursor: pointer;
padding: 0;
}
.redeem-star-btn.active {
color: #ffc107;
}
/* ── 登录页（stitch user_用户登录页_C端小程序） ── */
.login-page {
min-height: 100vh;