22import { onMounted , ref } from ' vue'
33
44const isVisible = ref (false )
5+ const isCountdownToStart = ref (false ) // 是否为活动开始倒计时
6+ const isClickable = ref (true ) // 是否可以点击跳转
7+
8+ const start = new Date (' 2025/09/17' ).getTime ()
9+ const deadline = new Date (' 2025/10/18' ).getTime ()
10+ const preStartTime = start - (5 * 24 * 60 * 60 * 1000 ) // 活动开始前5天的时间
511
6- const start = new Date (' 2024/10/17' ).getTime ()
7- const deadline = new Date (' 2024/11/18' ).getTime ()
812const text = ref (' ' )
913const countdownInterval = ref ()
1014
1115function clickBanner() {
12- location .href = ' /buy-4yr'
16+ if (isClickable .value ) {
17+ location .href = ' /buy-anniversary'
18+ }
1319}
1420
1521function closeBanner() {
@@ -18,31 +24,58 @@ function closeBanner() {
1824 document .documentElement .classList .remove (' mirror-site-menu-fixed' )
1925}
2026
27+ function formatTime(distance : number ) {
28+ const days = Math .floor (distance / (1000 * 60 * 60 * 24 ))
29+ const hours = Math .floor ((distance % (1000 * 60 * 60 * 24 )) / (1000 * 60 * 60 ))
30+ const minutes = Math .floor ((distance % (1000 * 60 * 60 )) / (1000 * 60 ))
31+ const seconds = Math .floor ((distance % (1000 * 60 )) / 1000 )
32+ return ` ${days } 天 ${hours } 小时 ${minutes } 分钟 ${seconds } 秒 `
33+ }
34+
2135onMounted (() => {
22- isVisible .value = new Date ().getTime () > start && new Date ().getTime () < deadline
23- if (isVisible .value ) {
36+ const now = new Date ().getTime ()
37+
38+ // 判断是否在显示时间范围内(活动开始前7天到活动结束)
39+ const shouldShow = now >= preStartTime && now < deadline
40+
41+ if (shouldShow ) {
42+ isVisible .value = true
43+ isCountdownToStart .value = now < start
44+ isClickable .value = now >= start // 只有在活动开始后才能点击
45+
2446 countdownInterval .value = setInterval (() => {
25- const distance = deadline - new Date ().getTime ()
26- isVisible .value = distance > 0
27- if (distance < 0 ) {
47+ const currentTime = new Date ().getTime ()
48+
49+ if (currentTime >= deadline ) {
50+ // 活动结束
2851 closeBanner ()
52+ return
53+ }
54+
55+ if (currentTime < start ) {
56+ // 活动开始前倒计时
57+ isCountdownToStart .value = true
58+ isClickable .value = false
59+ const distance = start - currentTime
60+ text .value = ` Fantastic-admin 五周年庆即将开始<i style="margin-left: 20px; font-size: 0.75em;">距离活动开始还有 ${formatTime (distance )}</i> `
2961 }
3062 else {
31- const days = Math . floor ( distance / ( 1000 * 60 * 60 * 24 ))
32- const hours = Math . floor (( distance % ( 1000 * 60 * 60 * 24 )) / ( 1000 * 60 * 60 ))
33- const minutes = Math . floor (( distance % ( 1000 * 60 * 60 )) / ( 1000 * 60 ))
34- const seconds = Math . floor (( distance % ( 1000 * 60 )) / 1000 )
35- text .value = ` Fantastic-admin 四周年庆 ,全年最低价,点击查看<i style="margin-left: 20px; font-size: 0.75em;">距离活动结束还有 ${days } 天 ${ hours } 小时 ${ minutes } 分钟 ${ seconds } 秒 </i> `
63+ // 活动进行中倒计时
64+ isCountdownToStart . value = false
65+ isClickable . value = true
66+ const distance = deadline - currentTime
67+ text .value = ` Fantastic-admin 五周年庆 ,全年最低价,点击查看<i style="margin-left: 20px; font-size: 0.75em;">距离活动结束还有 ${formatTime ( distance )} </i> `
3668 }
3769 }, 1000 )
70+
3871 document .documentElement .classList .add (' mirror-site-menu-fixed' )
3972 }
4073})
4174 </script >
4275
4376<template >
4477 <div v-if =" isVisible" class =" banner-wrapper" role =" banner" >
45- <div id =" banner" @click =" clickBanner" >
78+ <div id =" banner" :class = " { 'clickable': isClickable, 'non-clickable': !isClickable } " @click =" clickBanner" >
4679 <div class =" content" v-html =" text" />
4780 <button id =" banner-close" @click.stop =" closeBanner" >
4881 <span class =" close" >× ; </span >
@@ -78,9 +111,22 @@ onMounted(() => {
78111 justify-content : center ;
79112 align-items : center ;
80113 overflow : hidden ;
114+ transition : all 0.3s ease ;
115+ }
116+
117+ #banner .clickable {
81118 cursor : pointer ;
82119}
83120
121+ #banner .clickable :hover {
122+ background : rgba (255 , 255 , 255 , 0.05 );
123+ }
124+
125+ #banner .non-clickable {
126+ cursor : default ;
127+ opacity : 0.8 ;
128+ }
129+
84130#banner .content {
85131 margin : 0 ;
86132 padding : 0 ;
0 commit comments