94 lines
2.8 KiB
Vue
94 lines
2.8 KiB
Vue
|
<template>
|
|||
|
|
<router-view />
|
|||
|
|
<van-popup v-model:show="showPopup" round @click-overlay="onClickOverlay">
|
|||
|
|
<div class="popup-content text-center p-8">
|
|||
|
|
<div v-html="currentNotify?.content"></div>
|
|||
|
|
<div class="flex justify-center">
|
|||
|
|
<van-button type="primary" @click="showPopup = false" class="w-24">关闭</van-button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</van-popup>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { ref, onMounted, watch } from 'vue'
|
|||
|
|
import { useRoute } from 'vue-router'
|
|||
|
|
|
|||
|
|
// 响应式变量
|
|||
|
|
const showPopup = ref(false)
|
|||
|
|
const notify = ref([])
|
|||
|
|
const currentNotify = ref(null)
|
|||
|
|
|
|||
|
|
// 获取当前页面路径
|
|||
|
|
const route = useRoute()
|
|||
|
|
|
|||
|
|
// 获取通知数据
|
|||
|
|
onMounted(() => {
|
|||
|
|
getGlobalNotify()
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 获取通知数据
|
|||
|
|
const getGlobalNotify = async () => {
|
|||
|
|
const { data, error } = await useApiFetch("/notification/list")
|
|||
|
|
.get()
|
|||
|
|
.json()
|
|||
|
|
|
|||
|
|
if (data.value && !error.value) {
|
|||
|
|
if (data.value !== 200) {
|
|||
|
|
notify.value = data.value.data.notifications
|
|||
|
|
checkNotification() // 在获取数据后检查通知
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 判断当前时间是否在通知的时间范围内
|
|||
|
|
const isWithinTimeRange = (startTime, endTime) => {
|
|||
|
|
const now = new Date()
|
|||
|
|
|
|||
|
|
// 获取当前时间的小时和分钟
|
|||
|
|
const currentMinutes = now.getHours() * 60 + now.getMinutes()
|
|||
|
|
|
|||
|
|
// 将 startTime 和 endTime 转换为分钟数
|
|||
|
|
const startParts = startTime.split(':').map(Number)
|
|||
|
|
const endParts = endTime.split(':').map(Number)
|
|||
|
|
const startMinutes = startParts[0] * 60 + startParts[1]
|
|||
|
|
const endMinutes = endParts[0] * 60 + endParts[1]
|
|||
|
|
|
|||
|
|
// 如果 endTime 小于 startTime，表示跨越了午夜
|
|||
|
|
if (endMinutes < startMinutes) {
|
|||
|
|
// 判断当前时间是否在 [startTime, 23:59:59] 或 [00:00:00, endTime] 之间
|
|||
|
|
return currentMinutes >= startMinutes || currentMinutes < endMinutes
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 普通情况，直接判断时间是否在范围内
|
|||
|
|
return currentMinutes >= startMinutes && currentMinutes <= endMinutes
|
|||
|
|
}
|
|||
|
|
// 检查通知并更新showPopup
|
|||
|
|
const checkNotification = () => {
|
|||
|
|
// 遍历通知数组，找到第一个符合条件的通知
|
|||
|
|
for (let notification of notify.value) {
|
|||
|
|
// 判断时间是否符合当前时间
|
|||
|
|
const isTimeValid = isWithinTimeRange(notification.startTime, notification.endTime)
|
|||
|
|
// 判断页面是否符合
|
|||
|
|
|
|||
|
|
if (isTimeValid && notification.notificationPage === route.path) {
|
|||
|
|
currentNotify.value = notification
|
|||
|
|
showPopup.value = true
|
|||
|
|
break // 只显示第一个符合的通知
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 监听路由变化
|
|||
|
|
watch(() => route.path, () => {
|
|||
|
|
checkNotification() // 每次路由变化时重新判断通知
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 关闭弹窗
|
|||
|
|
const onClickOverlay = () => {
|
|||
|
|
showPopup.value = false
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped></style>
|