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 产物正确。
This commit is contained in:
@@ -59,6 +59,7 @@
|
|||||||
!/tests/widget-system/card-pass-universal-redeem.test.cjs
|
!/tests/widget-system/card-pass-universal-redeem.test.cjs
|
||||||
!/tests/widget-system/card-pass-modal-redeem.test.cjs
|
!/tests/widget-system/card-pass-modal-redeem.test.cjs
|
||||||
!/tests/widget-system/balance-charge-modal.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/widget-system/pay-sdk-order-contract.test.cjs
|
||||||
!/tests/admin/
|
!/tests/admin/
|
||||||
/tests/admin/*
|
/tests/admin/*
|
||||||
|
|||||||
@@ -41,79 +41,28 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.aksrt-vip-points-modal__title {
|
/* 积分兑换会员弹窗:参考主题 refresh_modal 同构静态壳
|
||||||
margin: 0 0 6px;
|
(.modal.flex.jc.fade > .modal-dialog.modal-mini.full-sm > .modal-content
|
||||||
padding-right: 24px;
|
> .modal-body,由 inc/helpers/aksrt-vip.php 服务端输出)。三点约束:
|
||||||
font-size: 20px;
|
- 静止态必须显式隐藏:main.css 的 .flex{display:flex}(后加载、与 bootstrap
|
||||||
}
|
的 .modal{display:none} 同特异性)会让壳永久铺满全屏,叠加 .fade 的
|
||||||
.aksrt-vip-points-modal__desc,
|
opacity:0 形成隐形遮罩,拦截整页点击;
|
||||||
.aksrt-vip-points-modal__note {
|
- 打开态由 pay-vip.js 自包含开关的内联 display:flex 驱动(block 会破坏
|
||||||
margin: 0 0 12px;
|
.flex.jc 双轴居中),与余额充值/购买积分弹窗同构;
|
||||||
color: var(--muted-color, #777);
|
- 入口在本页 runtime 会员弹窗内,壳需高于 runtime 宿主(100050),以复现
|
||||||
font-size: 13px;
|
参考主题在会员弹窗之上再叠一层兑换弹窗的行为。 */
|
||||||
line-height: 1.6;
|
.modal[data-aksrt-vip-points-modal] {
|
||||||
}
|
display: none;
|
||||||
.aksrt-vip-points-modal__balance {
|
z-index: 100060;
|
||||||
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; }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.modal[data-aksrt-vip-points-modal].in {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-backdrop[data-aksrt-vip-points-backdrop] {
|
||||||
|
z-index: 100055;
|
||||||
|
}
|
||||||
|
|
||||||
.pay-vip-form-row {
|
.pay-vip-form-row {
|
||||||
display: grid;
|
display: grid;
|
||||||
|
|||||||
@@ -1331,70 +1331,6 @@ body.uc-modal-open {
|
|||||||
margin: 0 !important;
|
margin: 0 !important;
|
||||||
line-height: 1;
|
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 {
|
.uc-vip-assets-entry {
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -148,50 +148,6 @@
|
|||||||
|
|
||||||
window.AKSRTAffiliateRevenueInit = initAffiliateRevenue;
|
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 开通 =====
|
// ===== VIP 开通 =====
|
||||||
function initVipShop() {
|
function initVipShop() {
|
||||||
var root = document.querySelector('[data-aksrt-vip-shop]');
|
var root = document.querySelector('[data-aksrt-vip-shop]');
|
||||||
@@ -1134,7 +1090,6 @@
|
|||||||
initSigninGoto();
|
initSigninGoto();
|
||||||
initAffiliateRevenue();
|
initAffiliateRevenue();
|
||||||
initVipShop();
|
initVipShop();
|
||||||
initVipPointsExchange();
|
|
||||||
initBalanceCharge();
|
initBalanceCharge();
|
||||||
initTransfer();
|
initTransfer();
|
||||||
initPointsPay();
|
initPointsPay();
|
||||||
|
|||||||
+99
-107
@@ -222,77 +222,64 @@
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderPointsModal(body, view) {
|
// ===== 积分兑换会员弹窗(参考主题 refresh_modal 同构静态壳) =====
|
||||||
view = view || {};
|
// 弹窗壳由服务端静态输出(inc/helpers/aksrt-vip.php → wp_footer),
|
||||||
if (body.replaceChildren) body.replaceChildren();
|
// 此处只负责开合与提交,形态对齐余额充值/购买积分弹窗的自包含开关:
|
||||||
else body.innerHTML = "";
|
// .in 显隐 + .modal-backdrop + body.modal-open + ESC,不依赖 jQuery/Bootstrap
|
||||||
|
// modal 运行时。
|
||||||
|
var pointsBackdrop = null;
|
||||||
|
var pointsBound = false;
|
||||||
|
var pointsFocusReturn = null;
|
||||||
|
|
||||||
var catalog = view.catalog || {};
|
function pointsModal() {
|
||||||
var exchange = catalog.points_exchange || {};
|
return document.querySelector("[data-aksrt-vip-points-modal]");
|
||||||
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", "");
|
|
||||||
|
|
||||||
var close = node("button", "aksrt-modal-close", "×");
|
function openPointsModal(trigger) {
|
||||||
close.type = "button";
|
var modal = pointsModal();
|
||||||
close.setAttribute("data-aksrt-modal-close", "");
|
if (!modal || modal.classList.contains("in")) return;
|
||||||
close.setAttribute("aria-label", "关闭");
|
bindPointsModal();
|
||||||
append(modal, close);
|
pointsFocusReturn = trigger || document.activeElement;
|
||||||
|
// 打开态用 flex 而非 block:壳的 .flex.jc 负责双轴居中
|
||||||
append(modal, node("h2", "aksrt-vip-points-modal__title", "积分兑换会员"));
|
// (.modal.flex .modal-dialog{margin:0} 在 block 下会把对话框顶到左上角)。
|
||||||
append(modal, node("p", "aksrt-vip-points-modal__desc", exchange.desc || "使用积分兑换会员权益。"));
|
modal.style.display = "flex";
|
||||||
var balance = node("div", "aksrt-vip-points-modal__balance");
|
void modal.offsetWidth; // 强制 reflow,让 .fade 过渡从初始态开始
|
||||||
append(balance, node("span", "aksrt-vip-points-modal__balance-label", "我的积分"));
|
modal.classList.add("in");
|
||||||
append(balance, node("strong", "aksrt-vip-points-modal__balance-value", text(member.points || 0) + " " + currency));
|
if (!pointsBackdrop) {
|
||||||
append(modal, balance);
|
pointsBackdrop = document.createElement("div");
|
||||||
|
pointsBackdrop.className = "modal-backdrop fade in";
|
||||||
var list = node("div", "aksrt-vip-points-modal__packages");
|
pointsBackdrop.setAttribute("data-aksrt-vip-points-backdrop", "1");
|
||||||
if (!view.enabled || view.allowed_actions && view.allowed_actions.points_exchange === false || !exchange.enabled || !packages.length) {
|
document.body.appendChild(pointsBackdrop);
|
||||||
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);
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
append(modal, list);
|
document.body.classList.add("modal-open");
|
||||||
|
// 焦点移入兑换弹窗:ESC 只收起本层,不会冒泡到下层会员弹窗。
|
||||||
var submit = node("button", "aksrt-vip-points-submit", "立即兑换");
|
var closeBtn = modal.querySelector('[data-dismiss="modal"]');
|
||||||
submit.type = "button";
|
try { (closeBtn || modal).focus(); } catch (error) {}
|
||||||
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);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function pointsPackage(root) {
|
function closePointsModal() {
|
||||||
var checked = root.querySelector('[data-aksrt-vip-points-package]:checked');
|
var modal = pointsModal();
|
||||||
return checked ? parseInt(checked.value, 10) : 0;
|
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) {
|
function exchangePoints(button) {
|
||||||
var packageId = pointsPackage(root);
|
var modal = pointsModal();
|
||||||
if (!button || button.disabled) return;
|
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) {
|
if (!packageId) {
|
||||||
notyf("请选择兑换套餐", "danger");
|
notyf("请选择兑换套餐", "danger");
|
||||||
return;
|
return;
|
||||||
@@ -306,6 +293,7 @@
|
|||||||
button.classList.add("is-loading");
|
button.classList.add("is-loading");
|
||||||
notyf("正在兑换会员…", "load", "", "aksrt-vip-points-toast");
|
notyf("正在兑换会员…", "load", "", "aksrt-vip-points-toast");
|
||||||
coordinator.exchange({ packageId: packageId, tags: ["vip", "orders"] }).then(function (response) {
|
coordinator.exchange({ packageId: packageId, tags: ["vip", "orders"] }).then(function (response) {
|
||||||
|
button.disabled = false;
|
||||||
button.classList.remove("is-loading");
|
button.classList.remove("is-loading");
|
||||||
if (response && response.ok) {
|
if (response && response.ok) {
|
||||||
var data = response.data || response.json || {};
|
var data = response.data || response.json || {};
|
||||||
@@ -313,7 +301,6 @@
|
|||||||
window.setTimeout(function () { window.location.reload(); }, 800);
|
window.setTimeout(function () { window.location.reload(); }, 800);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
button.disabled = false;
|
|
||||||
notyf(response && response.json && response.json.message ? response.json.message : "兑换失败,请重试。", "danger", 5, "aksrt-vip-points-toast");
|
notyf(response && response.json && response.json.message ? response.json.message : "兑换失败,请重试。", "danger", 5, "aksrt-vip-points-toast");
|
||||||
}).catch(function () {
|
}).catch(function () {
|
||||||
button.disabled = false;
|
button.disabled = false;
|
||||||
@@ -321,6 +308,38 @@
|
|||||||
notyf("网络异常,请稍后重试。", "danger", 5, "aksrt-vip-points-toast");
|
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) {
|
function renderModalView(body, view) {
|
||||||
view = view || {};
|
view = view || {};
|
||||||
if (body.replaceChildren) body.replaceChildren();
|
if (body.replaceChildren) body.replaceChildren();
|
||||||
@@ -462,13 +481,20 @@
|
|||||||
append(info, infoBa);
|
append(info, infoBa);
|
||||||
append(row, info);
|
append(row, info);
|
||||||
|
|
||||||
// 右侧:套餐盒 → 积分兑换链接 → more → 支付方式/卡密 → 立即支付。
|
// 右侧:套餐盒 → 积分兑换入口 → more → 支付方式/卡密 → 立即支付。
|
||||||
var products = node("div", "pay-vip-products");
|
var products = node("div", "pay-vip-products");
|
||||||
renderProducts(products, group.items, wallet.mark);
|
renderProducts(products, group.items, wallet.mark);
|
||||||
var points = catalog.points_exchange || {};
|
var points = catalog.points_exchange || {};
|
||||||
if (allowed.points_exchange !== false && points.enabled && Array.isArray(points.packages) && points.packages.length && catalog.vip_url) {
|
if (allowed.points_exchange !== false && points.enabled && Array.isArray(points.packages) && points.packages.length) {
|
||||||
var pointsLink = node("a", "but c-green btn-block mb10", "积分兑换会员");
|
// 参考主题 zibpay_get_pay_uservip_modal 的积分兑换入口:
|
||||||
pointsLink.href = text(catalog.vip_url);
|
// 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);
|
append(products, pointsLink);
|
||||||
}
|
}
|
||||||
if (catalog.more) append(products, node("div", "muted-2-color mb10 em09 muted-box padding-10 mini-radius", catalog.more));
|
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;
|
return;
|
||||||
}
|
}
|
||||||
var pointsSubmit = event.target.closest("[data-aksrt-vip-points-submit]");
|
var pointsLink = event.target.closest("[data-aksrt-vip-points-open]");
|
||||||
if (pointsSubmit) {
|
if (pointsLink) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
exchangeFromModal(pointsSubmit.closest("[data-aksrt-vip-points-modal-body]") || root, pointsSubmit);
|
openPointsModal(pointsLink);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
var submit = event.target.closest("[data-vip-submit]");
|
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) {
|
function vipPay(trigger) {
|
||||||
var level = trigger
|
var level = trigger
|
||||||
? parseInt(trigger.getAttribute("vip-level") || trigger.getAttribute("data-vip-level") || "1", 10) || 1
|
? parseInt(trigger.getAttribute("vip-level") || trigger.getAttribute("data-vip-level") || "1", 10) || 1
|
||||||
@@ -742,13 +740,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
function onDocClick(event) {
|
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]");
|
var trigger = event.target.closest(".pay-vip, a.pay-vip, .float-btn.pay-vip, [data-aksrt-pay-vip]");
|
||||||
if (!trigger) return;
|
if (!trigger) return;
|
||||||
var href = (trigger.getAttribute("href") || "").trim();
|
var href = (trigger.getAttribute("href") || "").trim();
|
||||||
@@ -776,6 +767,7 @@
|
|||||||
if (window.__aksrtPayVipBound) return;
|
if (window.__aksrtPayVipBound) return;
|
||||||
window.__aksrtPayVipBound = true;
|
window.__aksrtPayVipBound = true;
|
||||||
document.addEventListener("click", onDocClick, true);
|
document.addEventListener("click", onDocClick, true);
|
||||||
|
bindPointsModal();
|
||||||
}
|
}
|
||||||
|
|
||||||
jQuery(document).off("auto_fun.aksrt-pay-vip").on("auto_fun.aksrt-pay-vip", bindOnce);
|
jQuery(document).off("auto_fun.aksrt-pay-vip").on("auto_fun.aksrt-pay-vip", bindOnce);
|
||||||
|
|||||||
@@ -503,3 +503,27 @@ if (!function_exists('aksrt_format_vip_equity_html')) {
|
|||||||
return $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');
|
||||||
|
|||||||
@@ -21,15 +21,6 @@ if (empty($vip_settings['enabled'])) {
|
|||||||
$user_id = (int) ($user_id ?? get_current_user_id());
|
$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) : [];
|
$vip_state = function_exists('aksrt_get_user_vip_state') ? aksrt_get_user_vip_state($user_id) : [];
|
||||||
$level = (int) ($vip_state['level'] ?? 0);
|
$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));
|
$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_level = min(2, max(0, (int) ($vip_state['fallback_level'] ?? 0)));
|
||||||
$base_expires = max(0, (int) ($vip_state['fallback_expires'] ?? 0));
|
$base_expires = max(0, (int) ($vip_state['fallback_expires'] ?? 0));
|
||||||
@@ -162,20 +153,6 @@ foreach ([1, 2] as $lv) {
|
|||||||
$cards .= '</div></div>';
|
$cards .= '</div></div>';
|
||||||
}
|
}
|
||||||
|
|
||||||
// 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 = '<div class="uc-vip-points-link" data-aksrt-vip-points-modal>'
|
|
||||||
. '<div class="uc-vip-points-link__icon" aria-hidden="true"><i class="fa fas fa-money-bill"></i></div>'
|
|
||||||
. '<div class="uc-vip-points-link__body">'
|
|
||||||
. '<strong>' . esc_html__('积分兑换会员', 'aksrt') . '</strong>'
|
|
||||||
. '<span>' . sprintf(esc_html__('当前有 %1$s %2$s,可兑换专属会员权益', 'aksrt'), esc_html((string) $user_points), esc_html($currency_name)) . '</span>'
|
|
||||||
. '</div>'
|
|
||||||
. '<button type="button" class="uc-vip-points-link__action" data-aksrt-vip-points-open>'
|
|
||||||
. esc_html__('立即兑换', 'aksrt')
|
|
||||||
. ' <i class="fa fas fa-chevron-right" aria-hidden="true"></i></button></div>';
|
|
||||||
}
|
|
||||||
?>
|
?>
|
||||||
<div class="uc-vip-tab" data-aksrt-vip-tab>
|
<div class="uc-vip-tab" data-aksrt-vip-tab>
|
||||||
<div class="uc-vip-summary" data-aksrt-vip-summary data-vip-state="<?php echo esc_attr($vip_state); ?>" data-vip-level="<?php echo (int) $vip_level_number; ?>" data-vip-permanent="<?php echo $vip_is_permanent ? 'true' : 'false'; ?>">
|
<div class="uc-vip-summary" data-aksrt-vip-summary data-vip-state="<?php echo esc_attr($vip_state); ?>" data-vip-level="<?php echo (int) $vip_level_number; ?>" data-vip-permanent="<?php echo $vip_is_permanent ? 'true' : 'false'; ?>">
|
||||||
@@ -187,8 +164,6 @@ if (!empty($points_exchange['enabled']) && $points_pkgs !== []) {
|
|||||||
<?php echo $cards; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
|
<?php echo $cards; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<?php echo $points_html; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
|
|
||||||
|
|
||||||
<?php if (!empty($vip_settings['more'])) : ?>
|
<?php if (!empty($vip_settings['more'])) : ?>
|
||||||
<div class="muted-2-color em09 muted-box padding-10 mini-radius mt15">
|
<div class="muted-2-color em09 muted-box padding-10 mini-radius mt15">
|
||||||
<?php echo $vip_settings['more']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
|
<?php echo $vip_settings['more']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
|
||||||
|
|||||||
@@ -121,7 +121,6 @@ trait VipServiceModal {
|
|||||||
'level_packages' => $groups,
|
'level_packages' => $groups,
|
||||||
'points_exchange' => $points_exchange,
|
'points_exchange' => $points_exchange,
|
||||||
'wallet_balance' => (string) ($catalog['wallet_balance'] ?? '0.00'),
|
'wallet_balance' => (string) ($catalog['wallet_balance'] ?? '0.00'),
|
||||||
'vip_url' => (string) ($catalog['vip_url'] ?? ''),
|
|
||||||
],
|
],
|
||||||
'member' => [
|
'member' => [
|
||||||
'id' => $user_id,
|
'id' => $user_id,
|
||||||
@@ -132,7 +131,6 @@ trait VipServiceModal {
|
|||||||
'expires_label' => (string) ($member['expires_label'] ?? ''),
|
'expires_label' => (string) ($member['expires_label'] ?? ''),
|
||||||
'state' => (string) ($member['state'] ?? 'unopened'),
|
'state' => (string) ($member['state'] ?? 'unopened'),
|
||||||
'is_permanent' => !empty($member['is_permanent']),
|
'is_permanent' => !empty($member['is_permanent']),
|
||||||
'points' => (int) ($catalog['user_points'] ?? 0),
|
|
||||||
'logged_in' => $user_id > 0,
|
'logged_in' => $user_id > 0,
|
||||||
],
|
],
|
||||||
'levels' => $level_view,
|
'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,与充值/积分弹窗一致)。
|
* 支付方式 logo 映射(assets/img/pay-*-logo.svg,与充值/积分弹窗一致)。
|
||||||
*/
|
*/
|
||||||
|
|||||||
@@ -261,9 +261,6 @@ trait VipServicePurchase {
|
|||||||
],
|
],
|
||||||
'payment_methods' => $methods,
|
'payment_methods' => $methods,
|
||||||
'card_pass' => $this->vip_card_pass_context(),
|
'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,
|
'logged_in' => $user_id > 0,
|
||||||
];
|
];
|
||||||
$this->vip_catalog_cache[$user_id] = $catalog;
|
$this->vip_catalog_cache[$user_id] = $catalog;
|
||||||
|
|||||||
@@ -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, /onTimeout:[\s\S]*?notyf\([^;]+?"danger"[^;]+?"aksrt-vip-payment-toast"/);
|
||||||
assert.match(vip, /已取消会员购买", "warning", 3, activePurchaseToastId/);
|
assert.match(vip, /已取消会员购买", "warning", 3, activePurchaseToastId/);
|
||||||
assert.match(vip, /会员套餐加载失败,请重试[\s\S]*?"danger"/);
|
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(vip, /setTip|aksrt-vip-modal-tip/);
|
||||||
assert.doesNotMatch(css, /\.aksrt-vip-modal-tip/);
|
assert.doesNotMatch(css, /\.aksrt-vip-modal-tip/);
|
||||||
|
|||||||
@@ -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"><div class="modal-body">/);
|
||||||
|
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, /'<div class="mb10 touch">'/);
|
||||||
|
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/);
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user