diff --git a/assets/css/frontend/vip-modal.css b/assets/css/frontend/vip-modal.css index ef6e0b58..b0d486a6 100644 --- a/assets/css/frontend/vip-modal.css +++ b/assets/css/frontend/vip-modal.css @@ -33,6 +33,80 @@ padding: 18px 16px 16px; } +.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; } +} + + .aksrt-modal-close { position: absolute; top: 8px; diff --git a/assets/css/routes/user-center/credits.css b/assets/css/routes/user-center/credits.css index 57c41ac3..e382f941 100644 --- a/assets/css/routes/user-center/credits.css +++ b/assets/css/routes/user-center/credits.css @@ -1335,18 +1335,67 @@ body.uc-modal-open { .uc-vip-points-link { display: flex; align-items: center; - justify-content: space-between; - padding: 12px 16px; - gap: 12px; - margin-top: 10px; + 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 a { +.uc-vip-points-link__icon { display: inline-flex; align-items: center; - gap: 6px; - text-decoration: none; + 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/pay-vip.js b/assets/js/pay-vip.js index 8340c329..23801c86 100644 --- a/assets/js/pay-vip.js +++ b/assets/js/pay-vip.js @@ -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: '
加载中…
', + 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(); diff --git a/inc/helpers/user-center-renderers/vip-tab.php b/inc/helpers/user-center-renderers/vip-tab.php index eed76ca5..55d8bfcf 100644 --- a/inc/helpers/user-center-renderers/vip-tab.php +++ b/inc/helpers/user-center-renderers/vip-tab.php @@ -20,6 +20,15 @@ if (empty($vip_settings['enabled'])) { $user_id = (int) ($user_id ?? get_current_user_id()); $level = function_exists('aksrt_get_user_vip_level') ? aksrt_get_user_vip_level($user_id) : 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 = (int) get_user_meta($user_id, 'aksrt_vip_expires', true); $expired_level = (int) get_user_meta($user_id, 'aksrt_vip_level_expired', true); $levels = is_array($vip_settings['levels'] ?? null) ? $vip_settings['levels'] : []; @@ -136,14 +145,19 @@ foreach ([1, 2] as $lv) { $cards .= ''; } -// Points exchange (non-VIP only). +// Points exchange entry (non-VIP only). $points_html = ''; -if ($level <= 0 && !empty($vip_settings['points_exchange']['enabled'])) { - $points_html = '
' - . '
' . esc_html__('积分兑换会员', 'aksrt') . '
' - . '' +$points_pkgs = is_array($points_exchange['packages'] ?? null) ? $points_exchange['packages'] : []; +if ($level <= 0 && !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)) . '' + . '
' + . '
'; + . '
'; } ?>