fix(vip): 积分兑换弹窗改服务端渲染并与 Zibll 1:1 对齐

/user/vip/ 的积分兑换会员弹窗原先是前端自行拼装的，结构与层级都与参考主题 Zibll 不一致：Zibll 走 zibpay_get_vip_points_exchange_modal() 服务端渲染静态壳，前端只按需开合。改为同一模型，前端不再拼 HTML。 - VipServiceModal 新增 get_points_exchange_modal_html()：门控（未登录/未开启返回空串）、vip-card 套餐选择、积分不足提示与提交表单；wp_footer 挂载输出 - pay-vip.js 移除 renderPointsModal / pointsPackage / exchangeFromModal / vipPointsPay，改为自包含开合（.in + 内联 display:flex + 独立遮罩 + body.modal-open + ESC），保留 aksrt-vip-points-toast 的 load/success/danger 契约 - 移除 /user/vip/ 页面底部独立积分兑换入口及其样式（uc-vip-points-link） - credits.js 清理依赖全站不存在选择器的死代码 initVipPointsExchange() - vip-modal.css 删除 71 行自实现样式，改为 .modal[data-aksrt-vip-points-modal] 显隐契约；层级 100050 < 遮罩 100055 < 弹窗 100060 < notyf 10000000 - 新增 vip-points-exchange-modal 契约测试（7 项），toast-contract 同步静止态必须显式 display:none，否则 .flex{display:flex} 会覆盖 .modal{display:none} 形成隐形遮罩拦截整页点击。未写数据迁移。验证：node --test tests/widget-system/*.test.cjs 308 项全部通过；php -l 全部改动文件通过；隔离渲染桩确认积分充足 / 积分不足 / 功能关闭 / 未登录四种情形的 HTML 产物正确。
2026-09-18 20:05:05 +08:00
parent d2447f8aa6
commit 95ff0761b7
11 changed files with 401 additions and 318 deletions
@@ -121,7 +121,6 @@ trait VipServiceModal {
                'level_packages' => $groups,
                'points_exchange' => $points_exchange,
                'wallet_balance' => (string) ($catalog['wallet_balance'] ?? '0.00'),
-                'vip_url' => (string) ($catalog['vip_url'] ?? ''),
            ],
            'member' => [
                'id' => $user_id,
@@ -132,7 +131,6 @@ trait VipServiceModal {
                'expires_label' => (string) ($member['expires_label'] ?? ''),
                'state' => (string) ($member['state'] ?? 'unopened'),
                'is_permanent' => !empty($member['is_permanent']),
-                'points' => (int) ($catalog['user_points'] ?? 0),
                'logged_in' => $user_id > 0,
            ],
            'levels' => $level_view,
@@ -157,6 +155,148 @@ trait VipServiceModal {
        ];
    }

+    /**
+     * 积分兑换会员弹窗（参考主题 zibpay_get_vip_points_exchange_modal 1:1 移植）。
+     *
+     * 服务端静态输出参考主题 refresh_modal 同构外壳：
+     *   .modal.flex.jc.fade > .modal-dialog.modal-mini.full-sm
+     *     > .modal-content > .modal-body
+     * 与余额充值/购买积分弹窗同构（静止态由 vip-modal.css 显式隐藏，打开态由
+     * pay-vip.js 的自包含开关以内联 display:flex 驱动）。
+     *
+     * 入口位于会员购买弹窗内（pay-vip.js 的「积分兑换会员」按钮），而 .pay-vip
+     * 触发点全站可见，因此由 aksrt_render_vip_points_exchange_modal() 在
+     * wp_footer 全局输出一次。
+     *
+     * @return string 空串表示积分兑换不可用（不输出弹窗壳）。
+     */
+    public function get_points_exchange_modal_html(int $user_id = 0): string {
+        $user_id = max(0, $user_id);
+        if ($user_id <= 0 || !class_exists('\AKSRT\Settings\Settings')) {
+            return '';
+        }
+
+        // 先做零成本门控，避免每次页面渲染都去查积分余额。
+        $vip = $this->get_vip_settings_context();
+        if (empty($vip['enabled']) || empty($vip['points_exchange']['enabled']) || !\AKSRT\Settings\Settings::credits_enabled()) {
+            return '';
+        }
+
+        $catalog = $this->get_catalog($user_id);
+        $points_ex = is_array($catalog['points_exchange'] ?? null) ? $catalog['points_exchange'] : [];
+        $packages = is_array($points_ex['packages'] ?? null) ? $points_ex['packages'] : [];
+        if ($packages === []) {
+            return '';
+        }
+
+        $levels = is_array($vip['levels'] ?? null) ? $vip['levels'] : [];
+        $user_points = max(0, (int) ($catalog['user_points'] ?? 0));
+        $currency = (string) ($catalog['currency_name'] ?? __('积分', 'aksrt'));
+        $points_center_url = function_exists('aksrt_get_user_center_tab_url')
+            ? aksrt_get_user_center_tab_url('credits')
+            : home_url('/');
+
+        // 会员卡片（参考主题 data-for/data-value 选中模型；data-value 为本主题的套餐 ID）。
+        $cards = '';
+        $min_points = 0;
+        $first_package_id = 0;
+        foreach ($packages as $index => $package) {
+            if (!is_array($package)) {
+                continue;
+            }
+            $package_id = max(0, (int) ($package['package_id'] ?? 0));
+            if ($package_id <= 0) {
+                continue;
+            }
+            if ($first_package_id === 0) {
+                $first_package_id = $package_id;
+            }
+            $level = max(1, min(2, (int) ($package['level'] ?? 1)));
+            $points = max(0, (int) ($package['points'] ?? 0));
+            $days = max(0, (int) ($package['days'] ?? 0));
+            // 参考主题时长行：30<span class="px12">天</span> / 永久。
+            $duration = $days > 0
+                ? (string) $days . '<span class="px12">' . esc_html__('天', 'aksrt') . '</span>'
+                : esc_html__('永久', 'aksrt');
+            $level_name = (string) ($levels[$level]['name'] ?? ('VIP' . $level));
+
+            $cards .= '<div class="vip-card  vip-theme' . $level . ($index === 0 ? ' active' : '') . ' " data-for="product_id" data-value="' . $package_id . '">'
+                . '<span class=" ">' . $this->points_exchange_card_icon($levels[$level] ?? []) . esc_html($level_name) . '</span>'
+                . '<div class="flex jsb ac hh em16 mt10">'
+                . '<span class="shrink0 mr10">' . $duration . '</span>'
+                . '<span class="shrink0">' . $points . '<span class="px12">' . esc_html($currency) . '</span></span>'
+                . '</div></div>';
+
+            if ($min_points === 0 || $points < $min_points) {
+                $min_points = $points;
+            }
+        }
+        if ($cards === '') {
+            return '';
+        }
+
+        $desc_text = trim((string) ($points_ex['desc'] ?? ''));
+        $desc = $desc_text !== ''
+            ? '<div class="muted-box muted-2-color padding-10 em09 mt20">' . esc_html($desc_text) . '</div>'
+            : '';
+
+        // 最低价套餐仍超出用户积分 → 参考主题的 badg c-red btn-block 提示。
+        // （参考主题源码写作 `!$min_val > $user_points`，因运算符优先级恒假，
+        //  此处按其原意取真实比较，保证提示分支可达。）
+        if ($min_points > $user_points) {
+            $form = '<div class="badg c-red btn-block">' . esc_html__('积分不足，暂时无法兑换', 'aksrt') . '</div>';
+        } else {
+            $form = '<div class="mt20">'
+                . '<input type="hidden" name="product_id" value="' . $first_package_id . '">'
+                . '<input type="hidden" name="order_type" value="4">'
+                . '<input type="hidden" name="action" value="points_initiate_pay">'
+                . '<button type="submit" class="mt6 but jb-yellow btn-block radius padding-lg" data-aksrt-vip-points-submit>'
+                . '<i class="fa fa-check" aria-hidden="true"></i>' . esc_html__('立即兑换', 'aksrt')
+                . '</button></div>';
+        }
+
+        $header = '<div class="mb10 touch">'
+            . '<button type="button" class="close" data-dismiss="modal" aria-label="' . esc_attr__('关闭', 'aksrt') . '">'
+            . '<svg class="ic-close" aria-hidden="true"><use xlink:href="#icon-close"></use></svg></button>'
+            . '<b class="modal-title flex ac"><span class="mr6 em14">'
+            . '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-vip_1"></use></svg></span>'
+            . esc_html__('积分兑换会员', 'aksrt') . '</b></div>';
+
+        $user_box = '<div class="muted-box padding-h10 mb20">'
+            . '<a rel="nofollow" class="flex jsb ac" href="' . esc_url($points_center_url) . '">'
+            . '<span class="muted-2-color">'
+            . '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-points"></use></svg> '
+            . esc_html__('我的积分', 'aksrt') . '</span>'
+            . '<span class="font-bold ml6 em14"><span class="c-green mr10">' . $user_points . '</span>'
+            . '<i class="fa fa-angle-right" aria-hidden="true"></i></span></a></div>';
+
+        $lists = '<div class="muted-2-color mb6 em09">' . esc_html__('请选择需兑换的会员', 'aksrt') . '</div>'
+            . '<div class="flex hh exchange-card-box">' . $cards . '</div>';
+
+        return '<div class="modal flex jc fade" id="aksrt-vip-points-modal" tabindex="-1" role="dialog" aria-hidden="false" data-aksrt-vip-points-modal>'
+            . '<div class="modal-dialog modal-mini full-sm" role="document">'
+            . '<div class="modal-content"><div class="modal-body">'
+            . $header
+            . '<form class="" data-aksrt-vip-points-form>' . $user_box . $lists . $desc . $form . '</form>'
+            . '</div></div></div></div>';
+    }
+
+    /**
+     * 积分兑换卡片等级图标（参考主题 zibpay_get_vip_card_icon）。
+     *
+     * @param array<string,mixed> $level_settings 等级设置（含 name / img_icon）。
+     */
+    private function points_exchange_card_icon(array $level_settings): string {
+        $name = (string) ($level_settings['name'] ?? '');
+        $icon_url = (string) ($level_settings['img_icon'] ?? '');
+        if ($icon_url === '') {
+            return '<i class="fa fas fa-certificate mr3" aria-hidden="true"></i>';
+        }
+
+        return '<img' . aksrt_get_lazy_attr('lazy_other', $icon_url, 'img-icon mr3')
+            . ' title="' . esc_attr($name) . '" alt="' . esc_attr($name) . '">';
+    }
+
    /**
     * 支付方式 logo 映射（assets/img/pay-*-logo.svg，与充值/积分弹窗一致）。
     */
@@ -261,9 +261,6 @@ trait VipServicePurchase {
            ],
            'payment_methods'    => $methods,
            'card_pass'          => $this->vip_card_pass_context(),
-            'vip_url'            => function_exists('aksrt_get_user_center_tab_url')
-                ? aksrt_get_user_center_tab_url('credits')
-                : (function_exists('aksrt_get_user_center_url') ? aksrt_get_user_center_url() : home_url('/')),
            'logged_in'          => $user_id > 0,
        ];
        $this->vip_catalog_cache[$user_id] = $catalog;