kate522/wordpress-theme-aksrt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(orders): redesign detail modal — hero pill, no duplicate close

Browse Source 
- Remove bottom "关闭" button so the top-right ✕ is the single dismiss.
- Drop redundant 订单类型 row from modal body (already shown as card chip).
- Add hero strip with status pill + amount; unify dt/dd rows into a
  bordered card; tighten items list and add timeline rail.
- Refresh modal styling: rounded dialog, gradient header, hover-lift
  buttons, mobile-friendly rows.
This commit is contained in:
kate522
2026-07-27 13:34:30 +08:00
parent a1e35a4499
commit e47a3958fb
2 changed files with 287 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/js/order-center.js
+32 -14
View File
@@ -511,10 +511,12 @@
}
if (!qty || qty < 1) qty = 1;
var status = order.status || "";
var statusLabel = order.status_label || status || "—";
var statusClass = "is-" + String(status).replace(/[^a-z0-9_-]/gi, "-");
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 || "—"],
@@ -533,11 +535,19 @@
rows.push(["备注", order.customer_note]);
}
var html = '<dl class="aksrt-order-detail__list">';
var html = "";
html += '<div class="aksrt-order-detail__hero">';
html += ' <div class="aksrt-order-detail__hero-main">';
html += ' <span class="aksrt-order-detail__status-pill ' + escapeHtml(statusClass) + '">' + escapeHtml(statusLabel) + "</span>";
html += ' <strong class="aksrt-order-detail__hero-amount">' + escapeHtml(formatMoneyText(order)) + "</strong>";
html += ' <span class="aksrt-order-detail__hero-label">应付金额</span>';
html += " </div>";
html += "</div>";
html += '<dl class="aksrt-order-detail__list">';
rows.forEach(function (row) {
html += '<div class="aksrt-order-detail__row">';
html += '<dt>' + escapeHtml(row[0]) + '</dt>';
// Money strings already composed; still escape all cells for safety.
html += '<dd>' + escapeHtml(row[1]) + '</dd>';
html += '</div>';
});
@@ -549,12 +559,13 @@
var title = item.product_title || item.title || order.product_name || "商品";
var itemQty = item.quantity || item.qty || 1;
var price = item.pay_price != null ? item.pay_price : (item.unit_price || 0);
html += '<li><span>' + escapeHtml(title) + '</span>';
html += '<em>×' + escapeHtml(String(itemQty)) + '</em>';
html += '<li>';
html += ' <span class="aksrt-order-detail__item-title">' + escapeHtml(title) + "</span>";
html += ' <em class="aksrt-order-detail__item-qty">×' + escapeHtml(String(itemQty)) + '</em>';
if (order.is_points) {
html += '<strong>' + escapeHtml(order.currency_symbol || "积分") + " " + Math.round(Number(price || 0)) + "</strong>";
html += '<strong class="aksrt-order-detail__item-price">' + escapeHtml(order.currency_symbol || "积分") + " " + Math.round(Number(price || 0)) + "</strong>";
} else {
html += '<strong>¥' + Number(price || 0).toFixed(2) + "</strong>";
html += '<strong class="aksrt-order-detail__item-price">¥' + Number(price || 0).toFixed(2) + "</strong>";
}
html += "</li>";
});
@@ -564,7 +575,11 @@
if (order.timeline && order.timeline.length) {
html += '<div class="aksrt-order-detail__timeline"><h4>订单进度</h4><ol>';
order.timeline.forEach(function (tl) {
html += '<li><time>' + escapeHtml(tl.time || "") + "</time><span>" + escapeHtml(tl.label || "") + "</span></li>";
html += '<li><span class="aksrt-order-detail__timeline-dot"></span>';
html += '<div class="aksrt-order-detail__timeline-body">';
html += '<time>' + escapeHtml(tl.time || "") + "</time>";
html += "<span>" + escapeHtml(tl.label || "") + "</span>";
html += "</div></li>";
});
html += "</ol></div>";
}
@@ -572,19 +587,20 @@
detailBody.innerHTML = html;
var footer = "";
// Status-aware footer actions.
// Status-aware footer actions. The modal's own ✕ button (top-right) is the only
// dismiss control, so do not add a duplicate "关闭" button here.
if (actions.can_cancel) {
footer += '<button type="button" class="btn-ghost" data-aksrt-order-cancel="' + escapeHtml(order.order_number) + '">关闭订单</button>';
}
if (actions.can_pay) {
footer += '<button type="button" class="btn-primary" data-aksrt-order-pay="' + escapeHtml(order.order_number) + '" data-aksrt-order-method="' + escapeHtml((payment && payment.value) || "") + '">立即支付</button>';
}
if (actions.can_receipt) {
footer += '<button type="button" class="btn-primary" data-aksrt-order-receipt="' + escapeHtml(order.order_number) + '">确认收货</button>';
}
if (actions.can_review) {
footer += '<button type="button" class="btn-primary c-green" data-aksrt-order-review="' + escapeHtml(order.order_number) + '">评价</button>';
}
if (actions.can_pay) {
footer += '<button type="button" class="btn-primary" data-aksrt-order-pay="' + escapeHtml(order.order_number) + '" data-aksrt-order-method="' + escapeHtml((payment && payment.value) || "") + '">立即支付</button>';
}
if (actions.can_after_sale) {
footer += '<button type="button" class="btn-outline" data-aksrt-order-after-sale="' + escapeHtml(order.order_number) + '">申请售后</button>';
}
@@ -597,7 +613,9 @@
if (order.secondary_url && order.secondary_label) {
footer += '<a class="btn-ghost" href="' + escapeHtml(order.secondary_url) + '">' + escapeHtml(order.secondary_label) + "</a>";
}
footer += '<button type="button" class="btn-outline" data-aksrt-order-detail-close>关闭</button>';
if (footer === "") {
footer = '<button type="button" class="btn-outline" data-aksrt-order-detail-close>关闭</button>';
}
detailFooter.innerHTML = footer;
}