zhaobao
/
scyf


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395
							<!DOCTYPE html>
<html lang="en" class="bg-white">
<head>
    <title>消息</title>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="../../assets/module/admin.css?v=315"/>
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        /** 消息列表样式 */
        .message-list {
            position: absolute;
            top: 51px;
            bottom: 44px;
            left: 0;
            right: 0;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }

        .message-list-item {
            padding: 10px 24px;
            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 {
            width: 40px;
            height: 40px;
            margin-right: 16px;
            display: block;
            margin-top: 4px;
        }

        .message-item-right {
            display: block;
            flex: 1 0;
            line-height: 24px;
        }

        .message-item-title {
            font-size: 14px;
            color: rgba(0, 0, 0, .65);
        }

        .message-item-text {
            color: rgba(0, 0, 0, .45);
            font-size: 12px;
        }

        .pull-right {
            float: right;
        }

        .message-btn-clear, .message-btn-more {
            display: block;
            padding: 10px 5px;
            text-align: center;
            line-height: 24px;
            color: #333;
        }

        .message-btn-clear {
            position: absolute;
            bottom: 0;
            left: 0;
            background: white;
            right: 0;
            border-top: 1px solid #e8e8e8;
        }

        .message-btn-more {
            color: #666;
            font-size: 13px;
        }

        .message-list-empty {
            text-align: center;
            color: rgba(0, 0, 0, .45);
            padding: 73px 0 88px;
        }

        .message-list-empty img {
            height: 76px;
            margin-bottom: 16px;
        }

        /** //消息列表样式结束 */
    </style>
</head>
<body>
<div class="layui-tab layui-tab-brief" style="padding: 5px 0;margin: 0;"  lay-filter="tabChange">

    <!--<ul class="layui-tab-title">-->
        <!--<li class="layui-this">收件箱</li>-->
        <!--<li class="layui-this">发件箱</li>-->
    <!--</ul>-->
    <ul class="layui-tab-title">
        <li class="layui-this" lay-id="wait">收件箱</li>
        <li lay-id="already">发件箱</li>
    </ul>
    <div class="layui-inline layui-col-md5 set-read" style="padding-left: 40px;">
        <button onclick="setRead()" lay-filter="formSubmit"  class=" layui-btn layui-btn-radius bg-c-update"
                style="height: 30px;line-height: 0px;margin-top: -36px;margin-left: 170px;position: absolute;">
            全部已读
        </button>
    </div>
    <div class="layui-tab-content" style="padding: 5px 0;">

        <!-- 收件箱 -->
        <div class="layui-tab-item layui-show">
            <!--<a onclick="setRead();" class="message-list-item " style="text-align: right;color: blueviolet;" href="javascript:;">全部已读</a>-->
            <div class="message-list inbox">
                <!-- 实际项目请使用后台数据循环出来 -->
                <!--<a class="message-list-item" href="javascript:;">-->
                    <!--<i class="layui-icon layui-icon-reply-fill c-update message-item-icon" style="font-size: 35px; color: #1E9FFF;"></i>-->
                    <!--<div class="message-item-right">-->
                        <!--<h2 class="message-item-title">你收到了14份新周报</h2>-->
                        <!--<p class="message-item-text">10个月前</p>-->
                    <!--</div>-->
                <!--</a>-->
                <!--<a class="message-list-item" href="javascript:;">-->
                    <!--<i class="layui-icon layui-icon-notice message-item-icon" style="font-size: 35px; color: #1E9FFF;"></i>-->
                    <!--<div class="message-item-right">-->
                        <!--<h2 class="message-item-title">xx评论了你</h2>-->
                        <!--<p class="message-item-text">哈哈哈哈哈哈</p>-->
                        <!--<p class="message-item-text">10个月前</p>-->
                    <!--</div>-->
                <!--</a>-->
                <!-- 列表为空 -->
                <!--<div class="message-list-empty" style="display: none;">-->
                    <!--<img src="../../assets/images/img_msg_notice.png">-->
                    <!--<div>没有通知</div>-->
                <!--</div>-->

            </div>
            <!--<a id="btn-more" class="message-btn-clear" href="javascript:;">加载更多</a>-->
            <!--<a class="message-btn-clear" href="javascript:;">全部标记已读</a>-->

        </div>
        <!-- 发件箱 -->
        <div class="layui-tab-item">

            <div class="message-list outbox">
                <!--<a class="message-list-item" href="javascript:;">-->
                    <!--<i class="layui-icon layui-icon-reply-fill c-update message-item-icon" style="font-size: 35px; color: #1E9FFF;"></i>-->
                    <!--<div class="message-item-right">-->
                        <!--<h2 class="message-item-title">你收到了14份新周报</h2>-->
                        <!--<p class="message-item-text">10个月前</p>-->
                    <!--</div>-->
                <!--</a>-->
                <!--<a class="message-list-item" href="javascript:;">-->

                    <!--<div style="width: 100%">-->
                        <!--<div style="display: flex">-->
                            <!--<i class="layui-icon layui-icon-notice message-item-icon" style="font-size: 35px; color: #1E9FFF;"></i>-->
                            <!--<div class="message-item-right">-->
                                <!--<h2 class="message-item-title">xx评论了你</h2>-->
                                <!--<p class="message-item-text">哈哈哈哈哈哈</p>-->
                            <!--</div>-->
                        <!--</div>-->
                        <!--<div>-->
                            <!--<p class="message-item-text">10个月前</p>-->
                        <!--</div>-->
                    <!--</div>-->

                <!--</a>-->

                <!--<a id="btn-more1" class="message-btn-more" href="javascript:;">加载更多</a>-->

                <!-- 列表为空 -->
                <!--<div class="message-list-empty " style="display: none;">-->
                    <!--<img src="../../assets/images/img_msg_pri.png">-->
                    <!--<div>没有消息</div>-->
                <!--</div>-->

            </div>
            <!--<a id="btn-more1" class="message-btn-clear" href="javascript:;">加载更多</a>-->
            <!--<a class="message-btn-clear" href="javascript:;">清空消息</a>-->
        </div>

    </div>
</div>

<script type="text/javascript" src="../../assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="../../assets/js/common.js?v=315"></script>
<script>
    var uParas;
    var admin;
    layui.use(['layer', 'form', 'table', 'util', 'zTree', 'admin', 'uParas', 'element', 'laytpl'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var util = layui.util;
        admin = layui.admin;
        uParas = layui.uParas;
        var element = layui.element, laytpl = layui.laytpl;

        element.on('tab(tabChange)', function(data){
            // alert(data.index)
            if (data.index == 0){
                getMessageInboxList(); //未检查
            }else if (data.index == 1){
                getMessageOutboxList() //已检查
            }

        });

        /*未读消息统计*/
        admin.req(uParas.baseUrl + '/ent/message/getMessageCount', {}, function (res) {
            if (res.code == 1) {
                /*获取父级index页面的class*/
                $(window.parent.document).find("#message").html("");
                var messageCount = res.data;
                var msghtml = '';
                msghtml += '<i class="layui-icon layui-icon-notice c-add" style="font-size: 20px;"></i>';
                if(messageCount > 0){
                    msghtml += '<span class="layui-badge-dot" style="margin-top: -12px;margin-left: -4px;"></span>';
                    msghtml += '<i class="layui-icon" style="font-size: 2px;margin-top: 10px;color: red;position: absolute;">' + messageCount +'</i>';
                }
                $(window.parent.document).find("#message").html(msghtml);
            }
        }, 'get');

        getMessageInboxList();

        /*收件箱*/
        function getMessageInboxList() {
            $('.set-read').show();
            layer.load(2, { shade: [0.15, '#cccccc'] });
            admin.req(uParas.baseUrl + '/ent/message/getMessageList?action=1', null, function (res) {
                if (res.code == 1) {
                    layer.closeAll('loading');
                    $('.inbox ').html("");
                    var messageList = res.data;
                    if(messageList.length > 0){
                        var meghtml = '';
                        for (var i = 0; i < messageList.length; i++) {
                            var meg = messageList[i];
                            if(meg.msgType.toString() == "1"){ //消息
                                meghtml += '<div class="message-list-item">';
                                meghtml += '<div style="width: 100%">';
                                meghtml += '<div style="display: flex">';
                                if(meg.msgStatus.toString() == "0"){
                                    meghtml += '<span class="layui-badge-dot" style="margin-left: 27px;margin-top: 3px;position: absolute"></span>';
                                }
                                meghtml += '<i class="layui-icon layui-icon-reply-fill c-update message-item-icon" style="font-size: 35px; color: #1E9FFF;"></i>';
                                meghtml += '<div class="message-item-right">';
                                meghtml += '<h2 class="message-item-title">'+meg.addresserName+'</h2>';
                                meghtml += '<h2 class="message-item-title">'+meg.addresseeTime+'</h2>';
                                meghtml += '</div>';
                                meghtml += '</div>';
                                meghtml += '<a onclick="goToTheHdnager(\''+ meg +'\');">' +
                                    '<p class="message-item-text">'+meg.msgContent+'</p>' +
                                    '</a>';
                                meghtml += '</div>';
                                meghtml += '</div>';
                            }else if(meg.msgType.toString() == "2"){ //通知
                                meghtml += '<div class="message-list-item">';
                                meghtml += '<div style="width: 100%">';
                                meghtml += '<div style="display: flex">';
                                if(meg.msgStatus.toString() == "0"){
                                    meghtml += '<span class="layui-badge-dot" style="margin-left: 25px;margin-top: 3px;position: absolute"></span>';
                                }
                                meghtml += '<i class="layui-icon layui-icon-notice c-add message-item-icon" style="font-size: 35px; color: #1E9FFF;"></i>';
                                meghtml += '<div class="message-item-right">';
                                meghtml += '<h2 class="message-item-title">'+meg.addresserName+'</h2>';
                                meghtml += '<h2 class="message-item-title">'+meg.addresseeTime+'</h2>';
                                meghtml += '</div>';
                                meghtml += '</div>';
                                meghtml += '<a onclick="goToTheHdnager(\''+ meg +'\');">' +
                                    '<p class="message-item-text">'+meg.msgContent+'</p>' +
                                    '</a>';
                                meghtml += '</div>';
                                meghtml += '</div>';
                            }
                            $('.inbox ').html(meghtml);
                        }
                    }else{
                        var hinthtml = '';
                        hinthtml += '<div class="message-list-empty">';
                        hinthtml += '<img src="../../assets/images/img_msg_pri.png">';
                        hinthtml += '<div>没有消息</div>';
                        hinthtml += '</div>';
                        $('.inbox ').html(hinthtml);
                    }
                    // getMessageOutboxList();
                }
            }, 'get');
        }

        /*发件箱*/
        function getMessageOutboxList() {
            $('.set-read').hide();
            layer.load(2, { shade: [0.15, '#cccccc'] });
            admin.req(uParas.baseUrl + '/ent/message/getMessageList?action=2', null, function (res) {
                if (res.code == 1) {
                    layer.closeAll('loading');
                    $('.outbox ').html("");
                    var messageList = res.data;
                    if(messageList.length > 0){
                        var msghtml = '';
                        for (var i = 0; i < messageList.length; i++) {
                            var meg = messageList[i];
                            if(meg.msgType === 1){ //消息
                                msghtml += '<a   class="message-list-item">';
                                msghtml += '<div style="width: 100%">';
                                msghtml += '<div style="display: flex">';
                                msghtml += '<i class="layui-icon layui-icon-reply-fill c-update message-item-icon" style="font-size: 35px; color: #1E9FFF;"></i>';
                                msghtml += '<div class="message-item-right">';
                                msghtml += '<h2 class="message-item-title">'+meg.addresserName+'</h2>';
                                msghtml += '<h2 class="message-item-title">'+meg.addresseeTime+'</h2>';
                                msghtml += '</div>';
                                msghtml += '</div>';
                                msghtml += '<p class="message-item-text">'+meg.msgContent+'</p>';
                                msghtml += '</div>';
                                msghtml += '</a>';
                            }else if(meg.msgType === 2){ //通知
                                msghtml += '<a  class="message-list-item">';
                                msghtml += '<div style="width: 100%">';
                                msghtml += '<div style="display: flex">';
                                msghtml += '<i class="layui-icon layui-icon-notice c-add message-item-icon" style="font-size: 35px; color: #1E9FFF;"></i>';
                                msghtml += '<div class="message-item-right">';
                                msghtml += '<h2 class="message-item-title">'+meg.addresserName+'</h2>';
                                msghtml += '<h2 class="message-item-title">'+meg.addresseeTime+'</h2>';
                                msghtml += '</div>';
                                msghtml += '</div>';
                                msghtml += '<p class="message-item-text">'+meg.msgContent+'</p>';
                                msghtml += '</div>';
                                msghtml += '</a>';
                            }
                            $('.outbox ').html(msghtml);
                        }
                    }else{
                        var hinthtml = '';
                        hinthtml += '<div class="message-list-empty">';
                        hinthtml += '<img src="../../assets/images/img_msg_pri.png">';
                        hinthtml += '<div>没有消息</div>';
                        hinthtml += '</div>';
                        $('.outbox ').html(hinthtml);
                    }
                }
            }, 'get');
        }

        // 加载更多按钮点击事件
        $('#btn-more1').click(function () {
            var $that = $(this);
            var str = $that.prev()[0].outerHTML;
            for (var i = 0; i < 5; i++) {
                $that.before(str);
            }
        });

        // 清空消息点击事件
        $('.message-btn-clear').click(function () {
            $(this).css('display', 'none');
            $(this).prev().find('.message-list-item').remove();
            $(this).prev().find('.message-btn-more').remove();
            $(this).prev().find('.message-list-empty').css('display', 'block');
        });

    });

    /*设置为已读*/
    function setRead() {
        layer.load(2, { shade: [0.15, '#cccccc'] });
        admin.req(uParas.baseUrl + '/ent/message/setRead', null, function (res) {
            layer.closeAll('loading');
            if (res.code == 1) {
                layer.msg("标注成功！");
                location.reload();
            }else{

            }
        }, 'get');
    }


</script>
</body>
</html>