From 72c506194b4a18cc41b64b2a5b87208cc1f318ec Mon Sep 17 00:00:00 2001
From: ZuoZuo <68836346+Mrz-sakura@users.noreply.github.com>
Date: Fri, 1 May 2026 16:46:43 +0800
Subject: [PATCH] fix: render recharge levels from API

---
 h5/activity/recharge/index.html | 70 ++++++++++++++++++++++++++++++++-
 1 file changed, 69 insertions(+), 1 deletion(-)

diff --git a/h5/activity/recharge/index.html b/h5/activity/recharge/index.html
index 6dbf630..fac1e96 100644
--- a/h5/activity/recharge/index.html
+++ b/h5/activity/recharge/index.html
@@ -755,6 +755,16 @@
       var DEFAULT_AVATAR = "../../assets/defaultAvatar-CdxWBK1k.png";
       var DEFAULT_REWARD_ICON = "../../assets/recharge/reward-icon.png";
       var COIN_ICON = "../../assets/coin.png";
+      var LEVEL_BASE_HEIGHT = 1881;
+      var LEVEL_PANEL_TOP = 1937;
+      var LEVEL_BADGE_TOP = 1891;
+      var LEVEL_TITLE_TOP = 1960;
+      var LEVEL_FRAME_TOP = 2088;
+      var LEVEL_ICON_TOP = 2108;
+      var LEVEL_PRICE_TOP = 2338;
+      var LEVEL_GAP = 814;
+      var LEVEL_PANEL_HEIGHT = 618;
+      var LEVEL_BOTTOM_PADDING = 57;
       var query = buildPageQueryParams();
       var countdownTimer = null;
       var countdownEndsAt = 0;
@@ -1004,6 +1014,64 @@
           });
       }
 
+      function setTop(node, value) {
+        if (node) node.style.top = value + "px";
+      }
+
+      function firstLevelPanel(section) {
+        return Array.prototype.slice.call(section.children).find(function (node) {
+          return node.classList && node.classList.contains("panel");
+        });
+      }
+
+      function setCanvasHeight(levelCount) {
+        var count = Math.max(0, Number(levelCount) || 0);
+        var height = count > 0
+          ? LEVEL_PANEL_TOP + ((count - 1) * LEVEL_GAP) + LEVEL_PANEL_HEIGHT + LEVEL_BOTTOM_PADDING
+          : LEVEL_BASE_HEIGHT;
+        document.documentElement.style.setProperty("--canvas-height", height + "px");
+      }
+
+      function layoutLevelSection(section, index) {
+        if (!section) return;
+        var offset = index * LEVEL_GAP;
+        section.setAttribute("data-level-section", String(index));
+        section.setAttribute("aria-label", "Recharge level " + (index + 1));
+        var panel = firstLevelPanel(section);
+        setTop(panel, LEVEL_PANEL_TOP + offset);
+        if (panel) panel.style.height = LEVEL_PANEL_HEIGHT + "px";
+        setTop(section.querySelector(".section-badge"), LEVEL_BADGE_TOP + offset);
+        setTop(section.querySelector("[data-level-title]"), LEVEL_TITLE_TOP + offset);
+        Array.prototype.slice.call(section.querySelectorAll("[data-level-frame]")).forEach(function (node) {
+          setTop(node, LEVEL_FRAME_TOP + offset);
+        });
+        Array.prototype.slice.call(section.querySelectorAll("[data-reward-image]")).forEach(function (node) {
+          setTop(node, LEVEL_ICON_TOP + offset);
+        });
+        Array.prototype.slice.call(section.querySelectorAll(".reward-price")).forEach(function (node) {
+          setTop(node, LEVEL_PRICE_TOP + offset);
+        });
+      }
+
+      function ensureLevelSections(levelCount) {
+        var targetCount = Math.max(0, Number(levelCount) || 0);
+        var sections = Array.prototype.slice.call(document.querySelectorAll("[data-level-section]"));
+        var template = sections[0];
+        if (!template) return [];
+        while (sections.length < targetCount) {
+          var next = template.cloneNode(true);
+          template.parentNode.appendChild(next);
+          sections.push(next);
+        }
+        sections.forEach(function (section, index) {
+          layoutLevelSection(section, index);
+          section.classList.toggle("is-hidden", index >= targetCount);
+        });
+        setCanvasHeight(targetCount);
+        els.sections = sections;
+        return sections;
+      }
+
       function renderLevel(section, level) {
         if (!section) return;
         if (!level) {
@@ -1043,7 +1111,7 @@
         startCountdown(body.countdownMillis);
         var levels = normalizeLevels(body.levelConfigs);
         if (Array.isArray(body.levelConfigs)) {
-          els.sections.forEach(function (section, index) {
+          ensureLevelSections(levels.length).forEach(function (section, index) {
             renderLevel(section, levels[index]);
           });
         }