From 95ff0761b728e907bab722524cbcf779faa159e3 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 18 Sep 2026 20:05:05 +0800 Subject: [PATCH] =?UTF-8?q?fix(vip):=20=E7=A7=AF=E5=88=86=E5=85=91?= =?UTF-8?q?=E6=8D=A2=E5=BC=B9=E7=AA=97=E6=94=B9=E6=9C=8D=E5=8A=A1=E7=AB=AF?= =?UTF-8?q?=E6=B8=B2=E6=9F=93=E5=B9=B6=E4=B8=8E=20Zibll=201:1=20=E5=AF=B9?= =?UTF-8?q?=E9=BD=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit /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 产物正确。 --- .gitignore | 1 + assets/css/frontend/vip-modal.css | 91 ++------ assets/css/routes/user-center/credits.css | 64 ------ assets/js/credits.js | 45 ---- assets/js/pay-vip.js | 206 +++++++++--------- inc/helpers/aksrt-vip.php | 24 ++ inc/helpers/user-center-renderers/vip-tab.php | 25 --- src/Content/VipServiceModal.php | 144 +++++++++++- src/Content/VipServicePurchase.php | 3 - tests/widget-system/toast-contract.test.cjs | 4 +- .../vip-points-exchange-modal.test.cjs | 112 ++++++++++ 11 files changed, 401 insertions(+), 318 deletions(-) create mode 100644 tests/widget-system/vip-points-exchange-modal.test.cjs diff --git a/.gitignore b/.gitignore index b171dc60..55959ed1 100644 --- a/.gitignore +++ b/.gitignore @@ -59,6 +59,7 @@ !/tests/widget-system/card-pass-universal-redeem.test.cjs !/tests/widget-system/card-pass-modal-redeem.test.cjs !/tests/widget-system/balance-charge-modal.test.cjs +!/tests/widget-system/vip-points-exchange-modal.test.cjs !/tests/widget-system/pay-sdk-order-contract.test.cjs !/tests/admin/ /tests/admin/* diff --git a/assets/css/frontend/vip-modal.css b/assets/css/frontend/vip-modal.css index 309348d5..ac24c40b 100644 --- a/assets/css/frontend/vip-modal.css +++ b/assets/css/frontend/vip-modal.css @@ -41,79 +41,28 @@ position: relative; } -.aksrt-vip-points-modal__title { - margin: 0 0 6px; - padding-right: 24px; - font-size: 20px; -} -.aksrt-vip-points-modal__desc, -.aksrt-vip-points-modal__note { - margin: 0 0 12px; - color: var(--muted-color, #777); - font-size: 13px; - line-height: 1.6; -} -.aksrt-vip-points-modal__balance { - display: flex; - align-items: baseline; - justify-content: space-between; - gap: 12px; - margin: 0 0 14px; - padding: 12px 14px; - border: 1px solid rgba(16, 185, 129, 0.2); - border-radius: 10px; - background: rgba(16, 185, 129, 0.08); -} -.aksrt-vip-points-modal__balance-label { color: var(--muted-color, #777); font-size: 13px; } -.aksrt-vip-points-modal__balance-value { color: #047857; font-size: 17px; } -.aksrt-vip-points-modal__packages { display: grid; gap: 9px; margin-bottom: 14px; } -.aksrt-vip-points-option { display: block; cursor: pointer; } -.aksrt-vip-points-option > input { - position: absolute; - width: 1px; - height: 1px; - opacity: 0; -} -.aksrt-vip-points-option__card { - display: grid; - grid-template-columns: 1fr auto; - gap: 4px 10px; - padding: 12px 13px; - border: 1px solid var(--color-line, rgba(0, 0, 0, 0.1)); - border-radius: 10px; - background: var(--main-bg-color, #fff); - transition: border-color .15s ease, box-shadow .15s ease; -} -.aksrt-vip-points-option__title { font-size: 14px; } -.aksrt-vip-points-option__days { color: var(--muted-color, #777); font-size: 12px; } -.aksrt-vip-points-option__cost { grid-row: 1 / span 2; grid-column: 2; align-self: center; color: #047857; font-size: 14px; font-weight: 700; } -.aksrt-vip-points-option > input:checked + .aksrt-vip-points-option__card { - border-color: #10b981; - box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.14); -} -.aksrt-vip-points-option > input:focus-visible + .aksrt-vip-points-option__card { outline: 3px solid rgba(16, 185, 129, 0.3); outline-offset: 2px; } -.aksrt-vip-points-option.is-disabled { cursor: not-allowed; opacity: .55; } -.aksrt-vip-points-option.is-disabled .aksrt-vip-points-option__cost { color: #b91c1c; } -.aksrt-vip-points-modal__empty { padding: 22px 12px; color: var(--muted-color, #777); text-align: center; } -.aksrt-vip-points-submit { - width: 100%; - min-height: 42px; - border: 0; - border-radius: 999px; - color: #fff; - background: linear-gradient(90deg, #059669, #10b981); - cursor: pointer; - font: inherit; - font-weight: 700; -} -.aksrt-vip-points-submit:disabled { cursor: not-allowed; opacity: .5; } -.aksrt-vip-points-submit.is-loading { cursor: wait; opacity: .7; } -.aksrt-vip-points-modal__tip { min-height: 1.4em; margin: 9px 0 0; } -@media (max-width: 480px) { - .aksrt-vip-points-modal { padding: 16px 13px 14px; } - .aksrt-vip-points-modal__balance { align-items: flex-start; flex-direction: column; gap: 3px; } +/* 积分兑换会员弹窗：参考主题 refresh_modal 同构静态壳 + （.modal.flex.jc.fade > .modal-dialog.modal-mini.full-sm > .modal-content + > .modal-body，由 inc/helpers/aksrt-vip.php 服务端输出）。三点约束： + - 静止态必须显式隐藏：main.css 的 .flex{display:flex}（后加载、与 bootstrap + 的 .modal{display:none} 同特异性）会让壳永久铺满全屏，叠加 .fade 的 + opacity:0 形成隐形遮罩，拦截整页点击； + - 打开态由 pay-vip.js 自包含开关的内联 display:flex 驱动（block 会破坏 + .flex.jc 双轴居中），与余额充值/购买积分弹窗同构； + - 入口在本页 runtime 会员弹窗内，壳需高于 runtime 宿主（100050），以复现 + 参考主题在会员弹窗之上再叠一层兑换弹窗的行为。 */ +.modal[data-aksrt-vip-points-modal] { + display: none; + z-index: 100060; } +.modal[data-aksrt-vip-points-modal].in { + display: flex; +} + +.modal-backdrop[data-aksrt-vip-points-backdrop] { + z-index: 100055; +} .pay-vip-form-row { display: grid; diff --git a/assets/css/routes/user-center/credits.css b/assets/css/routes/user-center/credits.css index 6211f49b..4824052c 100644 --- a/assets/css/routes/user-center/credits.css +++ b/assets/css/routes/user-center/credits.css @@ -1331,70 +1331,6 @@ body.uc-modal-open { margin: 0 !important; line-height: 1; } -.uc-vip-points-link { - display: flex; - align-items: center; - gap: 14px; - min-width: 0; - margin-top: 12px; - padding: 14px 16px; - border: 1px solid rgba(16, 185, 129, 0.24); - border-radius: 12px; - background: linear-gradient(105deg, rgba(16, 185, 129, 0.1), var(--surface-1, #fff) 62%); - box-shadow: 0 6px 18px rgba(16, 185, 129, 0.08); -} -.uc-vip-points-link__icon { - display: inline-flex; - align-items: center; - justify-content: center; - width: 40px; - height: 40px; - flex: 0 0 40px; - border-radius: 12px; - color: #047857; - background: rgba(16, 185, 129, 0.15); - font-size: 18px; -} -.uc-vip-points-link__body { - display: flex; - flex: 1 1 auto; - min-width: 0; - flex-direction: column; - gap: 3px; -} -.uc-vip-points-link__body strong { font-size: 14px; } -.uc-vip-points-link__body span { - overflow: hidden; - color: var(--color-ink-3, #6b7280); - font-size: 12px; - text-overflow: ellipsis; - white-space: nowrap; -} -.uc-vip-points-link__action { - display: inline-flex; - align-items: center; - gap: 7px; - flex: 0 0 auto; - min-height: 34px; - padding: 0 13px; - border: 0; - border-radius: 999px; - color: #047857; - background: rgba(16, 185, 129, 0.12); - cursor: pointer; - font: inherit; - font-size: 13px; - font-weight: 700; -} -.uc-vip-points-link__action:hover { background: rgba(16, 185, 129, 0.2); } -.uc-vip-points-link__action:focus-visible, -.uc-vip-points-link:focus-within { outline: 3px solid rgba(16, 185, 129, 0.3); outline-offset: 2px; } -@media (max-width: 480px) { - .uc-vip-points-link { align-items: flex-start; flex-wrap: wrap; } - .uc-vip-points-link__body { flex-basis: calc(100% - 54px); } - .uc-vip-points-link__action { margin-left: 54px; } -} - .uc-vip-assets-entry { gap: 12px; } diff --git a/assets/js/credits.js b/assets/js/credits.js index 7e913834..9c9ed6b8 100644 --- a/assets/js/credits.js +++ b/assets/js/credits.js @@ -148,50 +148,6 @@ window.AKSRTAffiliateRevenueInit = initAffiliateRevenue; - - - // ===== VIP 积分兑换 ===== - function initVipPointsExchange() { - var root = document.querySelector('[data-aksrt-vip-points]'); - if (!root) return; - var tip = root.querySelector('[data-aksrt-vip-points-tip]'); - var busy = false; - var coordinator = window.AksrtVipPurchaseCoordinator; - function setTip(text, isError) { - if (!tip) return; - tip.textContent = text || ''; - tip.classList.toggle('is-error', !!isError); - } - root.addEventListener('click', function (e) { - var btn = e.target.closest('[data-aksrt-vip-points-buy]'); - if (!btn || busy || btn.disabled) return; - e.preventDefault(); - var packageId = parseInt(btn.getAttribute('data-package-id') || '0', 10); - if (!packageId) return; - busy = true; - btn.classList.add('is-loading'); - setTip('正在兑换…'); - coordinator.exchange({ - packageId: packageId, - tags: ['vip', 'orders'] - }).then(function (r) { - busy = false; - btn.classList.remove('is-loading'); - if (!r.ok || (r.json && r.json.code && !r.json.success)) { - setTip((r.json && r.json.message) || '兑换失败', true); - return; - } - var data = (r.json && r.json.data) ? r.json.data : r.json; - setTip((data && data.message) || '兑换成功，正在刷新…'); - window.location.reload(); - }).catch(function () { - busy = false; - btn.classList.remove('is-loading'); - setTip('网络错误，请重试', true); - }); - }); - } - // ===== VIP 开通 ===== function initVipShop() { var root = document.querySelector('[data-aksrt-vip-shop]'); @@ -1134,7 +1090,6 @@ initSigninGoto(); initAffiliateRevenue(); initVipShop(); - initVipPointsExchange(); initBalanceCharge(); initTransfer(); initPointsPay(); diff --git a/assets/js/pay-vip.js b/assets/js/pay-vip.js index a721d8d4..7b7b9bc6 100644 --- a/assets/js/pay-vip.js +++ b/assets/js/pay-vip.js @@ -222,77 +222,64 @@ }); } - function renderPointsModal(body, view) { - view = view || {}; - if (body.replaceChildren) body.replaceChildren(); - else body.innerHTML = ""; + // ===== 积分兑换会员弹窗（参考主题 refresh_modal 同构静态壳） ===== + // 弹窗壳由服务端静态输出（inc/helpers/aksrt-vip.php → wp_footer）， + // 此处只负责开合与提交，形态对齐余额充值/购买积分弹窗的自包含开关： + // .in 显隐 + .modal-backdrop + body.modal-open + ESC，不依赖 jQuery/Bootstrap + // modal 运行时。 + var pointsBackdrop = null; + var pointsBound = false; + var pointsFocusReturn = null; - var catalog = view.catalog || {}; - var exchange = catalog.points_exchange || {}; - var member = view.member || {}; - var packages = Array.isArray(exchange.packages) ? exchange.packages : []; - var currency = text(catalog.currency_name || "积分"); - var modal = node("div", "box-body payvip-modal aksrt-vip-points-modal"); - modal.setAttribute("data-aksrt-vip-points-modal-body", ""); + function pointsModal() { + return document.querySelector("[data-aksrt-vip-points-modal]"); + } - var close = node("button", "aksrt-modal-close", "×"); - close.type = "button"; - close.setAttribute("data-aksrt-modal-close", ""); - close.setAttribute("aria-label", "关闭"); - append(modal, close); - - append(modal, node("h2", "aksrt-vip-points-modal__title", "积分兑换会员")); - append(modal, node("p", "aksrt-vip-points-modal__desc", exchange.desc || "使用积分兑换会员权益。")); - var balance = node("div", "aksrt-vip-points-modal__balance"); - append(balance, node("span", "aksrt-vip-points-modal__balance-label", "我的积分")); - append(balance, node("strong", "aksrt-vip-points-modal__balance-value", text(member.points || 0) + " " + currency)); - append(modal, balance); - - var list = node("div", "aksrt-vip-points-modal__packages"); - if (!view.enabled || view.allowed_actions && view.allowed_actions.points_exchange === false || !exchange.enabled || !packages.length) { - append(list, node("div", "aksrt-vip-points-modal__empty", "暂无可兑换的会员")); - } else { - packages.forEach(function (item, index) { - if (!item || !item.package_id) return; - var cost = Number(item.points || 0); - var enough = Number(member.points || 0) >= cost; - var label = node("label", "aksrt-vip-points-option" + (enough ? "" : " is-disabled")); - var input = node("input"); - input.type = "radio"; - input.name = "aksrt_vip_points_package"; - input.value = String(item.package_id); - input.checked = index === 0 && enough; - input.disabled = !enough; - input.setAttribute("data-aksrt-vip-points-package", ""); - append(label, input); - var card = node("span", "aksrt-vip-points-option__card"); - append(card, node("strong", "aksrt-vip-points-option__title", item.title || ("VIP" + text(item.level || "")))); - append(card, node("span", "aksrt-vip-points-option__days", item.days_label || "会员权益")); - var costLabel = enough ? text(item.price_label || (cost + " " + currency)) : "积分不足"; - append(card, node("span", "aksrt-vip-points-option__cost", costLabel)); - append(label, card); - append(list, label); - }); + function openPointsModal(trigger) { + var modal = pointsModal(); + if (!modal || modal.classList.contains("in")) return; + bindPointsModal(); + pointsFocusReturn = trigger || document.activeElement; + // 打开态用 flex 而非 block：壳的 .flex.jc 负责双轴居中 + // （.modal.flex .modal-dialog{margin:0} 在 block 下会把对话框顶到左上角）。 + modal.style.display = "flex"; + void modal.offsetWidth; // 强制 reflow，让 .fade 过渡从初始态开始 + modal.classList.add("in"); + if (!pointsBackdrop) { + pointsBackdrop = document.createElement("div"); + pointsBackdrop.className = "modal-backdrop fade in"; + pointsBackdrop.setAttribute("data-aksrt-vip-points-backdrop", "1"); + document.body.appendChild(pointsBackdrop); } - append(modal, list); - - var submit = node("button", "aksrt-vip-points-submit", "立即兑换"); - submit.type = "button"; - submit.setAttribute("data-aksrt-vip-points-submit", ""); - submit.disabled = !view.enabled || !exchange.enabled || (view.allowed_actions && view.allowed_actions.points_exchange === false) || !packages.some(function (item) { return item && Number(member.points || 0) >= Number(item.points || 0); }); - append(modal, submit); - if (exchange.desc) append(modal, node("div", "aksrt-vip-points-modal__note", exchange.desc)); - append(body, modal); + document.body.classList.add("modal-open"); + // 焦点移入兑换弹窗：ESC 只收起本层，不会冒泡到下层会员弹窗。 + var closeBtn = modal.querySelector('[data-dismiss="modal"]'); + try { (closeBtn || modal).focus(); } catch (error) {} } - function pointsPackage(root) { - var checked = root.querySelector('[data-aksrt-vip-points-package]:checked'); - return checked ? parseInt(checked.value, 10) : 0; + function closePointsModal() { + var modal = pointsModal(); + if (!modal || !modal.classList.contains("in")) return; + modal.classList.remove("in"); + // 同页可能另有静态弹窗（余额充值/购买积分）打开，仅在没有 .modal.in 时解锁。 + if (!document.querySelector(".modal.in")) document.body.classList.remove("modal-open"); + if (pointsBackdrop && pointsBackdrop.parentNode) pointsBackdrop.parentNode.removeChild(pointsBackdrop); + pointsBackdrop = null; + window.setTimeout(function () { + if (modal && !modal.classList.contains("in")) modal.style.display = ""; + var target = pointsFocusReturn; + pointsFocusReturn = null; + if (target && document.contains(target) && typeof target.focus === "function") { + try { target.focus(); } catch (error) {} + } + }, 300); } - function exchangeFromModal(root, button) { - var packageId = pointsPackage(root); - if (!button || button.disabled) return; + function exchangePoints(button) { + var modal = pointsModal(); + if (!modal || !button || button.disabled) return; + var hidden = modal.querySelector('input[name="product_id"]'); + var packageId = hidden ? parseInt(hidden.value, 10) || 0 : 0; if (!packageId) { notyf("请选择兑换套餐", "danger"); return; @@ -306,6 +293,7 @@ button.classList.add("is-loading"); notyf("正在兑换会员…", "load", "", "aksrt-vip-points-toast"); coordinator.exchange({ packageId: packageId, tags: ["vip", "orders"] }).then(function (response) { + button.disabled = false; button.classList.remove("is-loading"); if (response && response.ok) { var data = response.data || response.json || {}; @@ -313,7 +301,6 @@ window.setTimeout(function () { window.location.reload(); }, 800); return; } - button.disabled = false; notyf(response && response.json && response.json.message ? response.json.message : "兑换失败，请重试。", "danger", 5, "aksrt-vip-points-toast"); }).catch(function () { button.disabled = false; @@ -321,6 +308,38 @@ notyf("网络异常，请稍后重试。", "danger", 5, "aksrt-vip-points-toast"); }); } + + function bindPointsModal() { + var modal = pointsModal(); + if (!modal || pointsBound) return; + pointsBound = true; + modal.addEventListener("click", function (event) { + // 参考主题契约：点遮罩（壳自身）或 data-dismiss="modal" 关闭按钮收起弹窗。 + if (event.target === modal || (event.target.closest && event.target.closest('[data-dismiss="modal"]'))) { + closePointsModal(); + return; + } + // 参考主题 data-for/data-value 选中模型：会员兑换卡片。 + var card = event.target.closest ? event.target.closest('[data-for="product_id"]') : null; + if (!card) return; + modal.querySelectorAll('[data-for="product_id"]').forEach(function (el) { + el.classList.toggle("active", el === card); + }); + var hidden = modal.querySelector('input[name="product_id"]'); + if (hidden) hidden.value = card.getAttribute("data-value") || ""; + }); + var form = modal.querySelector("[data-aksrt-vip-points-form]"); + if (form) { + form.addEventListener("submit", function (event) { + event.preventDefault(); + exchangePoints(modal.querySelector("[data-aksrt-vip-points-submit]")); + }); + } + document.addEventListener("keydown", function (event) { + if (event.key === "Escape" && modal.classList.contains("in")) closePointsModal(); + }); + } + function renderModalView(body, view) { view = view || {}; if (body.replaceChildren) body.replaceChildren(); @@ -462,13 +481,20 @@ append(info, infoBa); append(row, info); - // 右侧：套餐盒 → 积分兑换链接 → more → 支付方式/卡密 → 立即支付。 + // 右侧：套餐盒 → 积分兑换入口 → more → 支付方式/卡密 → 立即支付。 var products = node("div", "pay-vip-products"); renderProducts(products, group.items, wallet.mark); var points = catalog.points_exchange || {}; - if (allowed.points_exchange !== false && points.enabled && Array.isArray(points.packages) && points.packages.length && catalog.vip_url) { - var pointsLink = node("a", "but c-green btn-block mb10", "积分兑换会员"); - pointsLink.href = text(catalog.vip_url); + if (allowed.points_exchange !== false && points.enabled && Array.isArray(points.packages) && points.packages.length) { + // 参考主题 zibpay_get_pay_uservip_modal 的积分兑换入口： + // btn-block but mb10 padding-lg c-green mini-radius + points-color 图标 + + // fa-angle-right；点击开服务端静态兑换弹窗（不再跳转用户中心）。 + var pointsLink = node("a", "btn-block but mb10 padding-lg c-green mini-radius"); + pointsLink.href = "javascript:;"; + pointsLink.setAttribute("data-aksrt-vip-points-open", ""); + pointsLink.innerHTML = '' + + "积分兑换会员" + + ''; append(products, pointsLink); } if (catalog.more) append(products, node("div", "muted-2-color mb10 em09 muted-box padding-10 mini-radius", catalog.more)); @@ -669,10 +695,10 @@ }); return; } - var pointsSubmit = event.target.closest("[data-aksrt-vip-points-submit]"); - if (pointsSubmit) { + var pointsLink = event.target.closest("[data-aksrt-vip-points-open]"); + if (pointsLink) { event.preventDefault(); - exchangeFromModal(pointsSubmit.closest("[data-aksrt-vip-points-modal-body]") || root, pointsSubmit); + openPointsModal(pointsLink); return; } var submit = event.target.closest("[data-vip-submit]"); @@ -683,34 +709,6 @@ }); } - function vipPointsPay() { - window.AksrtModalRuntime.openRemote({ - url: "/pay/vip/modal", - query: { vip_level: 1, mode: "points" }, - className: "aksrt-vip-modal-shell aksrt-vip-points-modal-shell", - mobileBottom: false, - skeleton: '
加载中…
', - telemetry: "vip-points", - kind: "vip", - responseType: "json", - cacheTtl: 15000, - cacheTags: ["vip"], - renderData: function (data, session) { - renderPointsModal(session.content, data); - bindModalUi(session.content); - }, - onError: function (error) { - var unauthorized = error && error.code === "unauthorized"; - notyf(unauthorized ? "请先登录" : ((error && error.message) || "会员兑换信息加载失败，请重试"), "danger"); - if (unauthorized) { - window.AksrtModalRuntime.close("unauthorized"); - var login = document.querySelector(".signin-loader"); - if (login) login.click(); - } - }, - }); - } - function vipPay(trigger) { var level = trigger ? parseInt(trigger.getAttribute("vip-level") || trigger.getAttribute("data-vip-level") || "1", 10) || 1 @@ -742,13 +740,6 @@ } function onDocClick(event) { - var pointsTrigger = event.target.closest("[data-aksrt-vip-points-modal], [data-aksrt-vip-points-open]"); - if (pointsTrigger) { - event.preventDefault(); - event.stopPropagation(); - vipPointsPay(); - return; - } var trigger = event.target.closest(".pay-vip, a.pay-vip, .float-btn.pay-vip, [data-aksrt-pay-vip]"); if (!trigger) return; var href = (trigger.getAttribute("href") || "").trim(); @@ -776,6 +767,7 @@ if (window.__aksrtPayVipBound) return; window.__aksrtPayVipBound = true; document.addEventListener("click", onDocClick, true); + bindPointsModal(); } jQuery(document).off("auto_fun.aksrt-pay-vip").on("auto_fun.aksrt-pay-vip", bindOnce); diff --git a/inc/helpers/aksrt-vip.php b/inc/helpers/aksrt-vip.php index a49fefeb..b8b0c45e 100644 --- a/inc/helpers/aksrt-vip.php +++ b/inc/helpers/aksrt-vip.php @@ -503,3 +503,27 @@ if (!function_exists('aksrt_format_vip_equity_html')) { return $html; } } + +/** + * 全局积分兑换会员弹窗（参考主题 refresh_modal 同构静态壳）。 + * + * 入口位于会员购买弹窗（.pay-vip → assets/js/pay-vip.js）内，而 .pay-vip + * 触发点全站可见（页头、浮动按钮、用户中心、付费卡），因此弹窗壳在满足 + * 条件时随 wp_footer 全局输出一次；显隐由 pay-vip.js 自包含开关驱动， + * 静止态由 vip-modal.css 的 .modal[data-aksrt-vip-points-modal] 显式隐藏。 + */ +if (!function_exists('aksrt_render_vip_points_exchange_modal')) : + function aksrt_render_vip_points_exchange_modal(): void { + if (!is_user_logged_in() || !class_exists('\AKSRT\Content\VipService')) { + return; + } + + $html = \AKSRT\Content\VipService::get_instance()->get_points_exchange_modal_html(get_current_user_id()); + if ($html === '') { + return; + } + + echo $html; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- 各字段已在生成时转义。 + } +endif; +add_action('wp_footer', 'aksrt_render_vip_points_exchange_modal'); diff --git a/inc/helpers/user-center-renderers/vip-tab.php b/inc/helpers/user-center-renderers/vip-tab.php index f41b4737..0ed3b42b 100644 --- a/inc/helpers/user-center-renderers/vip-tab.php +++ b/inc/helpers/user-center-renderers/vip-tab.php @@ -21,15 +21,6 @@ if (empty($vip_settings['enabled'])) { $user_id = (int) ($user_id ?? get_current_user_id()); $vip_state = function_exists('aksrt_get_user_vip_state') ? aksrt_get_user_vip_state($user_id) : []; $level = (int) ($vip_state['level'] ?? 0); -$points_exchange = []; -$user_points = 0; -$currency_name = __('积分', 'aksrt'); -if (class_exists('\\AKSRT\\Content\\VipService')) { - $vip_catalog = \AKSRT\Content\VipService::get_instance()->get_catalog($user_id); - $points_exchange = is_array($vip_catalog['points_exchange'] ?? null) ? $vip_catalog['points_exchange'] : []; - $user_points = (int) ($vip_catalog['user_points'] ?? 0); - $currency_name = (string) ($vip_catalog['currency_name'] ?? $currency_name); -} $expires = max(0, (int) ($vip_state['current_expires'] ?? $vip_state['expires'] ?? 0)); $base_level = min(2, max(0, (int) ($vip_state['fallback_level'] ?? 0))); $base_expires = max(0, (int) ($vip_state['fallback_expires'] ?? 0)); @@ -162,20 +153,6 @@ foreach ([1, 2] as $lv) { $cards .= ''; } -// Points exchange entry (available for guests, ordinary users, and VIP renewals/upgrades). -$points_html = ''; -$points_pkgs = is_array($points_exchange['packages'] ?? null) ? $points_exchange['packages'] : []; -if (!empty($points_exchange['enabled']) && $points_pkgs !== []) { - $points_html = '
' - . '' - . '
' - . '' . esc_html__('积分兑换会员', 'aksrt') . '' - . '' . sprintf(esc_html__('当前有 %1$s %2$s，可兑换专属会员权益', 'aksrt'), esc_html((string) $user_points), esc_html($currency_name)) . '' - . '
' - . '
'; -} ?>
@@ -187,8 +164,6 @@ if (!empty($points_exchange['enabled']) && $points_pkgs !== []) {
- -
diff --git a/src/Content/VipServiceModal.php b/src/Content/VipServiceModal.php index 8e655901..7e72c95c 100644 --- a/src/Content/VipServiceModal.php +++ b/src/Content/VipServiceModal.php @@ -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天 / 永久。 + $duration = $days > 0 + ? (string) $days . '' . esc_html__('天', 'aksrt') . '' + : esc_html__('永久', 'aksrt'); + $level_name = (string) ($levels[$level]['name'] ?? ('VIP' . $level)); + + $cards .= '
' + . '' . $this->points_exchange_card_icon($levels[$level] ?? []) . esc_html($level_name) . '' + . '
' + . '' . $duration . '' + . '' . $points . '' . esc_html($currency) . '' + . '
'; + + if ($min_points === 0 || $points < $min_points) { + $min_points = $points; + } + } + if ($cards === '') { + return ''; + } + + $desc_text = trim((string) ($points_ex['desc'] ?? '')); + $desc = $desc_text !== '' + ? '
' . esc_html($desc_text) . '
' + : ''; + + // 最低价套餐仍超出用户积分 → 参考主题的 badg c-red btn-block 提示。 + // （参考主题源码写作 `!$min_val > $user_points`，因运算符优先级恒假， + // 此处按其原意取真实比较，保证提示分支可达。） + if ($min_points > $user_points) { + $form = '
' . esc_html__('积分不足，暂时无法兑换', 'aksrt') . '
'; + } else { + $form = '
' + . '' + . '' + . '' + . '
'; + } + + $header = '
' + . '' + . '' + . '' + . esc_html__('积分兑换会员', 'aksrt') . '
'; + + $user_box = '
' + . '' + . '' + . ' ' + . esc_html__('我的积分', 'aksrt') . '' + . '' . $user_points . '' + . '
'; + + $lists = '
' . esc_html__('请选择需兑换的会员', 'aksrt') . '
' + . '
' . $cards . '
'; + + return ''; + } + + /** + * 积分兑换卡片等级图标（参考主题 zibpay_get_vip_card_icon）。 + * + * @param array $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 ''; + } + + return ''; + } + /** * 支付方式 logo 映射（assets/img/pay-*-logo.svg，与充值/积分弹窗一致）。 */ diff --git a/src/Content/VipServicePurchase.php b/src/Content/VipServicePurchase.php index db1790c9..fc356379 100644 --- a/src/Content/VipServicePurchase.php +++ b/src/Content/VipServicePurchase.php @@ -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; diff --git a/tests/widget-system/toast-contract.test.cjs b/tests/widget-system/toast-contract.test.cjs index d7d3afaf..ab41e56f 100644 --- a/tests/widget-system/toast-contract.test.cjs +++ b/tests/widget-system/toast-contract.test.cjs @@ -281,7 +281,9 @@ test('VIP purchase and points exchange use direct fixed-id notyf flows', () => { assert.match(vip, /onTimeout:[\s\S]*?notyf\([^;]+?"danger"[^;]+?"aksrt-vip-payment-toast"/); assert.match(vip, /已取消会员购买", "warning", 3, activePurchaseToastId/); assert.match(vip, /会员套餐加载失败，请重试[\s\S]*?"danger"/); - assert.match(vip, /会员兑换信息加载失败，请重试[\s\S]*?"danger"/); + // 积分兑换弹窗改为服务端静态壳（inc/helpers/aksrt-vip.php 输出，pay-vip.js 只负责 + // 开合与提交），兑换失败沿用固定 id 的 danger toast。 + assert.match(vip, /兑换失败，请重试。[\s\S]*?"danger"/); assert.doesNotMatch(vip, /setTip|aksrt-vip-modal-tip/); assert.doesNotMatch(css, /\.aksrt-vip-modal-tip/); diff --git a/tests/widget-system/vip-points-exchange-modal.test.cjs b/tests/widget-system/vip-points-exchange-modal.test.cjs new file mode 100644 index 00000000..56ef429c --- /dev/null +++ b/tests/widget-system/vip-points-exchange-modal.test.cjs @@ -0,0 +1,112 @@ +/** + * 积分兑换会员弹窗契约（参考主题 zibpay_get_vip_points_exchange_modal 1:1 对齐）。 + * + * 三条硬约束： + * 1) 服务端静态输出参考主题 refresh_modal 同构壳（`modal flex jc fade` > + * `modal-dialog modal-mini full-sm` > `modal-content` > `modal-body`）， + * 入口只保留在会员购买弹窗内——/user/vip/ 页底部的独立入口已移除。 + * 2) 静止态必须被 vip-modal.css 显式隐藏（.flex 覆盖回归护栏），打开态为 + * flex 而非 block，且层级高于 runtime 宿主（100050），以复现参考主题在 + * 会员弹窗之上再叠一层兑换弹窗的行为。 + * 3) 旧的客户端自实现弹窗（renderPointsModal / aksrt-vip-points-option / + * catalog.vip_url）必须已彻底移除。 + */ +const test = require('node:test'); +const assert = require('node:assert'); +const fs = require('node:fs'); +const path = require('node:path'); + +const root = path.join(__dirname, '..', '..'); +const read = (...seg) => fs.readFileSync(path.join(root, ...seg), 'utf8'); + +const modal = read('src', 'Content', 'VipServiceModal.php'); +const catalogSource = read('src', 'Content', 'VipServicePurchase.php'); +const footer = read('inc', 'helpers', 'aksrt-vip.php'); +const vipJs = read('assets', 'js', 'pay-vip.js'); +const creditsJs = read('assets', 'js', 'credits.js'); +const vipCss = read('assets', 'css', 'frontend', 'vip-modal.css'); +const vipTab = read('inc', 'helpers', 'user-center-renderers', 'vip-tab.php'); +const creditsCss = read('assets', 'css', 'routes', 'user-center', 'credits.css'); + +test('弹窗为参考主题 refresh_modal 同构静态壳并带 data 钩子', () => { + assert.match(modal, /public function get_points_exchange_modal_html/); + assert.match(modal, /class="modal flex jc fade"[^']*data-aksrt-vip-points-modal/); + assert.match(modal, /class="modal-dialog modal-mini full-sm"/); + assert.match(modal, /class="modal-content">
/); + assert.match(modal, /data-dismiss="modal"/); + assert.match(modal, /#icon-close/); + assert.match(modal, /data-aksrt-vip-points-form/); +}); + +test('弹窗内容保持参考主题结构：标题/我的积分/卡片选择/立即兑换', () => { + // 头部：.mb10.touch + modal-title.flex.ac + vip_1 图标。 + assert.match(modal, /'
'/); + assert.match(modal, /class="modal-title flex ac"/); + assert.match(modal, /#icon-vip_1/); + // 我的积分盒（点回用户中心积分页）。 + assert.match(modal, /muted-box padding-h10 mb20/); + assert.match(modal, /我的积分/); + assert.match(modal, /#icon-points/); + assert.match(modal, /aksrt_get_user_center_tab_url\('credits'\)/); + // 卡片列表 + 参考主题 data-for/data-value 选中模型。 + assert.match(modal, /请选择需兑换的会员/); + assert.match(modal, /flex hh exchange-card-box/); + assert.match(modal, /vip-card vip-theme/); + assert.match(modal, /data-for="product_id" data-value=/); + assert.match(modal, /flex jsb ac hh em16 mt10/); + // 表单：hidden 契约 + 立即兑换按钮 + 积分不足提示。 + assert.match(modal, /name="order_type" value="4"/); + assert.match(modal, /name="action" value="points_initiate_pay"/); + assert.match(modal, /mt6 but jb-yellow btn-block radius padding-lg/); + assert.match(modal, /data-aksrt-vip-points-submit/); + assert.match(modal, /badg c-red btn-block/); +}); + +test('弹窗壳随 wp_footer 全局输出且不进入 catalog 载荷', () => { + assert.match(footer, /function aksrt_render_vip_points_exchange_modal/); + assert.match(footer, /add_action\('wp_footer', 'aksrt_render_vip_points_exchange_modal'\)/); + assert.match(footer, /VipService::get_instance\(\)->get_points_exchange_modal_html/); + // 兑换入口不再跳用户中心：catalog 里的 vip_url 已清除。 + assert.doesNotMatch(catalogSource, /'vip_url'/); + assert.doesNotMatch(modal, /'vip_url'/); +}); + +test('弹窗壳静止态必须被 vip-modal.css 显式隐藏（.flex 覆盖回归护栏）', () => { + assert.match(vipCss, /\.modal\[data-aksrt-vip-points-modal\]\s*\{\s*display:\s*none;/); + assert.match(vipCss, /\.modal\[data-aksrt-vip-points-modal\]\.in\s*\{\s*display:\s*flex;/); + assert.doesNotMatch(vipCss, /\.modal\[data-aksrt-vip-points-modal\]\.in\s*\{\s*display:\s*block;/); + // 层级必须高于 runtime 宿主（.aksrt-modal-runtime 的 z-index: 100050）。 + assert.match(vipCss, /\.modal\[data-aksrt-vip-points-modal\]\s*\{[^}]*z-index:\s*100060;/s); + assert.match(vipCss, /\.modal-backdrop\[data-aksrt-vip-points-backdrop\]\s*\{\s*z-index:\s*100055;/); +}); + +test('开关自包含：不依赖 jQuery/Bootstrap modal 运行时', () => { + assert.match(vipJs, /function openPointsModal\(trigger\)/); + assert.match(vipJs, /function closePointsModal\(\)/); + assert.doesNotMatch(vipJs, /\.modal\(\s*['"]show['"]/); + assert.doesNotMatch(vipJs, /hidden\.bs\.modal/); + assert.match(vipJs, /pointsBackdrop\.className = "modal-backdrop fade in"/); + assert.match(vipJs, /modal\.style\.display = "flex"/); + assert.doesNotMatch(vipJs, /modal\.style\.display = "block"/); + assert.match(vipJs, /void modal\.offsetWidth/); +}); + +test('会员弹窗内的入口为参考主题同款按钮并开本地弹窗', () => { + // 参考主题 zibpay_get_pay_uservip_modal 的 class 与图标顺序。 + assert.match(vipJs, /node\("a", "btn-block but mb10 padding-lg c-green mini-radius"\)/); + assert.match(vipJs, /#icon-points-color/); + assert.match(vipJs, /fa fa-angle-right em12 ml10/); + assert.match(vipJs, /data-aksrt-vip-points-open/); + assert.match(vipJs, /openPointsModal\(pointsLink\)/); +}); + +test('旧的自实现兑换弹窗与独立入口已彻底移除', () => { + assert.doesNotMatch(vipJs, /renderPointsModal|exchangeFromModal|vipPointsPay/); + assert.doesNotMatch(vipJs, /aksrt-vip-points-option|aksrt-vip-points-modal__/); + assert.doesNotMatch(vipCss, /\.aksrt-vip-points-option|\.aksrt-vip-points-submit/); + // /user/vip/ 页底部不再有独立积分兑换入口。 + assert.doesNotMatch(vipTab, /uc-vip-points-link/); + assert.doesNotMatch(creditsCss, /\.uc-vip-points-link/); + // 用户中心侧的旧兑换控制器（[data-aksrt-vip-points]，全站无对应 DOM）。 + assert.doesNotMatch(creditsJs, /initVipPointsExchange|data-aksrt-vip-points/); +});