feat(每日充值活动页面): 宝箱的补充奖励信息使用滚动文本

src/locales/ar.json

@@ -508,5 +508,9 @@
   "active_game_rule_3": "(3) يجب إكمال المهمتين للانتقال إلى المستوى التالي.",
   "active_game_rule_4": "(4) سيتم إعادة تعيين الشحن اليومي عند الساعة 00:00 (بتوقيت السعودية). يجب على المستخدمين الذين أكملوا مهمة إعادة التعيين المطالبة بمكافآتهم في الوقت المناسب. ستصبح المكافآت غير المطالب بها غير متاحة بعد إعادة التعيين.",
   "active_game_vap_playback_failed": "فشل تشغيل VAP",
-  "active_game_claim_reward_failed": "فشل المطالبة بالمكافأة"
+  "active_game_claim_reward_failed": "فشل المطالبة بالمكافأة",
+  "active_game_reward_gift": "هدايا مخصصة *1",
+  "active_game_reward_frame": "إطارات مخصصة * 365 يوم",
+  "active_game_reward_ride": "مركبات مخصصة * 60 يوم",
+  "active_game_reward_banner": "لافتات مخصصة * 15 يوم"
 }

src/locales/bn.json

@@ -508,5 +508,9 @@
   "active_game_rule_3": "(3) পরবর্তী লেভেলে যেতে দুটি টাস্কই সম্পন্ন করতে হবে।",
   "active_game_rule_4": "(4) দৈনিক রিচার্জ 00:00 (সৌদি আরব সময়) এ রিসেট হবে। যারা রিসেট টাস্ক সম্পন্ন করেছে, তাদের সময়মতো পুরস্কার দাবি করতে হবে। রিসেটের পর দাবি না করা পুরস্কার আর পাওয়া যাবে না।",
   "active_game_vap_playback_failed": "VAP প্লেব্যাক ব্যর্থ হয়েছে",
-  "active_game_claim_reward_failed": "পুরস্কার দাবি করতে ব্যর্থ হয়েছে"
+  "active_game_claim_reward_failed": "পুরস্কার দাবি করতে ব্যর্থ হয়েছে",
+  "active_game_reward_gift": "কাস্টমাইজড গিফট *1",
+  "active_game_reward_frame": "কাস্টমাইজড ফ্রেম * 365 দিন",
+  "active_game_reward_ride": "কাস্টমাইজড ভেহিকল * 60 দিন",
+  "active_game_reward_banner": "কাস্টমাইজড ব্যানার * 15 দিন"
 }

src/locales/en.json

@@ -508,5 +508,9 @@
   "active_game_rule_3": "(3) You must complete both tasks to proceed to the next level.",
   "active_game_rule_4": "(4) Daily recharge will reset at 00:00 (Saudi Arabia Time). Users who have completed the reset task must claim their rewards in time. Unclaimed rewards will become unavailable after the reset.",
   "active_game_vap_playback_failed": "VAP playback failed",
-  "active_game_claim_reward_failed": "Failed to claim reward"
+  "active_game_claim_reward_failed": "Failed to claim reward",
+  "active_game_reward_gift": "Customized Gifts *1",
+  "active_game_reward_frame": "Customized Frames * 365 Days",
+  "active_game_reward_ride": "Customized Vehicles * 60 Days",
+  "active_game_reward_banner": "Customized Banners * 15 Days"
 }

src/locales/tr.json

@@ -508,5 +508,9 @@
   "active_game_rule_3": "(3) Sonraki seviyeye geçmek için iki görevi de tamamlamalısınız.",
   "active_game_rule_4": "(4) Günlük yükleme saat 00:00'da (Suudi Arabistan Saati) sıfırlanır. Sıfırlama görevini tamamlayan kullanıcılar ödüllerini zamanında almalıdır. Alınmayan ödüller sıfırlamadan sonra kullanılamaz hale gelir.",
   "active_game_vap_playback_failed": "VAP oynatma başarısız",
-  "active_game_claim_reward_failed": "Ödül alınamadı"
+  "active_game_claim_reward_failed": "Ödül alınamadı",
+  "active_game_reward_gift": "Özel Hediyeler *1",
+  "active_game_reward_frame": "Özel Çerçeveler * 365 Gün",
+  "active_game_reward_ride": "Özel Araçlar * 60 Gün",
+  "active_game_reward_banner": "Özel Bannerlar * 15 Gün"
 }

src/locales/zh.json

@@ -508,5 +508,9 @@
   "active_game_rule_3": "（3）必须完成两个任务才能进入下一等级。",
   "active_game_rule_4": "（4）每日充值将在沙特时间 00:00 重置。已完成重置任务的用户需及时领取奖励，未领取的奖励将在重置后失效。",
   "active_game_vap_playback_failed": "VAP 播放失败",
-  "active_game_claim_reward_failed": "领取奖励失败"
+  "active_game_claim_reward_failed": "领取奖励失败",
+  "active_game_reward_gift": "定制礼物 *1",
+  "active_game_reward_frame": "定制头像框 * 365 天",
+  "active_game_reward_ride": "定制座驾 * 60 天",
+  "active_game_reward_banner": "定制横幅 * 15 天"
 }

src/views/Activities/DailyRecharge/index.vue

@@ -348,7 +348,7 @@ justify-content: flex-start;
                       justify-content: center;
                     "
                   >
-                    <div>{{ formatRewardDisplay(mainReward.type, mainReward) }}</div>
+                    <div>{{ getRewardDisplayText(mainReward) }}</div>
                   </div>
                 </div>
 
@@ -387,12 +387,33 @@ justify-content: flex-start;
                       style="
                         flex: 1;
                         min-height: 0;
+                        width: 100%;
+                        min-width: 0;
+                        overflow: hidden;
                         display: flex;
                         align-items: center;
                         justify-content: center;
                       "
                     >
-                      <div>{{ formatRewardDisplay(reward.type, reward) }}</div>
+                      <div
+                        v-if="isLocalRewardAsset(reward)"
+                        class="reward-extra-scroll-viewport"
+                        :class="{ 'reward-extra-scroll-viewport-rtl': isRtlLayout }"
+                      >
+                        <div
+                          class="reward-extra-scroll-wrapper"
+                          :class="{ 'reward-extra-scroll-wrapper-rtl': isRtlLayout }"
+                        >
+                          <div
+                            v-for="value in 2"
+                            :key="value"
+                            class="reward-extra-scroll-content"
+                          >
+                            {{ getRewardDisplayText(reward) }}
+                          </div>
+                        </div>
+                      </div>
+                      <div v-else>{{ getRewardDisplayText(reward) }}</div>
                     </div>
                   </div>
                 </div>
@@ -680,6 +701,10 @@ const isLocalRewardAsset = (reward) => {
   return Boolean(reward?.localRewardAsset)
 }
 
+const getRewardDisplayText = (reward) => {
+  return formatRewardDisplay(reward.type, reward)
+}
+
 const getRewardRenderKey = (reward, index) => {
   return [
     selectedRewardLevel.value,
@@ -698,33 +723,33 @@ const getExtraRewardsByLevel = (level) => {
         {
           type: 'GIFT',
           cover: imageUrl('reward_gift'),
-          content: 1,
+          content: t('active_game_reward_gift'),
           localRewardAsset: true,
         },
       ]
     case 9:
       return [
         {
-          type: 'PROPS',
+          type: 'GIFT',
           detailType: 'AVATAR_FRAME',
           cover: imageUrl('reward_frame'),
-          quantity: 365,
+          content: t('active_game_reward_frame'),
           localRewardAsset: true,
         },
       ]
     case 10:
       return [
         {
-          type: 'PROPS',
+          type: 'GIFT',
           detailType: 'RIDE',
           cover: imageUrl('reward_ride'),
-          quantity: 60,
+          content: t('active_game_reward_ride'),
           localRewardAsset: true,
         },
         {
-          type: 'BANNER',
+          type: 'GIFT',
           cover: imageUrl('reward_banner'),
-          quantity: 15,
+          content: t('active_game_reward_banner'),
           localRewardAsset: true,
         },
       ]
@@ -1096,6 +1121,61 @@ onMounted(() => {
   text-align: center;
 }
 
+.reward-extra-scroll-viewport {
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  direction: ltr;
+}
+
+.reward-extra-scroll-viewport-rtl {
+  direction: rtl;
+}
+
+.reward-extra-scroll-wrapper {
+  display: flex;
+  width: fit-content;
+  animation-name: reward-scroll-left;
+  animation-duration: 6s;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  will-change: transform;
+  direction: ltr;
+}
+
+.reward-extra-scroll-wrapper-rtl {
+  animation-name: reward-scroll-right;
+  direction: rtl;
+}
+
+.reward-extra-scroll-content {
+  flex: 0 0 auto;
+  padding: 0 2vw;
+  white-space: nowrap;
+}
+
+@keyframes reward-scroll-left {
+  0% {
+    transform: translateX(0);
+  }
+
+  100% {
+    transform: translateX(-50%);
+  }
+}
+
+@keyframes reward-scroll-right {
+  0% {
+    transform: translateX(0);
+  }
+
+  100% {
+    transform: translateX(50%);
+  }
+}
+
 .scroll::-webkit-scrollbar {
   display: none;
 }