公司因每次停机更新导致用户的操作不便,所以希望我能做一个公告页出来,进行分析大概自己给自己拟定了一下需求。
- 进入首页,如果有存在有效时间内的、状态为正常的公告则自动弹出框进行显示。
- 弹出框有关闭和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的富文本编辑器,进行新增、修改公告。