404 lines
18 KiB
Plaintext
404 lines
18 KiB
Plaintext
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>通知中心</title>
|
||
<link href="../lib/font-awesome-4.7.0/css/font-awesome.css?v=@HT.Cloud.Code.GlobalContext.GetVersion()" rel="stylesheet" />
|
||
<script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js?v=@HT.Cloud.Code.GlobalContext.GetVersion()" charset="utf-8"></script>
|
||
<link rel="stylesheet" href="../js/lay-module/dtree/dtree.css?v=@HT.Cloud.Code.GlobalContext.GetVersion()">
|
||
<link rel="stylesheet" href="../js/lay-module/dtree/font/dtreefont.css?v=@HT.Cloud.Code.GlobalContext.GetVersion()">
|
||
<script src="../js/framework-ui.js?v=@HT.Cloud.Code.GlobalContext.GetVersion()"></script>
|
||
<script src="../lib/layui/layui.js?v=@HT.Cloud.Code.GlobalContext.GetVersion()"></script>
|
||
<link rel="stylesheet" href="../lib/layui/css/layui.css?v=@HT.Cloud.Code.GlobalContext.GetVersion()" media="all">
|
||
<link rel="stylesheet" href="../css/public.css?v=@HT.Cloud.Code.GlobalContext.GetVersion()" media="all">
|
||
<script src="../js/lay-config.js?v=@HT.Cloud.Code.GlobalContext.GetVersion()" charset="utf-8"></script>
|
||
<link href="../css/watercloud.css?v=@HT.Cloud.Code.GlobalContext.GetVersion()" rel="stylesheet" />
|
||
<link rel="stylesheet" href="../js/lay-module/loading/wcLoading.css?v=@HT.Cloud.Code.GlobalContext.GetVersion()" media="all">
|
||
<script src="../js/lay-module/loading/wcLoading.js?v=@HT.Cloud.Code.GlobalContext.GetVersion()" charset="utf-8"></script>
|
||
<style>
|
||
/** 消息列表样式 */
|
||
.layui-badge {
|
||
position: relative;
|
||
display: inline-block;
|
||
padding: 0 6px;
|
||
font-size: 12px;
|
||
text-align: center;
|
||
background-color: #FF5722;
|
||
color: #fff;
|
||
border-radius: 2px;
|
||
left: 40px;
|
||
}
|
||
|
||
.layui-badge-yellow {
|
||
margin-top: 5px;
|
||
color: #faad14;
|
||
background: #fff;
|
||
border: 1px solid #ffe58f;
|
||
}
|
||
|
||
.layui-badge-green {
|
||
margin-top: 5px;
|
||
color: #52c41a;
|
||
background: #fff;
|
||
border: 1px solid #b7eb8f;
|
||
}
|
||
|
||
.layui-badge-red {
|
||
margin-top: 5px;
|
||
color: #f5222d;
|
||
background: #fff;
|
||
border: 1px solid #ffa39e;
|
||
}
|
||
|
||
.message-list {
|
||
position: absolute;
|
||
top: 48px;
|
||
padding: 0px 0px;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 45px;
|
||
overflow-y: auto;
|
||
-webkit-overflow-scrolling: touch;
|
||
background: #F2F2F2;
|
||
}
|
||
|
||
.watercolor {
|
||
background-color: #fff;
|
||
}
|
||
|
||
.message-list-item {
|
||
display: block;
|
||
line-height: 24px;
|
||
position: relative;
|
||
border-bottom: 1px solid #e8e8e8;
|
||
}
|
||
|
||
.message-list-item:hover, .message-btn-clear:hover, .message-btn-more:hover {
|
||
background: #F2F2F2;
|
||
}
|
||
|
||
.message-list-item .message-item-icon {
|
||
width: 30px;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
margin-top: -20px;
|
||
border-radius: 50%;
|
||
position: absolute;
|
||
left: 40px;
|
||
top: 50%;
|
||
}
|
||
|
||
.message-list-item .message-item-icon.layui-icon {
|
||
color: #fff;
|
||
font-size: 15px;
|
||
text-align: center;
|
||
background-color: #FE5D58;
|
||
margin-top: -20px;
|
||
}
|
||
|
||
.message-list-item .message-item-icon + .message-item-right {
|
||
margin-left: 40px;
|
||
}
|
||
|
||
.message-list-item .message-item-title {
|
||
color: #666;
|
||
font-size: 14px;
|
||
padding-left: 40px;
|
||
}
|
||
|
||
.message-list-item .message-item-text {
|
||
color: #999;
|
||
font-size: 12px;
|
||
padding-left: 40px;
|
||
}
|
||
|
||
.message-list-item .message-item-extra {
|
||
color: #999;
|
||
font-size: 12px;
|
||
padding-left: 40px;
|
||
}
|
||
|
||
.message-list-item > .layui-badge {
|
||
position: absolute;
|
||
right: 20px;
|
||
top: 12px;
|
||
left: 40px;
|
||
}
|
||
|
||
.message-btn-clear, .message-btn-more {
|
||
color: #666;
|
||
display: block;
|
||
padding: 10px 5px;
|
||
line-height: 24px;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.message-btn-clear {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
border-top: 1px solid #e8e8e8;
|
||
}
|
||
|
||
.message-btn-more {
|
||
color: #666;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.message-btn-more.ew-btn-loading > .ew-btn-loading-text {
|
||
font-size: 13px !important;
|
||
}
|
||
|
||
.message-list-empty {
|
||
color: #999;
|
||
padding: 100px 0;
|
||
text-align: center;
|
||
display: none;
|
||
}
|
||
|
||
.message-list-empty > .layui-icon {
|
||
color: #ccc;
|
||
display: block;
|
||
font-size: 45px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.show-empty .message-list-empty {
|
||
display: block;
|
||
}
|
||
|
||
.show-empty .message-btn-clear, .show-empty .message-list {
|
||
display: none;
|
||
}
|
||
body {
|
||
margin: 5px 0px 5px 0px;
|
||
}
|
||
/** //消息列表样式结束 */
|
||
</style>
|
||
<script>
|
||
layui.use(['element', 'jquery', 'common'], function () {
|
||
var $ = layui.$;
|
||
var common = layui.common;
|
||
$(function () {
|
||
//todo ajax获取3个信息的参数 进行显示
|
||
common.ajax({
|
||
url: "/InfoManage/Message/GetUnReadListJson",
|
||
dataType: "json",
|
||
async: false,
|
||
success: function (data) {
|
||
//通知值
|
||
var num1 = 0;
|
||
//私信值
|
||
var num2 = 0;
|
||
//带办值
|
||
var num3 = 0;
|
||
var html1 = '';
|
||
var html2 = '';
|
||
var html3 = '';
|
||
for (var i = 0; i < data.length; i++) {
|
||
if (data[i].F_MessageType == 0) {
|
||
num1++;
|
||
html1 += '<a class="message-list-item" id="' + data[i].F_Id + '" href="javascript:;">'
|
||
+ '<div class="watercolor">'
|
||
+ '<i class="layui-icon layui-icon-tips message-item-icon"></i>'
|
||
+ '<div class="message-item-right">'
|
||
+ '<div class="message-item-title">' + '通知--' + new Date(data[i].F_CreatorTime).Format("yyyy-MM-dd hh:mm") + '</div>'
|
||
+ '<div class="message-item-text layui-hide">' + data[i].F_MessageInfo + '</div>'
|
||
+ '<div class="message-item-extra">' + data[i].F_CreatorUserName + '</div>'
|
||
+ '</div>'
|
||
+ '</div >'
|
||
+ '</a >';
|
||
}
|
||
else if (data[i].F_MessageType == 1) {
|
||
num2++;
|
||
html2 += '<a class="message-list-item" id="' + data[i].F_Id + '" href="javascript:;">'
|
||
+ '<div class="watercolor">'
|
||
+ '<div class="message-item-right">'
|
||
+ '<div class="message-item-title">' + '私信--' + data[i].F_CreatorUserName + '</div>'
|
||
+ '<div class="message-item-text layui-hide">' + data[i].F_MessageInfo + '</div>'
|
||
+ '<div class="message-item-extra">' + new Date(data[i].F_CreatorTime).Format("yyyy-MM-dd hh:mm") + '</div>'
|
||
+ '</div>'
|
||
+ '</div>'
|
||
+ '</a>';
|
||
}
|
||
else {
|
||
num3++;
|
||
html3 += '<a class="message-list-item" id="' + data[i].F_Id + '" href="javascript:;">'
|
||
+ '<div class="watercolor">'
|
||
+ '<span class="layui-badge ' + 'layui-badge-yellow' + '">' + '待处理' + '</span>'
|
||
+ '<div class="message-item-right">'
|
||
+ '<h2 class="message-item-title">' + data[i].F_MessageInfo + '</h2>'
|
||
+ '<div class="message-item-text layui-hide">' + data[i].F_Href + '</div>'
|
||
+ '<div class="message-item-extra">' + new Date(data[i].F_CreatorTime).Format("yyyy-MM-dd hh:mm") + '</div>'
|
||
+ '</div>'
|
||
+ '</div>'
|
||
+ '</a>';
|
||
}
|
||
}
|
||
$('#message1').html("通知(" + num1 + ")");
|
||
$('#message2').html("私信(" + num2 + ")");
|
||
$('#message3').html("待办(" + num3 + ")");
|
||
$('#list1').html(html1);
|
||
$('#list2').html(html2);
|
||
$('#list3').html(html3);
|
||
if (num1 == 0) {
|
||
$('#list1').parents('.layui-tab-item').addClass('show-empty');
|
||
}
|
||
if (num2 == 0) {
|
||
$('#list2').parents('.layui-tab-item').addClass('show-empty');
|
||
}
|
||
if (num3 == 0) {
|
||
$('#list3').parents('.layui-tab-item').addClass('show-empty');
|
||
}
|
||
}
|
||
});
|
||
|
||
});
|
||
wcLoading.close();
|
||
/* 按钮点击事件 */
|
||
$('body').on('click', '.message-list-item', function () {
|
||
//todo 前后交互，htm2是根据后端数据生成的
|
||
var message = $('.layui-this')[0].id;
|
||
common.ajax({
|
||
url: "/InfoManage/Message/ReadMsgForm",
|
||
data: { keyValue: this.id },
|
||
dataType: "json",
|
||
type: 'POST',
|
||
success: function () {
|
||
}
|
||
});
|
||
if (message == 'message1') {
|
||
var title = $(this).children('.watercolor').children('.message-item-right').children('.message-item-title').text(),
|
||
noticeTime = $(this).children('.watercolor').children('.message-item-right').children('.message-item-extra').text(),
|
||
content = $(this).children('.watercolor').children('.message-item-right').children('.message-item-text').text();
|
||
var html = '<div style="padding:15px 20px; text-align:justify; line-height: 22px;border-bottom:1px solid #e2e2e2;background-color: #2f4056;color: #ffffff">\n' +
|
||
'<div style="text-align: center;margin-bottom: 20px;font-weight: bold;border-bottom:1px solid #718fb5;padding-bottom: 5px"><h4 class="text-danger">' + title + '</h4></div>\n' +
|
||
'<div style="font-size: 12px">' + content + '</div>\n' +
|
||
'</div>\n';
|
||
top.layer.open({
|
||
type: 1,
|
||
title: '通知' + '<span style="float: right;right: 1px;font-size: 12px;color: #b1b3b9;margin-top: 1px">' + noticeTime + '</span>',
|
||
area: '250px;',
|
||
shade: 0.8,
|
||
id: 'layuimini-notice',
|
||
btn: ['确定'],
|
||
btnAlign: 'c',
|
||
moveType: 1,
|
||
content: html
|
||
});
|
||
}
|
||
else if (message == 'message2') {
|
||
var title = $(this).children('.watercolor').children('.message-item-right').children('.message-item-title').text(),
|
||
noticeTime = $(this).children('.watercolor').children('.message-item-right').children('.message-item-extra').text(),
|
||
content = $(this).children('.watercolor').children('.message-item-right').children('.message-item-text').text();
|
||
var html = '<div style="padding:15px 20px; text-align:justify; line-height: 22px;border-bottom:1px solid #e2e2e2;background-color: #2f4056;color: #ffffff">\n' +
|
||
'<div style="text-align: center;margin-bottom: 20px;font-weight: bold;border-bottom:1px solid #718fb5;padding-bottom: 5px"><h4 class="text-danger">' + title + '</h4></div>\n' +
|
||
'<div style="font-size: 12px">' + content + '</div>\n' +
|
||
'</div>\n';
|
||
top.layer.open({
|
||
type: 1,
|
||
title: '私信' + '<span style="float: right;right: 1px;font-size: 12px;color: #b1b3b9;margin-top: 1px">' + noticeTime + '</span>',
|
||
area: '250px;',
|
||
shade: 0.8,
|
||
id: 'layuimini-notice',
|
||
btn: ['确定'],
|
||
btnAlign: 'c',
|
||
moveType: 1,
|
||
content: html
|
||
});
|
||
}
|
||
else {
|
||
var Href = $(this).children('.watercolor').children('.message-item-right').children('.message-item-text').html();
|
||
top.$("[layuimini-href='" + Href + "']", ".layuimini-menu-left").click();
|
||
common.modalClose();
|
||
}
|
||
|
||
});
|
||
/* 清空消息点击事件 分开写交互*/
|
||
$('#messageClearBtn1').click(function () {
|
||
var thisObj = $(this);
|
||
common.ajax({
|
||
url: "/InfoManage/Message/ReadAllMsgForm?type=0",
|
||
type: "POST",
|
||
success: function () {
|
||
$('#message1').html("通知(0)");
|
||
$(thisObj).parents('.layui-tab-item').addClass('show-empty');
|
||
}
|
||
});
|
||
});
|
||
$('#messageClearBtn2').click(function () {
|
||
var thisObj = $(this);
|
||
common.ajax({
|
||
url: "/InfoManage/Message/ReadAllMsgForm?type=1",
|
||
type: "POST",
|
||
success: function () {
|
||
$('#message2').html("私信(0)");
|
||
$(thisObj).parents('.layui-tab-item').addClass('show-empty');
|
||
}
|
||
});
|
||
|
||
});
|
||
$('#messageClearBtn3').click(function () {
|
||
var thisObj = $(this);
|
||
common.ajax({
|
||
url: "/InfoManage/Message/ReadAllMsgForm?type=2",
|
||
type: "POST",
|
||
success: function () {
|
||
$('#message3').html("待办(0)");
|
||
$(thisObj).parents('.layui-tab-item').addClass('show-empty');
|
||
}
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
</head>
|
||
<body>
|
||
<div class="layui-card" style="box-shadow: none;border: none;">
|
||
<div class="layui-tab layui-tab-brief">
|
||
<ul class="layui-tab-title" style="text-align: center;">
|
||
<li class="layui-this" id="message1"></li>
|
||
<li id="message2" class="layui-hide"></li>
|
||
<li id="message3"></li>
|
||
</ul>
|
||
<div class="layui-tab-content" style="padding: 0;">
|
||
<!-- tab1 -->
|
||
<div class="layui-tab-item layui-show">
|
||
<div class="message-list" id="list1">
|
||
</div>
|
||
<!-- 列表为空 -->
|
||
<div class="message-list-empty">
|
||
<i class="layui-icon layui-icon-notice"></i>
|
||
<div>没有通知</div>
|
||
</div>
|
||
<a id="messageClearBtn1" class="message-btn-clear">全部标记已读</a>
|
||
</div>
|
||
<!-- tab2 -->
|
||
<div class="layui-tab-item">
|
||
<div class="message-list" id="list2">
|
||
</div>
|
||
<!-- 列表为空 -->
|
||
<div class="message-list-empty">
|
||
<i class="layui-icon layui-icon-dialogue"></i>
|
||
<div>没有私信</div>
|
||
</div>
|
||
<a id="messageClearBtn2" class="message-btn-clear">全部标记已读</a>
|
||
</div>
|
||
<!-- tab3 -->
|
||
<div class="layui-tab-item">
|
||
<div class="message-list" id="list3">
|
||
</div>
|
||
<!-- 列表为空 -->
|
||
<div class="message-list-empty">
|
||
<i class="layui-icon layui-icon-flag"></i>
|
||
<div>没有待办</div>
|
||
</div>
|
||
<a id="messageClearBtn3" class="message-btn-clear">全部标记已读</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
</html> |