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

<div class="notifications-section">
    <h2 class="section-title">系统通知</h2>
    
    <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>