kate522/wordpress-theme-aksrt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
/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 产物正确。
This commit is contained in:
kate522
2026-09-18 20:05:05 +08:00
parent d2447f8aa6
commit 95ff0761b7
11 changed files with 401 additions and 318 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/frontend/vip-modal.css
+20 -71
View File
@@ -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;
assets/css/routes/user-center/credits.css
-64
View File
@@ -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;
}
assets/js/credits.js
-45
View File
@@ -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();
assets/js/pay-vip.js
+99 -107
View File
@@ -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 = '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-points-color"></use></svg>'
+ "积分兑换会员"
+ '<i class="fa fa-angle-right em12 ml10" aria-hidden="true"></i>';
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: '<div class="aksrt-vip-modal-panel"><div class="aksrt-vip-modal-content" data-aksrt-vip-modal-body><div class="text-center padding-20 muted-2-color">加载中…</div></div></div>',
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);