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>
|