feat: 充值页面 + 订单明细页面 + 页面调度器增强 (0.0.20)
新增页面：
- RechargePage — 积分充值表单（预设金额/自定义金额/支付宝/协议勾选）
+ 支付状态跟踪（form/pending/paid/expired/failed 五阶段）
+ 订单状态轮询（3s 间隔，终态自动停止）
+ PAGE_LOCK 事件（待支付时禁止关闭 Modal）
- OrdersPage — 订单明细列表（状态筛选 + 分页 + 继续支付）
+ Segmented 状态 Tab（全部/待支付/已支付/已过期/失败）
+ 待支付订单"继续支付"按钮
事件总线增强：
- 新增 EVENTS.CLOSE_PAGE — 页面内部关闭容器
- 新增 EVENTS.PAGE_LOCK — 锁定/解锁容器关闭（防止操作中断）
PageDispatcher 增强：
- 注册 RechargePage（/recharge）和 OrdersPage（/orders）
- 响应 CLOSE_PAGE / PAGE_LOCK 事件
- Modal/Drawer 锁定态下禁用遮罩关闭
支付 API 模块：
- PaymentAPI.createOrder / getOrdersListInfo / getOrderInfo
- 完整类型定义（请求/响应体、状态常量、中文映射）
杂项：
- 导航栏"充值积分"→"充值"（精简）
This commit is contained in:
524
src/pages/panels/RechargePage.tsx
Normal file
524
src/pages/panels/RechargePage.tsx
Normal file
@@ -0,0 +1,524 @@
|
||||
// ============================================================
|
||||
// RechargePage — 积分充值表单 + 支付状态跟踪
|
||||
//
|
||||
// 通过 PageDispatcher 调度（Modal 容器），导航栏"充值"按钮触发。
|
||||
// 两阶段视图：
|
||||
// form — 金额选择 → 自定义输入 → 支付方式 → 协议 → 提交
|
||||
// pending — 订单已创建，轮询支付状态，可重新打开支付页面
|
||||
// paid — 支付成功
|
||||
// expired — 订单过期，可重新下单
|
||||
// failed — 支付失败，可重新下单
|
||||
// ============================================================
|
||||
|
||||
import { useState, useMemo, useCallback, useEffect } from 'react';
|
||||
import {
|
||||
Radio,
|
||||
InputNumber,
|
||||
Button,
|
||||
Checkbox,
|
||||
Typography,
|
||||
App,
|
||||
Space,
|
||||
Divider,
|
||||
theme as antTheme,
|
||||
Result,
|
||||
} from 'antd';
|
||||
import {
|
||||
AlipayOutlined,
|
||||
WechatOutlined,
|
||||
WalletOutlined,
|
||||
DollarOutlined,
|
||||
} from '@ant-design/icons';
|
||||
|
||||
import { useTheme } from '@/components/providers/ThemeProvider';
|
||||
import { LegalTextModal } from '@/components/ui/LegalTextModal';
|
||||
import {
|
||||
PaymentAPI,
|
||||
PAYMENT_METHODS,
|
||||
PAYMENT_STATUS,
|
||||
getPaymentStatusText,
|
||||
type PaymentStatus,
|
||||
} from '@/services/modules/payments';
|
||||
import { emit, EVENTS } from '@/utils/event-bus';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
// ---------- 常量 ----------
|
||||
|
||||
const PRESET_AMOUNTS = [10, 100, 500, 1000, 5000, 10000] as const;
|
||||
|
||||
/** 单次充值上限（元） */
|
||||
const MAX_AMOUNT_YUAN = 100000;
|
||||
|
||||
/** 订单状态轮询间隔（毫秒） */
|
||||
const POLL_INTERVAL_MS = 3000;
|
||||
|
||||
/** 页面阶段 */
|
||||
type RechargePhase = 'form' | PaymentStatus;
|
||||
|
||||
// ---------- 组件 ----------
|
||||
|
||||
export function RechargePage() {
|
||||
const { isDark } = useTheme();
|
||||
const { message } = App.useApp();
|
||||
const { token } = antTheme.useToken();
|
||||
|
||||
// ======== 表单状态 ========
|
||||
|
||||
const [selectedAmount, setSelectedAmount] = useState<number | null>(null);
|
||||
const [customAmount, setCustomAmount] = useState<number | null>(null);
|
||||
const [paymentMethod, setPaymentMethod] = useState<string>(PAYMENT_METHODS.Alipay);
|
||||
const [agreedToTerms, setAgreedToTerms] = useState(false);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [errors, setErrors] = useState<Record<string, string>>({});
|
||||
const [legalOpen, setLegalOpen] = useState(false);
|
||||
|
||||
// ======== 订单状态 ========
|
||||
|
||||
const [phase, setPhase] = useState<RechargePhase>('form');
|
||||
const [orderId, setOrderId] = useState<string | null>(null);
|
||||
const [orderStatus, setOrderStatus] = useState<PaymentStatus | null>(null);
|
||||
const [payUrl, setPayUrl] = useState<string | null>(null);
|
||||
|
||||
// ======== 派生值 ========
|
||||
|
||||
/** 最终充值金额（元）：自定义金额优先，否则预设金额，否则 0 */
|
||||
const finalAmountYuan = useMemo(() => {
|
||||
if (customAmount !== null && customAmount !== undefined) {
|
||||
return customAmount;
|
||||
}
|
||||
return selectedAmount ?? 0;
|
||||
}, [customAmount, selectedAmount]);
|
||||
|
||||
/** 最终充值金额（分）：元 × 100，用于 API 调用 */
|
||||
const finalAmountCent = finalAmountYuan * 100;
|
||||
|
||||
// ======== 工具函数 ========
|
||||
|
||||
const clearError = useCallback((name: string) => {
|
||||
setErrors((prev) => {
|
||||
if (!(name in prev)) return prev;
|
||||
const next = { ...prev };
|
||||
delete next[name];
|
||||
return next;
|
||||
});
|
||||
}, []);
|
||||
|
||||
// ======== 校验 ========
|
||||
|
||||
const validate = useCallback((): Record<string, string> => {
|
||||
const errs: Record<string, string> = {};
|
||||
|
||||
if (!finalAmountYuan || finalAmountYuan <= 0) {
|
||||
errs.amount = '请选择或输入充值金额';
|
||||
} else if (!Number.isInteger(finalAmountYuan) || finalAmountYuan % 10 !== 0) {
|
||||
errs.customAmount = '金额必须为 10 的倍数';
|
||||
} else if (finalAmountYuan > MAX_AMOUNT_YUAN) {
|
||||
errs.customAmount = `单次充值上限为 ${MAX_AMOUNT_YUAN.toLocaleString()} 元`;
|
||||
}
|
||||
|
||||
if (!agreedToTerms) {
|
||||
errs.agreedToTerms = '请阅读并同意充值协议';
|
||||
}
|
||||
|
||||
return errs;
|
||||
}, [finalAmountYuan, agreedToTerms]);
|
||||
|
||||
// ======== 支付方式切换 ========
|
||||
|
||||
const handlePaymentChange = useCallback(
|
||||
(value: string) => {
|
||||
if (value === PAYMENT_METHODS.WeChat) {
|
||||
void message.info('微信支付正在接入中，敬请期待');
|
||||
return; // 不更新 state，保持支付宝选中
|
||||
}
|
||||
setPaymentMethod(value);
|
||||
},
|
||||
[message],
|
||||
);
|
||||
|
||||
// ======== 提交流程 ========
|
||||
|
||||
const handleSubmit = useCallback(async () => {
|
||||
const validationErrors = validate();
|
||||
if (Object.keys(validationErrors).length > 0) {
|
||||
setErrors(validationErrors);
|
||||
return;
|
||||
}
|
||||
|
||||
setSubmitting(true);
|
||||
try {
|
||||
const res = await PaymentAPI.createOrder({
|
||||
amount_cent: finalAmountCent,
|
||||
payment_channel: PAYMENT_METHODS.Alipay,
|
||||
});
|
||||
|
||||
// 保存订单信息，进入等待支付阶段
|
||||
setOrderId(res.id);
|
||||
setOrderStatus(PAYMENT_STATUS.Pending);
|
||||
setPayUrl(res.pay_url);
|
||||
setPhase(PAYMENT_STATUS.Pending);
|
||||
|
||||
window.open(res.pay_url, '_blank');
|
||||
void message.success('订单已创建，请在新页面中完成支付');
|
||||
} catch (err: unknown) {
|
||||
message.error((err as Error)?.message || '创建订单失败，请重试');
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
}, [finalAmountCent, validate, message]);
|
||||
|
||||
// ======== 订单状态轮询 ========
|
||||
|
||||
useEffect(() => {
|
||||
if (phase !== PAYMENT_STATUS.Pending || !orderId) return;
|
||||
|
||||
let timer: ReturnType<typeof setTimeout>;
|
||||
let cancelled = false;
|
||||
|
||||
const poll = async () => {
|
||||
try {
|
||||
const order = await PaymentAPI.getOrderInfo({ order_id: orderId });
|
||||
if (cancelled) return;
|
||||
|
||||
const newStatus = order.status;
|
||||
setOrderStatus(newStatus);
|
||||
|
||||
if (newStatus === PAYMENT_STATUS.Pending) {
|
||||
// 仍待支付 → 继续轮询
|
||||
timer = setTimeout(poll, POLL_INTERVAL_MS);
|
||||
} else {
|
||||
// 终态 → 停止轮询，切换阶段
|
||||
setPhase(newStatus);
|
||||
if (newStatus === PAYMENT_STATUS.Paid) {
|
||||
void message.success('支付成功，积分已到账');
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
// 网络异常 → 延长间隔后继续轮询
|
||||
if (!cancelled) timer = setTimeout(poll, POLL_INTERVAL_MS * 2);
|
||||
}
|
||||
};
|
||||
|
||||
timer = setTimeout(poll, POLL_INTERVAL_MS);
|
||||
return () => {
|
||||
cancelled = true;
|
||||
clearTimeout(timer);
|
||||
};
|
||||
}, [phase, orderId, message]);
|
||||
|
||||
// ======== 页面锁定（待支付时禁止关闭容器） ========
|
||||
|
||||
useEffect(() => {
|
||||
const locked = phase === PAYMENT_STATUS.Pending;
|
||||
emit(EVENTS.PAGE_LOCK, { locked });
|
||||
// 组件卸载时确保解锁（防止锁定残留）
|
||||
return () => {
|
||||
if (locked) emit(EVENTS.PAGE_LOCK, { locked: false });
|
||||
};
|
||||
}, [phase]);
|
||||
|
||||
// ======== 操作回调 ========
|
||||
|
||||
/** 重新下单：回到表单，保留之前填写的金额 */
|
||||
const handleRetry = useCallback(() => {
|
||||
setPhase('form');
|
||||
setOrderId(null);
|
||||
setOrderStatus(null);
|
||||
setPayUrl(null);
|
||||
}, []);
|
||||
|
||||
/** 关闭充值页面 */
|
||||
const handleClose = useCallback(() => {
|
||||
emit(EVENTS.CLOSE_PAGE);
|
||||
}, []);
|
||||
|
||||
// ================================================================
|
||||
// 渲染：支付状态视图（非 form 阶段）
|
||||
// ================================================================
|
||||
|
||||
if (phase !== 'form') {
|
||||
const statusText = orderStatus ? getPaymentStatusText(orderStatus) : '';
|
||||
const isPending = phase === PAYMENT_STATUS.Pending;
|
||||
const isPaid = phase === PAYMENT_STATUS.Paid;
|
||||
const isTerminal = !isPending;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div style={{ padding: '16px 0' }}>
|
||||
<Result
|
||||
status={
|
||||
isPaid
|
||||
? 'success'
|
||||
: isPending
|
||||
? 'info'
|
||||
: 'error'
|
||||
}
|
||||
title={
|
||||
isPaid
|
||||
? '支付成功'
|
||||
: isPending
|
||||
? `等待支付（${statusText}）`
|
||||
: statusText
|
||||
}
|
||||
subTitle={
|
||||
isPaid
|
||||
? `已到账积分：${finalAmountYuan.toLocaleString()} 积分`
|
||||
: isPending
|
||||
? '请在新打开的浏览器页面中完成支付'
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
{/* ---- 订单信息卡片 ---- */}
|
||||
{isPending && (
|
||||
<div
|
||||
style={{
|
||||
background: isDark ? '#2E2A5A' : '#F5F3FF',
|
||||
padding: '12px 16px',
|
||||
borderRadius: 8,
|
||||
marginBottom: 16,
|
||||
textAlign: 'left',
|
||||
maxWidth: 360,
|
||||
margin: '0 auto 16px',
|
||||
}}
|
||||
>
|
||||
<Space orientation="vertical" size={6} style={{ width: '100%' }}>
|
||||
<Text style={{ fontSize: 12 }} type="secondary">
|
||||
订单编号：<Text copyable style={{ fontSize: 12 }}>{orderId}</Text>
|
||||
</Text>
|
||||
<Text style={{ fontSize: 13 }}>
|
||||
<DollarOutlined style={{ marginRight: 6, color: token.colorPrimary }} />
|
||||
充值金额：
|
||||
<Text strong>¥{finalAmountYuan.toLocaleString()} 元</Text>
|
||||
</Text>
|
||||
<Text style={{ fontSize: 13 }}>
|
||||
<WalletOutlined style={{ marginRight: 6, color: token.colorSuccess }} />
|
||||
到账积分：
|
||||
<Text strong>{finalAmountYuan.toLocaleString()}</Text> 积分
|
||||
</Text>
|
||||
</Space>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ---- 操作按钮 ---- */}
|
||||
<Space size={12}>
|
||||
{isPending && payUrl && (
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<DollarOutlined />}
|
||||
onClick={() => window.open(payUrl, '_blank')}
|
||||
>
|
||||
打开支付页面
|
||||
</Button>
|
||||
)}
|
||||
{isTerminal && !isPaid && (
|
||||
<Button type="primary" onClick={handleRetry}>
|
||||
重新下单
|
||||
</Button>
|
||||
)}
|
||||
<Button onClick={handleClose}>
|
||||
{isPaid ? '完成' : '关闭（取消支付）'}
|
||||
</Button>
|
||||
</Space>
|
||||
</Result>
|
||||
</div>
|
||||
|
||||
{/* ---- 协议弹窗（待支付阶段仍可查看） ---- */}
|
||||
<LegalTextModal
|
||||
open={legalOpen}
|
||||
type="points"
|
||||
onClose={() => setLegalOpen(false)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// ================================================================
|
||||
// 渲染：表单视图（form 阶段）
|
||||
// ================================================================
|
||||
|
||||
return (
|
||||
<>
|
||||
<div style={{ padding: '4px 0' }}>
|
||||
{/* ---- 页面副标题 ---- */}
|
||||
<Text
|
||||
type="secondary"
|
||||
style={{ fontSize: 13, marginBottom: 20, display: 'block' }}
|
||||
>
|
||||
选择充值金额或输入自定义金额（元）
|
||||
</Text>
|
||||
|
||||
{/* ---- Part 1：预设金额单选组 ---- */}
|
||||
<div style={{ marginBottom: 16 }}>
|
||||
<Radio.Group
|
||||
value={selectedAmount}
|
||||
onChange={(e) => {
|
||||
setSelectedAmount(e.target.value);
|
||||
setCustomAmount(null);
|
||||
clearError('amount');
|
||||
}}
|
||||
optionType="button"
|
||||
buttonStyle="solid"
|
||||
style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}
|
||||
>
|
||||
{PRESET_AMOUNTS.map((amt) => (
|
||||
<Radio.Button key={amt} value={amt}>
|
||||
{amt} 元
|
||||
</Radio.Button>
|
||||
))}
|
||||
</Radio.Group>
|
||||
{errors.amount && (
|
||||
<Text type="danger" style={{ fontSize: 12, marginTop: 4, display: 'block' }}>
|
||||
{errors.amount}
|
||||
</Text>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ---- Part 2：自定义金额输入 ---- */}
|
||||
<div style={{ marginBottom: 16 }}>
|
||||
<Space.Compact style={{ width: '100%' }}>
|
||||
<InputNumber
|
||||
value={customAmount}
|
||||
onChange={(val) => {
|
||||
setCustomAmount(val);
|
||||
setSelectedAmount(null);
|
||||
clearError('customAmount');
|
||||
}}
|
||||
min={10}
|
||||
step={10}
|
||||
max={MAX_AMOUNT_YUAN}
|
||||
placeholder="输入自定义金额（10的倍数）"
|
||||
style={{ flex: 1 }}
|
||||
size="large"
|
||||
precision={0}
|
||||
/>
|
||||
<Button size="large" disabled style={{ minWidth: 44 }}>
|
||||
元
|
||||
</Button>
|
||||
</Space.Compact>
|
||||
{errors.customAmount && (
|
||||
<Text type="danger" style={{ fontSize: 12, marginTop: 4, display: 'block' }}>
|
||||
{errors.customAmount}
|
||||
</Text>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ---- Part 3：到账信息 + 支付金额 ---- */}
|
||||
{finalAmountYuan > 0 && (
|
||||
<div
|
||||
style={{
|
||||
background: isDark ? '#2E2A5A' : '#F5F3FF',
|
||||
padding: '12px 16px',
|
||||
borderRadius: 8,
|
||||
marginBottom: 12,
|
||||
}}
|
||||
>
|
||||
<Space orientation="vertical" size={6}>
|
||||
<Text style={{ fontSize: 13 }}>
|
||||
<WalletOutlined style={{ marginRight: 6, color: token.colorPrimary }} />
|
||||
到账积分：
|
||||
<Text strong>{finalAmountYuan.toLocaleString()}</Text> 积分
|
||||
</Text>
|
||||
<Text style={{ fontSize: 13 }}>
|
||||
<DollarOutlined style={{ marginRight: 6, color: token.colorSuccess }} />
|
||||
支付金额：
|
||||
<Text strong style={{ color: token.colorPrimary, fontSize: 15 }}>
|
||||
¥{finalAmountYuan.toLocaleString()}
|
||||
</Text>
|
||||
{' '}元
|
||||
</Text>
|
||||
</Space>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Divider style={{ margin: '12px 0' }} />
|
||||
|
||||
{/* ---- Part 4：支付方式 ---- */}
|
||||
<div style={{ marginBottom: 16 }}>
|
||||
<Text
|
||||
type="secondary"
|
||||
style={{ fontSize: 12, marginBottom: 8, display: 'block' }}
|
||||
>
|
||||
选择支付方式
|
||||
</Text>
|
||||
<Radio.Group
|
||||
value={paymentMethod}
|
||||
onChange={(e) => handlePaymentChange(e.target.value)}
|
||||
optionType="button"
|
||||
buttonStyle="solid"
|
||||
>
|
||||
<Radio.Button value={PAYMENT_METHODS.Alipay}>
|
||||
<Space size={4}>
|
||||
<AlipayOutlined />
|
||||
支付宝
|
||||
</Space>
|
||||
</Radio.Button>
|
||||
<Radio.Button value={PAYMENT_METHODS.WeChat}>
|
||||
<Space size={4}>
|
||||
<WechatOutlined />
|
||||
微信支付
|
||||
</Space>
|
||||
</Radio.Button>
|
||||
</Radio.Group>
|
||||
</div>
|
||||
|
||||
<Divider style={{ margin: '12px 0' }} />
|
||||
|
||||
{/* ---- Part 5：充值协议 ---- */}
|
||||
<div style={{ marginBottom: 20 }}>
|
||||
<Checkbox
|
||||
checked={agreedToTerms}
|
||||
onChange={(e) => {
|
||||
setAgreedToTerms(e.target.checked);
|
||||
clearError('agreedToTerms');
|
||||
}}
|
||||
>
|
||||
<Text style={{ fontSize: 12 }}>
|
||||
我已阅读并同意
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
onClick={() => setLegalOpen(true)}
|
||||
style={{
|
||||
padding: '0 2px',
|
||||
fontSize: 12,
|
||||
height: 'auto',
|
||||
lineHeight: 'inherit',
|
||||
}}
|
||||
>
|
||||
《积分充值服务协议》
|
||||
</Button>
|
||||
</Text>
|
||||
</Checkbox>
|
||||
{errors.agreedToTerms && (
|
||||
<Text type="danger" style={{ fontSize: 12, marginTop: 4, display: 'block' }}>
|
||||
{errors.agreedToTerms}
|
||||
</Text>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ---- Part 6：操作按钮 ---- */}
|
||||
<div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
|
||||
<Button onClick={handleClose}>
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
loading={submitting}
|
||||
onClick={() => void handleSubmit()}
|
||||
disabled={finalAmountYuan <= 0}
|
||||
>
|
||||
提交
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ---- 协议弹窗 ---- */}
|
||||
<LegalTextModal
|
||||
open={legalOpen}
|
||||
type="points"
|
||||
onClose={() => setLegalOpen(false)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user