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

fix(vip): 会员弹窗 DOM 结构 1:1 对齐 Zibll payvip-modal

Browse Source 
整体结构由自实现（aksrt-panel/aksrt-vip-tab/aksrt-modal-close）迁移到
参考主题 zibpay_get_pay_modal 原生 DOM：

- 根元素 box-body payvip-modal；close 按钮改为 Zibll 原版内联 SVG
  （.close + ic-close 1024 viewBox path）
- 用户信息 list-inline user-box（avatar-img 头像 + b.em12 + badg
  c-yellow vip-expdate-tag 到期标签）
- 会员缩略卡 tab：vip-cardminis + vip-card vip-cardmini level-N
  vip-themeN + abs-center vip-baicon + v-iconbox（v-icon/v-info/
  v-name/v-desc）+ abs-right active-icon 勾选图标
- pane 改为 bootstrap 原生 tab-pane fade active in（移除冗余 hidden
  属性），tab 切换同步 active/in 双类
- 左侧信息盒 pay-vip-info：v-iconbox 图标 + v-name/v-desc + 管理员
  配置的 v-equity 权益列表 + abs-center vip-baicon 背景图标
- 套餐卡 zib-widget vip-product product-box：价格行 mark 小号 px12
  前缀 + original-price 原价 + abs-right vip-tag badg 折扣角标 +
  时长 badge；label-box charge-box 盒由 bootstrap :checked 选中态驱动
- pane 内积分兑换链接与 more 说明移至套餐区（对齐 Zibll 顺序）
- 清理 vip-modal.css 死样式（aksrt-vip-modal-panel、aksrt-vip-tab、
  aksrt-vip-level-header、aksrt-vip-product-label、vip-product/
  vip-tag/product-price 本地重复、uc-vip-shop__tip 等 -148 行），
  样式统一由 main.css 复刻的 Zibll 原版段提供
This commit is contained in:
kate522
2026-09-18 13:04:19 +08:00
parent 721fa29b8d
commit b3b21df409
2 changed files with 127 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/js/pay-vip.js
+124 -54
View File
@@ -57,44 +57,67 @@
return "";
}
function renderEquity(parent, value) {
if (!value) return;
var equity = node("div");
// The server sanitizes and wraps this admin-authored fragment before JSON.
equity.innerHTML = text(value);
while (equity.firstChild) parent.appendChild(equity.firstChild);
// 会员图标（Zibll zibpay_get_vip_icon：vip_N.svg 或自定义 img_icon）。
function vipIcon(levelInfo) {
if (levelInfo && levelInfo.img_icon) {
var img = node("img", "img-icon");
img.src = text(levelInfo.img_icon);
img.alt = text(levelInfo.name || "");
img.decoding = "async";
return img;
}
return node("i", "fa fas fa-gem");
}
function renderProducts(parent, items) {
// 价格行（Zibll：mark 小号 px12 前缀 + 数字；原价 original-price.relative）。
function priceRow(mark, priceLabel, showLabel) {
var row = node("div", "flex abl gap6");
var price = node("div", "product-price c-red");
var label = text(priceLabel || "");
if (mark && label.indexOf(mark) === 0) {
append(price, node("span", "px12", mark));
append(price, node("span", "", label.slice(mark.length)));
} else {
append(price, node("span", "", label));
}
append(row, price);
if (showLabel) {
var original = node("div", "original-price relative muted-2-color");
var showText = text(showLabel);
if (mark && showText.indexOf(mark) === 0) {
append(original, node("span", "px12", mark));
append(original, node("span", "", showText.slice(mark.length)));
} else {
append(original, node("span", "", showText));
}
append(row, original);
}
return row;
}
function renderProducts(parent, items, mark) {
if (!Array.isArray(items) || !items.length) {
append(parent, node("div", "muted-2-color text-center padding-10", "暂无可用套餐"));
return;
}
var wrap = node("div", "mb10 label-box charge-box aksrt-vip-products");
var wrap = node("div", "mb10 label-box charge-box");
items.forEach(function (item, index) {
if (!item || !item.package_id) return;
var label = node("label", "aksrt-vip-product-label");
var label = node("label");
var input = node("input");
input.className = "hide vip-product-input";
input.type = "radio";
input.name = "vip_product_id_" + String(item.level || "group");
input.setAttribute("data-aksrt-vip-package", "");
input.name = "vip_product_id";
input.value = String(item.package_id);
input.setAttribute("data-aksrt-vip-package", "");
input.checked = index === 0;
label.appendChild(input);
append(label, input);
var product = node("div", "aksrt-panel vip-product relative text-center product-box");
// Zibll 套餐卡：zib-widget vip-product relative text-center product-box
// （右上 tag + 价格行 + 时长 badge，无标题行）。
var product = node("div", "zib-widget vip-product relative text-center product-box");
if (item.discount_tag) append(product, node("div", "abs-right vip-tag badg jb-yellow", item.discount_tag));
if (item.title) append(product, node("div", "em09 mb3", item.title));
var priceRow = node("div", "flex abl gap6 jc");
append(priceRow, node("div", "product-price c-red", item.price_label || ""));
if (item.show_price_label) {
var original = node("div", "original-price relative muted-2-color");
var strike = node("s", "", item.show_price_label);
append(original, strike);
append(priceRow, original);
}
append(product, priceRow);
append(product, priceRow(mark, item.price_label || "", item.show_price_label || ""));
if (item.days_label) append(product, node("div", "muted-2-color c-blue em09 p2-10 badg radius", item.days_label));
append(label, product);
append(wrap, label);
@@ -325,22 +348,35 @@
modal.setAttribute("data-aksrt-vip-modal", "");
if (view.version && view.version.catalog) modal.setAttribute("data-aksrt-vip-version", view.version.catalog);
var close = node("button", "aksrt-modal-close", "×");
// 关闭按钮（Zibll 原版内联 SVG close 图标）。
var close = document.createElement("button");
close.type = "button";
close.className = "close";
close.setAttribute("data-aksrt-modal-close", "");
close.setAttribute("aria-hidden", "true");
close.setAttribute("aria-label", "关闭");
var closeSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
closeSvg.setAttribute("class", "ic-close");
closeSvg.setAttribute("viewBox", "0 0 1024 1024");
var closePath = document.createElementNS("http://www.w3.org/2000/svg", "path");
closePath.setAttribute("d", "M573.44 512.128l237.888 237.696a43.328 43.328 0 0 1 0 59.712 43.392 43.392 0 0 1-59.712 0L513.728 571.84 265.856 819.712a44.672 44.672 0 0 1-61.568 0 44.672 44.672 0 0 1 0-61.568L452.16 510.272 214.208 272.448a43.328 43.328 0 0 1 0-59.648 43.392 43.392 0 0 1 59.712 0l237.952 237.76 246.272-246.272a44.672 44.672 0 0 1 61.568 0 44.672 44.672 0 0 1 0 61.568L573.44 512.128z");
closeSvg.appendChild(closePath);
close.appendChild(closeSvg);
append(modal, close);
var userBox = node("ul", "list-inline user-box flex ac mb10");
var avatarItem = node("li", "avatar-img");
// 用户信息（Zibll：list-inline user-box）。
var userBox = node("ul", "list-inline user-box");
var avatarItem = node("li");
var avatarWrap = node("div", "avatar-img");
if (member.avatar_url) {
var avatar = node("img");
avatar.src = text(member.avatar_url);
avatar.alt = "";
avatar.width = 42;
avatar.height = 42;
append(avatarItem, avatar);
append(avatarWrap, avatar);
}
append(avatarItem, avatarWrap);
append(userBox, avatarItem);
var userInfo = node("li");
append(userInfo, node("b", "em12", member.name || ""));
@@ -357,7 +393,8 @@
append(userBox, userInfo);
append(modal, userBox);
var tabs = node("ul", "flex jsb mt10 mb20 vip-cardminis gutters-5 nav");
// 会员缩略卡 tabs（Zibll vip-cardminis：vip-card.vip-cardmini + active-icon 勾）。
var tabs = node("ul", "flex jsb mt10 mb20 vip-cardminis gutters-5");
var content = node("div", "tab-content mt10");
var activeIndex = -1;
groups.forEach(function (group, index) {
@@ -370,34 +407,75 @@
if (!group || !Array.isArray(group.items) || !group.items.length) return;
var level = Number(group.level || 0);
var action = text(group.action || "pay");
var tabId = "tab-payvip-" + level + "-" + action;
var tabId = "tab-payvip-" + level;
var active = index === activeIndex;
var levelInfo = levels[String(level)] || {};
var tabItem = node("li", "relative" + (active ? " active" : ""));
var tab = node("a", "aksrt-vip-tab", actionLabel(action) + (group.name || "VIP" + level));
var tab = document.createElement("a");
tab.href = "javascript:;";
tab.setAttribute("data-vip-tab", tabId);
var miniCard = node("div", "vip-card vip-cardmini level-" + level + " vip-theme" + level);
var miniBa = node("div", "abs-center vip-baicon");
append(miniBa, vipIcon(levelInfo));
append(miniCard, miniBa);
var miniIconbox = node("div", "v-iconbox flex ac gap10");
var miniIcon = node("div", "v-icon flex jc");
append(miniIcon, vipIcon(levelInfo));
append(miniIconbox, miniIcon);
var miniInfo = node("div", "v-info");
append(miniInfo, node("div", "v-name", actionLabel(action) + (levelInfo.name || group.name || "VIP" + level)));
append(miniInfo, node("div", "v-desc em09", levelInfo.desc || ""));
append(miniIconbox, miniInfo);
append(miniCard, miniIconbox);
append(tab, miniCard);
append(tabItem, tab);
var activeIcon = node("div", "abs-right active-icon");
append(activeIcon, node("i", "fa fa-check-circle"));
activeIcon.setAttribute("aria-hidden", "true");
append(tabItem, activeIcon);
append(tabs, tabItem);
var pane = node("div", "tab-pane aksrt-vip-pane" + (active ? " active" : ""));
// pane（Zibll tab-pane fade active in）。
var pane = node("div", "tab-pane fade aksrt-vip-pane" + (active ? " active in" : ""));
pane.id = tabId;
pane.hidden = !active;
var form = document.createElement("form");
form.setAttribute("onsubmit", "return false;");
var row = node("div", "pay-vip-form-row");
var info = node("div", "pay-vip-info level-" + level);
var levelInfo = levels[String(level)] || {};
var levelHeader = node("div", "aksrt-vip-level-header");
if (levelInfo.img_icon) {
var levelIcon = imageNode(text(levelInfo.img_icon), "aksrt-vip-level-icon");
append(levelHeader, levelIcon);
// 左侧会员信息（Zibll zibpay_get_pay_vip_info_box）。
var info = node("div", "text-center pay-vip-info");
var iconbox = node("div", "v-iconbox mb10 flex jc gap10");
var vicon = node("div", "v-icon flex jc");
append(vicon, vipIcon(levelInfo));
append(iconbox, vicon);
var vinfo = node("div", "v-info");
append(vinfo, node("div", "v-name", levelInfo.name || group.name || "VIP" + level));
append(vinfo, node("div", "v-desc em09", levelInfo.desc || ""));
append(iconbox, vinfo);
append(info, iconbox);
if (levelInfo.equity) {
var equity = document.createElement("ul");
equity.className = "v-equity";
equity.innerHTML = text(levelInfo.equity);
append(info, equity);
}
append(levelHeader, node("div", "v-name font-bold", group.name || levelInfo.name || "VIP" + level));
append(info, levelHeader);
if (levelInfo.desc) append(info, node("div", "muted-2-color em09 mb6", levelInfo.desc));
renderEquity(info, levelInfo.equity);
var infoBa = node("div", "abs-center vip-baicon");
append(infoBa, vipIcon(levelInfo));
append(info, infoBa);
append(row, info);
// 右侧：套餐盒 → 积分兑换链接 → more → 支付方式/卡密 → 立即支付。
var products = node("div", "pay-vip-products");
renderProducts(products, group.items);
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);
append(products, pointsLink);
}
if (catalog.more) append(products, node("div", "muted-2-color mb10 em09 muted-box padding-10 mini-radius", catalog.more));
renderMethods(products, methods, cardPass, wallet);
var actionName = actionKey(action);
var actionAllowed = allowed[actionName] === true;
@@ -409,22 +487,14 @@
submit.setAttribute("data-vip-submit", "");
append(products, submit);
append(row, products);
append(pane, row);
append(form, row);
append(pane, form);
append(content, pane);
});
append(modal, tabs);
append(modal, content);
if (catalog.help_text) append(modal, node("div", "muted-2-color em09 mb6", catalog.help_text));
if (catalog.more) append(modal, node("div", "muted-2-color mb10 em09 muted-box padding-10 mini-radius", catalog.more));
var points = catalog.points_exchange || {};
if (allowed.points_exchange !== false && points.enabled && Array.isArray(points.packages) && points.packages.length && catalog.vip_url) {
var pointsWrap = node("div", "mt10");
var pointsLink = node("a", "but c-green btn-block", "积分兑换会员");
pointsLink.href = text(catalog.vip_url);
append(pointsWrap, pointsLink);
append(modal, pointsWrap);
}
// 卡密渠道初始显隐（选中 card_pass 时隐藏套餐、显示卡密输入盒）。
modal.querySelectorAll(".aksrt-vip-pane").forEach(function (pane) {
@@ -585,13 +655,13 @@
if (tab) {
event.preventDefault();
var id = tab.getAttribute("data-vip-tab");
root.querySelectorAll(".aksrt-vip-tab").forEach(function (item) {
root.querySelectorAll("[data-vip-tab]").forEach(function (item) {
if (item.parentElement) item.parentElement.classList.toggle("active", item === tab);
});
root.querySelectorAll(".aksrt-vip-pane").forEach(function (pane) {
var active = pane.id === id;
pane.hidden = !active;
pane.classList.toggle("active", active);
pane.classList.toggle("in", active);
});
return;
}