first commit

src/layouts/GlobalLayout.vue

@@ -0,0 +1,93 @@
+<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>