diff --git a/assets/css/routes/orders.css b/assets/css/routes/orders.css index a0b1010f..97fe8533 100644 --- a/assets/css/routes/orders.css +++ b/assets/css/routes/orders.css @@ -521,6 +521,159 @@ font-variant-numeric: tabular-nums; } +/* Order detail modal content */ +.aksrt-order-detail-dialog { + width: min(560px, 100%); +} + +.aksrt-order-detail__list { + margin: 0; + display: grid; + gap: 10px; +} + +.aksrt-order-detail__row { + display: grid; + grid-template-columns: 96px minmax(0, 1fr); + gap: 10px 14px; + align-items: start; + font-size: 13.5px; +} + +.aksrt-order-detail__row dt { + margin: 0; + color: var(--color-ink-3, #8b8f97); + font-weight: 500; +} + +.aksrt-order-detail__row dd { + margin: 0; + color: var(--color-ink, #1f2329); + font-weight: 600; + word-break: break-all; + font-variant-numeric: tabular-nums; +} + +.aksrt-order-detail__items, +.aksrt-order-detail__timeline { + margin-top: 16px; + padding-top: 14px; + border-top: 1px dashed color-mix(in srgb, var(--color-line, #e5e7eb) 85%, transparent); +} + +.aksrt-order-detail__items h4, +.aksrt-order-detail__timeline h4 { + margin: 0 0 10px; + font-size: 13.5px; + font-weight: 700; + color: var(--color-ink, #1f2329); +} + +.aksrt-order-detail__items ul, +.aksrt-order-detail__timeline ol { + margin: 0; + padding: 0; + list-style: none; + display: grid; + gap: 8px; +} + +.aksrt-order-detail__items li { + display: grid; + grid-template-columns: minmax(0, 1fr) auto auto; + gap: 10px; + align-items: center; + font-size: 13px; + color: var(--color-ink-2, #4b5563); +} + +.aksrt-order-detail__items li em { + font-style: normal; + color: var(--color-ink-3, #8b8f97); +} + +.aksrt-order-detail__items li strong { + font-weight: 700; + color: var(--color-ink, #1f2329); + font-variant-numeric: tabular-nums; +} + +.aksrt-order-detail__timeline li { + display: grid; + grid-template-columns: 140px minmax(0, 1fr); + gap: 10px; + font-size: 12.5px; + color: var(--color-ink-2, #4b5563); +} + +.aksrt-order-detail__timeline time { + color: var(--color-ink-3, #8b8f97); + font-variant-numeric: tabular-nums; +} + +.aksrt-modal__footer .btn-primary, +.aksrt-modal__footer .btn-outline, +.aksrt-modal__footer .btn-ghost, +.aksrt-modal__footer a.btn-ghost, +.aksrt-modal__footer a.btn-outline { + min-height: 34px; + padding: 0 14px; + border-radius: 999px; + font-size: 13px; + font-weight: 600; + line-height: 32px; + display: inline-flex; + align-items: center; + justify-content: center; + text-decoration: none; + cursor: pointer; +} + +.aksrt-modal__footer .btn-primary { + border: 1px solid transparent; + background: var(--color-primary, #3b82f6); + color: var(--color-on-primary, #fff); +} + +.aksrt-modal__footer .btn-primary.c-green { + background: var(--color-success, #16a34a); +} + +.aksrt-modal__footer .btn-outline { + border: 1px solid var(--color-line, #e5e7eb); + background: var(--surface-1, #fff); + color: var(--color-ink-2, #4b5563); +} + +.aksrt-modal__footer .btn-ghost { + border: 1px solid transparent; + background: transparent; + color: var(--color-ink-3, #8b8f97); +} + +@media (max-width: 767px) { + .aksrt-order-detail__row { + grid-template-columns: 1fr; + gap: 2px; + } + + .aksrt-order-detail__timeline li { + grid-template-columns: 1fr; + gap: 2px; + } + + .aksrt-modal__footer { + flex-wrap: wrap; + } + + .aksrt-modal__footer .btn-primary, + .aksrt-modal__footer .btn-outline, + .aksrt-modal__footer .btn-ghost, + .aksrt-modal__footer a { + flex: 1 1 auto; + } +} + /* legacy item classes (if any remain) */ .aksrt-orders-page__item { background: var(--surface-1); diff --git a/assets/js/order-center.js b/assets/js/order-center.js index 1d5ca379..24cb862b 100644 --- a/assets/js/order-center.js +++ b/assets/js/order-center.js @@ -396,8 +396,39 @@ return page.querySelector('[data-aksrt-order-card="' + orderNumber + '"]'); } + function escapeHtml(value) { + return String(value == null ? "" : value) + .replace(/&/g, "&") + .replace(//g, ">") + .replace(/"/g, """) + .replace(/'/g, "'"); + } + + function formatMoney(order) { + var amount = Number(order && order.amount != null ? order.amount : 0); + if (order && order.is_points) { + var symbol = order.currency_symbol || "积分"; + return escapeHtml(symbol) + " " + Math.round(amount); + } + return "¥" + amount.toFixed(2); + } + + /** Plain money for table cells (formatMoney already escapes). */ + function formatMoneyText(order) { + var amount = Number(order && order.amount != null ? order.amount : 0); + if (order && order.is_points) { + var symbol = order.currency_symbol || "积分"; + return String(symbol) + " " + Math.round(amount); + } + return "¥" + amount.toFixed(2); + } + function updateCardStatus(card, newStatus, statusLabel) { if (!card) return; + if (newStatus) { + card.setAttribute("data-order-status", newStatus); + } var badge = card.querySelector(".aksrt-orders-page__card-status, .aksrt-orders-page__item-badge"); if (badge) { badge.textContent = statusLabel || newStatus; @@ -414,6 +445,162 @@ } } + /* ── Order detail modal ── */ + var detailModal = page.querySelector("[data-aksrt-order-detail-modal]"); + var detailBody = page.querySelector("[data-aksrt-order-detail-body]"); + var detailFooter = page.querySelector("[data-aksrt-order-detail-footer]"); + var detailOrderNumber = ""; + + function closeOrderDetailModal() { + if (detailModal) detailModal.hidden = true; + detailOrderNumber = ""; + document.documentElement.classList.remove("aksrt-modal-open"); + } + + document.addEventListener("keydown", function (event) { + if (event.key === "Escape" && detailModal && !detailModal.hidden) { + closeOrderDetailModal(); + } + }); + + function openOrderDetailModal(orderNumber) { + if (!detailModal || !detailBody || !detailFooter) { + showToast("订单详情组件未加载"); + return; + } + detailOrderNumber = orderNumber || ""; + detailBody.innerHTML = '
加载中…
'; + detailFooter.innerHTML = ""; + detailModal.hidden = false; + document.documentElement.classList.add("aksrt-modal-open"); + + request(orderPath(orderNumber), undefined, "GET").then(function (result) { + var order = null; + if (result && result.data && result.data.order_number) { + order = result.data; + } else if (result && result.data && result.data.data && result.data.data.order_number) { + order = result.data.data; + } else if (result && result.order_number) { + order = result; + } + if (result && result.success === false) { + detailBody.innerHTML = '' + escapeHtml((result && result.message) || "加载失败") + "
"; + return; + } + if (!order || !order.order_number) { + detailBody.innerHTML = '订单不存在
'; + return; + } + renderOrderDetail(order); + }).catch(function () { + detailBody.innerHTML = '网络错误,请稍后重试
'; + }); + } + + function renderOrderDetail(order) { + if (!detailBody || !detailFooter) return; + var actions = (order && order.actions) || {}; + var payment = order.payment_method || {}; + var paymentLabel = payment.label || payment.value || "—"; + var qty = order.quantity || 1; + if ((!qty || qty < 1) && order.items && order.items.length) { + qty = 0; + order.items.forEach(function (item) { + qty += Math.max(1, parseInt(item.quantity || item.qty || 1, 10) || 1); + }); + } + if (!qty || qty < 1) qty = 1; + + var rows = [ + ["订单状态", order.status_label || order.status || "—"], + ["订单名称", order.product_name || (order.product && order.product.title) || "—"], + ["订单类型", order.product_type_label || order.product_type || "—"], + ["订单数量", String(qty)], + ["应付金额", formatMoneyText(order)], + ["订单编号", order.order_number || "—"], + ["创建时间", order.created_at || "—"], + ["支付时间", order.paid_at || "—"], + ["支付方式", paymentLabel] + ]; + + if (Number(order.shipping_fee || 0) > 0) { + rows.push(["运费", "¥" + Number(order.shipping_fee || 0).toFixed(2)]); + } + if (Number(order.discount || 0) > 0) { + rows.push(["优惠", "¥" + Number(order.discount || 0).toFixed(2)]); + } + if (order.customer_note) { + rows.push(["备注", order.customer_note]); + } + + var html = '