refactor: 常量化订单状态 + 支付渠道/提供商分离显示 + H5自动跳转
- 新增 src/lib/constants.ts，集中管理 ORDER_STATUS / PAYMENT_TYPE / PAYMENT_PREFIX 等常量
- 后端 service/status/timeout/limits 全量替换魔法字符串为 ORDER_STATUS.*
- PaymentTypeMeta 新增 provider 字段，分离 sublabel（选择器展示）与 provider（提供商名称）
- getPaymentDisplayInfo() 返回 { channel, provider } 用于用户端/管理端展示
- 支持通过 PAYMENT_SUBLABEL_* 环境变量覆盖默认 sublabel
- PaymentQRCode: H5 支付自动跳转（含易支付微信 weixin:// scheme 兜底）
- 订单列表/详情页：显示可读的渠道名+提供商，不再暴露内部标识符
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
erio
@@ -6,6 +6,7 @@ import {
|
||||
formatStatus,
|
||||
formatCreatedAt,
|
||||
getStatusBadgeClass,
|
||||
getPaymentDisplayInfo,
|
||||
type MyOrder,
|
||||
type OrderStatusFilter,
|
||||
} from '@/lib/pay-utils';
|
||||
@@ -113,7 +114,10 @@ export default function MobileOrderList({
|
||||
</span>
|
||||
</div>
|
||||
<div className={['mt-1 text-sm', isDark ? 'text-slate-300' : 'text-slate-600'].join(' ')}>
|
||||
{order.paymentType}
|
||||
{(() => {
|
||||
const { channel, provider } = getPaymentDisplayInfo(order.paymentType);
|
||||
return provider ? `${channel} · ${provider}` : channel;
|
||||
})()}
|
||||
</div>
|
||||
<div className={['mt-0.5 text-xs', isDark ? 'text-slate-400' : 'text-slate-500'].join(' ')}>
|
||||
{formatCreatedAt(order.createdAt)}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { formatStatus, formatCreatedAt, getStatusBadgeClass, type MyOrder } from '@/lib/pay-utils';
|
||||
import { formatStatus, formatCreatedAt, getStatusBadgeClass, getPaymentDisplayInfo, type MyOrder } from '@/lib/pay-utils';
|
||||
|
||||
interface OrderTableProps {
|
||||
isDark: boolean;
|
||||
@@ -67,7 +67,21 @@ export default function OrderTable({ isDark, loading, error, orders }: OrderTabl
|
||||
>
|
||||
<div className="font-medium">#{order.id.slice(0, 12)}</div>
|
||||
<div className="font-semibold">¥{order.amount.toFixed(2)}</div>
|
||||
<div>{order.paymentType}</div>
|
||||
<div>
|
||||
{(() => {
|
||||
const { channel, provider } = getPaymentDisplayInfo(order.paymentType);
|
||||
return (
|
||||
<>
|
||||
<span>{channel}</span>
|
||||
{provider && (
|
||||
<span className={['ml-1 text-xs', isDark ? 'text-slate-400' : 'text-slate-500'].join(' ')}>
|
||||
{provider}
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
<div>
|
||||
<span
|
||||
className={['rounded-full px-2 py-0.5 text-xs', getStatusBadgeClass(order.status, isDark)].join(
|
||||
|
||||
@@ -9,6 +9,7 @@ import {
|
||||
getPaymentIconSrc,
|
||||
getPaymentChannelLabel,
|
||||
} from '@/lib/pay-utils';
|
||||
import { TERMINAL_STATUSES } from '@/lib/constants';
|
||||
|
||||
interface PaymentQRCodeProps {
|
||||
orderId: string;
|
||||
@@ -36,7 +37,6 @@ const TEXT_BACK = '\u8FD4\u56DE';
|
||||
const TEXT_CANCEL_ORDER = '\u53D6\u6D88\u8BA2\u5355';
|
||||
const TEXT_H5_HINT =
|
||||
'\u652F\u4ED8\u5B8C\u6210\u540E\u8BF7\u8FD4\u56DE\u6B64\u9875\u9762\uFF0C\u7CFB\u7EDF\u5C06\u81EA\u52A8\u786E\u8BA4';
|
||||
const TERMINAL_STATUSES = new Set(['COMPLETED', 'FAILED', 'CANCELLED', 'EXPIRED', 'REFUNDED', 'REFUND_FAILED']);
|
||||
|
||||
export default function PaymentQRCode({
|
||||
orderId,
|
||||
@@ -62,6 +62,7 @@ export default function PaymentQRCode({
|
||||
const [qrDataUrl, setQrDataUrl] = useState('');
|
||||
const [imageLoading, setImageLoading] = useState(false);
|
||||
const [cancelBlocked, setCancelBlocked] = useState(false);
|
||||
const [redirected, setRedirected] = useState(false);
|
||||
|
||||
// Stripe Payment Element state
|
||||
const [stripeLoaded, setStripeLoaded] = useState(false);
|
||||
@@ -80,6 +81,24 @@ export default function PaymentQRCode({
|
||||
// alipay_direct 使用电脑网站支付，payUrl 是跳转链接不是二维码内容
|
||||
const isRedirect = isRedirectPayment(paymentType);
|
||||
|
||||
// 移动端可用的跳转链接：优先 payUrl，其次尝试 qrCode（微信 weixin:// 协议可直接唤起）
|
||||
const mobileRedirectUrl = payUrl || (qrCode && /^(https?:|weixin:)/i.test(qrCode) ? qrCode : null);
|
||||
|
||||
// 自动跳转：redirect 支付方式 或 移动端 H5
|
||||
const shouldAutoRedirect = !expired && !isStripeType(paymentType) && ((isRedirect && payUrl) || (isMobile && mobileRedirectUrl));
|
||||
|
||||
useEffect(() => {
|
||||
if (!shouldAutoRedirect || redirected) return;
|
||||
const url = isRedirect ? payUrl! : mobileRedirectUrl!;
|
||||
setRedirected(true);
|
||||
// embedded iframe 不能 location.href 跳转，用 window.open
|
||||
if (isEmbedded) {
|
||||
window.open(url, '_blank');
|
||||
} else {
|
||||
window.location.href = url;
|
||||
}
|
||||
}, [shouldAutoRedirect, redirected, isRedirect, payUrl, mobileRedirectUrl, isEmbedded]);
|
||||
|
||||
const qrPayload = useMemo(() => {
|
||||
if (isRedirect && !qrCode) return '';
|
||||
const value = (qrCode || payUrl || '').trim();
|
||||
@@ -448,31 +467,22 @@ export default function PaymentQRCode({
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
) : isMobile && payUrl ? (
|
||||
) : shouldAutoRedirect ? (
|
||||
<>
|
||||
<div className="flex items-center justify-center py-6">
|
||||
<div className={`h-8 w-8 animate-spin rounded-full border-2 border-t-transparent`} style={{ borderColor: meta.color, borderTopColor: 'transparent' }} />
|
||||
<span className={['ml-3 text-sm', dark ? 'text-slate-400' : 'text-gray-500'].join(' ')}>
|
||||
正在跳转到{channelLabel}...
|
||||
</span>
|
||||
</div>
|
||||
<a
|
||||
href={payUrl}
|
||||
href={isRedirect ? payUrl! : mobileRedirectUrl!}
|
||||
target={isEmbedded ? '_blank' : '_self'}
|
||||
rel="noopener noreferrer"
|
||||
className={`flex w-full items-center justify-center gap-2 rounded-lg py-3 font-medium text-white shadow-md ${iconBgClass}`}
|
||||
>
|
||||
<img src={iconSrc} alt={channelLabel} className="h-5 w-5 brightness-0 invert" />
|
||||
{`打开${channelLabel}支付`}
|
||||
</a>
|
||||
<p className={['text-center text-sm', dark ? 'text-slate-400' : 'text-gray-500'].join(' ')}>
|
||||
{TEXT_H5_HINT}
|
||||
</p>
|
||||
</>
|
||||
) : isRedirect && payUrl ? (
|
||||
<>
|
||||
<a
|
||||
href={payUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className={`flex w-full items-center justify-center gap-2 rounded-lg py-3 font-medium text-white shadow-md ${meta.buttonClass}`}
|
||||
>
|
||||
{iconSrc && <img src={iconSrc} alt={channelLabel} className="h-5 w-5 brightness-0 invert" />}
|
||||
{`前往${channelLabel}收银台`}
|
||||
{redirected ? `未跳转？点击前往${channelLabel}` : `前往${channelLabel}支付`}
|
||||
</a>
|
||||
<p className={['text-center text-sm', dark ? 'text-slate-400' : 'text-gray-500'].join(' ')}>
|
||||
{TEXT_H5_HINT}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import { getPaymentTypeLabel } from '@/lib/pay-utils';
|
||||
import { getPaymentDisplayInfo } from '@/lib/pay-utils';
|
||||
|
||||
interface AuditLog {
|
||||
id: string;
|
||||
@@ -55,7 +55,8 @@ export default function OrderDetail({ order, onClose, dark }: OrderDetailProps)
|
||||
{ label: 'Payment OK', value: order.paymentSuccess ? 'yes' : 'no' },
|
||||
{ label: 'Recharge OK', value: order.rechargeSuccess ? 'yes' : 'no' },
|
||||
{ label: 'Recharge Status', value: order.rechargeStatus || '-' },
|
||||
{ label: '支付方式', value: getPaymentTypeLabel(order.paymentType) },
|
||||
{ label: '支付渠道', value: getPaymentDisplayInfo(order.paymentType).channel },
|
||||
{ label: '提供商', value: getPaymentDisplayInfo(order.paymentType).provider || '-' },
|
||||
{ label: '充值码', value: order.rechargeCode },
|
||||
{ label: '支付单号', value: order.paymentTradeNo || '-' },
|
||||
{ label: '客户端IP', value: order.clientIp || '-' },
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import { getPaymentTypeLabel } from '@/lib/pay-utils';
|
||||
import { getPaymentDisplayInfo } from '@/lib/pay-utils';
|
||||
|
||||
interface Order {
|
||||
id: string;
|
||||
@@ -94,7 +94,21 @@ export default function OrderTable({ orders, onRetry, onCancel, onViewDetail, da
|
||||
{statusInfo.label}
|
||||
</span>
|
||||
</td>
|
||||
<td className={tdMuted}>{getPaymentTypeLabel(order.paymentType)}</td>
|
||||
<td className={tdMuted}>
|
||||
{(() => {
|
||||
const { channel, provider } = getPaymentDisplayInfo(order.paymentType);
|
||||
return (
|
||||
<>
|
||||
{channel}
|
||||
{provider && (
|
||||
<span className={dark ? 'ml-1 text-xs text-slate-500' : 'ml-1 text-xs text-slate-400'}>
|
||||
{provider}
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
})()}
|
||||
</td>
|
||||
<td className={tdMuted}>{order.srcHost || '-'}</td>
|
||||
<td className={tdMuted}>{new Date(order.createdAt).toLocaleString('zh-CN')}</td>
|
||||
<td className="whitespace-nowrap px-4 py-3 text-sm">
|
||||
|
||||
Reference in New Issue
Block a user