feat(user-center): add VIP points exchange modal
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
kate522andClaude Fable 5 committed
1 parent
8518247755
commit
df858d04dc
4 files changed
+281
-13
No files matched your search
@@ -124,6 +124,98 @@
|
||||
append(parent, wrap);
|
||||
}
|
||||
|
||||
function renderPointsModal(body, view) {
|
||||
view = view || {};
|
||||
if (body.replaceChildren) body.replaceChildren();
|
||||
else body.innerHTML = "";
|
||||
|
||||
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", "");
|
||||
|
||||
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);
|
||||
});
|
||||
}
|
||||
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);
|
||||
append(modal, node("p", "aksrt-vip-points-modal__tip aksrt-vip-modal-tip", ""));
|
||||
if (exchange.desc) append(modal, node("div", "aksrt-vip-points-modal__note", exchange.desc));
|
||||
append(body, modal);
|
||||
}
|
||||
|
||||
function pointsPackage(root) {
|
||||
var checked = root.querySelector('[data-aksrt-vip-points-package]:checked');
|
||||
return checked ? parseInt(checked.value, 10) : 0;
|
||||
}
|
||||
|
||||
function exchangeFromModal(root, button) {
|
||||
var packageId = pointsPackage(root);
|
||||
if (!packageId || !button || button.disabled) return;
|
||||
var coordinator = window.AksrtVipPurchaseCoordinator;
|
||||
if (!coordinator || typeof coordinator.exchange !== "function") return;
|
||||
button.disabled = true;
|
||||
button.classList.add("is-loading");
|
||||
setTip(root, "正在兑换…");
|
||||
coordinator.exchange({ packageId: packageId, tags: ["vip", "orders"] }).then(function (response) {
|
||||
button.classList.remove("is-loading");
|
||||
if (response && response.ok) {
|
||||
setTip(root, "兑换成功，正在刷新…");
|
||||
window.setTimeout(function () { window.location.reload(); }, 400);
|
||||
return;
|
||||
}
|
||||
button.disabled = false;
|
||||
setTip(root, response && response.json && response.json.message ? response.json.message : "兑换失败，请重试。", true);
|
||||
}).catch(function () {
|
||||
button.disabled = false;
|
||||
button.classList.remove("is-loading");
|
||||
setTip(root, "网络异常，请稍后重试。", true);
|
||||
});
|
||||
}
|
||||
function renderModalView(body, view) {
|
||||
view = view || {};
|
||||
if (body.replaceChildren) body.replaceChildren();
|
||||
@@ -341,6 +433,12 @@
|
||||
});
|
||||
return;
|
||||
}
|
||||
var pointsSubmit = event.target.closest("[data-aksrt-vip-points-submit]");
|
||||
if (pointsSubmit) {
|
||||
event.preventDefault();
|
||||
exchangeFromModal(pointsSubmit.closest("[data-aksrt-vip-points-modal-body]") || root, pointsSubmit);
|
||||
return;
|
||||
}
|
||||
var submit = event.target.closest("[data-vip-submit]");
|
||||
if (submit) {
|
||||
event.preventDefault();
|
||||
@@ -349,6 +447,32 @@
|
||||
});
|
||||
}
|
||||
|
||||
function vipPointsPay() {
|
||||
if (!window.AksrtModalRuntime.isRolloutEnabled("vip")) return;
|
||||
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) {
|
||||
if (!error || error.code !== "unauthorized") return;
|
||||
window.AksrtModalRuntime.close("unauthorized");
|
||||
var login = document.querySelector(".signin-loader");
|
||||
if (login) login.click();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function vipPay(trigger) {
|
||||
if (!window.AksrtModalRuntime.isRolloutEnabled("vip")) return;
|
||||
var level = trigger
|
||||
@@ -379,6 +503,13 @@
|
||||
}
|
||||
|
||||
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();
|
||||
|
||||
Reference in new issue
Block a user