Merge pull request 'feat(user-center): add VIP points exchange modal' (#412) from worktree-vip-points-entry-modal into main

Reviewed-on: CYL/wordpress-theme-aksrt#412

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;

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;
 }

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: '<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();

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 .= '</div></div>';
 }
 
-// Points exchange (non-VIP only).
+// Points exchange entry (non-VIP only).
 $points_html = '';
-if ($level <= 0 && !empty($vip_settings['points_exchange']['enabled'])) {
-	$points_html = '<div class="c-yellow zib-widget flex ac jsb uc-vip-points-link mt10">'
-		. '<div class="flex1 em12 flex ac"><i class="fas fa-coins" aria-hidden="true"></i><span class="ml6">' . esc_html__('积分兑换会员', 'aksrt') . '</span></div>'
-		. '<a class="badg radius c-yellow pay-vip" href="javascript:;" vip-level="1">'
+$points_pkgs = is_array($points_exchange['packages'] ?? null) ? $points_exchange['packages'] : [];
+if ($level <= 0 && !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="fas fa-coins"></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="fas fa-chevron-circle-right" aria-hidden="true"></i></a></div>';
+		. ' <i class="fas fa-chevron-right" aria-hidden="true"></i></button></div>';
 }
 ?>
 <div class="uc-vip-tab" data-aksrt-vip-tab>