yunzer/app/index/view/user/component/notifications.php

<div class="notifications-section">

    <div class="layui-tab layui-tab-brief" lay-filter="notificationTabs">
        <ul class="layui-tab-title">
            <li class="layui-this">全部通知</li>
            <li>未读通知</li>
            <li>已读通知</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <div class="notification-list" id="allNotifications"></div>
            </div>
            <div class="layui-tab-item">
                <div class="notification-list" id="unreadNotifications"></div>
            </div>
            <div class="layui-tab-item">
                <div class="notification-list" id="readNotifications"></div>
            </div>
        </div>
    </div>
</div>

<style>
    .notifications-section {
        max-width: 800px;
        margin: 0 auto;
    }

    .section-title {
        font-size: 20px;
        font-weight: 600;
        color: #333;
        margin-bottom: 24px;
        padding-bottom: 16px;
        border-bottom: 1px solid #f0f0f0;
    }

    .notification-list {
        min-height: 200px;
    }

    .notification-item {
        padding: 16px;
        border-bottom: 1px solid #f0f0f0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .notification-item:hover {
        background-color: #f9f9f9;
    }

    .notification-content {
        flex: 1;
    }

    .notification-title {
        font-size: 16px;
        color: #333;
        margin-bottom: 8px;
    }

    .notification-time {
        font-size: 12px;
        color: #999;
    }

    .notification-actions {
        display: flex;
        gap: 8px;
    }

    .notification-item.unread .notification-title {
        font-weight: 600;
    }

    .notification-item.unread::before {
        content: '';
        display: inline-block;
        width: 8px;
        height: 8px;
        background-color: #1677ff;
        border-radius: 50%;
        margin-right: 8px;
    }

    @media (max-width: 768px) {
        .notification-actions {
            flex-direction: column;
        }
    }
</style>

<script>
    layui.use(['element', 'layer'], function () {
        var element = layui.element;
        var layer = layui.layer;

        // 加载通知列表
        function loadNotifications(type) {
            var container = document.getElementById(type + 'Notifications');
            container.innerHTML = '<div class="layui-anim layui-anim-upbit layui-anim-loop layui-anim-shrink" style="text-align: center; padding: 20px;"><i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i></div>';

            fetch('/index/user/getNotifications?type=' + type)
                .then(response => response.json())
                .then(data => {
                    if (data.code === 0) {
                        if (data.data.length === 0) {
                            container.innerHTML = '<div class="layui-none">暂无通知</div>';
                            return;
                        }

                        var html = '';
                        data.data.forEach(function (notification) {
                            html += `
                            <div class="notification-item ${notification.is_read ? '' : 'unread'}" data-id="${notification.id}">
                                <div class="notification-content">
                                    <div class="notification-title">${notification.title}</div>
                                    <div class="notification-time">${notification.create_time}</div>
                                </div>
                                <div class="notification-actions">
                                    <button class="layui-btn layui-btn-xs" onclick="viewNotification(${notification.id})">查看</button>
                                    <button class="layui-btn layui-btn-xs layui-btn-danger" onclick="deleteNotification(${notification.id})">删除</button>
                                </div>
                            </div>
                        `;
                        });
                        container.innerHTML = html;
                    } else {
                        layer.msg(data.msg || '加载失败', { icon: 2 });
                    }
                })
                .catch(error => {
                    layer.msg('加载失败，请重试', { icon: 2 });
                });
        }

        // 查看通知
        window.viewNotification = function (notificationId) {
            fetch('/index/user/readNotification', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ id: notificationId })
            })
                .then(response => response.json())
                .then(data => {
                    if (data.code === 0) {
                        layer.open({
                            type: 2,
                            title: '通知详情',
                            area: ['500px', '400px'],
                            content: '/index/user/notificationDetail?id=' + notificationId
                        });
                        // 重新加载通知列表
                        loadNotifications('all');
                        loadNotifications('unread');
                        loadNotifications('read');
                    } else {
                        layer.msg(data.msg || '操作失败', { icon: 2 });
                    }
                })
                .catch(error => {
                    layer.msg('操作失败，请重试', { icon: 2 });
                });
        }

        // 删除通知
        window.deleteNotification = function (notificationId) {
            layer.confirm('确定要删除这条通知吗？', {
                btn: ['确定', '取消']
            }, function () {
                fetch('/index/user/deleteNotification', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ id: notificationId })
                })
                    .then(response => response.json())
                    .then(data => {
                        if (data.code === 0) {
                            layer.msg('删除成功', { icon: 1 });
                            // 重新加载通知列表
                            loadNotifications('all');
                            loadNotifications('unread');
                            loadNotifications('read');
                        } else {
                            layer.msg(data.msg || '删除失败', { icon: 2 });
                        }
                    })
                    .catch(error => {
                        layer.msg('删除失败，请重试', { icon: 2 });
                    });
            });
        }

        // 监听标签切换
        element.on('tab(notificationTabs)', function (data) {
            var type = ['all', 'unread', 'read'][data.index];
            loadNotifications(type);
        });

        // 初始加载全部通知
        loadNotifications('all');
    });
</script>