feat(payment): 订单详情底部改用主题按钮样式；记录卡片加查看详细与原因/申请理由

assets/js/order-center.js

@@ -187,7 +187,7 @@
         var afterSales = Array.isArray(order.after_sales) ? order.after_sales : [];
         if (afterSales.length) {
             html += '<section class="aksrt-order-detail__group"><h4 class="aksrt-order-detail__group-title">售后记录</h4><ul class="aksrt-order-detail__after-sales">';
-            afterSales.forEach(function (item) {
+            afterSales.forEach(function (item, index) {
                 var labels = { pending: "待审核", processing: "处理中", approved: "已通过", rejected: "已拒绝", cancelled: "已取消", completed: "已完成" };
                 var asStatus = String(item.status || "");
                 var asLabel = labels[asStatus] || asStatus;
@@ -195,13 +195,50 @@
                 html += '<div class="aksrt-order-detail__after-sale-head"><span class="aksrt-order-detail__after-sale-badge is-' + escapeHtml(asStatus) + '">' + escapeHtml(asLabel) + "</span>";
                 if (item.created_at) html += "<time>" + escapeHtml(item.created_at) + "</time>";
                 html += "</div>";
-                if (item.reason) html += '<p class="aksrt-order-detail__after-sale-reason">' + escapeHtml(item.reason).replace(/\r\n|\r|\n/g, "<br>") + "</p>";
+                // 原因 / 申请理由：新数据走 apply_form 结构化字段；老数据无 apply_form 时兜底展示融合串。
+                var applyForm = item.apply_form && typeof item.apply_form === "object" ? item.apply_form : null;
+                if (applyForm) {
+                    var reasonLabel = String(applyForm.reason_label || "");
+                    var applyDesc = String(applyForm.description || "");
+                    if (reasonLabel !== "") html += '<p class="aksrt-order-detail__after-sale-reason"><span class="aksrt-order-detail__after-sale-field">原因：</span>' + escapeHtml(reasonLabel) + "</p>";
+                    if (applyDesc !== "") html += '<p class="aksrt-order-detail__after-sale-reason"><span class="aksrt-order-detail__after-sale-field">申请理由：</span>' + escapeHtml(applyDesc).replace(/\r\n|\r|\n/g, "<br>") + "</p>";
+                } else if (item.reason) {
+                    html += '<p class="aksrt-order-detail__after-sale-reason">' + escapeHtml(item.reason).replace(/\r\n|\r|\n/g, "<br>") + "</p>";
+                }
                 html += '<dl class="aksrt-order-detail__after-sale-meta">';
                 html += "<div><dt>退款金额</dt><dd>" + escapeHtml(afterSaleAmount(item.refund_amount, order)) + "</dd></div>";
                 if (item.admin_note) html += "<div><dt>处理备注</dt><dd>" + escapeHtml(item.admin_note) + "</dd></div>";
                 if (item.gateway_result) html += "<div><dt>渠道结果</dt><dd>" + escapeHtml(gatewayResultText(item.gateway_result)) + "</dd></div>";
                 html += "</dl>";
-                if (asStatus === "pending") html += '<button class="btn-ghost aksrt-order-detail__after-sale-cancel" type="button" data-aksrt-after-sale-cancel="' + escapeHtml(order.order_number) + '">取消申请</button>';
+                // 查看详细：逐记录构造售后详细弹窗载荷（after_sale.latest 指向本条记录）；
+                // 再次申请仅对最新一条且订单级可再申请时开放（after_sales 按 id 倒序，首条即最新）。
+                var recordPayload = escapeHtml(JSON.stringify({
+                    order_number: order.order_number || "",
+                    product_name: order.product_name || "",
+                    amount: order.amount || "0",
+                    is_points: !!order.is_points,
+                    currency_symbol: order.currency_symbol || "",
+                    status_label: order.status_label || "",
+                    after_sale: {
+                        enabled: true,
+                        has_application: true,
+                        can_reapply: index === 0 && !!((order.after_sale || {}).can_reapply),
+                        latest: {
+                            status: asStatus,
+                            reason: String(item.reason || ""),
+                            apply_form: applyForm,
+                            images: Array.isArray(item.images) ? item.images : [],
+                            refund_amount: String(item.refund_amount || "0"),
+                            created_at: String(item.created_at || ""),
+                            completed_at: String(item.completed_at || ""),
+                            admin_note: String(item.admin_note || ""),
+                        },
+                    },
+                }));
+                html += '<div class="aksrt-order-detail__after-sale-foot">';
+                html += '<button class="btn-ghost" type="button" data-aksrt-after-sale-detail="' + recordPayload + '">查看详细</button>';
+                if (asStatus === "pending") html += '<button class="btn-ghost" type="button" data-aksrt-after-sale-cancel="' + escapeHtml(order.order_number) + '">取消申请</button>';
+                html += "</div>";
                 html += "</li>";
             });
             html += "</ul></section>";
@@ -215,12 +252,16 @@
             html += "</div>";
         }
 
-        html += '<footer class="aksrt-modal__footer aksrt-order-detail__actions">';
+        // 底部按钮与禁封申诉弹窗同式：but-average modal-buts + .but / .but c-blue。
-        html += '<button class="btn-outline" type="button" data-aksrt-modal-close>关闭</button>';
+        html += '<footer class="aksrt-order-detail__actions but-average modal-buts">';
-        if (allowedActions.can_cancel) html += '<button class="btn-ghost" type="button" data-aksrt-order-cancel="' + escapeHtml(order.order_number) + '">关闭订单</button>';
+        html += '<button type="button" class="but" data-aksrt-modal-close>关闭</button>';
-        if (allowedActions.can_pay) html += '<button class="btn-primary" type="button" data-aksrt-order-pay="' + escapeHtml(order.order_number) + '" data-aksrt-order-method="' + escapeHtml(paymentMethod.value || "") + '">继续支付</button>';
+        if (allowedActions.can_cancel) html += '<button type="button" class="but" data-aksrt-order-cancel="' + escapeHtml(order.order_number) + '">关闭订单</button>';
-        // 售后申请为独立弹窗，不再占用订单详情（order-after-sale.js）。
+        if (allowedActions.can_pay) html += '<button type="button" class="but c-blue" data-aksrt-order-pay="' + escapeHtml(order.order_number) + '" data-aksrt-order-method="' + escapeHtml(paymentMethod.value || "") + '">继续支付</button>';
-        html += afterSaleButtons(order);
+        // 售后入口：未申请时底部保留「申请售后」；已有申请时入口收拢到售后记录卡片的「查看详细」。
+        var detailAfterSale = order.after_sale || {};
+        if (detailAfterSale.enabled && !detailAfterSale.has_application) {
+            html += '<button type="button" class="but c-blue" data-aksrt-after-sale-apply="' + afterSalePayload(order) + '">申请售后</button>';
+        }
         html += "</footer>";
 
         session.content.innerHTML = html;
@@ -306,11 +347,9 @@
 
     // 售后按钮（列表卡片与订单详情弹窗共用）：已申请 → 售后详细，否则 → 申请售后。
     // 载荷与 PHP 模板同构（order-after-sale.js 同步消费），点击即弹窗、无前置请求。
-    function afterSaleButtons(order) {
+    function afterSalePayload(order) {
         var afterSale = order.after_sale || {};
-        var html = "";
+        return escapeHtml(JSON.stringify({
-        if (!afterSale.enabled) return html;
-        var payload = escapeHtml(JSON.stringify({
             order_number: order.order_number || "",
             product_name: order.product_name || "",
             amount: order.amount || "0",
@@ -319,6 +358,13 @@
             status_label: order.status_label || "",
             after_sale: afterSale,
         }));
+    }
+
+    function afterSaleButtons(order) {
+        var afterSale = order.after_sale || {};
+        var html = "";
+        if (!afterSale.enabled) return html;
+        var payload = afterSalePayload(order);
         if (afterSale.has_application) {
             html += '<button class="btn-outline" type="button" data-aksrt-after-sale-detail="' + payload + '">售后详细</button>';
             return html;