fix: render all recharge reward levels

h5/activity/recharge/index.html

@@ -9,7 +9,7 @@
     :root {
       --scale: 0.4;
       --canvas-width: 1080px;
-      --canvas-height: 3411px;
+      --canvas-height: 4240px;
       --page-bg: #290e00;
       --gold-text: #f6e0b2;
       --asset-root: "../../assets/recharge";
@@ -569,48 +569,62 @@
       <div class="figure-text profile-id" data-node-id="5:709" data-profile-id>ID：12345678</div>
       <div class="figure-text profile-total" data-node-id="5:708" data-profile-total>Accumlated Recharge:5998</div>
 
-      <section class="reward-section" aria-label="Recharge 100 two rewards" data-node-id="5:710" data-level-section="0">
-        <div class="panel" style="top: 1937px; height: 758px;" aria-hidden="true">
+      <section class="reward-section" aria-label="Recharge 100 three rewards" data-node-id="5:710" data-level-section="0">
+        <div class="panel" style="top: 1937px; height: 618px;" aria-hidden="true">
           <img class="panel-edge" style="top: 0;" src="../../assets/recharge/panel-edge.png" alt="" />
           <img class="panel-middle" style="top: 191px;" src="../../assets/recharge/panel-middle.png" alt="" />
           <img class="panel-middle" style="top: 316px;" src="../../assets/recharge/panel-middle.png" alt="" />
-          <img class="panel-middle" style="top: 427px;" src="../../assets/recharge/panel-middle.png" alt="" />
-          <img class="panel-edge bottom" style="top: 567px;" src="../../assets/recharge/panel-edge.png" alt="" />
+          <img class="panel-edge bottom" style="top: 427px;" src="../../assets/recharge/panel-edge.png" alt="" />
         </div>
         <img class="asset section-badge" style="left: 370px; top: 1891px;" src="../../assets/recharge/section-badge.png" alt="" />
         <div class="section-title" style="left: 370px; top: 1960px;" data-node-id="5:718" data-level-title>Recharge $100</div>
 
-        <div class="ornate-square reward-frame-lg reward-slot-frame" style="left: 118px; top: 2088px;" aria-hidden="true" data-level-frame="0">
+        <div class="ornate-square reward-frame-sm reward-slot-frame" style="left: 118px; top: 2088px;" aria-hidden="true" data-level-frame="0">
           <img class="square-fill" src="../../assets/recharge/reward-frame-fill.png" alt="" />
           <img class="corner tl" src="../../assets/recharge/reward-frame-corners.png" alt="" />
           <img class="corner tr" src="../../assets/recharge/reward-frame-corners.png" alt="" />
           <img class="corner bl" src="../../assets/recharge/reward-frame-corners.png" alt="" />
           <img class="corner br" src="../../assets/recharge/reward-frame-corners.png" alt="" />
         </div>
-        <div class="ornate-square reward-frame-lg reward-slot-frame" style="left: 602px; top: 2088px;" aria-hidden="true" data-level-frame="1">
+        <div class="ornate-square reward-frame-sm reward-slot-frame" style="left: 420px; top: 2088px;" aria-hidden="true" data-level-frame="1">
           <img class="square-fill" src="../../assets/recharge/reward-frame-fill.png" alt="" />
           <img class="corner tl" src="../../assets/recharge/reward-frame-corners.png" alt="" />
           <img class="corner tr" src="../../assets/recharge/reward-frame-corners.png" alt="" />
           <img class="corner bl" src="../../assets/recharge/reward-frame-corners.png" alt="" />
           <img class="corner br" src="../../assets/recharge/reward-frame-corners.png" alt="" />
         </div>
-        <img class="reward-icon" style="left: 148px; top: 2118px; width: 300px; height: 300px;" src="../../assets/recharge/reward-icon.png" alt="" data-reward-image="0" />
-        <img class="reward-icon" style="left: 632px; top: 2118px; width: 300px; height: 300px;" src="../../assets/recharge/reward-icon.png" alt="" data-reward-image="1" />
+        <div class="ornate-square reward-frame-sm reward-slot-frame" style="left: 722px; top: 2088px;" aria-hidden="true" data-level-frame="2">
+          <img class="square-fill" src="../../assets/recharge/reward-frame-fill.png" alt="" />
+          <img class="corner tl" src="../../assets/recharge/reward-frame-corners.png" alt="" />
+          <img class="corner tr" src="../../assets/recharge/reward-frame-corners.png" alt="" />
+          <img class="corner bl" src="../../assets/recharge/reward-frame-corners.png" alt="" />
+          <img class="corner br" src="../../assets/recharge/reward-frame-corners.png" alt="" />
+        </div>
+        <img class="reward-icon" style="left: 138px; top: 2108px; width: 200px; height: 200px;" src="../../assets/recharge/reward-icon.png" alt="" data-reward-image="0" />
+        <img class="reward-icon" style="left: 440px; top: 2108px; width: 200px; height: 200px;" src="../../assets/recharge/reward-icon.png" alt="" data-reward-image="1" />
+        <img class="reward-icon" style="left: 742px; top: 2108px; width: 200px; height: 200px;" src="../../assets/recharge/reward-icon.png" alt="" data-reward-image="2" />
 
-        <div class="reward-price" style="left: 156px; top: 2458px;" data-node-id="5:725">
+        <div class="reward-price" style="left: 96px; top: 2338px;" data-node-id="5:725">
           <div class="price-frame" style="left: 0; top: 0; width: 284px; height: 100px;" aria-hidden="true">
             <div class="price-fill"><img src="../../assets/recharge/price-button-fill.png" alt="" /></div>
             <div class="price-shade"><img src="../../assets/recharge/price-button-fill.png" alt="" /></div>
           </div>
           <span data-reward-label="0">$100</span>
         </div>
-        <div class="reward-price" style="left: 640px; top: 2458px;" data-node-id="5:726">
+        <div class="reward-price" style="left: 398px; top: 2338px;" data-node-id="5:726">
           <div class="price-frame" style="left: 0; top: 0; width: 284px; height: 100px;" aria-hidden="true">
             <div class="price-fill"><img src="../../assets/recharge/price-button-fill.png" alt="" /></div>
             <div class="price-shade"><img src="../../assets/recharge/price-button-fill.png" alt="" /></div>
           </div>
           <span data-reward-label="1">$100</span>
         </div>
+        <div class="reward-price" style="left: 700px; top: 2338px;" data-node-id="5:726-3">
+          <div class="price-frame" style="left: 0; top: 0; width: 284px; height: 100px;" aria-hidden="true">
+            <div class="price-fill"><img src="../../assets/recharge/price-button-fill.png" alt="" /></div>
+            <div class="price-shade"><img src="../../assets/recharge/price-button-fill.png" alt="" /></div>
+          </div>
+          <span data-reward-label="2">$100</span>
+        </div>
       </section>
 
       <section class="reward-section" aria-label="Recharge 100 three rewards" data-node-id="5:727" data-level-section="1">
@@ -670,6 +684,64 @@
           <span data-reward-label="2">$100</span>
         </div>
       </section>
+
+      <section class="reward-section" aria-label="Recharge 100 three rewards" data-level-section="2">
+        <div class="panel" style="top: 3565px; height: 618px;" aria-hidden="true">
+          <img class="panel-edge" style="top: 0;" src="../../assets/recharge/panel-edge.png" alt="" />
+          <img class="panel-middle" style="top: 191px;" src="../../assets/recharge/panel-middle.png" alt="" />
+          <img class="panel-middle" style="top: 316px;" src="../../assets/recharge/panel-middle.png" alt="" />
+          <img class="panel-edge bottom" style="top: 427px;" src="../../assets/recharge/panel-edge.png" alt="" />
+        </div>
+        <img class="asset section-badge" style="left: 370px; top: 3519px;" src="../../assets/recharge/section-badge.png" alt="" />
+        <div class="section-title" style="left: 370px; top: 3588px;" data-level-title>Recharge $100</div>
+
+        <div class="ornate-square reward-frame-sm reward-slot-frame" style="left: 118px; top: 3716px;" aria-hidden="true" data-level-frame="0">
+          <img class="square-fill" src="../../assets/recharge/reward-frame-fill.png" alt="" />
+          <img class="corner tl" src="../../assets/recharge/reward-frame-corners.png" alt="" />
+          <img class="corner tr" src="../../assets/recharge/reward-frame-corners.png" alt="" />
+          <img class="corner bl" src="../../assets/recharge/reward-frame-corners.png" alt="" />
+          <img class="corner br" src="../../assets/recharge/reward-frame-corners.png" alt="" />
+        </div>
+        <div class="ornate-square reward-frame-sm reward-slot-frame" style="left: 420px; top: 3716px;" aria-hidden="true" data-level-frame="1">
+          <img class="square-fill" src="../../assets/recharge/reward-frame-fill.png" alt="" />
+          <img class="corner tl" src="../../assets/recharge/reward-frame-corners.png" alt="" />
+          <img class="corner tr" src="../../assets/recharge/reward-frame-corners.png" alt="" />
+          <img class="corner bl" src="../../assets/recharge/reward-frame-corners.png" alt="" />
+          <img class="corner br" src="../../assets/recharge/reward-frame-corners.png" alt="" />
+        </div>
+        <div class="ornate-square reward-frame-sm reward-slot-frame" style="left: 722px; top: 3716px;" aria-hidden="true" data-level-frame="2">
+          <img class="square-fill" src="../../assets/recharge/reward-frame-fill.png" alt="" />
+          <img class="corner tl" src="../../assets/recharge/reward-frame-corners.png" alt="" />
+          <img class="corner tr" src="../../assets/recharge/reward-frame-corners.png" alt="" />
+          <img class="corner bl" src="../../assets/recharge/reward-frame-corners.png" alt="" />
+          <img class="corner br" src="../../assets/recharge/reward-frame-corners.png" alt="" />
+        </div>
+        <img class="reward-icon" style="left: 138px; top: 3736px; width: 200px; height: 200px;" src="../../assets/recharge/reward-icon.png" alt="" data-reward-image="0" />
+        <img class="reward-icon" style="left: 440px; top: 3736px; width: 200px; height: 200px;" src="../../assets/recharge/reward-icon.png" alt="" data-reward-image="1" />
+        <img class="reward-icon" style="left: 742px; top: 3736px; width: 200px; height: 200px;" src="../../assets/recharge/reward-icon.png" alt="" data-reward-image="2" />
+
+        <div class="reward-price" style="left: 96px; top: 3966px;">
+          <div class="price-frame" style="left: 0; top: 0; width: 284px; height: 100px;" aria-hidden="true">
+            <div class="price-fill"><img src="../../assets/recharge/price-button-fill.png" alt="" /></div>
+            <div class="price-shade"><img src="../../assets/recharge/price-button-fill.png" alt="" /></div>
+          </div>
+          <span data-reward-label="0">$100</span>
+        </div>
+        <div class="reward-price" style="left: 398px; top: 3966px;">
+          <div class="price-frame" style="left: 0; top: 0; width: 284px; height: 100px;" aria-hidden="true">
+            <div class="price-fill"><img src="../../assets/recharge/price-button-fill.png" alt="" /></div>
+            <div class="price-shade"><img src="../../assets/recharge/price-button-fill.png" alt="" /></div>
+          </div>
+          <span data-reward-label="1">$100</span>
+        </div>
+        <div class="reward-price" style="left: 700px; top: 3966px;">
+          <div class="price-frame" style="left: 0; top: 0; width: 284px; height: 100px;" aria-hidden="true">
+            <div class="price-fill"><img src="../../assets/recharge/price-button-fill.png" alt="" /></div>
+            <div class="price-shade"><img src="../../assets/recharge/price-button-fill.png" alt="" /></div>
+          </div>
+          <span data-reward-label="2">$100</span>
+        </div>
+      </section>
     </div>
   </main>
 
@@ -682,6 +754,7 @@
       var HOME_ENDPOINT = "/app/h5/recharge-reward/home";
       var DEFAULT_AVATAR = "../../assets/defaultAvatar-CdxWBK1k.png";
       var DEFAULT_REWARD_ICON = "../../assets/recharge/reward-icon.png";
+      var COIN_ICON = "../../assets/coin.png";
       var query = buildPageQueryParams();
       var countdownTimer = null;
       var countdownEndsAt = 0;
@@ -896,10 +969,19 @@
         var result = [];
         var rewardGold = Number(level && level.rewardGold || 0);
         if (Number.isFinite(rewardGold) && rewardGold > 0) {
-          result.push({ kind: "gold", amount: rewardGold, cover: DEFAULT_REWARD_ICON });
+          result.push({ kind: "gold", amount: rewardGold, cover: COIN_ICON });
         }
         var items = Array.isArray(level && level.rewardItems) ? level.rewardItems : [];
         items.forEach(function (item) {
+          var type = trimValue(item && item.type).toUpperCase();
+          if (type === "GOLD") {
+            result.push({
+              kind: "gold",
+              amount: numberValue((item && item.content) || (item && item.quantity)),
+              cover: COIN_ICON,
+            });
+            return;
+          }
           result.push({
             kind: "item",
             cover: trimValue(item && item.cover) || DEFAULT_REWARD_ICON,