feat(cp排行榜): 新增月度倒计时

src/views/Ranking/Couple/Ranking.vue

@@ -49,6 +49,31 @@
       </div>
     </div>
 
+    <itemCenter :imgUrl="imageUrl(`timeBg`)" :contentStyle="`inset:0 0 4vw;`">
+      <div v-show="weeklyShow" style="display: flex; justify-content: center; align-items: center">
+        <div class="timeBox">
+          <div class="timeText" style="">{{ WDays }}D</div>
+          <div class="timeText timeGap"></div>
+          <div class="timeText" style="">{{ WHours }}</div>
+          <div class="timeText timeGap">:</div>
+          <div class="timeText" style="">{{ WMinutes }}</div>
+          <div class="timeText timeGap">:</div>
+          <div class="timeText" style="">{{ WSeconds }}</div>
+        </div>
+      </div>
+      <div v-show="seasonShow" style="display: flex; justify-content: center; align-items: center">
+        <div class="timeBox">
+          <div class="timeText" style="">{{ MDays }}D</div>
+          <div class="timeText timeGap"></div>
+          <div class="timeText" style="">{{ MHours }}</div>
+          <div class="timeText timeGap">:</div>
+          <div class="timeText" style="">{{ MMinutes }}</div>
+          <div class="timeText timeGap">:</div>
+          <div class="timeText" style="">{{ MSeconds }}</div>
+        </div>
+      </div>
+    </itemCenter>
+
     <!-- 排行榜 -->
     <div style="position: relative; display: flex; flex-direction: column; gap: 2vw">
       <!-- 取消按钮 -->
@@ -226,6 +251,151 @@ const {
   myRanking, // 我的排名
 } = storeToRefs(coupleStore)
 
+// 倒计时相关数据
+const WDays = ref(0)
+const WHours = ref(0)
+const WMinutes = ref(0)
+const WSeconds = ref(0)
+let countdownTimer = null
+
+const MDays = ref(0)
+const MHours = ref(0)
+const MMinutes = ref(0)
+const MSeconds = ref(0)
+let monthlyCountdownTimer = null // 月度倒计时定时器
+
+// 获取对应的时间戳
+const getNextMondayInBeijing = () => {
+  const now = new Date()
+  const targetDate = new Date(now.getTime()) // 创建一个基于当前时间的新日期对象
+
+  // 转换为北京时间来判断星期几
+  const utcTime = now.getTime() + now.getTimezoneOffset() * 60000
+  const beijingTime = new Date(utcTime + 8 * 3600000) // UTC+8
+
+  const beijingDay = beijingTime.getDay() // 0=周日, 1=周一, ..., 6=周六
+  const beijingHour = beijingTime.getHours()
+
+  // 转换为 0=周一, 1=周二, ..., 6=周日
+  const normalizedDay = beijingDay === 0 ? 6 : beijingDay - 1
+
+  let daysToAdd
+  if (normalizedDay === 0) {
+    // 今天是周一
+    if (beijingHour >= 5) {
+      daysToAdd = 7 // 超过5点，计算到下周一的所需时间
+    } else {
+      daysToAdd = 0 // 今天
+    }
+  } else {
+    daysToAdd = 7 - normalizedDay // 到下周一的天数
+  }
+
+  // 正确地添加天数
+  targetDate.setDate(targetDate.getDate() + daysToAdd) // 添加天数到下周一的当前时间
+  targetDate.setHours(5, 0, 0, 0) // 将时间重新设置为早上5点，作为目标时间戳
+
+  return targetDate.getTime()
+}
+
+const targetTime = ref(getNextMondayInBeijing()) // 闭包保存目标时间 (核心修正)
+
+// 格式化时间
+const formatTime = (value) => {
+  return value < 10 ? `0${value}` : value
+}
+
+// 倒计时
+const getCountdown = () => {
+  const now = Date.now()
+  let diff = targetTime.value - now
+
+  if (diff <= 0) {
+    // 初始化数据
+    initData()
+
+    targetTime.value += 7 * 86400000 // +7天 (更新闭包变量)
+    diff = targetTime.value - now
+  }
+
+  const totalSeconds = Math.floor(diff / 1000)
+  WDays.value = Math.floor(totalSeconds / (24 * 3600))
+  WHours.value = formatTime(Math.floor((totalSeconds % (24 * 3600)) / 3600))
+  WMinutes.value = formatTime(Math.floor((totalSeconds % 3600) / 60))
+  WSeconds.value = formatTime(Math.floor(totalSeconds % 60))
+}
+
+// 启动倒计时
+const startCountdown = () => {
+  getCountdown() // 立即执行一次周倒计时
+  getMonthlyCountdown() // 立即执行一次月倒计时
+  countdownTimer = setInterval(getCountdown, 1000)
+  monthlyCountdownTimer = setInterval(getMonthlyCountdown, 1000)
+}
+
+// 获取下个月1号早上5点的北京时间
+const getNextMonthFirstInBeijing = () => {
+  const now = new Date()
+
+  // 获取当前的北京时间
+  const beijingTime = new Date(now.getTime() + 8 * 60 * 60 * 1000)
+  const year = beijingTime.getUTCFullYear()
+  const month = beijingTime.getUTCMonth()
+  const date = beijingTime.getUTCDate()
+  const hour = beijingTime.getUTCHours()
+
+  // 确定目标月份
+  let targetYear = year
+  let targetMonth = month
+
+  if (date === 1 && hour < 5) {
+    // 如果今天是1号且还没过5点，目标就是本月1号5点
+  } else {
+    // 否则目标是下个月1号
+    targetMonth = month + 1
+    if (targetMonth > 11) {
+      targetMonth = 0
+      targetYear++
+    }
+  }
+
+  // 创建代表北京时间的UTC时间戳
+  // 使用Date.UTC创建代表"北京时间"的时间戳
+  const targetDateAsBeijing = Date.UTC(targetYear, targetMonth, 1, 5, 0, 0) - 8 * 60 * 60 * 1000
+
+  return targetDateAsBeijing
+}
+
+// 月度倒计时
+const getMonthlyCountdown = () => {
+  const now = Date.now()
+  let diff = targetMonthTime.value - now
+
+  if (diff <= 0) {
+    // 如果时间已过，重新计算下一个月
+    targetMonthTime.value = getNextMonthFirstInBeijing()
+    diff = targetMonthTime.value - now
+  }
+
+  const totalSeconds = Math.floor(diff / 1000)
+
+  // 计算天数（这里需要考虑月份跨越的情况，使用总天数）
+  const totalDays = Math.floor(totalSeconds / (24 * 3600))
+  MDays.value = totalDays
+
+  const remainingHours = Math.floor((totalSeconds % (24 * 3600)) / 3600)
+  MHours.value = formatTime(remainingHours)
+
+  const remainingMinutes = Math.floor((totalSeconds % 3600) / 60)
+  MMinutes.value = formatTime(remainingMinutes)
+
+  const remainingSeconds = totalSeconds % 60
+  MSeconds.value = formatTime(remainingSeconds)
+}
+
+// 添加月度倒计时的目标时间
+const targetMonthTime = ref(getNextMonthFirstInBeijing())
+
 const weeklyShow = ref(true) //本周数据
 const seasonShow = ref(false) //季度数据
 
@@ -415,6 +585,7 @@ const connectToAppHandler = async () => {
 
 // 组件挂载时检测环境
 onMounted(() => {
+  startCountdown() //开启倒计时
   connectToAppHandler()
   // 监听加载模块
   if (RankingLoadmore.value) {
@@ -422,6 +593,56 @@ onMounted(() => {
     observer.observe(RankingLoadmore.value)
   }
 })
+
+onUnmounted(() => {
+  // 销毁计时器
+  if (countdownTimer) {
+    clearInterval(countdownTimer)
+    countdownTimer = null
+  }
+  if (monthlyCountdownTimer) {
+    clearInterval(monthlyCountdownTimer)
+    monthlyCountdownTimer = null
+  }
+})
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.timeBox {
+  width: 50vw;
+  display: flex;
+  justify-content: center;
+}
+
+.timeText {
+  color: #fff;
+  font-weight: 590;
+  font-size: 2em;
+  margin-top: 1vw;
+
+  background: linear-gradient(
+    180deg,
+    #ffdf6b 31.61%,
+    #ffe562 36.73%,
+    #fff 52.37%,
+    #ffe562 58.67%,
+    #ffa615 72.2%
+  );
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.timeGap {
+  width: 6px;
+  align-self: stretch;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+[dir='rtl'] .timeBox {
+  flex-direction: row-reverse;
+}
+</style>