feat(after-sale): 支持撤销售后工单并接入人机验证

This commit is contained in:
2026-10-07 09:20:59 +08:00
parent 918ca371be
commit 8023e2e472
14 changed files with 427 additions and 82 deletions
+70 -2
View File
@@ -619,7 +619,8 @@ body.aksrt-modal-runtime-open {
底色走 --main-radius / --main-bg-color;移动端由 --bottom 底部抽屉接管。 */
.aksrt-after-sale-apply-modal:not(.aksrt-modal-runtime--bottom) .aksrt-modal-runtime__dialog,
.aksrt-after-sale-detail-modal:not(.aksrt-modal-runtime--bottom) .aksrt-modal-runtime__dialog,
.aksrt-after-sale-expired-modal:not(.aksrt-modal-runtime--bottom) .aksrt-modal-runtime__dialog {
.aksrt-after-sale-expired-modal:not(.aksrt-modal-runtime--bottom) .aksrt-modal-runtime__dialog,
.aksrt-after-sale-withdraw-modal:not(.aksrt-modal-runtime--bottom) .aksrt-modal-runtime__dialog {
width: min(400px, calc(100vw - 32px));
border-radius: var(--main-radius, 8px);
background: var(--main-bg-color, #fff);
@@ -627,7 +628,8 @@ body.aksrt-modal-runtime-open {
.aksrt-after-sale-apply-modal .aksrt-modal-runtime__skeleton,
.aksrt-after-sale-detail-modal .aksrt-modal-runtime__skeleton,
.aksrt-after-sale-expired-modal .aksrt-modal-runtime__skeleton {
.aksrt-after-sale-expired-modal .aksrt-modal-runtime__skeleton,
.aksrt-after-sale-withdraw-modal .aksrt-modal-runtime__skeleton {
padding: 24px 18px;
}
@@ -636,10 +638,12 @@ body.aksrt-modal-runtime-open {
.aksrt-after-sale-apply-modal .modal-colorful-header,
.aksrt-after-sale-detail-modal .modal-colorful-header,
.aksrt-after-sale-expired-modal .modal-colorful-header,
.aksrt-after-sale-withdraw-modal .modal-colorful-header,
.aksrt-order-detail-modal .modal-colorful-header,
.aksrt-after-sale-apply-modal .colorful-bg,
.aksrt-after-sale-detail-modal .colorful-bg,
.aksrt-after-sale-expired-modal .colorful-bg,
.aksrt-after-sale-withdraw-modal .colorful-bg,
.aksrt-order-detail-modal .colorful-bg {
position: relative;
overflow: hidden;
@@ -651,6 +655,7 @@ body.aksrt-modal-runtime-open {
.aksrt-after-sale-apply-modal .modal-colorful-header,
.aksrt-after-sale-detail-modal .modal-colorful-header,
.aksrt-after-sale-expired-modal .modal-colorful-header,
.aksrt-after-sale-withdraw-modal .modal-colorful-header,
.aksrt-order-detail-modal .modal-colorful-header {
position: absolute;
top: 0;
@@ -666,6 +671,7 @@ body.aksrt-modal-runtime-open {
.aksrt-after-sale-apply-modal .modal-colorful-header + *,
.aksrt-after-sale-detail-modal .modal-colorful-header + *,
.aksrt-after-sale-expired-modal .modal-colorful-header + *,
.aksrt-after-sale-withdraw-modal .modal-colorful-header + *,
.aksrt-order-detail-modal .modal-colorful-header + * {
margin-top: 120px;
}
@@ -673,6 +679,7 @@ body.aksrt-modal-runtime-open {
.aksrt-after-sale-apply-modal .modal-colorful-header > .close,
.aksrt-after-sale-detail-modal .modal-colorful-header > .close,
.aksrt-after-sale-expired-modal .modal-colorful-header > .close,
.aksrt-after-sale-withdraw-modal .modal-colorful-header > .close,
.aksrt-order-detail-modal .modal-colorful-header > .close {
position: absolute;
top: 10px;
@@ -690,10 +697,13 @@ body.aksrt-modal-runtime-open {
.aksrt-after-sale-detail-modal .colorful-bg > .colorful-make::before,
.aksrt-after-sale-detail-modal .colorful-bg > .colorful-make::after,
.aksrt-after-sale-expired-modal .colorful-bg > .colorful-make,
.aksrt-after-sale-withdraw-modal .colorful-bg > .colorful-make,
.aksrt-order-detail-modal .colorful-bg > .colorful-make,
.aksrt-after-sale-expired-modal .colorful-bg > .colorful-make::before,
.aksrt-after-sale-withdraw-modal .colorful-bg > .colorful-make::before,
.aksrt-order-detail-modal .colorful-bg > .colorful-make::before,
.aksrt-after-sale-expired-modal .colorful-bg > .colorful-make::after,
.aksrt-after-sale-withdraw-modal .colorful-bg > .colorful-make::after,
.aksrt-order-detail-modal .colorful-bg > .colorful-make::after {
position: absolute;
color: var(--this-color);
@@ -705,6 +715,7 @@ body.aksrt-modal-runtime-open {
.aksrt-after-sale-apply-modal .colorful-bg > .colorful-make,
.aksrt-after-sale-detail-modal .colorful-bg > .colorful-make,
.aksrt-after-sale-expired-modal .colorful-bg > .colorful-make,
.aksrt-after-sale-withdraw-modal .colorful-bg > .colorful-make,
.aksrt-order-detail-modal .colorful-bg > .colorful-make {
top: 60%;
bottom: 0;
@@ -716,6 +727,7 @@ body.aksrt-modal-runtime-open {
.aksrt-after-sale-apply-modal .colorful-bg > .colorful-make::before,
.aksrt-after-sale-detail-modal .colorful-bg > .colorful-make::before,
.aksrt-after-sale-expired-modal .colorful-bg > .colorful-make::before,
.aksrt-after-sale-withdraw-modal .colorful-bg > .colorful-make::before,
.aksrt-order-detail-modal .colorful-bg > .colorful-make::before {
top: -325px;
right: -558px;
@@ -729,6 +741,7 @@ body.aksrt-modal-runtime-open {
.aksrt-after-sale-apply-modal .colorful-bg > .colorful-make::after,
.aksrt-after-sale-detail-modal .colorful-bg > .colorful-make::after,
.aksrt-after-sale-expired-modal .colorful-bg > .colorful-make::after,
.aksrt-after-sale-withdraw-modal .colorful-bg > .colorful-make::after,
.aksrt-order-detail-modal .colorful-bg > .colorful-make::after {
top: -170px;
bottom: 0;
@@ -802,3 +815,58 @@ body.aksrt-modal-runtime-open {
.aksrt-after-sale-status.is-completed { color: var(--color-success, #10b981); }
.aksrt-after-sale-status.is-rejected,
.aksrt-after-sale-status.is-cancelled { color: var(--color-error, #ef4444); }
/* 状态行右侧单元格:状态徽章 + 「撤销售后」入口(仅待审核工单渲染)。 */
.aksrt-after-sale-detail__statusCell { display: inline-flex; align-items: center; gap: 10px; }
.aksrt-after-sale-withdraw { display: inline-flex; align-items: center; gap: 3px; padding: 0; border: 0; background: transparent; color: var(--modal-danger, #ef4444); font-size: 12px; font-weight: 600; line-height: 1.4; cursor: pointer; transition: color .15s ease; }
.aksrt-after-sale-withdraw .fa { font-size: 12px; }
.aksrt-after-sale-withdraw:hover { color: color-mix(in srgb, var(--modal-danger) 78%, var(--modal-ink)); }
/* 售后提示弹窗(撤销售后确认)正文。 */
.aksrt-after-sale-withdraw__body { margin-bottom: 16px; color: var(--color-ink-2, #4e5358); line-height: 1.7; }
/* 售后弹窗底部按钮:全宽平铺贴底(负 margin 抵消 __content 内边距)+ 分隔线,
子按钮去独立背景/边框/圆角(文字色区分主次),覆盖上方全局按钮网格的胶囊观感;
仅在售后弹窗家族生效,其他 runtime 弹窗仍走全局网格样式。 */
.aksrt-after-sale-apply-modal .but-average.modal-buts,
.aksrt-after-sale-detail-modal .but-average.modal-buts,
.aksrt-after-sale-expired-modal .but-average.modal-buts,
.aksrt-after-sale-withdraw-modal .but-average.modal-buts {
gap: 0;
margin: 16px -18px -16px;
padding: 12px 18px;
border-top: 1px solid var(--modal-line-soft, rgba(50, 50, 50, 0.06));
background: var(--main-bg-color, #fff);
}
.aksrt-after-sale-apply-modal .but-average.modal-buts > .but,
.aksrt-after-sale-detail-modal .but-average.modal-buts > .but,
.aksrt-after-sale-expired-modal .but-average.modal-buts > .but,
.aksrt-after-sale-withdraw-modal .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-after-sale-apply-modal .but-average.modal-buts > .but.c-blue,
.aksrt-after-sale-detail-modal .but-average.modal-buts > .but.c-blue,
.aksrt-after-sale-expired-modal .but-average.modal-buts > .but.c-blue,
.aksrt-after-sale-withdraw-modal .but-average.modal-buts > .but.c-blue {
background: transparent;
border: 0;
color: var(--modal-primary, #f04494);
}
/* 单按钮 footer 占满整行(全局网格是 1fr 1fr,单按钮会只占一半)。 */
.aksrt-after-sale-apply-modal .but-average.modal-buts > .but:only-child,
.aksrt-after-sale-detail-modal .but-average.modal-buts > .but:only-child,
.aksrt-after-sale-expired-modal .but-average.modal-buts > .but:only-child,
.aksrt-after-sale-withdraw-modal .but-average.modal-buts > .but:only-child { grid-column: 1 / -1; }