公司因每次停機更新導致用戶的操作不便,所以希望我能做一個公告頁出來,進行分析大概自己給自己擬定了一下需求。
- 進入首頁,如果有存在有效時間內的、狀態爲正常的公告則自動彈出框進行顯示。
- 彈出框有關閉和24h內不再顯示按鈕,優化用戶已經知曉通知後的使用體驗。24小時之後公告繼續彈出。
- 當有新的公告時,就算用戶設置24小時不彈出也需要彈出以保證公告的傳達性。
- 用戶可以手動點擊首頁查看公告按鈕進行查看。
因爲各個用戶之間公告的展示需要獨立開來,所以把是否查看的狀態儲存在cookie裏。
如下,在首頁加載的時候調用showNoticeList方法並傳參ready代表是自加載的時候,查看按鈕傳參click以區分。
$(document).ready(function() {
showNoticeList('ready');
});
$('#showNoticeBtn').click(function(){
showNoticeList("click");
});
function showNoticeList(type){
$.ajax({
url : '${xxx}/manager/notice',
type : "post",
async : true,
dataType : "json",
success : function(data) {//查詢當前是否有需要展示的公告
if(type == 'click' && data.length == 0){//當是點擊首頁按鈕,並且沒有查到公告時,提示暫無公告。
layer.alert('暫無公告!', {icon: 0});
}
if(data.length > 0){
var lastDate = $.cookie('lastDate'); //獲取上次查看的公告時間,進行對比來區分最近的公告是否被查看
var showNotice = $.cookie('showNotice');//獲取存在cookie裏的是否查看公告的值爲yes還是no
if(data[0].createTime != lastDate){//當查詢出的公告不是上一次查看的公告時,設置showNotice爲yes,無論用戶設置是否查看公告都進行彈出
$.cookie('showNotice','yes');
}
if(data[0].createTime == lastDate && showNotice == 'no' && type == 'ready'){ //如果上次查看的公告的修改時間等於本次最新的公告修改時間 默認爲用戶已看過 可跳過
return;
}
layer.open({
title: '公告'
,content: data[0].content //公告內容
,area: ['970px', '400px']
,btn: ['24h內不再顯示', '確定']
,btn1: function(index, layero){
layer.alert('24h內不再自動彈出公告,您可以手動點擊首頁公告欄查看最新公告!', {icon: 0});
var date = new Date();
date.setTime(date.getTime()+24*60*60*1000);
$.cookie('showNotice', 'no', {expires: date});//設置showNotice的值爲no,失效時間爲24h
}
,btn2: function(index, layero){
}
});
$.cookie('lastDate',data[0].createTime); //設置上次查看的公告時間爲 當前公告時間
},
error:function(data) {
alert("公告查詢出錯!");
}
});
}
相對應在後臺管理的時候,修改公告以及新增公告的時候要保證公告時間爲最新時間。
借用layui的富文本編輯器,進行新增、修改公告。