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:
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user