wanwu/sub2apipay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 订单列表支持分页查询，分页大小可选 20/50/100

Browse Source 
- /api/orders/my 新增 page/page_size 参数，返回分页信息和全局状态统计
- 用户订单页：分页控件（首/上/下/末页）+ 分页大小选择，摘要卡片改为全局统计
- 管理员订单页：分页大小选择器（20/50/100）+ 首尾页跳转按钮
This commit is contained in:
erio
2026-03-01 20:04:49 +08:00
parent e4005da38e
commit 292c14b882
3 changed files with 210 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/app/admin/page.tsx
View File

@@ -43,6 +43,7 @@ function AdminContent() {
const [orders, setOrders] = useState<AdminOrder[]>([]);
const [total, setTotal] = useState(0);
const [page, setPage] = useState(1);
const [pageSize, setPageSize] = useState(20);
const [totalPages, setTotalPages] = useState(1);
const [statusFilter, setStatusFilter] = useState('');
const [loading, setLoading] = useState(true);
@@ -54,7 +55,7 @@ function AdminContent() {
if (!token) return;
setLoading(true);
try {
const params = new URLSearchParams({ token, page: String(page), page_size: '20' });
const params = new URLSearchParams({ token, page: String(page), page_size: String(pageSize) });
if (statusFilter) params.set('status', statusFilter);
const res = await fetch(`/api/admin/orders?${params}`);
@@ -75,7 +76,7 @@ function AdminContent() {
} finally {
setLoading(false);
}
}, [token, page, statusFilter]);
}, [token, page, pageSize, statusFilter]);
useEffect(() => {
fetchOrders();
@@ -198,14 +199,36 @@ function AdminContent() {
</div>
{/* Pagination */}
{totalPages > 1 && (
<div className="mt-4 flex items-center justify-between text-sm text-gray-500">
<span>共 {total} 条记录</span>
<div className="flex gap-2">
<div className="mt-4 flex flex-wrap items-center justify-between gap-3 text-sm text-gray-500">
<div className="flex items-center gap-2">
<span>共 {total} 条，每页</span>
{[20, 50, 100].map((s) => (
<button
key={s}
onClick={() => { setPageSize(s); setPage(1); }}
className={`rounded border px-2.5 py-1 text-xs font-medium transition-colors ${
pageSize === s
? 'border-blue-500 bg-blue-50 text-blue-700'
: 'border-gray-300 text-gray-600 hover:bg-gray-100'
}`}
>
{s}
</button>
))}
</div>
{totalPages > 1 && (
<div className="flex items-center gap-1.5">
<button
onClick={() => setPage(1)}
disabled={page <= 1}
className="rounded border px-2.5 py-1 disabled:opacity-40 hover:bg-gray-100"
>
««
</button>
<button
onClick={() => setPage((p) => Math.max(1, p - 1))}
disabled={page <= 1}
className="rounded border px-3 py-1 disabled:opacity-50"
className="rounded border px-3 py-1 disabled:opacity-40 hover:bg-gray-100"
>
上一页
</button>
@@ -215,13 +238,20 @@ function AdminContent() {
<button
onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
disabled={page >= totalPages}
className="rounded border px-3 py-1 disabled:opacity-50"
className="rounded border px-3 py-1 disabled:opacity-40 hover:bg-gray-100"
>
下一页
</button>
<button
onClick={() => setPage(totalPages)}
disabled={page >= totalPages}
className="rounded border px-2.5 py-1 disabled:opacity-40 hover:bg-gray-100"
>
»»
</button>
</div>
</div>
)}
)}
</div>
{/* Order Detail */}
{detailOrder && <OrderDetail order={detailOrder} onClose={() => setDetailOrder(null)} />}

55
src/app/api/orders/my/route.ts
View File

@@ -3,28 +3,44 @@ import { prisma } from '@/lib/db';
import { getCurrentUserByToken } from '@/lib/sub2api/client';
import { deriveOrderState, isRechargeRetryable } from '@/lib/order/status';
const VALID_PAGE_SIZES = [20, 50, 100];
export async function GET(request: NextRequest) {
const token = request.nextUrl.searchParams.get('token')?.trim();
const searchParams = request.nextUrl.searchParams;
const token = searchParams.get('token')?.trim();
if (!token) {
return NextResponse.json({ error: 'token is required' }, { status: 400 });
}
const page = Math.max(1, Number(searchParams.get('page') || '1'));
const rawPageSize = Number(searchParams.get('page_size') || '20');
const pageSize = VALID_PAGE_SIZES.includes(rawPageSize) ? rawPageSize : 20;
try {
const user = await getCurrentUserByToken(token);
const orders = await prisma.order.findMany({
where: { userId: user.id },
orderBy: { createdAt: 'desc' },
take: 20,
select: {
id: true,
amount: true,
status: true,
paymentType: true,
createdAt: true,
paidAt: true,
completedAt: true,
},
});
const where = { userId: user.id };
const [orders, total, statusGroups] = await Promise.all([
prisma.order.findMany({
where,
orderBy: { createdAt: 'desc' },
skip: (page - 1) * pageSize,
take: pageSize,
select: {
id: true,
amount: true,
status: true,
paymentType: true,
createdAt: true,
paidAt: true,
completedAt: true,
},
}),
prisma.order.count({ where }),
prisma.order.groupBy({ by: ['status'], where, _count: true }),
]);
const sc = Object.fromEntries(statusGroups.map((g) => [g.status, g._count]));
return NextResponse.json({
user: {
@@ -48,6 +64,15 @@ export async function GET(request: NextRequest) {
rechargeRetryable: isRechargeRetryable(item),
};
}),
summary: {
total,
pending: sc['PENDING'] || 0,
completed: (sc['COMPLETED'] || 0) + (sc['PAID'] || 0) + (sc['RECHARGING'] || 0),
failed: (sc['FAILED'] || 0) + (sc['CANCELLED'] || 0) + (sc['EXPIRED'] || 0),
},
page,
page_size: pageSize,
total_pages: Math.ceil(total / pageSize),
});
} catch (error) {
console.error('Get my orders error:', error);

175
src/app/pay/orders/page.tsx
View File

@@ -1,13 +1,22 @@
'use client';
import { useSearchParams } from 'next/navigation';
import { Suspense, useEffect, useMemo, useState } from 'react';
import { Suspense, useEffect, useState } from 'react';
import PayPageLayout from '@/components/PayPageLayout';
import OrderFilterBar from '@/components/OrderFilterBar';
import OrderSummaryCards from '@/components/OrderSummaryCards';
import OrderTable from '@/components/OrderTable';
import { detectDeviceIsMobile, type UserInfo, type MyOrder, type OrderStatusFilter } from '@/lib/pay-utils';
const PAGE_SIZE_OPTIONS = [20, 50, 100];
interface Summary {
total: number;
pending: number;
completed: number;
failed: number;
}
function OrdersContent() {
const searchParams = useSearchParams();
const userId = Number(searchParams.get('user_id'));
@@ -20,18 +29,22 @@ function OrdersContent() {
const [isMobile, setIsMobile] = useState(false);
const [userInfo, setUserInfo] = useState<UserInfo | null>(null);
const [orders, setOrders] = useState<MyOrder[]>([]);
const [summary, setSummary] = useState<Summary>({ total: 0, pending: 0, completed: 0, failed: 0 });
const [loading, setLoading] = useState(true);
const [error, setError] = useState('');
const [activeFilter, setActiveFilter] = useState<OrderStatusFilter>('ALL');
const [resolvedUserId, setResolvedUserId] = useState<number | null>(null);
const [page, setPage] = useState(1);
const [pageSize, setPageSize] = useState(20);
const [totalPages, setTotalPages] = useState(1);
const isEmbedded = uiMode === 'embedded' && isIframeContext;
const hasToken = token.length > 0;
const effectiveUserId = resolvedUserId || userId;
useEffect(() => {
if (typeof window === 'undefined') return;
setIsIframeContext(window.self !== window.top);
setIsMobile(detectDeviceIsMobile());
}, []);
@@ -52,7 +65,7 @@ function OrdersContent() {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isMobile, isEmbedded, userId, token, theme, uiMode]);
const loadOrders = async () => {
const loadOrders = async (targetPage = page, targetPageSize = pageSize) => {
setLoading(true);
setError('');
@@ -70,7 +83,12 @@ function OrdersContent() {
return;
}
const meRes = await fetch(`/api/orders/my?token=${encodeURIComponent(token)}`);
const params = new URLSearchParams({
token,
page: String(targetPage),
page_size: String(targetPageSize),
});
const meRes = await fetch(`/api/orders/my?${params}`);
if (!meRes.ok) {
if (meRes.status === 401) {
setError('登录态已失效，请从 Sub2API 重新进入支付页。');
@@ -84,9 +102,7 @@ function OrdersContent() {
const meData = await meRes.json();
const meUser = meData.user || {};
const meId = Number(meUser.id);
if (Number.isInteger(meId) && meId > 0) {
setResolvedUserId(meId);
}
if (Number.isInteger(meId) && meId > 0) setResolvedUserId(meId);
setUserInfo({
id: Number.isInteger(meId) && meId > 0 ? meId : userId,
@@ -97,11 +113,10 @@ function OrdersContent() {
balance: typeof meUser.balance === 'number' ? meUser.balance : 0,
});
if (Array.isArray(meData.orders)) {
setOrders(meData.orders);
} else {
setOrders([]);
}
setOrders(Array.isArray(meData.orders) ? meData.orders : []);
setSummary(meData.summary ?? { total: 0, pending: 0, completed: 0, failed: 0 });
setPage(meData.page ?? targetPage);
setTotalPages(meData.total_pages ?? 1);
} catch {
setOrders([]);
setError('网络错误，请稍后重试。');
@@ -112,22 +127,23 @@ function OrdersContent() {
useEffect(() => {
if (isMobile && !isEmbedded) return;
loadOrders();
loadOrders(1, pageSize);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [userId, token, isMobile, isEmbedded]);
const filteredOrders = useMemo(() => {
if (activeFilter === 'ALL') return orders;
return orders.filter((item) => item.status === activeFilter);
}, [orders, activeFilter]);
const handlePageSizeChange = (newSize: number) => {
setPageSize(newSize);
setPage(1);
loadOrders(1, newSize);
};
const summary = useMemo(() => {
const total = orders.length;
const pending = orders.filter((item) => item.status === 'PENDING').length;
const completed = orders.filter((item) => item.status === 'COMPLETED' || item.status === 'PAID').length;
const failed = orders.filter((item) => ['FAILED', 'CANCELLED', 'EXPIRED'].includes(item.status)).length;
return { total, pending, completed, failed };
}, [orders]);
const handlePageChange = (newPage: number) => {
setPage(newPage);
loadOrders(newPage, pageSize);
};
const filteredOrders =
activeFilter === 'ALL' ? orders : orders.filter((item) => item.status === activeFilter);
const buildScopedUrl = (path: string) => {
const params = new URLSearchParams();
@@ -140,6 +156,13 @@ function OrdersContent() {
const payUrl = buildScopedUrl('/pay');
const btnClass = [
'inline-flex items-center rounded-lg border px-3 py-1.5 text-xs font-medium transition-colors',
isDark
? 'border-slate-600 text-slate-200 hover:bg-slate-800'
: 'border-slate-300 text-slate-700 hover:bg-slate-100',
].join(' ');
if (isMobile) {
return (
<div
@@ -169,27 +192,10 @@ function OrdersContent() {
subtitle={userInfo?.username || `用户 #${effectiveUserId}`}
actions={
<>
<button
type="button"
onClick={loadOrders}
className={[
'inline-flex items-center rounded-lg border px-3 py-1.5 text-xs font-medium transition-colors',
isDark
? 'border-slate-600 text-slate-200 hover:bg-slate-800'
: 'border-slate-300 text-slate-700 hover:bg-slate-100',
].join(' ')}
>
<button type="button" onClick={() => loadOrders(page, pageSize)} className={btnClass}>
刷新
</button>
<a
href={payUrl}
className={[
'inline-flex items-center rounded-lg border px-3 py-1.5 text-xs font-medium transition-colors',
isDark
? 'border-slate-600 text-slate-200 hover:bg-slate-800'
: 'border-slate-300 text-slate-700 hover:bg-slate-100',
].join(' ')}
>
<a href={payUrl} className={btnClass}>
返回充值
</a>
</>
@@ -197,11 +203,90 @@ function OrdersContent() {
>
<OrderSummaryCards isDark={isDark} summary={summary} />
<div className="mb-4">
<OrderFilterBar isDark={isDark} activeFilter={activeFilter} onChange={setActiveFilter} />
{/* 过滤 + 分页大小 */}
<div className="mb-4 flex flex-wrap items-center justify-between gap-2">
<OrderFilterBar isDark={isDark} activeFilter={activeFilter} onChange={(f) => setActiveFilter(f)} />
<div className="flex items-center gap-1.5">
<span className={['text-xs', isDark ? 'text-slate-400' : 'text-slate-500'].join(' ')}>每页</span>
{PAGE_SIZE_OPTIONS.map((s) => (
<button
key={s}
type="button"
onClick={() => handlePageSizeChange(s)}
className={[
'rounded border px-2 py-1 text-xs font-medium transition-colors',
pageSize === s
? isDark
? 'border-indigo-400 bg-indigo-500/20 text-indigo-200'
: 'border-indigo-400 bg-indigo-50 text-indigo-700'
: isDark
? 'border-slate-600 text-slate-300 hover:bg-slate-800'
: 'border-slate-300 text-slate-600 hover:bg-slate-100',
].join(' ')}
>
{s}
</button>
))}
</div>
</div>
<OrderTable isDark={isDark} loading={loading} error={error} orders={filteredOrders} />
{/* 分页控件 */}
{!loading && !error && totalPages > 1 && (
<div className="mt-4 flex items-center justify-between text-xs">
<span className={isDark ? 'text-slate-400' : 'text-slate-500'}>
共 {summary.total} 条，第 {page} / {totalPages} 页
</span>
<div className="flex items-center gap-1.5">
<button
type="button"
onClick={() => handlePageChange(1)}
disabled={page <= 1}
className={[
'rounded border px-2 py-1 transition-colors disabled:opacity-40',
isDark ? 'border-slate-600 text-slate-300 hover:bg-slate-800' : 'border-slate-300 text-slate-600 hover:bg-slate-100',
].join(' ')}
>
««
</button>
<button
type="button"
onClick={() => handlePageChange(page - 1)}
disabled={page <= 1}
className={[
'rounded border px-2 py-1 transition-colors disabled:opacity-40',
isDark ? 'border-slate-600 text-slate-300 hover:bg-slate-800' : 'border-slate-300 text-slate-600 hover:bg-slate-100',
].join(' ')}
>
上一页
</button>
<button
type="button"
onClick={() => handlePageChange(page + 1)}
disabled={page >= totalPages}
className={[
'rounded border px-2 py-1 transition-colors disabled:opacity-40',
isDark ? 'border-slate-600 text-slate-300 hover:bg-slate-800' : 'border-slate-300 text-slate-600 hover:bg-slate-100',
].join(' ')}
>
下一页
</button>
<button
type="button"
onClick={() => handlePageChange(totalPages)}
disabled={page >= totalPages}
className={[
'rounded border px-2 py-1 transition-colors disabled:opacity-40',
isDark ? 'border-slate-600 text-slate-300 hover:bg-slate-800' : 'border-slate-300 text-slate-600 hover:bg-slate-100',
].join(' ')}
>
»»
</button>
</div>
</div>
)}
</PayPageLayout>
);
}