feat(活动页): 完成每周倒计时

src/views/TopList/TopList.vue

@@ -91,8 +91,60 @@
         </div>
       </div>
 
+      <!-- 刷新倒计时 -->
+      <div style="display: flex; justify-content: center; margin-top: 20px">
+        <!-- 天数 -->
+        <div style="width: 10%; position: relative; margin-right: 10px">
+          <img
+            src="/src/assets/images/TopList/dayBg.png"
+            alt=""
+            width="100%"
+            style="display: block"
+          />
+          <div
+            style="
+              position: absolute;
+              inset: 0;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              color: #fff;
+              font-weight: 860;
+            "
+          >
+            {{ Days }}D
+          </div>
+        </div>
+
+        <!-- 当天时间倒计时 -->
+        <div style="width: 23.75%; position: relative">
+          <img
+            src="/src/assets/images/TopList/timeBg.png"
+            alt=""
+            width="100%"
+            style="display: block"
+          />
+          <div
+            style="
+              position: absolute;
+              top: 0;
+              bottom: 0;
+              left: 0;
+              right: 0;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              color: #fff;
+              font-weight: 860;
+            "
+          >
+            {{ Hours }} : {{ Minutes }} : {{ Second }}
+          </div>
+        </div>
+      </div>
+
       <!-- rewards -->
-      <div style="display: flex; justify-content: flex-end">
+      <div style="display: flex; justify-content: flex-end; margin-top: -8%">
         <img
           src="/src/assets/images/TopList/rewards.png"
           alt=""
@@ -570,10 +622,7 @@
         "
       >
         <div style="flex: 1; display: flex; align-items: center">
-          <div style="color: #edb247; font-weight: 700">
-            <!-- {{ myRanking.ranking }} -->
-            100
-          </div>
+          <div style="color: #edb247; font-weight: 700">{{ myRanking.rank || 0 }}</div>
           <div
             style="
               width: 30%;
@@ -621,7 +670,7 @@
 
 <script setup>
 import { isInApp } from '../../utils/appBridge.js'
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 import borderImg from '../../components/TopList/borderImg.vue'
 import maskLayer from '../../components/MaskLayer.vue'
 import {
@@ -735,6 +784,50 @@ const debouceGetQueenList = useThrottle(() => {
 
 const gifts = ref([])
 
+// 倒计时
+const Days = ref(0)
+const Hours = ref(0)
+const Minutes = ref(0)
+const Second = ref(0)
+let timer = null
+
+const getNextMonday = () => {
+  const now = new Date()
+  const day = now.getDay() //0(周日)-6(周六)
+
+  // 计算到下周一的所需天数
+  const daysToAdd = day === 1 ? 7 : (1 + 7 - day) % 7
+  const nextMonday = new Date(now) //以当前时间为基准，而不是重新获取时间
+
+  nextMonday.setDate(now.getDate() + daysToAdd) //增加到下周一那天
+  nextMonday.setHours(0, 0, 0, 0) // 设置为下周一当天00:00:00.000
+  return nextMonday.getTime() //得到下周一00:00:00.000的时间戳
+}
+
+// 时间格式化为2位
+const formatTime = (value) => {
+  return value < 10 ? `0${value}` : value
+}
+
+// 更新倒计时
+const getCountdown = () => {
+  const now = Date.now()
+  const targetTime = getNextMonday()
+  let diff = targetTime - now
+
+  if (diff <= 0) {
+    diff = getNextMonday() - now
+    updatePageData() // 刷新页面数据
+  }
+
+  // 计算时间单位
+  const totalSeconds = Math.floor(diff / 1000)
+  Days.value = Math.floor(totalSeconds / (3600 * 24)) //totalSeconds / (3600 * 24)取余留天数并用Math.floor取整
+  Hours.value = formatTime(Math.floor((totalSeconds % (3600 * 24)) / 3600)) //(totalSeconds % (3600 * 24)取余留秒数，除一小时并取整
+  Minutes.value = formatTime(Math.floor((totalSeconds % 3600) / 60)) //(totalSeconds % 3600)每个小时的余留秒数，除一分钟并取整
+  Second.value = formatTime(Math.floor(totalSeconds % 60)) //取一分钟内余留秒数，并取整
+}
+
 // 获取俩榜单
 const getTopList = async (params) => {
   const resWeekTopList = await getWeekTopList(params)
@@ -807,15 +900,23 @@ const observer = new IntersectionObserver((entries) => {
   })
 })
 
-// 组件挂载时检测环境
-onMounted(() => {
-  isInAppEnvironment.value = isInApp()
-
+// 刷新页面数据
+const updatePageData = () => {
   getTopList(kingListParams.value) // 获取国王榜单
   getTopList(queenListParams.value) // 获取女王榜单
   getMyContribution() // 获取我的贡献
   getRewardsAndGifts() //获取本周的礼物和国王和皇后top奖励列表
   getAllTopOne() //获取近几个月的榜首国王女王
+}
+
+// 组件挂载时检测环境
+onMounted(() => {
+  isInAppEnvironment.value = isInApp()
+
+  getCountdown()
+  timer = setInterval(getCountdown, 1000) //每秒更新
+
+  updatePageData() // 刷新页面数据
 
   if (kingListLoadmore.value) {
     observer.observe(kingListLoadmore.value)
@@ -825,13 +926,16 @@ onMounted(() => {
     observer.observe(queenListloadmore.value)
   } //监控女王加载标志
 })
+
+onUnmounted(() => {
+  clearInterval(timer)
+})
 </script>
 
 <style scoped>
 * {
   color: black;
   font-family: 'SF Pro';
-  font-size: 16px;
 }
 
 .fullPage {
@@ -864,7 +968,7 @@ onMounted(() => {
 
 @media screen and (min-width: 360px) {
   * {
-    font-size: 12px;
+    font-size: 16px;
   }
 
   .topName {