feat(每日充值): 新增倒计时

src/views/Activities/DailyRecharge/index.vue

@@ -28,6 +28,26 @@
 
         <!-- 页面内容 -->
         <div class="page-content">
+          <!-- 倒计时 -->
+          <itemCenter
+            style="padding: 0 3vw; margin-bottom: 5vw"
+            :imgUrl="imageUrl('timeBg')"
+            :contentStyle="`direction:ltr;padding:0 3vw 5vw;gap:4vw`"
+          >
+            <div style="flex: 1; min-width: 0; display: flex; justify-content: center">
+              <div class="timeText">{{ Days }}</div>
+            </div>
+            <div style="flex: 1; min-width: 0; display: flex; justify-content: center">
+              <div class="timeText">{{ Hours }}</div>
+            </div>
+            <div style="flex: 1; min-width: 0; display: flex; justify-content: center">
+              <div class="timeText">{{ Minutes }}</div>
+            </div>
+            <div style="flex: 1; min-width: 0; display: flex; justify-content: center">
+              <div class="timeText">{{ Second }}</div>
+            </div>
+          </itemCenter>
+
           <!-- 累计奖励 -->
           <itemCenter
             style="padding: 0 3vw"
@@ -631,6 +651,51 @@ const getImgName = (filename) => {
   return currentLangType.value == 'en' ? filename : `${filename}_${currentLangType.value}`
 }
 
+// 倒计时
+const Days = ref(0)
+const Hours = ref('00')
+const Minutes = ref('00')
+const Second = ref('00')
+const ACTIVITY_END_TIME = new Date('2026-05-30T05:00:00+08:00').getTime()
+let timer = null
+
+const formatCountdownTime = (value) => {
+  return value < 10 ? `0${value}` : `${value}`
+}
+
+const stopCountdown = () => {
+  if (timer) {
+    clearInterval(timer)
+    timer = null
+  }
+}
+
+const getCountdown = () => {
+  const now = Date.now()
+  const diff = Math.max(ACTIVITY_END_TIME - now, 0)
+
+  if (diff <= 0) {
+    Days.value = 0
+    Hours.value = '00'
+    Minutes.value = '00'
+    Second.value = '00'
+    stopCountdown()
+    return
+  }
+
+  const totalSeconds = Math.floor(diff / 1000)
+  Days.value = Math.floor(totalSeconds / (24 * 3600))
+  Hours.value = formatCountdownTime(Math.floor((totalSeconds % (24 * 3600)) / 3600))
+  Minutes.value = formatCountdownTime(Math.floor((totalSeconds % 3600) / 60))
+  Second.value = formatCountdownTime(Math.floor(totalSeconds % 60))
+}
+
+const startCountdown = () => {
+  getCountdown()
+  stopCountdown()
+  timer = setInterval(getCountdown, 1000)
+}
+
 const ruleShow = ref(false)
 const amountVisible = ref(false)
 const claimingTask1Reward = ref(false)
@@ -1049,6 +1114,7 @@ const initData = async () => {
 const preloadCriticalImages = async () => {
   const chestImages = chestProgressList.value.map((chest) => imageUrl(getChestImageName(chest)))
   const criticalImages = [
+    imageUrl('timeBg'),
     imageUrl('bg2'),
     imageUrl('bg'),
     imageUrl('totalRewardBg'),
@@ -1111,6 +1177,7 @@ onMounted(() => {
     window.__setDailyRechargeDevice = setSimulatedDeviceMode
     window.__dailyRechargeDeviceMode = simulatedDeviceMode
   }
+  startCountdown()
   connectToAppHandler()
 })
 
@@ -1119,6 +1186,7 @@ onBeforeUnmount(() => {
     delete window.__setDailyRechargeDevice
     delete window.__dailyRechargeDeviceMode
   }
+  stopCountdown()
   cleanupRewardVap()
 })
 </script>
@@ -1162,6 +1230,12 @@ onBeforeUnmount(() => {
   isolation: isolate;
 }
 
+.timeText {
+  color: #fff;
+  font-weight: 590;
+  font-size: 1.7em;
+}
+
 .vap-background-layer {
   width: 100vw;
   height: auto;