在用户成功支付之前，显示一个弹出层或文字，这样友好些，该怎么实现啊？

Question

因为是第一次实际操作支付，有很多地方不懂，比如下面的问题(这个问题我会支付20元，当然是当我成功测试后支付.谢谢大家了)
我要的结果是在用户点击了购买后弹出二维码，等待用户支付，并在等待的过程中显示一个弹出层也好文字也可以，但在用户成功支付后就要把这个提示信息隐藏掉，该怎么实现这个功能？我用Ajax不知道怎么写，谢谢大家了。
下面的程序是我写的我知道有问题

```javascript
<script type="text/javascript">
    $(".pay_member").click(function () {//点击购买按钮
        var member_price = $(this).val();//获取到价格
        $.get("/payformen/", { "member_price": member_price }, function (res) {//请求这个地址并携带上价格参数
            if (res.code === 200) {//如果后台返回200，则将后台返回的二维码地址在Layer里打开，等待用户扫描二维码
                layer.open({
                    type: 2,
                    area: ["250px", "250px"],//width*height
                    title: false,
                    shadeClose: false,
                    resize: false,
                    moveType: 0,
                    content: res.pay_address,//二维码图片(后面的就不知道怎么写了)
                })
                $.ajax({
                    type: "GET",
                    contentType: "application/json",
                    url: "/callback/",
                    beforeSend: function () {
                        layer.open({
                            type: 3,
                        })
                    },
                    success: function (data) {
                        if (data == "success") {
                            weui.topTips("<span style='font-size: 20px;color:#ffffff'>购买成功!</span>")
                        }
                    },
                    error: function (data) {
                        if (data === "error") {
                            weui.topTips("<span style='font-size: 20px;color:#ffffff'>购买失败!</span>")
                        }
                    },
                })
            };
            if (res.code === 500) {
                weui.topTips("<span style='font-size: 20px;color:#ffffff'>同学，你还没登录.</span>")
            };
            if (res.code == 300) {
                weui.topTips("<span style='font-size: 20px;color:#ffffff'>同学，你已经是会员了.</span>")
            };
        })
    })
</script>

```

Answer 1

引自免费微信小程序：皆我百晓生

要实现在用户成功支付之前显示一个弹出层或文字的功能，你可以使用以下代码：

<script type="text/javascript">
    $(".pay_member").click(function () {//点击购买按钮
        var member_price = $(this).val();//获取到价格
        var loadingLayer; // 定义加载层变量
        $.ajax({
            type: "GET",
            url: "/payformen/",
            data: { "member_price": member_price },
            beforeSend: function () {
                loadingLayer = layer.open({
                    type: 3,
                    shadeClose: false
                });
            },
            success: function (res) {
                layer.close(loadingLayer); // 关闭加载层
                if (res.code === 200) {//如果后台返回200，则将后台返回的二维码地址在Layer里打开，等待用户扫描二维码
                    var qrCodeLayer = layer.open({
                        type: 1,
                        area: ["250px", "300px"],//width*height
                        title: "等待支付",
                        shadeClose: false,
                        resize: false,
                        moveType: 1,
                        content: '<div><img src="' + res.pay_address + '"></div><div id="loadingText">请等待用户支付</div>',
                    });

                    // 使用定时器轮询支付状态
                    var interval = setInterval(function () {
                        $.ajax({
                            type: "GET",
                            url: "/callback/",
                            success: function (data) {
                                if (data == "success") {
                                    clearInterval(interval);
                                    layer.close(qrCodeLayer); // 关闭二维码弹出层
                                    weui.topTips("<span style='font-size: 20px;color:#ffffff'>购买成功!</span>");
                                }
                            },
                            error: function (data) {
                                if (data === "error") {
                                    clearInterval(interval);
                                    layer.close(qrCodeLayer); // 关闭二维码弹出层
                                    weui.topTips("<span style='font-size: 20px;color:#ffffff'>购买失败!</span>");
                                }
                            }
                        });
                    }, 2000);
                } else if (res.code === 500) {
                    weui.topTips("<span style='font-size: 20px;color:#ffffff'>同学，你还没登录.</span>")
                } else if (res.code == 300) {
                    weui.topTips("<span style='font-size: 20px;color:#ffffff'>同学，你已经是会员了.</span>")
                }
            },
            error: function (data) {
                layer.close(loadingLayer); // 关闭加载层
                weui.topTips("<span style='font-size: 20px;color:#ffffff'>请求失败</span>");
            }
        });
    });
</script>

这段代码会在用户点击购买按钮时，向后台发送请求获取二维码地址，并显示加载层。当后台返回200时，会在弹出层中显示二维码，并使用定时器轮询支付状态。如果支付成功，会关闭弹出层并显示购买成功提示；如果支付失败，会关闭弹出层并显示购买失败提示；如果后台返回500，则显示登录提示；如果返回300，则显示已经是会员提示。

注意：需要引入Layer和weui库。具体效果如下所示：

弹出层:

---------------
|             |
|  二维码图片  |
|             |
|  等待用户支付 |
|             |
---------------

请注意，在代码中我假设了后台返回200是代表获取到了二维码地址，你需要根据实际情况进行修改。此外，根据你对弹出层的要求，你可能需要调整弹出层的样式和位置等。