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%);z-index:"+this.index+";width:100%;'>" +
            "<div class='col-8 offset-2'><div class='card'><div class='card-body h4 bg-success text-center h-100 m-0'>" +
            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;top:40%;position: fixed;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 h-100 m-0'>" +
            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,yesText,noText){
        if(typeof(yesText)==='undefined')yesText='确定';
        if(typeof(noText)==='undefined')noText='取消';
        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'>"+yesText+"</button>" +
            "<button class='btn btn-success btn-lg cancel ml-4'>"+noText+"</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-1)+";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()
    },
    postBasicRequest(url, params, successExe, isPriority = false, isMultipart = false) {
        if (isPriority)this.setIndex(1099);
        let header = {};
        if (isMultipart)header = {'Content-Type': 'multipart/form-data'};
        window.axios.post(url,params,header).then(res=> {
            if (res.data.success){
                let successMsg = successExe(res.data.data);
                if (successMsg){
                    this.setDuration(2000);
                    this.showSuccess(successMsg);
                }
                return;
            }
            this.setDuration(3000);
            this.show(res.data.data);
        }).catch(err=> {
            console.log(err);
            this.setDuration(3000);
            this.show('网络异常：'+err);
        });
    },
    showErrorAudio:function (){
        let src='/sound/滴答电子.mp3';
         let audio= new Audio(src);
         setTimeout(function (){
             audio.play();
         })
        window.navigator.vibrate(1000);
    }
};
module.exports=tempTip;