84 lines
		
	
	
		
			3.2 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
			
		
		
	
	
			84 lines
		
	
	
		
			3.2 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
document.addEventListener('DOMContentLoaded', function() {
 | 
						|
    const markAsReadBtn = document.getElementById('markAsReadBtn');
 | 
						|
 | 
						|
    if (markAsReadBtn) {
 | 
						|
        // 获取通知ID
 | 
						|
        const notificationCard = document.querySelector('.notification-card');
 | 
						|
        const notificationId = notificationCard ? notificationCard.dataset.id : null;
 | 
						|
 | 
						|
        if (notificationId) {
 | 
						|
            // 添加点击事件监听器
 | 
						|
            markAsReadBtn.addEventListener('click', function() {
 | 
						|
                markAsRead(notificationId);
 | 
						|
            });
 | 
						|
 | 
						|
            // 页面加载时自动标记为已读(可选功能,取决于需求)
 | 
						|
            // 如果想要在用户打开通知详情页时自动标记为已读,取消下面的注释
 | 
						|
            // markAsRead(notificationId);
 | 
						|
        }
 | 
						|
    }
 | 
						|
 | 
						|
    // 标记通知为已读的函数
 | 
						|
    function markAsRead(notificationId) {
 | 
						|
        fetch(`/announcement/notification/${notificationId}/mark-read`, {
 | 
						|
            method: 'POST',
 | 
						|
            headers: {
 | 
						|
                'Content-Type': 'application/json',
 | 
						|
                'X-Requested-With': 'XMLHttpRequest'
 | 
						|
            }
 | 
						|
        })
 | 
						|
        .then(response => response.json())
 | 
						|
        .then(data => {
 | 
						|
            if (data.success) {
 | 
						|
                // 更新UI
 | 
						|
                const notificationCard = document.querySelector('.notification-card');
 | 
						|
                if (notificationCard) {
 | 
						|
                    notificationCard.classList.remove('unread');
 | 
						|
                }
 | 
						|
 | 
						|
                // 更新状态标签
 | 
						|
                const statusContainer = document.querySelector('.notification-status');
 | 
						|
                if (statusContainer) {
 | 
						|
                    statusContainer.innerHTML = '<span class="read-badge">已读</span>';
 | 
						|
                }
 | 
						|
 | 
						|
                // 隐藏标记为已读按钮
 | 
						|
                if (markAsReadBtn) {
 | 
						|
                    markAsReadBtn.style.display = 'none';
 | 
						|
                }
 | 
						|
 | 
						|
                // 更新通知计数(如果有导航栏通知计数)
 | 
						|
                updateNotificationCount();
 | 
						|
            }
 | 
						|
        })
 | 
						|
        .catch(error => console.error('Error:', error));
 | 
						|
    }
 | 
						|
 | 
						|
    // 更新通知计数
 | 
						|
    function updateNotificationCount() {
 | 
						|
        fetch('/announcement/notifications/count')
 | 
						|
            .then(response => response.json())
 | 
						|
            .then(data => {
 | 
						|
                const badge = document.querySelector('.notifications .badge');
 | 
						|
                if (data.count > 0) {
 | 
						|
                    if (badge) {
 | 
						|
                        badge.textContent = data.count;
 | 
						|
                    } else {
 | 
						|
                        const notificationsElement = document.querySelector('.notifications');
 | 
						|
                        if (notificationsElement) {
 | 
						|
                            const newBadge = document.createElement('span');
 | 
						|
                            newBadge.className = 'badge';
 | 
						|
                            newBadge.textContent = data.count;
 | 
						|
                            notificationsElement.appendChild(newBadge);
 | 
						|
                        }
 | 
						|
                    }
 | 
						|
                } else {
 | 
						|
                    if (badge) {
 | 
						|
                        badge.remove();
 | 
						|
                    }
 | 
						|
                }
 | 
						|
            })
 | 
						|
            .catch(error => console.error('Error:', error));
 | 
						|
    }
 | 
						|
});
 |