feat(抽奖活动页): 新增倒计时,暂时设置截止日期为2025.11.10 10:00:00
This commit is contained in:
parent
6bc3aa5d2b
commit
bb1bef2246
BIN
src/assets/images/Lottery/countdownBg.png
Normal file
BIN
src/assets/images/Lottery/countdownBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 172 KiB |
@ -9,6 +9,26 @@
|
|||||||
<!-- 弹幕 -->
|
<!-- 弹幕 -->
|
||||||
<Barrage class="barrage-container" style="width: 100vw" :barrageList="barrageList"></Barrage>
|
<Barrage class="barrage-container" style="width: 100vw" :barrageList="barrageList"></Barrage>
|
||||||
|
|
||||||
|
<!-- 倒计时 -->
|
||||||
|
<div style="position: relative; padding: 10px 0">
|
||||||
|
<img :src="images.countdownBg" alt="" width="100%" style="display: block" />
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
font-size: 1.2em;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
{{ formattedCountdown }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- 模块切换按钮 -->
|
<!-- 模块切换按钮 -->
|
||||||
<div style="display: flex; justify-content: space-around">
|
<div style="display: flex; justify-content: space-around">
|
||||||
<div style="width: 30%" @click="handleBt('Rank')">
|
<div style="width: 30%" @click="handleBt('Rank')">
|
||||||
@ -935,8 +955,12 @@ const withdrawShow = ref(false)
|
|||||||
|
|
||||||
const selectedCoin = ref(null)
|
const selectedCoin = ref(null)
|
||||||
|
|
||||||
const appConnected = ref(false)
|
// 倒计时相关数据
|
||||||
const headerInfo = ref({})
|
const Days = ref(0)
|
||||||
|
const Hours = ref(0)
|
||||||
|
const Minutes = ref(0)
|
||||||
|
const Seconds = ref(0)
|
||||||
|
let countdownTimer = null
|
||||||
|
|
||||||
// 抽屉展示
|
// 抽屉展示
|
||||||
const drawerShowBt = (type) => {
|
const drawerShowBt = (type) => {
|
||||||
@ -955,6 +979,52 @@ const handleBt = (type) => {
|
|||||||
selectedCoin.value = null // 清除选择币种
|
selectedCoin.value = null // 清除选择币种
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 获取目标时间(2025年11月10日上午10点,北京时间)
|
||||||
|
const getTargetTime = () => {
|
||||||
|
// 直接设置为2025年11月10日上午10点(北京时间)
|
||||||
|
const target = new Date(2025, 10, 10, 10, 0, 0) // 月份从0开始,10代表11月
|
||||||
|
return target.getTime()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 计算倒计时
|
||||||
|
const calculateCountdown = () => {
|
||||||
|
const now = Date.now()
|
||||||
|
const targetTime = getTargetTime()
|
||||||
|
let diff = targetTime - now
|
||||||
|
|
||||||
|
// 如果已过期,清零并停止计时器
|
||||||
|
if (diff <= 0) {
|
||||||
|
Days.value = 0
|
||||||
|
Hours.value = '00'
|
||||||
|
Minutes.value = '00'
|
||||||
|
Seconds.value = '00'
|
||||||
|
|
||||||
|
if (countdownTimer) {
|
||||||
|
clearInterval(countdownTimer)
|
||||||
|
countdownTimer = null
|
||||||
|
}
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 计算天、小时、分钟、秒
|
||||||
|
const totalSeconds = Math.floor(diff / 1000)
|
||||||
|
Days.value = Math.floor(totalSeconds / (24 * 3600))
|
||||||
|
Hours.value = String(Math.floor((totalSeconds % (24 * 3600)) / 3600)).padStart(2, '0')
|
||||||
|
Minutes.value = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, '0')
|
||||||
|
Seconds.value = String(Math.floor(totalSeconds % 60)).padStart(2, '0')
|
||||||
|
}
|
||||||
|
|
||||||
|
// 格式化显示倒计时
|
||||||
|
const formattedCountdown = computed(() => {
|
||||||
|
return `${Days.value}D ${Hours.value}:${Minutes.value}:${Seconds.value}`
|
||||||
|
})
|
||||||
|
|
||||||
|
// 启动倒计时
|
||||||
|
const startCountdown = () => {
|
||||||
|
calculateCountdown() // 立即执行一次
|
||||||
|
countdownTimer = setInterval(calculateCountdown, 1000)
|
||||||
|
}
|
||||||
|
|
||||||
const taskList = ref([])
|
const taskList = ref([])
|
||||||
|
|
||||||
// 展示任务目标
|
// 展示任务目标
|
||||||
@ -1363,6 +1433,7 @@ const connectToAppHandler = async () => {
|
|||||||
await connectToApp(() => {
|
await connectToApp(() => {
|
||||||
// 连接成功回调
|
// 连接成功回调
|
||||||
initData()
|
initData()
|
||||||
|
startCountdown() // 启动倒计时
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1372,6 +1443,10 @@ onMounted(() => {
|
|||||||
})
|
})
|
||||||
|
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
|
if (countdownTimer) {
|
||||||
|
clearInterval(countdownTimer)
|
||||||
|
countdownTimer = null
|
||||||
|
}
|
||||||
clearPayee() //清空收款人信息
|
clearPayee() //清空收款人信息
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user