hy/chatapp-h5
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: render recharge levels from API

Browse Source
This commit is contained in:
ZuoZuo 2026-05-01 16:46:43 +08:00
parent 090422d2ae
commit 72c506194b
1 changed files with 69 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
h5/activity/recharge/index.html
View File

@ -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]);
});
}