feat: migrate payment provider to easy-pay, add order history and refund support
- Replace zpay with easy-pay payment provider (new lib/easy-pay/ module) - Add order history page for users (pay/orders) - Add GET /api/orders/my endpoint to list user's own orders - Add GET /api/users/[id] endpoint for sub2api user lookup - Add order status tracking module (lib/order/status.ts) - Update config to support easy-pay credentials (merchant ID, key, gateway) - Update PaymentForm and PaymentQRCode components for easy-pay flow - Update pay page and admin page with new order management UI - Update order service to support easy-pay, cancellation, and refund
This commit is contained in:
erio
68
src/components/OrderStatus.tsx
Normal file
68
src/components/OrderStatus.tsx
Normal file
@@ -0,0 +1,68 @@
|
||||
'use client';
|
||||
|
||||
interface OrderStatusProps {
|
||||
status: string;
|
||||
onBack: () => void;
|
||||
}
|
||||
|
||||
const STATUS_CONFIG: Record<string, { label: string; color: string; icon: string; message: string }> = {
|
||||
COMPLETED: {
|
||||
label: '充值成功',
|
||||
color: 'text-green-600',
|
||||
icon: '✓',
|
||||
message: '余额已到账，感谢您的充值！',
|
||||
},
|
||||
PAID: {
|
||||
label: '充值中',
|
||||
color: 'text-blue-600',
|
||||
icon: '⟳',
|
||||
message: '支付成功，正在充值余额中...',
|
||||
},
|
||||
RECHARGING: {
|
||||
label: '充值中',
|
||||
color: 'text-blue-600',
|
||||
icon: '⟳',
|
||||
message: '正在充值余额中，请稍候...',
|
||||
},
|
||||
FAILED: {
|
||||
label: '充值失败',
|
||||
color: 'text-red-600',
|
||||
icon: '✗',
|
||||
message: '充值失败，请联系管理员处理。',
|
||||
},
|
||||
EXPIRED: {
|
||||
label: '订单超时',
|
||||
color: 'text-gray-500',
|
||||
icon: '⏰',
|
||||
message: '订单已超时，请重新创建订单。',
|
||||
},
|
||||
CANCELLED: {
|
||||
label: '已取消',
|
||||
color: 'text-gray-500',
|
||||
icon: '✗',
|
||||
message: '订单已取消。',
|
||||
},
|
||||
};
|
||||
|
||||
export default function OrderStatus({ status, onBack }: OrderStatusProps) {
|
||||
const config = STATUS_CONFIG[status] || {
|
||||
label: status,
|
||||
color: 'text-gray-600',
|
||||
icon: '?',
|
||||
message: '未知状态',
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center space-y-4 py-8">
|
||||
<div className={`text-6xl ${config.color}`}>{config.icon}</div>
|
||||
<h2 className={`text-xl font-bold ${config.color}`}>{config.label}</h2>
|
||||
<p className="text-center text-gray-500">{config.message}</p>
|
||||
<button
|
||||
onClick={onBack}
|
||||
className="mt-4 w-full rounded-lg bg-blue-600 py-3 font-medium text-white hover:bg-blue-700"
|
||||
>
|
||||
{status === 'COMPLETED' ? '完成' : '返回充值'}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
203
src/components/PaymentForm.tsx
Normal file
203
src/components/PaymentForm.tsx
Normal file
@@ -0,0 +1,203 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
|
||||
interface PaymentFormProps {
|
||||
userId: number;
|
||||
userName?: string;
|
||||
userBalance?: number;
|
||||
enabledPaymentTypes: string[];
|
||||
minAmount: number;
|
||||
maxAmount: number;
|
||||
onSubmit: (amount: number, paymentType: string) => Promise<void>;
|
||||
loading?: boolean;
|
||||
dark?: boolean;
|
||||
}
|
||||
|
||||
const QUICK_AMOUNTS = [10, 20, 50, 100, 200, 500];
|
||||
const AMOUNT_TEXT_PATTERN = /^\d*(\.\d{0,2})?$/;
|
||||
|
||||
function hasValidCentPrecision(num: number): boolean {
|
||||
return Math.abs(Math.round(num * 100) - num * 100) < 1e-8;
|
||||
}
|
||||
|
||||
export default function PaymentForm({
|
||||
userId,
|
||||
userName,
|
||||
userBalance,
|
||||
enabledPaymentTypes,
|
||||
minAmount,
|
||||
maxAmount,
|
||||
onSubmit,
|
||||
loading,
|
||||
dark = false,
|
||||
}: PaymentFormProps) {
|
||||
const [amount, setAmount] = useState<number | ''>('');
|
||||
const [paymentType, setPaymentType] = useState(enabledPaymentTypes[0] || 'alipay');
|
||||
const [customAmount, setCustomAmount] = useState('');
|
||||
|
||||
const handleQuickAmount = (val: number) => {
|
||||
setAmount(val);
|
||||
setCustomAmount(String(val));
|
||||
};
|
||||
|
||||
const handleCustomAmountChange = (val: string) => {
|
||||
if (!AMOUNT_TEXT_PATTERN.test(val)) {
|
||||
return;
|
||||
}
|
||||
|
||||
setCustomAmount(val);
|
||||
|
||||
if (val === '') {
|
||||
setAmount('');
|
||||
return;
|
||||
}
|
||||
|
||||
const num = parseFloat(val);
|
||||
if (!isNaN(num) && num > 0 && hasValidCentPrecision(num)) {
|
||||
setAmount(num);
|
||||
} else {
|
||||
setAmount('');
|
||||
}
|
||||
};
|
||||
|
||||
const selectedAmount = amount || 0;
|
||||
const isValid = selectedAmount >= minAmount && selectedAmount <= maxAmount && hasValidCentPrecision(selectedAmount);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!isValid || loading) return;
|
||||
await onSubmit(selectedAmount, paymentType);
|
||||
};
|
||||
|
||||
const isAlipay = (type: string) => type === 'alipay';
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
{/* User Info */}
|
||||
<div className={['rounded-xl border p-4', dark ? 'border-slate-700 bg-slate-800/80' : 'border-slate-200 bg-slate-50'].join(' ')}>
|
||||
<div className={['text-xs uppercase tracking-wide', dark ? 'text-slate-400' : 'text-slate-500'].join(' ')}>充值账户</div>
|
||||
<div className={['mt-1 text-base font-medium', dark ? 'text-slate-100' : 'text-slate-900'].join(' ')}>
|
||||
{userName || `用户 #${userId}`}
|
||||
</div>
|
||||
{userBalance !== undefined && (
|
||||
<div className={['mt-1 text-sm', dark ? 'text-slate-400' : 'text-slate-500'].join(' ')}>
|
||||
当前余额: <span className="font-medium text-green-600">{userBalance.toFixed(2)}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Quick Amount Selection */}
|
||||
<div>
|
||||
<label className={['mb-2 block text-sm font-medium', dark ? 'text-slate-200' : 'text-slate-700'].join(' ')}>
|
||||
充值金额
|
||||
</label>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{QUICK_AMOUNTS.map((val) => (
|
||||
<button
|
||||
key={val}
|
||||
type="button"
|
||||
onClick={() => handleQuickAmount(val)}
|
||||
className={`rounded-lg border-2 px-4 py-3 text-center font-medium transition-colors ${
|
||||
amount === val
|
||||
? 'border-blue-500 bg-blue-50 text-blue-700'
|
||||
: dark
|
||||
? 'border-slate-700 bg-slate-900 text-slate-200 hover:border-slate-500'
|
||||
: 'border-gray-200 bg-white text-gray-700 hover:border-gray-300'
|
||||
}`}
|
||||
>
|
||||
¥{val}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Custom Amount */}
|
||||
<div>
|
||||
<label className={['mb-2 block text-sm font-medium', dark ? 'text-slate-200' : 'text-slate-700'].join(' ')}>
|
||||
自定义金额
|
||||
</label>
|
||||
<div className="relative">
|
||||
<span className={['absolute left-3 top-1/2 -translate-y-1/2', dark ? 'text-slate-500' : 'text-gray-400'].join(' ')}>¥</span>
|
||||
<input
|
||||
type="text"
|
||||
inputMode="decimal"
|
||||
step="0.01"
|
||||
min={minAmount}
|
||||
max={maxAmount}
|
||||
value={customAmount}
|
||||
onChange={(e) => handleCustomAmountChange(e.target.value)}
|
||||
placeholder={`${minAmount} - ${maxAmount}`}
|
||||
className={[
|
||||
'w-full rounded-lg border py-3 pl-8 pr-4 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500',
|
||||
dark ? 'border-slate-700 bg-slate-900 text-slate-100' : 'border-gray-300 bg-white text-gray-900',
|
||||
].join(' ')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{customAmount !== '' && !isValid && (
|
||||
<div className={['text-xs', dark ? 'text-amber-300' : 'text-amber-700'].join(' ')}>
|
||||
{'\u91D1\u989D\u9700\u5728\u8303\u56F4\u5185\uFF0C\u4E14\u6700\u591A\u652F\u6301 2 \u4F4D\u5C0F\u6570\uFF08\u7CBE\u786E\u5230\u5206\uFF09'}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Payment Type */}
|
||||
<div>
|
||||
<label className={['mb-2 block text-sm font-medium', dark ? 'text-slate-200' : 'text-gray-700'].join(' ')}>支付方式</label>
|
||||
<div className="flex gap-3">
|
||||
{enabledPaymentTypes.map((type) => (
|
||||
<button
|
||||
key={type}
|
||||
type="button"
|
||||
onClick={() => setPaymentType(type)}
|
||||
className={`flex h-[58px] flex-1 items-center justify-center rounded-lg border px-3 transition-all ${
|
||||
paymentType === type
|
||||
? isAlipay(type)
|
||||
? 'border-cyan-400 bg-cyan-50 text-slate-900 shadow-sm'
|
||||
: 'border-green-500 bg-green-50 text-slate-900 shadow-sm'
|
||||
: dark
|
||||
? 'border-slate-700 bg-slate-900 text-slate-200 hover:border-slate-500'
|
||||
: 'border-gray-300 bg-white text-slate-700 hover:border-gray-400'
|
||||
}`}
|
||||
>
|
||||
{isAlipay(type) ? (
|
||||
<span className="flex items-center gap-2">
|
||||
<span className="flex h-8 w-8 items-center justify-center rounded-md bg-[#00AEEF] text-xl font-bold leading-none text-white">
|
||||
支
|
||||
</span>
|
||||
<span className="flex flex-col items-start leading-none">
|
||||
<span className="text-xl font-semibold tracking-tight">支付宝</span>
|
||||
<span className="text-[10px] tracking-[0.25em] text-slate-600">ALIPAY</span>
|
||||
</span>
|
||||
</span>
|
||||
) : (
|
||||
<span className="flex items-center gap-2">
|
||||
<span className="flex h-8 w-8 items-center justify-center rounded-full bg-[#2BB741] text-white">
|
||||
<svg viewBox="0 0 24 24" className="h-5 w-5" fill="none">
|
||||
<path d="M5 12.5 10.2 17 19 8" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</span>
|
||||
<span className="text-xl font-semibold tracking-tight">微信支付</span>
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Submit */}
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!isValid || loading}
|
||||
className={`w-full rounded-lg py-3 text-center font-medium text-white transition-colors ${
|
||||
isValid && !loading
|
||||
? 'bg-blue-600 hover:bg-blue-700 active:bg-blue-800'
|
||||
: dark ? 'cursor-not-allowed bg-slate-700 text-slate-300' : 'cursor-not-allowed bg-gray-300'
|
||||
}`}
|
||||
>
|
||||
{loading ? '处理中...' : `立即充值 ¥${selectedAmount || 0}`}
|
||||
</button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
219
src/components/PaymentQRCode.tsx
Normal file
219
src/components/PaymentQRCode.tsx
Normal file
@@ -0,0 +1,219 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useMemo, useState, useCallback } from 'react';
|
||||
import QRCode from 'qrcode';
|
||||
|
||||
interface PaymentQRCodeProps {
|
||||
orderId: string;
|
||||
payUrl?: string | null;
|
||||
qrCode?: string | null;
|
||||
paymentType?: 'alipay' | 'wxpay';
|
||||
amount: number;
|
||||
expiresAt: string;
|
||||
onStatusChange: (status: string) => void;
|
||||
onBack: () => void;
|
||||
dark?: boolean;
|
||||
}
|
||||
|
||||
const TEXT_EXPIRED = '\u8BA2\u5355\u5DF2\u8D85\u65F6';
|
||||
const TEXT_REMAINING = '\u5269\u4F59\u652F\u4ED8\u65F6\u95F4';
|
||||
const TEXT_GO_PAY = '\u70B9\u51FB\u524D\u5F80\u652F\u4ED8';
|
||||
const TEXT_SCAN_PAY = '\u8BF7\u4F7F\u7528\u652F\u4ED8\u5E94\u7528\u626B\u7801\u652F\u4ED8';
|
||||
const TEXT_BACK = '\u8FD4\u56DE';
|
||||
const TEXT_CANCEL_ORDER = '\u53D6\u6D88\u8BA2\u5355';
|
||||
const TERMINAL_STATUSES = new Set(['COMPLETED', 'FAILED', 'CANCELLED', 'EXPIRED', 'REFUNDED', 'REFUND_FAILED']);
|
||||
|
||||
export default function PaymentQRCode({
|
||||
orderId,
|
||||
payUrl,
|
||||
qrCode,
|
||||
paymentType,
|
||||
amount,
|
||||
expiresAt,
|
||||
onStatusChange,
|
||||
onBack,
|
||||
dark = false,
|
||||
}: PaymentQRCodeProps) {
|
||||
const [timeLeft, setTimeLeft] = useState('');
|
||||
const [expired, setExpired] = useState(false);
|
||||
const [qrDataUrl, setQrDataUrl] = useState('');
|
||||
const [imageLoading, setImageLoading] = useState(false);
|
||||
|
||||
const qrPayload = useMemo(() => {
|
||||
const value = (qrCode || payUrl || '').trim();
|
||||
return value;
|
||||
}, [qrCode, payUrl]);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
if (!qrPayload) {
|
||||
setQrDataUrl('');
|
||||
return;
|
||||
}
|
||||
|
||||
setImageLoading(true);
|
||||
QRCode.toDataURL(qrPayload, {
|
||||
width: 224,
|
||||
margin: 1,
|
||||
errorCorrectionLevel: 'M',
|
||||
})
|
||||
.then((url) => {
|
||||
if (!cancelled) {
|
||||
setQrDataUrl(url);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
if (!cancelled) {
|
||||
setQrDataUrl('');
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
if (!cancelled) {
|
||||
setImageLoading(false);
|
||||
}
|
||||
});
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [qrPayload]);
|
||||
|
||||
useEffect(() => {
|
||||
const updateTimer = () => {
|
||||
const now = Date.now();
|
||||
const expiry = new Date(expiresAt).getTime();
|
||||
const diff = expiry - now;
|
||||
|
||||
if (diff <= 0) {
|
||||
setTimeLeft(TEXT_EXPIRED);
|
||||
setExpired(true);
|
||||
return;
|
||||
}
|
||||
|
||||
const minutes = Math.floor(diff / 60000);
|
||||
const seconds = Math.floor((diff % 60000) / 1000);
|
||||
setTimeLeft(`${minutes}:${seconds.toString().padStart(2, '0')}`);
|
||||
};
|
||||
|
||||
updateTimer();
|
||||
const timer = setInterval(updateTimer, 1000);
|
||||
return () => clearInterval(timer);
|
||||
}, [expiresAt]);
|
||||
|
||||
const pollStatus = useCallback(async () => {
|
||||
try {
|
||||
const res = await fetch(`/api/orders/${orderId}`);
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
if (TERMINAL_STATUSES.has(data.status)) {
|
||||
onStatusChange(data.status);
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
// ignore polling errors
|
||||
}
|
||||
}, [orderId, onStatusChange]);
|
||||
|
||||
useEffect(() => {
|
||||
if (expired) return;
|
||||
pollStatus();
|
||||
const timer = setInterval(pollStatus, 2000);
|
||||
return () => clearInterval(timer);
|
||||
}, [pollStatus, expired]);
|
||||
|
||||
const handleCancel = async () => {
|
||||
try {
|
||||
const res = await fetch(`/api/orders/${orderId}`);
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
await fetch(`/api/orders/${orderId}/cancel`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ user_id: data.user_id }),
|
||||
});
|
||||
onStatusChange('CANCELLED');
|
||||
}
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
};
|
||||
|
||||
const isWx = paymentType === 'wxpay';
|
||||
const iconSrc = isWx ? '/icons/wxpay.svg' : '/icons/alipay.svg';
|
||||
const channelLabel = isWx ? '\u5FAE\u4FE1' : '\u652F\u4ED8\u5B9D';
|
||||
const iconBgClass = isWx ? 'bg-[#07C160]' : 'bg-[#1677FF]';
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center space-y-4">
|
||||
<div className="text-center">
|
||||
<div className="text-4xl font-bold text-blue-600">{'\u00A5'}{amount.toFixed(2)}</div>
|
||||
<div className={`mt-1 text-sm ${expired ? 'text-red-500' : dark ? 'text-slate-400' : 'text-gray-500'}`}>
|
||||
{expired ? TEXT_EXPIRED : `${TEXT_REMAINING}: ${timeLeft}`}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!expired && (
|
||||
<>
|
||||
{qrDataUrl && (
|
||||
<div className={['relative rounded-lg border p-4', dark ? 'border-slate-700 bg-slate-900' : 'border-gray-200 bg-white'].join(' ')}>
|
||||
{imageLoading && (
|
||||
<div className="absolute inset-0 z-10 flex items-center justify-center rounded-lg bg-black/10">
|
||||
<div className="h-8 w-8 animate-spin rounded-full border-2 border-blue-500 border-t-transparent" />
|
||||
</div>
|
||||
)}
|
||||
<img src={qrDataUrl} alt="payment qrcode" className="h-56 w-56 rounded" />
|
||||
<div className="pointer-events-none absolute inset-0 flex items-center justify-center">
|
||||
<span className={`rounded-full p-2 shadow ring-2 ring-white ${iconBgClass}`}>
|
||||
<img src={iconSrc} alt={channelLabel} className="h-5 w-5 brightness-0 invert" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!qrDataUrl && payUrl && (
|
||||
<a
|
||||
href={payUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="rounded-lg bg-blue-600 px-8 py-3 font-medium text-white hover:bg-blue-700"
|
||||
>
|
||||
{TEXT_GO_PAY}
|
||||
</a>
|
||||
)}
|
||||
|
||||
{!qrDataUrl && !payUrl && (
|
||||
<div className="text-center">
|
||||
<div className={['rounded-lg border-2 border-dashed p-8', dark ? 'border-slate-700' : 'border-gray-300'].join(' ')}>
|
||||
<p className={['text-sm', dark ? 'text-slate-400' : 'text-gray-500'].join(' ')}>{TEXT_SCAN_PAY}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<p className={['text-center text-sm', dark ? 'text-slate-400' : 'text-gray-500'].join(' ')}>
|
||||
{`\u8BF7\u6253\u5F00${channelLabel}\u626B\u4E00\u626B\u5B8C\u6210\u652F\u4ED8`}
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="flex w-full gap-3">
|
||||
<button
|
||||
onClick={onBack}
|
||||
className={[
|
||||
'flex-1 rounded-lg border py-2 text-sm',
|
||||
dark ? 'border-slate-700 text-slate-300 hover:bg-slate-800' : 'border-gray-300 text-gray-600 hover:bg-gray-50',
|
||||
].join(' ')}
|
||||
>
|
||||
{TEXT_BACK}
|
||||
</button>
|
||||
{!expired && (
|
||||
<button
|
||||
onClick={handleCancel}
|
||||
className="flex-1 rounded-lg border border-red-300 py-2 text-sm text-red-600 hover:bg-red-50"
|
||||
>
|
||||
{TEXT_CANCEL_ORDER}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
129
src/components/admin/OrderDetail.tsx
Normal file
129
src/components/admin/OrderDetail.tsx
Normal file
@@ -0,0 +1,129 @@
|
||||
'use client';
|
||||
|
||||
interface AuditLog {
|
||||
id: string;
|
||||
action: string;
|
||||
detail: string | null;
|
||||
operator: string | null;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
interface OrderDetailProps {
|
||||
order: {
|
||||
id: string;
|
||||
userId: number;
|
||||
userName: string | null;
|
||||
userEmail: string | null;
|
||||
amount: number;
|
||||
status: string;
|
||||
paymentType: string;
|
||||
rechargeCode: string;
|
||||
zpayTradeNo: string | null;
|
||||
refundAmount: number | null;
|
||||
refundReason: string | null;
|
||||
refundAt: string | null;
|
||||
forceRefund: boolean;
|
||||
expiresAt: string;
|
||||
paidAt: string | null;
|
||||
completedAt: string | null;
|
||||
failedAt: string | null;
|
||||
failedReason: string | null;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
clientIp: string | null;
|
||||
paymentSuccess?: boolean;
|
||||
rechargeSuccess?: boolean;
|
||||
rechargeStatus?: string;
|
||||
auditLogs: AuditLog[];
|
||||
};
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export default function OrderDetail({ order, onClose }: OrderDetailProps) {
|
||||
const fields = [
|
||||
{ label: '订单号', value: order.id },
|
||||
{ label: '用户ID', value: order.userId },
|
||||
{ label: '用户名', value: order.userName || '-' },
|
||||
{ label: '邮箱', value: order.userEmail || '-' },
|
||||
{ label: '金额', value: `¥${order.amount.toFixed(2)}` },
|
||||
{ label: '状态', value: order.status },
|
||||
{ label: 'Payment OK', value: order.paymentSuccess ? 'yes' : 'no' },
|
||||
{ label: 'Recharge OK', value: order.rechargeSuccess ? 'yes' : 'no' },
|
||||
{ label: 'Recharge Status', value: order.rechargeStatus || '-' },
|
||||
{ label: '支付方式', value: order.paymentType === 'alipay' ? '支付宝' : '微信支付' },
|
||||
{ label: '充值码', value: order.rechargeCode },
|
||||
{ label: 'ZPAY订单号', value: order.zpayTradeNo || '-' },
|
||||
{ label: '客户端IP', value: order.clientIp || '-' },
|
||||
{ label: '创建时间', value: new Date(order.createdAt).toLocaleString('zh-CN') },
|
||||
{ label: '过期时间', value: new Date(order.expiresAt).toLocaleString('zh-CN') },
|
||||
{ label: '支付时间', value: order.paidAt ? new Date(order.paidAt).toLocaleString('zh-CN') : '-' },
|
||||
{ label: '完成时间', value: order.completedAt ? new Date(order.completedAt).toLocaleString('zh-CN') : '-' },
|
||||
{ label: '失败时间', value: order.failedAt ? new Date(order.failedAt).toLocaleString('zh-CN') : '-' },
|
||||
{ label: '失败原因', value: order.failedReason || '-' },
|
||||
];
|
||||
|
||||
if (order.refundAmount) {
|
||||
fields.push(
|
||||
{ label: '退款金额', value: `¥${order.refundAmount.toFixed(2)}` },
|
||||
{ label: '退款原因', value: order.refundReason || '-' },
|
||||
{ label: '退款时间', value: order.refundAt ? new Date(order.refundAt).toLocaleString('zh-CN') : '-' },
|
||||
{ label: '强制退款', value: order.forceRefund ? '是' : '否' },
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={onClose}>
|
||||
<div
|
||||
className="max-h-[80vh] w-full max-w-2xl overflow-y-auto rounded-xl bg-white p-6 shadow-xl"
|
||||
onClick={e => e.stopPropagation()}
|
||||
>
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<h3 className="text-lg font-bold">订单详情</h3>
|
||||
<button onClick={onClose} className="text-gray-400 hover:text-gray-600">✕</button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{fields.map(({ label, value }) => (
|
||||
<div key={label} className="rounded-lg bg-gray-50 p-3">
|
||||
<div className="text-xs text-gray-500">{label}</div>
|
||||
<div className="mt-1 break-all text-sm font-medium">{value}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Audit Logs */}
|
||||
<div className="mt-6">
|
||||
<h4 className="mb-3 font-medium text-gray-900">审计日志</h4>
|
||||
<div className="space-y-2">
|
||||
{order.auditLogs.map((log) => (
|
||||
<div key={log.id} className="rounded-lg border border-gray-100 bg-gray-50 p-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm font-medium">{log.action}</span>
|
||||
<span className="text-xs text-gray-400">
|
||||
{new Date(log.createdAt).toLocaleString('zh-CN')}
|
||||
</span>
|
||||
</div>
|
||||
{log.detail && (
|
||||
<div className="mt-1 break-all text-xs text-gray-500">{log.detail}</div>
|
||||
)}
|
||||
{log.operator && (
|
||||
<div className="mt-1 text-xs text-gray-400">操作者: {log.operator}</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
{order.auditLogs.length === 0 && (
|
||||
<div className="text-center text-sm text-gray-400">暂无日志</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="mt-6 w-full rounded-lg border border-gray-300 py-2 text-sm text-gray-600 hover:bg-gray-50"
|
||||
>
|
||||
关闭
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
117
src/components/admin/OrderTable.tsx
Normal file
117
src/components/admin/OrderTable.tsx
Normal file
@@ -0,0 +1,117 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
|
||||
interface Order {
|
||||
id: string;
|
||||
userId: number;
|
||||
userName: string | null;
|
||||
userEmail: string | null;
|
||||
amount: number;
|
||||
status: string;
|
||||
paymentType: string;
|
||||
createdAt: string;
|
||||
paidAt: string | null;
|
||||
completedAt: string | null;
|
||||
failedReason: string | null;
|
||||
expiresAt: string;
|
||||
rechargeRetryable?: boolean;
|
||||
}
|
||||
|
||||
interface OrderTableProps {
|
||||
orders: Order[];
|
||||
onRetry: (orderId: string) => void;
|
||||
onCancel: (orderId: string) => void;
|
||||
onViewDetail: (orderId: string) => void;
|
||||
}
|
||||
|
||||
const STATUS_LABELS: Record<string, { label: string; className: string }> = {
|
||||
PENDING: { label: '待支付', className: 'bg-yellow-100 text-yellow-800' },
|
||||
PAID: { label: '已支付', className: 'bg-blue-100 text-blue-800' },
|
||||
RECHARGING: { label: '充值中', className: 'bg-blue-100 text-blue-800' },
|
||||
COMPLETED: { label: '已完成', className: 'bg-green-100 text-green-800' },
|
||||
EXPIRED: { label: '已超时', className: 'bg-gray-100 text-gray-800' },
|
||||
CANCELLED: { label: '已取消', className: 'bg-gray-100 text-gray-800' },
|
||||
FAILED: { label: '充值失败', className: 'bg-red-100 text-red-800' },
|
||||
REFUNDING: { label: '退款中', className: 'bg-orange-100 text-orange-800' },
|
||||
REFUNDED: { label: '已退款', className: 'bg-purple-100 text-purple-800' },
|
||||
REFUND_FAILED: { label: '退款失败', className: 'bg-red-100 text-red-800' },
|
||||
};
|
||||
|
||||
export default function OrderTable({ orders, onRetry, onCancel, onViewDetail }: OrderTableProps) {
|
||||
return (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full divide-y divide-gray-200">
|
||||
<thead className="bg-gray-50">
|
||||
<tr>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">订单号</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">用户</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">金额</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">状态</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">支付方式</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">创建时间</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200 bg-white">
|
||||
{orders.map((order) => {
|
||||
const statusInfo = STATUS_LABELS[order.status] || { label: order.status, className: 'bg-gray-100 text-gray-800' };
|
||||
return (
|
||||
<tr key={order.id} className="hover:bg-gray-50">
|
||||
<td className="whitespace-nowrap px-4 py-3 text-sm">
|
||||
<button
|
||||
onClick={() => onViewDetail(order.id)}
|
||||
className="text-blue-600 hover:underline"
|
||||
>
|
||||
{order.id.slice(0, 12)}...
|
||||
</button>
|
||||
</td>
|
||||
<td className="whitespace-nowrap px-4 py-3 text-sm">
|
||||
<div>{order.userName || '-'}</div>
|
||||
<div className="text-xs text-gray-400">{order.userEmail || `ID: ${order.userId}`}</div>
|
||||
</td>
|
||||
<td className="whitespace-nowrap px-4 py-3 text-sm font-medium">
|
||||
¥{order.amount.toFixed(2)}
|
||||
</td>
|
||||
<td className="whitespace-nowrap px-4 py-3 text-sm">
|
||||
<span className={`inline-flex rounded-full px-2 py-1 text-xs font-semibold ${statusInfo.className}`}>
|
||||
{statusInfo.label}
|
||||
</span>
|
||||
</td>
|
||||
<td className="whitespace-nowrap px-4 py-3 text-sm text-gray-500">
|
||||
{order.paymentType === 'alipay' ? '支付宝' : '微信支付'}
|
||||
</td>
|
||||
<td className="whitespace-nowrap px-4 py-3 text-sm text-gray-500">
|
||||
{new Date(order.createdAt).toLocaleString('zh-CN')}
|
||||
</td>
|
||||
<td className="whitespace-nowrap px-4 py-3 text-sm">
|
||||
<div className="flex gap-1">
|
||||
{order.rechargeRetryable && (
|
||||
<button
|
||||
onClick={() => onRetry(order.id)}
|
||||
className="rounded bg-blue-100 px-2 py-1 text-xs text-blue-700 hover:bg-blue-200"
|
||||
>
|
||||
重试
|
||||
</button>
|
||||
)}
|
||||
{order.status === 'PENDING' && (
|
||||
<button
|
||||
onClick={() => onCancel(order.id)}
|
||||
className="rounded bg-red-100 px-2 py-1 text-xs text-red-700 hover:bg-red-200"
|
||||
>
|
||||
取消
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
{orders.length === 0 && (
|
||||
<div className="py-12 text-center text-gray-500">暂无订单</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
99
src/components/admin/RefundDialog.tsx
Normal file
99
src/components/admin/RefundDialog.tsx
Normal file
@@ -0,0 +1,99 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
|
||||
interface RefundDialogProps {
|
||||
orderId: string;
|
||||
amount: number;
|
||||
onConfirm: (reason: string, force: boolean) => Promise<void>;
|
||||
onCancel: () => void;
|
||||
warning?: string;
|
||||
requireForce?: boolean;
|
||||
}
|
||||
|
||||
export default function RefundDialog({
|
||||
orderId,
|
||||
amount,
|
||||
onConfirm,
|
||||
onCancel,
|
||||
warning,
|
||||
requireForce,
|
||||
}: RefundDialogProps) {
|
||||
const [reason, setReason] = useState('');
|
||||
const [force, setForce] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const handleConfirm = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
await onConfirm(reason, force);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={onCancel}>
|
||||
<div className="w-full max-w-md rounded-xl bg-white p-6 shadow-xl" onClick={e => e.stopPropagation()}>
|
||||
<h3 className="text-lg font-bold text-gray-900">确认退款</h3>
|
||||
|
||||
<div className="mt-4 space-y-3">
|
||||
<div className="rounded-lg bg-gray-50 p-3">
|
||||
<div className="text-sm text-gray-500">订单号</div>
|
||||
<div className="text-sm font-mono">{orderId}</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg bg-gray-50 p-3">
|
||||
<div className="text-sm text-gray-500">退款金额</div>
|
||||
<div className="text-lg font-bold text-red-600">¥{amount.toFixed(2)}</div>
|
||||
</div>
|
||||
|
||||
{warning && (
|
||||
<div className="rounded-lg bg-yellow-50 p-3 text-sm text-yellow-700">
|
||||
{warning}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label className="mb-1 block text-sm font-medium text-gray-700">退款原因</label>
|
||||
<input
|
||||
type="text"
|
||||
value={reason}
|
||||
onChange={(e) => setReason(e.target.value)}
|
||||
placeholder="请输入退款原因（可选）"
|
||||
className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{requireForce && (
|
||||
<label className="flex items-center gap-2 text-sm">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={force}
|
||||
onChange={(e) => setForce(e.target.checked)}
|
||||
className="rounded border-gray-300"
|
||||
/>
|
||||
<span className="text-red-600">强制退款（余额可能扣为负数）</span>
|
||||
</label>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mt-6 flex gap-3">
|
||||
<button
|
||||
onClick={onCancel}
|
||||
className="flex-1 rounded-lg border border-gray-300 py-2 text-sm text-gray-600 hover:bg-gray-50"
|
||||
>
|
||||
取消
|
||||
</button>
|
||||
<button
|
||||
onClick={handleConfirm}
|
||||
disabled={loading || (requireForce && !force)}
|
||||
className="flex-1 rounded-lg bg-red-600 py-2 text-sm font-medium text-white hover:bg-red-700 disabled:cursor-not-allowed disabled:bg-gray-300"
|
||||
>
|
||||
{loading ? '处理中...' : '确认退款'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user