fix(revenue): match reference poster modal UI 1:1

The 推广海报 modal on the revenue page used a bespoke .uc-modal card —
white panel, 12px radius, heavy shadow, title bar, corner × button and a
full-width 保存海报 button — plus a light-gray plate with its own
border-radius around the poster canvas. None of that exists in the
reference theme, so the popup read as bordered and off-spec.

Rebuild the modal on the reference poster-share structure: a borderless
360px .modal-dialog.poster-share centred by .modal.flex.jc, a
.loading-mask overlay while the canvas renders, and the download/close
buttons moved onto a .abs-center.hover-show-con layer that only fades in
on hover. initAffiliatePoster() now drives Bootstrap 3 modal semantics
(.in toggle, .modal-backdrop, body.modal-open, ESC and backdrop-click to
close), mirroring the existing openChargeModal/closeChargeModal pair, and
animates .modal-content from the 220px placeholder to the poster's real
height before clearing the inline styles.

No CSS added — every rule the reference modal needs was already ported.
Drop the now-dead .uc-affiliate-poster rules; the shared .uc-modal shell
and openModal/closeModal stay for the withdraw and transfer modals.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
kate522andClaude Fable 5 committed 2026-10-21 16:02:41 +08:00
1 parent a120f61e13
commit de0e5cd481
4 files changed
+135 -30

No files matched your search

@@ -2,8 +2,12 @@
/**
* Affiliate poster preview modal.
*
* The 推广海报 button lives in the revenue detail link row; the QR code is no
* longer rendered on its own — it exists only inside the generated poster.
* 1:1 replica of the reference theme's poster-share modal (zibll js/poster-share.js
* + css/main.css `.poster-share` block): a borderless 360px Bootstrap-style dialog
* centred by `.modal.flex.jc`, a `.loading-mask` overlay while the canvas renders,
* and circular download/close buttons on a `.hover-show-con` layer that only fades
* in on hover. The 推广海报 button lives in the revenue detail link row; the QR code
* is no longer rendered on its own — it exists only inside the generated poster.
*
* @package AKSRT
*/
@@ -15,14 +19,18 @@ if (!empty($GLOBALS['aksrt_affiliate_poster_modal_rendered'])) {
}
$GLOBALS['aksrt_affiliate_poster_modal_rendered'] = true;
?>
<div class="uc-modal" id="aksrt-affiliate-poster-modal" hidden data-aksrt-affiliate-poster-modal>
<div class="uc-modal__overlay" data-affiliate-poster-close></div>
<div class="uc-modal__dialog" role="dialog" aria-modal="true">
<button type="button" class="uc-modal__close" data-affiliate-poster-close aria-label="<?php esc_attr_e('关闭', 'aksrt'); ?>"><i class="fa fas fa-times" aria-hidden="true"></i></button>
<h3 class="uc-modal__title"><?php esc_html_e('推广海报', 'aksrt'); ?></h3>
<div class="uc-affiliate-poster" data-affiliate-poster-stage>
<p class="muted-2-color em09"><?php esc_html_e('正在生成海报…', 'aksrt'); ?></p>
<div class="modal fade flex jc" id="aksrt-affiliate-poster-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog poster-share hover-show" role="document">
<div class="modal-content" style="height:220px;overflow:hidden">
<div class="poster-imgbox hover-show" data-affiliate-poster-stage></div>
<div class="flex jc loading-mask absolute main-bg radius8" data-affiliate-poster-loading>
<div class="loading zts fa-2x"></div>
<div class="muted-2-color box-body"><?php esc_html_e('正在生成图片,请稍候...', 'aksrt'); ?></div>
</div>
</div>
<div class="padding-6 abs-center hover-show-con text-center" style="top:auto">
<a href="javascript:;" class="but cir jb-blue poster-download hide" data-affiliate-poster-download aria-label="<?php esc_attr_e('保存海报', 'aksrt'); ?>"><i class="fas fa-download" aria-hidden="true"></i></a>
<button type="button" data-dismiss="modal" class="but cir jb-yellow ml10" aria-label="<?php esc_attr_e('关闭', 'aksrt'); ?>"><svg aria-hidden="true" class="icon em12"><use xlink:href="#icon-close"></use></svg></button>
</div>
<button type="button" class="but jb-blue btn-block mt10" data-affiliate-poster-download hidden><?php esc_html_e('保存海报', 'aksrt'); ?></button>
</div>
</div>