【message】首页消息功能完善

Signed-off-by: liuhanqing <447067298@qq.com>

src/main/webapp/assets/modular/frame/message.css

@@ -1,68 +1,82 @@
+/** 消息列表样式 */
 .message-list {
     position: absolute;
-    top: 51px;
+    top: 48px;
-    bottom: 44px;
     left: 0;
     right: 0;
+    bottom: 45px;
     overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
 }
 
 .message-list-item {
-    padding: 10px 24px;
+    display: block;
+    padding: 10px 20px;
+    line-height: 24px;
+    position: relative;
     border-bottom: 1px solid #e8e8e8;
-    -ms-flex-align: start;
-    align-items: flex-start;
-    display: flex;
-    -ms-flex: 1 1;
-    flex: 1 1;
 }
 
 .message-list-item:hover, .message-btn-clear:hover, .message-btn-more:hover {
     background: #F2F2F2;
 }
 
-.message-item-icon {
+.message-list-item .message-item-icon {
     width: 40px;
     height: 40px;
-    margin-right: 16px;
+    line-height: 40px;
-    display: block;
+    margin-top: -20px;
-    margin-top: 4px;
+    border-radius: 50%;
+    position: absolute;
+    left: 20px;
+    top: 50%;
 }
 
-.message-item-right {
+.message-list-item .message-item-icon.layui-icon {
-    display: block;
+    color: #fff;
-    flex: 1 0;
+    font-size: 22px;
-    line-height: 24px;
+    text-align: center;
+    background-color: #FE5D58;
 }
 
-.message-item-title {
+.message-list-item .message-item-icon + .message-item-right {
+    margin-left: 55px;
+}
+
+.message-list-item .message-item-title {
+    color: #666;
     font-size: 14px;
-    color: rgba(0, 0, 0, .65);
 }
 
-.message-item-text {
+.message-list-item .message-item-text {
-    color: rgba(0, 0, 0, .45);
+    color: #999;
     font-size: 12px;
 }
 
-.pull-right {
+.message-list-item > .layui-badge {
-    float: right;
+    position: absolute;
+    right: 20px;
+    top: 12px;
+}
+
+.message-list-item > .layui-badge + .message-item-right {
+    margin-right: 50px;
 }
 
 .message-btn-clear, .message-btn-more {
+    color: #666;
     display: block;
     padding: 10px 5px;
-    text-align: center;
     line-height: 24px;
-    color: #333;
+    text-align: center;
+    cursor: pointer;
 }
 
 .message-btn-clear {
     position: absolute;
-    bottom: 0;
     left: 0;
-    background: white;
     right: 0;
+    bottom: 0;
     border-top: 1px solid #e8e8e8;
 }
 
@@ -71,13 +85,30 @@
     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;
-    color: rgba(0, 0, 0, .45);
+    display: none;
-    padding: 73px 0 88px;
+}
+
+.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;
 }
 
-.message-list-empty img {
+/** //消息列表样式结束 */
-    height: 76px;
-    margin-bottom: 16px;
-}

src/main/webapp/assets/modular/frame/message.js

@@ -1,8 +1,8 @@
 var Message = {}
-layui.use(['element', 'admin', 'ax'], function () {
+layui.use(['element', 'admin', 'HttpRequest'], function () {
     var $ = layui.jquery;
     var admin = layui.admin;
-    var $ax = layui.ax;
+    var HttpRequest = layui.HttpRequest;
 
     /* 加载更多按钮点击事件 */
     /*$('#messageMoreBtn2').click(function () {
@@ -17,18 +17,27 @@ layui.use(['element', 'admin', 'ax'], function () {
      * 全部标记为已读
      */
     Message.allReadMessage = function () {
-        var ajax = new $ax(Feng.ctxPath + "/sysMessage/allMessageReadFlag", function (data) {
+        var httpRequest = new HttpRequest(Feng.ctxPath + "/sysMessage/allMessageReadFlag", 'get', function (data) {
+            $('#messageClearBtn').parents('.layui-tab-item').addClass('show-empty');
+            $('#msgCount').html(0);
+            Feng.success("标记已读成功!");
+        }, function (data) {
+            Feng.error("标记已读失败!" + data.responseJSON.message);
+        });
+        httpRequest.setAsync(true)
+        httpRequest.start();
+
+      /*  var HttpRequest = new HttpRequest(Feng.ctxPath + "/sysMessage/allMessageReadFlag", 'get', function (data) {
             Feng.success("已读成功!");
         }, function (data) {
             Feng.error("标记已读失败!" + data.responseJSON.message + "!");
         });
-        ajax.setAsync(true)
+        HttpRequest.setAsync(true)
-        ajax.start();
+        HttpRequest.start();*/
     };
     /* 清空消息点击事件 */
     $('#messageClearBtn').click(function () {
-        debugger
+
-        $(this).parents('.layui-tab-item').addClass('show-empty');
         Message.allReadMessage()
     });
 

src/main/webapp/pages/modular/index/message.html

@@ -2,13 +2,17 @@
 <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">消息(${msgUnReadCount})</li>
+            <li class="layui-this">消息(<span id="msgCount" >${msgUnReadCount}</span>)</li>
         </ul>
         <div class="layui-tab-content" style="padding: 0;">
             <!-- tab1 -->
             @if(isNotEmpty(msgUnReadList)){
             <div class="layui-tab-item layui-show ">
-
+                <!-- 列表为空 -->
+                <div class="message-list-empty">
+                    <i class="layui-icon layui-icon-notice"></i>
+                    <div>没有消息</div>
+                </div>
                 <div class="message-list" id="message-list">
                     <!-- 后台数据循环出来 -->
                     @for(msg in msgUnReadList){
@@ -16,7 +20,7 @@
                         <i class="layui-icon layui-icon-speaker message-item-icon"></i>
                         <div class="message-item-right">
                             <h2 class="message-item-title">${msg.messageTitle}</h2>
-                            <p class="message-item-text">${msg.messageSendTime}</p>
+                            <p class="message-item-text">${msg.messageSendTime,"yyyy-MM-dd HH:mm:ss"}</p>
                         </div>
                     </a>
                     @}