diff --git a/static/cond_orders.js b/static/cond_orders.js index dce048c..d56768c 100644 --- a/static/cond_orders.js +++ b/static/cond_orders.js @@ -331,6 +331,43 @@ .join(""); } + var PAGE_SIZE = 10; + var listPages = { active: 1, done: 1 }; + var lastActive = []; + var lastDone = []; + + function pageInfo(list, page) { + const total = list.length; + const pages = Math.max(1, Math.ceil(total / PAGE_SIZE) || 1); + const p = Math.min(Math.max(1, page || 1), pages); + const start = (p - 1) * PAGE_SIZE; + return { page: p, pages: pages, total: total, slice: list.slice(start, start + PAGE_SIZE) }; + } + + function renderPager(key, info) { + if (info.total <= PAGE_SIZE) return ""; + return ( + '
' + + '" + + '第 ' + + info.page + + " / " + + info.pages + + " 页 · 共 " + + info.total + + " 条" + + '
" + ); + } + function renderDesktopTable(list, emptyText) { if (!list.length) { return '
' + escapeHtml(emptyText) + "
"; @@ -351,10 +388,29 @@ return '
' + list.map(renderPhoneOrderCard).join("") + "
"; } - function fillOrderBox(box, list, emptyText) { + function fillOrderBox(box, list, emptyText, key) { if (!box) return; - box.innerHTML = isHubPhone() ? renderPhoneList(list, emptyText) : renderDesktopTable(list, emptyText); + const info = pageInfo(list, listPages[key] || 1); + listPages[key] = info.page; + const body = isHubPhone() + ? renderPhoneList(info.slice, emptyText) + : renderDesktopTable(info.slice, emptyText); + box.innerHTML = body + renderPager(key, info); bindOrderActions(box); + box.querySelectorAll("[data-cond-page]").forEach(function (btn) { + btn.addEventListener("click", function () { + if (btn.disabled) return; + const k = btn.getAttribute("data-cond-page"); + const dir = Number(btn.getAttribute("data-dir") || 0); + listPages[k] = (listPages[k] || 1) + dir; + paintCachedOrders(); + }); + }); + } + + function paintCachedOrders() { + fillOrderBox(document.getElementById("cond-list-active"), lastActive, "暂无进行中的条件单", "active"); + fillOrderBox(document.getElementById("cond-list-done"), lastDone, "暂无已结束的条件单", "done"); } async function loadOrders() { @@ -364,14 +420,13 @@ const r = await fetch("/api/cond_orders"); const d = await r.json(); const list = d.orders || []; - const active = []; - const done = []; + lastActive = []; + lastDone = []; list.forEach(function (o) { - if (isActiveOrder(o)) active.push(o); - else done.push(o); + if (isActiveOrder(o)) lastActive.push(o); + else lastDone.push(o); }); - fillOrderBox(activeBox, active, "暂无进行中的条件单"); - fillOrderBox(doneBox, done, "暂无已结束的条件单"); + paintCachedOrders(); } async function createOrder() { diff --git a/static/hub.css b/static/hub.css index 5184322..38b2ecd 100644 --- a/static/hub.css +++ b/static/hub.css @@ -1567,6 +1567,17 @@ input.readonly { font-variant-numeric: tabular-nums; font-size: 0.82rem; } +.cond-pager { + display: flex; + align-items: center; + justify-content: flex-end; + gap: 10px; + margin-top: 12px; + flex-wrap: wrap; +} +.cond-pager .btn { + margin-top: 0; +} /* —— 数据统计 —— */ .stats-head { diff --git a/templates/base.html b/templates/base.html index 97d4e22..393d07a 100644 --- a/templates/base.html +++ b/templates/base.html @@ -11,7 +11,7 @@ - + + {% endblock %}