Question

我正在使用Laravel构建应用程序。我有一个付款页面，该页面的设计方式是当用户单击付款按钮时，我会发出甜蜜警报库并显示一条消息，提示用户应检查手机。 甜蜜警报弹出窗口还具有60秒的倒计时计时器，效果很好。当计时器计数时，我通过AJAX将有效负载推送到后端，从而使用了支付网关API并监听状态。支付失败时，我需要关闭甜蜜警报弹出框（带有计时器），并启动另一个不起作用的甜蜜警报弹出框（带有不同的消息）。.

请协助？

带有计时器的甜警报代码

  (function customSwal() {
        swal({
            title: "Message Sent",
            icon: '{{ asset('assets/images/mpesa.png')}}',
            imageWidth: 30,
            imageHeight: 30,
            imageAlt: 'Mpesa Icon',
            text: "Please Check your Phone for a payment dialogue..." + timer,
            timer: !isTimerStarted ? timer * 1000 : undefined,
            closeOnClickOutside: false,
            buttons:false
        });
        isTimerStarted = true;
        if(timer) {
            timer--;
            setTimeout(customSwal, 1000);
        }
})();

要提交到后端的AJAX代码

$.ajax({
    type: "POST",
    url: "payment",
    data:JSON.stringify(type),
    contentType: 'application/json',
    dataType: "json",
    success: function(response){
        //Not paid
        if(response == 'unpaid'){
            //Close previous alert (with timer)
            swal.close();
            //Open another alert
            swal({
                title: "Ooops!",
                text: "Transaction Cancelled, Please try again",
                icon: "info",
                button: "Try Again",
            });
        }
    }
});

Answer 1

var paymentPopupRef = null;
var paymentPopupTimerRef = null;
var paymentTimeInterval = 10000;

function updatePaymentPopupText() {
    if (!paymentPopupRef) { return; }
    paymentPopupRef.update({ text: `Please Check your Phone for a payment dialogue. I will close in ${parseInt(Swal.getTimerLeft() / 1000)} seconds` });
}

function openPaymentPopup() {
    paymentPopupRef = paymentPopupRef || Swal.fire({
        title: "Message Sent",
        text: `Please Check your Phone for a payment dialogue. I will close in ${parseInt(paymentTimeInterval / 1000)} seconds`,
        timer: paymentTimeInterval,
        onBeforeOpen: () => {
            paymentPopupTimerRef = setInterval(() => updatePaymentPopupText(), 1000);
        },
        onClose: () => {
            clearInterval(paymentPopupTimerRef);
            paymentPopupRef = paymentPopupTimerRef = null;
        }
    });
}

function closePaymentPopup() {
    (!paymentPopupRef) && paymentPopupRef.close()
}

function makePayment() {
    $.ajax({
        type: "POST",
        url: "payment",
        data: JSON.stringify({}),
        contentType: 'application/json',
        dataType: "json",
        success: function (response) {
            if (response == 'unpaid') {
                closePaymentPopup();
                Swal.fire({
                    title: "Ooops!",
                    text: "Transaction Cancelled, Please try again",
                    icon: "info",
                    button: "Try Again",
                });
            }
        }
    });
}

openPaymentPopup();
makePayment();

问题关闭Sweet Alert弹出窗口并通过AJAX启动另一个Sweet Alert弹出窗口

1 个答案: