消息通知弹框（layer）

1. 用户从app上操作催单，后台管理系统弹出一个消息提醒弹框，该弹框要求位于所有页面之上的右下角，即无论用户处于哪个页面，通知弹窗永远在最上面。通知弹窗默认展示5s，5s内不允许查看全部和关闭；5s后允许查看全部和关闭

2. 实现方案

用户点击催单的时候，往redis存储一条信息，后台页面每10秒查询一次redis，有数据就弹框

3. 弹框实现代码

home.ftl

<script>
    $(document).ready(function () {
        checkNumByUser();
        //循环执行，每隔10秒执行一次
        window.setInterval(getReminderNoticeByUser, 10000);
    });
</script>

reminder.js

var i = 5;
function getReminderNoticeByUser() {
    $.ajax({
        url: window.base + "/xxx/get-notice",
        dataType:'json',
        type:'post',
        success:function (res) {
            if(res.errcode =='0'){
                var reminderBillNum = $(".reminder-billNum").val();
                if(reminderBillNum == res.content.billNum){
                    console.log("订单通知已弹出"+reminderBillNum);
                    return;
                }else{
                    $(".reminder-billNum").val(res.content.billNum);
                }
                i=5;
                //弹出层
                parent.layer.open({
                    type: 1,
                    title: '<div style="text-align:center;color: #990033;">用户催单提醒</div>',
                    area: '300px',
                    offset:'rb',
                    content: '<div class="modal-body">'+res.content.message+'</div>',
                    shade:0,
                    skin:'reminder-skin',
                    btn: ['查看全部('+i +')'], //按钮组
                    yes: function (index) {//layer.msg('yes');    //点击确定回调
                        debugger;
                        console.log("wpptest")
                        if (i<=0) {
                            layer.close(index);
                            var url =window.base+ "/notificationCenter/page";
                            window.parent.Menus.open(url,"通知中心",true,true)
                            parent.layer.closeAll();
                            $.ajax({
                                url: window.base + "/order/reminder/clear-notice?billNum="+res.content.billNum,
                                type: 'POST',
                                contentType: false,
                                processData: false,
                                success: function (result) {
                                    console.log(result);
                                },
                                error: function (err) {
                                    console.log(err);
                                }
                            })
                        }
                    },
                    success: function () {
                        $(".layui-layer-btn0").css("backgroundColor", "#92B8B1");
                        var fn = function () {
                            $(".layui-layer-btn0").text('查看全部('+i+')');
                            i--;
                        };
                        interval = setInterval(function () {
                            fn();
                            if (i <= 0) {
                                $(".layui-layer-btn0").css("backgroundColor", "#019F95");
                                $(".layui-layer-btn0").text('查看全部');
                                clearInterval(interval);
                            }
                        }, 1000);
                    },
                    cancel: function () {
                        debugger;
                        if(i<=0){
                            parent.layer.closeAll();
                            $.ajax({
                                url: window.base + "/xxx/clear-notice?billNum="+res.content.billNum,
                                type: 'POST',
                                contentType: false,
                                processData: false,
                                success: function (result) {
                                    console.log(result);
                                },
                                error: function (err) {
                                    console.log(err);
                                }
                            })
                        }else {
                            return false;
                        }
                    }
                });
            }
        },
    })
}

4. 想让弹框没有遮罩层

layer组件有一个属性skin，可以指定样式class，例如skin:'reminder-skin'

.reminder-skin{
    box-shadow: 0 0 0 rgba(0,0,0,0) !important;/*前景无阴影*/
}

5. 倒计时处理

success: function () {
    $(".layui-layer-btn0").css("backgroundColor", "#92B8B1");
    var fn = function () {
        $(".layui-layer-btn0").text('查看全部('+i+')');
        i--;
    };
    interval = setInterval(function () {
        fn();
        if (i <= 0) {
            $(".layui-layer-btn0").css("backgroundColor", "#019F95");
            $(".layui-layer-btn0").text('查看全部');
            clearInterval(interval);
        }
    }, 1000);
},