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

fix(orders): 修复再次申请售后被 has_application 分流回售后详细的问题并对齐底部按钮观感

Browse Source
This commit is contained in:
kate522
2026-10-07 09:43:22 +08:00
parent 8023e2e472
commit d69e1d33c3
4 changed files with 28 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/routes/orders.css
+8 -3
View File
@@ -163,10 +163,15 @@
.aksrt-order-detail__refresh-state p { margin: 0; }
.aksrt-order-detail__refresh-state button { grid-column: 2; justify-self: start; }
/* 底部操作区：按钮排布沿用主题 .but-average.modal-buts（禁封申诉弹窗同式），此处仅保留吸底定位与通栏背景。
/* 底部操作区：按钮排布沿用主题 .but-average.modal-buts，此处仅保留吸底定位与通栏背景。
主题 modal-buts 自带 margin-top:16px，吸底场景下用更高优先级清掉，避免内容与吸底条之间出现空隙。 */
.aksrt-order-detail-modal .aksrt-order-detail__actions { position: sticky; bottom: 0; z-index: 2; margin: 0 -18px; padding: 13px 18px calc(13px + env(safe-area-inset-bottom)); border-top: 1px solid var(--detail-line); background: var(--detail-surface); }
.aksrt-order-detail-modal .aksrt-order-detail__actions.but-average.modal-buts { margin-top: 0; }
.aksrt-order-detail-modal .aksrt-order-detail__actions.but-average.modal-buts { margin-top: 0; gap: 0; }
/* 底部按钮观感与售后弹窗家族对齐（modal-runtime 同款平铺规则）：去胶囊底色/边框/圆角，
文字色区分主次；仅「关闭」单按钮时占满整行，即售后详细「我知道了」的呈现。 */
.aksrt-order-detail-modal .aksrt-order-detail__actions.but-average.modal-buts > .but { min-height: 38px; border: 0; border-radius: 0; box-shadow: none; background: transparent; color: var(--modal-muted, #777); font-weight: 600; cursor: pointer; --this-bg: transparent; --this-border: transparent; --this-shadow: none; }
.aksrt-order-detail-modal .aksrt-order-detail__actions.but-average.modal-buts > .but.c-blue { background: transparent; border: 0; color: var(--modal-primary, #f04494); }
.aksrt-order-detail-modal .aksrt-order-detail__actions.but-average.modal-buts > .but:only-child { grid-column: 1 / -1; }
/* Orders extensions */
.aksrt-orders-page__extra-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
@@ -205,4 +210,4 @@ html.dark .aksrt-orders-page__stat, html.dark .aksrt-orders-page__card { backgro
.aksrt-order-detail__after-sale-meta dt { color: var(--detail-muted); }
.aksrt-order-detail__after-sale-meta dd { margin: 0; color: var(--detail-ink); font-size: 12.5px; text-align: right; word-break: break-word; }
.aksrt-order-detail__after-sale-field { color: var(--detail-muted); }
.aksrt-order-detail__after-sale-foot { display: flex; flex-wrap: wrap; gap: 8px; }
.aksrt-order-detail__after-sale-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
assets/js/order-after-sale.js
+4 -1
View File
@@ -604,11 +604,14 @@
return;
}
// 再次申请售后：载荷已随按钮渲染，直接开申请表单（时效/工单状态随列表刷新更新）。
// 再次申请售后：载荷已随按钮渲染。can_reapply 必然伴随 has_application=true，
// 直接走 openApplyFlow 会被 has_application 分流回「售后详细」打转；
// 清除标记落回申请表单分支（expired 超时效拦截仍然生效）。
var reapplyBtn = event.target.closest('[data-aksrt-after-sale-reapply]');
if (reapplyBtn) {
event.preventDefault();
var payload = parsePayload(reapplyBtn.getAttribute('data-aksrt-after-sale-payload'));
if (payload && payload.after_sale) payload.after_sale.has_application = false;
window.AksrtModalRuntime.close('replace');
openApplyFlow(payload);
return;
assets/js/order-center.js
+3 -2
View File
@@ -251,9 +251,10 @@
html += "</div>";
}
// 底部按钮与禁封申诉弹窗同式：but-average modal-buts + .but / .but c-blue。
// 底部按钮与售后详细弹窗同式：but-average modal-buts；「关闭」与「我知道了」
// 同款（but c-blue），平铺观感由 orders.css 的 footer 按钮规则统一呈现。
html += '<footer class="aksrt-order-detail__actions but-average modal-buts">';
html += '<button type="button" class="but" data-aksrt-modal-close>关闭</button>';
html += '<button type="button" class="but c-blue" data-aksrt-modal-close>关闭</button>';
if (allowedActions.can_cancel) html += '<button type="button" class="but" data-aksrt-order-cancel="' + escapeHtml(order.order_number) + '">关闭订单</button>';
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>';
// 售后入口：未申请时底部保留「申请售后」；已有申请时入口收拢到售后记录卡片的「查看详细」。
tests/widget-system/after-sale-policy-contract.test.cjs
+13
View File
@@ -307,6 +307,9 @@ test('frontend after-sale modals are standalone and config-driven', () => {
assert.ok(!js.includes('>关闭</button>'), 'detail modal must not render a 关闭 button')
assert.match(js, /data-aksrt-modal-close>我知道了</)
assert.match(js, /data-aksrt-after-sale-reapply data-aksrt-after-sale-payload="/)
// 再次申请售后：can_reapply 必然伴随 has_application=true，入口点击须清除标记，
// 否则 openApplyFlow 的 has_application 分流会把用户弹回「售后详细」打转
assert.match(js, /payload\.after_sale\.has_application = false[\s\S]{0,120}openApplyFlow\(payload\)/)
// 撤销售后：入口仅随待审核状态渲染，点击先过二次确认弹窗，确认后 DELETE 工单
assert.match(js, /status === 'pending'[\s\S]*?data-aksrt-after-sale-withdraw="' \+ escapeHtml\(\(order && order\.order_number\) \|\| ''\)/)
@@ -351,6 +354,8 @@ test('order center drops the embedded after-sale form and exposes refresh()', ()
// 底部按钮与禁封申诉弹窗同式（but-average modal-buts）；「售后详细」入口收拢到记录卡片
assert.match(js, /aksrt-order-detail__actions but-average modal-buts/)
assert.match(js, /data-aksrt-after-sale-apply="' \+ afterSalePayload\(order\) \+ '"/)
// 底部「关闭」与售后详细「我知道了」同款（but c-blue，平铺观感由 orders.css 呈现）
assert.match(js, /class="but c-blue" data-aksrt-modal-close>关闭</)
assert.ok(js.includes('查看详细</button>'), 'record card has a view-detail entry')
assert.match(js, /data-aksrt-after-sale-detail="' \+ recordPayload \+ '"/)
// 记录卡片：原因 / 申请理由分行（新数据走 apply_form，老数据兜底融合串）
@@ -359,6 +364,14 @@ test('order center drops the embedded after-sale form and exposes refresh()', ()
assert.match(js, /data-aksrt-after-sale-detail="/)
assert.match(js, /data-aksrt-after-sale-apply="/)
// 订单详情弹窗 CSS：记录卡片「查看详细」foot 右对齐；底部按钮与售后弹窗家族
// 同款平铺观感（modal-runtime 同款规则镜像到吸底 footer），单按钮占满整行。
const ordersCss = read('assets/css/routes/orders.css')
assert.match(ordersCss, /\.aksrt-order-detail__after-sale-foot\s*\{[^}]*justify-content:\s*flex-end/)
assert.match(ordersCss, /\.aksrt-order-detail-modal \.aksrt-order-detail__actions\.but-average\.modal-buts > \.but\s*\{[^}]*background:\s*transparent/)
assert.match(ordersCss, /\.aksrt-order-detail-modal \.aksrt-order-detail__actions\.but-average\.modal-buts > \.but\.c-blue\s*\{[^}]*color:\s*var\(--modal-primary/)
assert.match(ordersCss, /\.aksrt-order-detail-modal \.aksrt-order-detail__actions\.but-average\.modal-buts > \.but:only-child\s*\{[^}]*grid-column:\s*1 \/ -1/)
// 售后记录区保留在订单详情弹窗：记录卡片带申请时间，「查看详细」逐条入口；
// 取消申请按钮与处理器已移除（撤销入口移入售后详细弹窗）。
assert.match(js, /售后记录/)