baoshi-was/resources/js/utilities/tempTip.js

const tempTip={
    fadingDuration:4500,
    inputType:'input',
    index:99,
    setIndex:function(index){
        this.index=parseInt(index);
    },
    setDuration:function(milliSec){
        this.fadingDuration=parseInt(milliSec);
    },
    setInputType:function(type){
        this.inputType=type;
    },
    showSuccess:function(text){
        let tiper=$("<div class='row' style='color:white;opacity:0.9;position:fixed;top:40%;transform:translateY(-50%);width:100%;'>" +
            "<div class='col-8 offset-2'><div class='card'><div class='card-body h4 bg-success text-center'>" +
            text +
            "</div></div></div></div>");
        tiper.animate({opacity:'0'},this.fadingDuration,'swing',function () {
            tiper.remove();
        });
        $('body').append(tiper)
    },
    show:function(text){
        let tiper=$("<div class='row' style='color:white;opacity:0.9;position:fixed;top:40%;transform:translateY(-50%);width:100%;z-index:"+this.index+";'>" +
            "<div class='col-8 offset-2'><div class='card'><div class='card-body h2 bg-danger text-center'>" +
            text +
            "</div></div></div></div>");
        tiper.animate({opacity:'0'},this.fadingDuration,'swing',function () {
            tiper.remove();
        });
        $('body').append(tiper)
    },
    okWindow:function(text,okText){
        let bg=$("<div style='opacity:0.4;position:fixed;top:0;width:100%;height:100%;z-index:"+this.index+";background-color:#000;'></div>" );
        if(typeof(okText)=='undefined')okText='确定';
        let tiper=$("<div class='row' style='opacity:0.9;position:fixed;top:40%;transform:translateY(-50%);width:100%;z-index:"+(this.index+1)+"'>" +
            "<div class='col-8 offset-2'><div class='card'><div class='card-body h2 text-center'>" +
            text +
            "<p><button class='btn btn-success btn-lg okWindow'>"+okText+"</button></p><div>" +
            "</div></div></div>");
        tiper.find('.okWindow').on('click',function () {
            tiper.off('click');
            tiper.remove();
            bg.remove();
        });
        $('html').css('height', '100%').append(bg);
        $('body').append(tiper)
    },
    waitingTip:function(text){
        let bg=$("<div style='opacity:0.4;position:fixed;top:0;width:100%;height:100%;z-index:"+this.index+";background-color:#fff;' class='tipperBg'></div>" );
        let tipper=$("<div class='row tipper' style='color:white;opacity:0.9;position:fixed;top:40%;transform:translateY(-50%);width:100%;z-index:"+(this.index+1)+";'>" +
            "<div class='col-8 offset-2'><div class='card-body h5 bg-dark text-center' style='border-radius: 50px'>" +
            text +
            "</div></div></div>");
        tipper.animate({opacity:'0'},this.fadingDuration,'swing',function () {
            tipper.remove();
            bg.remove();
        });
        $('html').css('height', '100%').append(bg);
        $('body').append(tipper);
    },
    cancelWaitingTip:function(){
        let bg=$(".tipperBg");
        let tipper=$(".tipper");
        tipper.remove();
        bg.remove();
    },
    confirm:function(text,yesFunc,noFunc){
        let bg=$("<div style='opacity:0.4;position:fixed;top:0;width:100%;height:100%;z-index:"+this.index+";background-color:#000;'></div>" );
        let tiper=$("<div class='row' style='color:#000;opacity:0.9;position:fixed;top:40%;transform:translateY(-50%);width:100%;z-index:"+(this.index+1)+"'>" +
            "<div class='col-8 offset-2'><div class='card'><div class='card-body'><div class='card-title h4'>" +
            text +
            "</div><div class='card-text'><button class='btn btn-dark btn-lg ok'>确定</button>" +
            "<button class='btn btn-success btn-lg cancel ml-4'>取消</button></div>" +
            "</div></div></div></div>");
        let $ok = tiper.find('.ok');
        let $cancel = tiper.find('.cancel');
        $ok.on('click',function () {
            $ok.off('click');
            $cancel.off('click');
            tiper.remove();
            bg.remove();
            yesFunc();
        });
        $cancel.on('click',function () {
            $ok.off('click');
            $cancel.off('click');
            tiper.remove();
            bg.remove();
            if(typeof noFunc!='undefined')
                noFunc();
        });
        $('html').css('height', '100%').append(bg);
        $('body').append(tiper);
    },
    inputVal:function(tipText,resultFunc){
        let bg=$("<div style='opacity:0.4;position:fixed;top:0;width:100%;height:100%;z-index:"+this.index+";background-color:#000;'></div>" );
        let tiper=$("<div class='row' style='color:#000;opacity:0.9;position:fixed;top:40%;transform:translateY(-50%);width:100%;z-index:"+this.index+"'>" +
            "<div class='col-8 offset-2'><div class='card'><div class='card-body'><div class='card-title h5'>" +
            tipText +
            "</div><div><input type='"+this.inputType+"' class='input form-control mb-3'/></div>" +
            "<div class='card-text'><button class='btn btn-outline-success ok'>确定</button></div>" +
            "</div></div></div></div>");
        let $ok = tiper.find('.ok');
        let $input = tiper.find('.input');
        $ok.on('click',function () {
            $ok.off('click');
            tiper.remove();
            bg.remove();
            resultFunc($input.val())
        });
        $('html').css('height', '100%').append(bg);
        $('body').append(tiper);
        $input.focus()
    },
};
module.exports=tempTip;