进行了一些小优化
This commit is contained in:
@@ -58,10 +58,10 @@
|
||||
.aksrt-orders-page__filter-group { display: flex; flex: 1 1 100%; gap: 10px; align-items: center; }
|
||||
.aksrt-orders-page__filter-label { flex: 0 0 58px; color: var(--orders-muted); font-size: 12px; font-weight: 650; }
|
||||
.aksrt-orders-page__status-filters, .aksrt-orders-page__type-filters { display: flex; flex-wrap: wrap; gap: 6px; }
|
||||
.aksrt-orders-page__filter-chip { display: inline-flex; gap: 5px; align-items: center; padding: 5px 9px; border: 1px solid var(--orders-line); border-radius: 999px; background: var(--surface-1, #fff); color: var(--orders-muted); font-size: 12px; text-decoration: none; }
|
||||
.aksrt-orders-page__filter-chip { display: inline-flex; gap: 5px; align-items: center; padding: 5px 9px; border: 1px solid var(--orders-line); border-radius: 999px; background: var(--surface-1, #fff); color: var(--orders-muted); font: inherit; font-size: 12px; text-decoration: none; cursor: pointer; }
|
||||
.aksrt-orders-page__filter-chip.is-active { border-color: var(--color-primary, #3b82f6); background: color-mix(in srgb, var(--color-primary, #3b82f6) 10%, var(--surface-1, #fff)); color: var(--color-primary, #3b82f6); font-weight: 700; }
|
||||
.aksrt-orders-page__filter-count { display: inline-grid; min-width: 17px; height: 17px; padding: 0 4px; place-items: center; border-radius: 999px; background: var(--color-warning, #c87819); color: #fff; font-size: 10px; line-height: 1; }
|
||||
.aksrt-orders-page__clear { margin-left: auto; color: var(--color-primary, #3b82f6); font-size: 12px; text-decoration: none; }
|
||||
.aksrt-orders-page__clear { margin-left: auto; padding: 0; border: 0; background: transparent; color: var(--color-primary, #3b82f6); font: inherit; font-size: 12px; text-decoration: none; cursor: pointer; }
|
||||
|
||||
.aksrt-orders-page__list { display: grid; gap: 10px; }
|
||||
.aksrt-orders-page__card { overflow: hidden; border: 1px solid var(--orders-line); border-radius: 13px; background: var(--surface-1, #fff); transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
|
||||
@@ -84,8 +84,10 @@
|
||||
.aksrt-orders-page__countdown { margin-right: auto; color: var(--color-warning, #c87819); font-size: 11px; font-variant-numeric: tabular-nums; }
|
||||
|
||||
.aksrt-orders-page__pagination { display: flex; justify-content: center; gap: 6px; margin-top: 20px; }
|
||||
.aksrt-orders-page__page-chip { display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid var(--orders-line); border-radius: 8px; color: var(--orders-muted); font-size: 12px; text-decoration: none; }
|
||||
.aksrt-orders-page__page-chip { display: grid; width: 31px; height: 31px; padding: 0; place-items: center; border: 1px solid var(--orders-line); border-radius: 8px; background: var(--surface-1, #fff); color: var(--orders-muted); font: inherit; font-size: 12px; text-decoration: none; cursor: pointer; }
|
||||
.aksrt-orders-page__page-chip.is-active { border-color: var(--color-primary, #3b82f6); background: var(--color-primary, #3b82f6); color: #fff; }
|
||||
.aksrt-orders-page [data-aksrt-order-list], .aksrt-orders-page__stats, .aksrt-orders-page__pagination { transition: opacity .16s ease; }
|
||||
.aksrt-orders-page.is-loading [data-aksrt-order-list], .aksrt-orders-page.is-loading .aksrt-orders-page__stats, .aksrt-orders-page.is-loading .aksrt-orders-page__pagination { opacity: .55; pointer-events: none; }
|
||||
.aksrt-orders-page__empty { padding: 52px 20px; border: 1px dashed var(--orders-line); border-radius: 13px; background: var(--surface-2, #f7f8fb); text-align: center; }
|
||||
.aksrt-orders-page__empty i { display: block; margin-bottom: 12px; color: var(--color-primary, #3b82f6); font-size: 30px; }
|
||||
.aksrt-orders-page__empty h3 { margin: 0 0 7px; font-size: 15px; }.aksrt-orders-page__empty p { margin: 0 0 16px; color: var(--orders-muted); font-size: 13px; }
|
||||
|
||||
+90
-17
@@ -160,11 +160,12 @@
|
||||
});
|
||||
}
|
||||
|
||||
function currentViewPath() {
|
||||
var params = new URLSearchParams(window.location.search);
|
||||
var allowed = ["order_status", "order_type", "order_number", "order_page"];
|
||||
function currentViewPath(state) {
|
||||
var query = new URLSearchParams();
|
||||
allowed.forEach(function (key) { if (params.get(key)) query.set(key, params.get(key)); });
|
||||
if (state.query.status && state.query.status !== "all") query.set("order_status", state.query.status);
|
||||
if (state.query.type) query.set("order_type", state.query.type);
|
||||
if (state.query.orderNumber) query.set("order_number", state.query.orderNumber);
|
||||
if (Number(state.query.page) > 1) query.set("order_page", String(state.query.page));
|
||||
return "/orders/view" + (query.toString() ? "?" + query.toString() : "");
|
||||
}
|
||||
|
||||
@@ -195,6 +196,11 @@
|
||||
root.innerHTML = '<div class="aksrt-orders-page__stat"><span>全部</span><strong>' + Number(stats.total || 0) + "</strong></div>" +
|
||||
'<div class="aksrt-orders-page__stat"><span>待支付</span><strong class="is-pending">' + Number(stats.pending || 0) + "</strong></div>" +
|
||||
'<div class="aksrt-orders-page__stat"><span>已支付</span><strong class="is-paid">' + Number(stats.paid || 0) + "</strong></div>";
|
||||
var pendingCount = state.root.querySelector('[data-aksrt-order-filter="status"][data-aksrt-order-filter-value="pending"] .aksrt-orders-page__filter-count');
|
||||
if (pendingCount) {
|
||||
pendingCount.textContent = String(Number(stats.pending || 0));
|
||||
pendingCount.hidden = Number(stats.pending || 0) < 1;
|
||||
}
|
||||
}
|
||||
|
||||
function renderPagination(state, view) {
|
||||
@@ -204,14 +210,14 @@
|
||||
var root = document.createElement("nav");
|
||||
root.className = "aksrt-orders-page__pagination";
|
||||
root.setAttribute("aria-label", "订单分页");
|
||||
var base = new URL(window.location.href);
|
||||
for (var i = 1; i <= Number(view.total_pages); i++) {
|
||||
base.searchParams.set("order_page", String(i));
|
||||
var link = document.createElement("a");
|
||||
link.className = "aksrt-orders-page__page-chip" + (i === Number(view.page) ? " is-active" : "");
|
||||
link.href = base.toString();
|
||||
link.textContent = String(i);
|
||||
root.appendChild(link);
|
||||
var button = document.createElement("button");
|
||||
button.type = "button";
|
||||
button.className = "aksrt-orders-page__page-chip" + (i === Number(view.page) ? " is-active" : "");
|
||||
button.setAttribute("data-aksrt-order-page", String(i));
|
||||
if (i === Number(view.page)) button.setAttribute("aria-current", "page");
|
||||
button.textContent = String(i);
|
||||
root.appendChild(button);
|
||||
}
|
||||
var list = state.root.querySelector("[data-aksrt-order-list]");
|
||||
if (list) list.after(root);
|
||||
@@ -226,32 +232,67 @@
|
||||
}
|
||||
|
||||
function renderView(state, view) {
|
||||
var viewQuery = view.query || {};
|
||||
state.query.status = String(viewQuery.order_status || "all");
|
||||
state.query.type = String(viewQuery.order_type || "");
|
||||
state.query.orderNumber = String(viewQuery.order_number || "");
|
||||
state.query.page = Math.max(1, Number(view.page || viewQuery.order_page || 1));
|
||||
renderStats(state, view.stats || {});
|
||||
var list = state.root.querySelector("[data-aksrt-order-list]");
|
||||
if (!list) return;
|
||||
var items = Array.isArray(view.items) ? view.items : [];
|
||||
if (!items.length) {
|
||||
list.innerHTML = '<div class="aksrt-orders-page__empty"><i class="fa fas fa-file-alt" aria-hidden="true"></i><h3>没有匹配的订单</h3><p>换个条件试试,或清除当前筛选。</p></div>';
|
||||
list.classList.add("is-empty");
|
||||
list.innerHTML = '<i class="fa fas fa-file-alt" aria-hidden="true"></i><h3>没有匹配的订单</h3><p>换个条件试试,或清除当前筛选。</p>';
|
||||
list.classList.remove("aksrt-orders-page__list");
|
||||
list.classList.add("aksrt-orders-page__empty");
|
||||
} else {
|
||||
list.classList.remove("is-empty");
|
||||
list.classList.remove("aksrt-orders-page__empty");
|
||||
list.classList.add("aksrt-orders-page__list");
|
||||
list.innerHTML = items.map(cardHtml).join("");
|
||||
}
|
||||
renderPagination(state, view);
|
||||
syncControls(state);
|
||||
updateCountdowns(state);
|
||||
}
|
||||
|
||||
function refreshView(state) {
|
||||
return request(currentViewPath(), undefined, "GET").then(function (result) {
|
||||
function syncControls(state) {
|
||||
state.root.querySelectorAll("[data-aksrt-order-filter]").forEach(function (button) {
|
||||
var field = button.getAttribute("data-aksrt-order-filter");
|
||||
var expected = field === "status" ? state.query.status : state.query.type;
|
||||
var active = button.getAttribute("data-aksrt-order-filter-value") === expected;
|
||||
button.classList.toggle("is-active", active);
|
||||
button.setAttribute("aria-pressed", active ? "true" : "false");
|
||||
});
|
||||
var input = state.root.querySelector("#aksrt-order-number");
|
||||
if (input && input.value !== state.query.orderNumber) input.value = state.query.orderNumber;
|
||||
}
|
||||
|
||||
function setViewLoading(state, loading) {
|
||||
state.root.classList.toggle("is-loading", loading);
|
||||
state.root.setAttribute("aria-busy", loading ? "true" : "false");
|
||||
}
|
||||
|
||||
function loadView(state, patch) {
|
||||
Object.keys(patch || {}).forEach(function (key) { state.query[key] = patch[key]; });
|
||||
var requestId = ++state.viewRequest;
|
||||
setViewLoading(state, true);
|
||||
return request(currentViewPath(state), undefined, "GET").then(function (result) {
|
||||
if (requestId !== state.viewRequest) return null;
|
||||
if (!result || !result.data) throw new Error("刷新失败");
|
||||
renderView(state, result.data);
|
||||
return result.data;
|
||||
}).catch(function (error) {
|
||||
notyf(errorMessage(error, "订单状态已变更,请刷新后查看"), "danger");
|
||||
if (requestId === state.viewRequest) notyf(errorMessage(error, "订单加载失败,请稍后重试"), "danger");
|
||||
return null;
|
||||
}).finally(function () {
|
||||
if (requestId === state.viewRequest) setViewLoading(state, false);
|
||||
});
|
||||
}
|
||||
|
||||
function refreshView(state) {
|
||||
return loadView(state);
|
||||
}
|
||||
|
||||
function startPayment(state, button) {
|
||||
var number = button.getAttribute("data-aksrt-order-pay") || "";
|
||||
var method = button.getAttribute("data-aksrt-order-method") || "";
|
||||
@@ -316,6 +357,8 @@
|
||||
detailReplacementSession: null,
|
||||
countdownTimer: null,
|
||||
operationKeys: {},
|
||||
query: { status: "all", type: "", orderNumber: "", page: 1 },
|
||||
viewRequest: 0,
|
||||
};
|
||||
|
||||
state.onRootClick = function (event) {
|
||||
@@ -327,6 +370,27 @@
|
||||
if (panel) panel.hidden = expanded;
|
||||
return;
|
||||
}
|
||||
var filter = closest(event.target, "[data-aksrt-order-filter]");
|
||||
if (filter && root.contains(filter)) {
|
||||
event.preventDefault();
|
||||
var field = filter.getAttribute("data-aksrt-order-filter");
|
||||
var patch = { page: 1 };
|
||||
patch[field] = filter.getAttribute("data-aksrt-order-filter-value") || "";
|
||||
loadView(state, patch);
|
||||
return;
|
||||
}
|
||||
var page = closest(event.target, "[data-aksrt-order-page]");
|
||||
if (page && root.contains(page)) {
|
||||
event.preventDefault();
|
||||
loadView(state, { page: Math.max(1, Number(page.getAttribute("data-aksrt-order-page") || 1)) });
|
||||
return;
|
||||
}
|
||||
var clear = closest(event.target, "[data-aksrt-orders-clear]");
|
||||
if (clear && root.contains(clear)) {
|
||||
event.preventDefault();
|
||||
loadView(state, { status: "all", type: "", orderNumber: "", page: 1 });
|
||||
return;
|
||||
}
|
||||
var detail = closest(event.target, "[data-aksrt-order-detail]");
|
||||
if (detail && root.contains(detail)) { openDetail(state, detail.getAttribute("data-aksrt-order-detail")); return; }
|
||||
var pay = closest(event.target, "[data-aksrt-order-pay]");
|
||||
@@ -334,6 +398,13 @@
|
||||
var cancel = closest(event.target, "[data-aksrt-order-cancel]");
|
||||
if (cancel && root.contains(cancel)) { event.preventDefault(); closeOrder(state, cancel); }
|
||||
};
|
||||
state.onRootSubmit = function (event) {
|
||||
var form = closest(event.target, "[data-aksrt-orders-search]");
|
||||
if (!form || !root.contains(form)) return;
|
||||
event.preventDefault();
|
||||
var input = form.querySelector("#aksrt-order-number");
|
||||
loadView(state, { orderNumber: input ? String(input.value || "").trim() : "", page: 1 });
|
||||
};
|
||||
state.onModalClose = function (event) {
|
||||
var detail = event && event.detail ? event.detail : {};
|
||||
if (!state.detailSession || detail.session !== state.detailSession) return;
|
||||
@@ -365,6 +436,7 @@
|
||||
};
|
||||
|
||||
root.addEventListener("click", state.onRootClick);
|
||||
root.addEventListener("submit", state.onRootSubmit);
|
||||
document.addEventListener("aksrt:modal:close", state.onModalClose);
|
||||
document.addEventListener("click", state.onDocumentClick);
|
||||
state.countdownTimer = window.setInterval(function () { updateCountdowns(state); }, 1000);
|
||||
@@ -389,6 +461,7 @@
|
||||
if (!state) return;
|
||||
if (activeDetail(state, state.detailOrderNumber)) window.AksrtModalRuntime.close("replace");
|
||||
item.removeEventListener("click", state.onRootClick);
|
||||
item.removeEventListener("submit", state.onRootSubmit);
|
||||
document.removeEventListener("aksrt:modal:close", state.onModalClose);
|
||||
document.removeEventListener("click", state.onDocumentClick);
|
||||
window.clearInterval(state.countdownTimer);
|
||||
|
||||
@@ -82,12 +82,13 @@
|
||||
}
|
||||
target.classList.add('is-loading');
|
||||
var url = restUrl.replace(/\/$/, '') + '/user-center/panel/' + encodeURIComponent(name);
|
||||
if (name === 'creator' || name === 'revenue' || name === 'posts' || name === 'follow' || name === 'orders') {
|
||||
if (name === 'creator' || name === 'revenue' || name === 'posts' || name === 'follow') {
|
||||
var params = queryParams || new URLSearchParams(window.location.search);
|
||||
var allowedParams = name === 'creator' ? ['income_page'] :
|
||||
(name === 'revenue' ? ['reward_tab', 'commission_page', 'user_page'] :
|
||||
(name === 'posts' ? ['post_status', 'posts_page'] :
|
||||
(name === 'follow' ? ['follow_list', 'follow_page'] : ['order_status', 'order_type', 'order_number', 'order_page'])));
|
||||
var allowedParams = [];
|
||||
if (name === 'creator') allowedParams = ['income_page'];
|
||||
if (name === 'revenue') allowedParams = ['reward_tab', 'commission_page', 'user_page'];
|
||||
if (name === 'posts') allowedParams = ['post_status', 'posts_page'];
|
||||
if (name === 'follow') allowedParams = ['follow_list', 'follow_page'];
|
||||
allowedParams.forEach(function(key) {
|
||||
if (params.get(key)) url += (url.indexOf('?') === -1 ? '?' : '&') + key + '=' + encodeURIComponent(params.get(key));
|
||||
});
|
||||
@@ -174,7 +175,7 @@
|
||||
if (!window.history.replaceState) return;
|
||||
var pathTab = name === 'credits' ? 'balance' : name;
|
||||
var u = new URL('/user/' + pathTab + '/', window.location.origin);
|
||||
if (sourceUrl && name !== 'revenue') {
|
||||
if (sourceUrl && name !== 'revenue' && name !== 'orders') {
|
||||
var source = new URL(sourceUrl, window.location.href);
|
||||
source.searchParams.forEach(function(value, key) { u.searchParams.set(key, value); });
|
||||
}
|
||||
@@ -256,7 +257,11 @@
|
||||
});
|
||||
if (drawerTrigger) drawerTrigger.addEventListener('click', openDrawer);
|
||||
if (drawerOverlay) drawerOverlay.addEventListener('click', closeDrawer);
|
||||
activate(tabFromUrl(), false);
|
||||
var initialTab = tabFromUrl();
|
||||
if (initialTab === 'orders' && window.location.search && window.history.replaceState) {
|
||||
window.history.replaceState({}, '', window.location.pathname + window.location.hash);
|
||||
}
|
||||
activate(initialTab, false);
|
||||
}
|
||||
|
||||
/* ==================== 个人信息保存 ==================== */
|
||||
|
||||
Reference in New Issue
Block a user