feat(cp排行榜): 新增月度倒计时
This commit is contained in:
hzj
parent
3951680afc
commit
36d9ce5a4c
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user