fix(payment): 售后弹窗滚动容器改用 no-scrollbar,消除弹窗边缘滚动栏

mini-scrollbar 是 3px 可见细滚动条(举报弹窗 600px 宽弹窗用的写法);
modal-mini 这类带炫彩横幅的表单弹窗,主题统一走禁封申诉/记录弹窗的口径:
scroll-y + no-scrollbar 完全隐藏滚动条(含细滚动条)+ 50vh 内层滚动。
申请与售后详细两个滚动容器一并切换,滚动行为不变、只是不再露出滚动栏。
This commit is contained in:
2026-10-06 23:38:18 +08:00
parent e7e281f10c
commit a0f59826fe
2 changed files with 9 additions and 2 deletions
+3 -2
View File
@@ -115,7 +115,8 @@
var html = '<div class="aksrt-after-sale-apply-modal">';
html += colorfulHeader('申请售后', 'fa-undo-alt');
html += '<form class="aksrt-after-sale-form" data-aksrt-after-sale-order="' + escapeHtml((order && order.order_number) || '') + '" novalidate>';
html += '<div class="scroll-y mini-scrollbar max-vh5">';
// 滚动容器与禁封申诉弹窗一致:no-scrollbar 完全隐藏滚动条(含细滚动条)+ 50vh 内层滚动。
html += '<div class="scroll-y no-scrollbar max-vh5">';
html += orderSummaryHtml(order);
if (reasons.length) {
@@ -174,7 +175,7 @@
var html = '<div class="aksrt-after-sale-detail-modal">';
html += colorfulHeader('售后详细', 'fa-clipboard-list');
html += '<div class="scroll-y mini-scrollbar max-vh5 aksrt-after-sale-detail__body">';
html += '<div class="scroll-y no-scrollbar max-vh5 aksrt-after-sale-detail__body">';
html += orderSummaryHtml(order);
html += '<div class="aksrt-after-sale-detail__statusRow">' +
@@ -253,6 +253,12 @@ test('frontend after-sale modals are standalone and config-driven', () => {
assert.match(js, /modal-colorful-header colorful-bg jb-blue/)
assert.match(js, /AksrtModalRuntime\.open\(\{/)
// 滚动容器与禁封申诉弹窗同口径:no-scrollbar 完全隐藏滚动条(含细滚动条),
// 避免 modal-mini 弹窗边缘出现可见滚动栏。
assert.match(js, /'<div class="scroll-y no-scrollbar max-vh5">'/)
assert.match(js, /'<div class="scroll-y no-scrollbar max-vh5 aksrt-after-sale-detail__body">'/)
assert.ok(!js.includes('mini-scrollbar'), 'after-sale modals must not render a visible scrollbar')
// 申请表单:预置原因徽章、所需资料、必填申请说明(placeholder 取后台配置)
assert.match(js, /reasonOptions\(\)/)
assert.match(js, /materialOptions\(\)/)