layui 使用 layer.open 打开新页面时常见问题

「爱情、让人受尽委屈。」 2022-11-02 11:42 11阅读 0赞

layer.open  代码使用如下

table.on('tool(orderGuestRoomTable)', function (obj) {
                /*订单详情*/
                if (obj.event === "detail") {
                    let btn = [];
                    if (obj.data.status == 0) {
                        btn = ['派遣订单', '取消订单','返回'];
                    } else {
                        btn = ['取消订单','返回'];
                    }
                    if (obj.data.status == 4 || obj.data.status == 13 || obj.data.status == 5) {
                        btn = ['返回'];
                    }
                    localStorage.setItem("orderInfo", JSON.stringify(obj.data))
    
                    layer.open({
                        type: 2,
                        title: '订单详情',
                        content: 'form/orderDetail.html?id=10',
                        maxmin: false,
                        area: ['800px', '620px'],
                        btn: btn,
                        btn1: function (index, layero) {
                            console.log(btn)
                            return false;
                            if( btn[index-1] == '派遣订单') {
                                let submit2 = layero.find('iframe').contents().find("#dispatcher-order-submit");
                                submit2.trigger('click');
                            }else if(btn[index-1] == '取消订单'){
                                let submit = layero.find('iframe').contents().find("#cancel-order-submit");
                                submit.trigger('click');
                            }else{
                                parent.location.reload();
                            }
                        },
                        btn2: function (index, layero) {
                            if(btn[index] == '取消订单'){
                                let submit = layero.find('iframe').contents().find("#cancel-order-submit");
                                submit.trigger('click');
                            }
                        }
                    });
                }
            });

1. 在content 为页面路径时如何将参数传递到对应页面？

方式有两种  a 使用本地缓存  localStorage.setItem("orderInfo", JSON.stringify(obj.data))  这种方式在对应页面直接从缓存中获取

b  使用url传递  form/orderDetail.html?id=10  使用这种方式需要在对应的页面使用特定的方法进行接收

2. 如何自定义按钮功能？

如  开头代码，使用btn1： btn2: ......   即可自定自己的按钮功能

3. 以为一般情况我们需要使用外面的按钮来控制打开的页面的表单提交，所以如何控制呢？

a.在打开面预留提交按钮，但需要隐藏

b.通过外部按钮绑定内部事件

btn2: function (index, layero) {
               if(btn[index] == '取消订单'){    
                    // 核心 
                   let submit = layero.find('iframe').contents().find("#cancel-order-submit");
                      submit.trigger('click');
                    }
                 }

c.在内部页面监听表单提交事件

form.on('submit(cancel-order-submit)', function () {
                sendPostJSON(cancelOrderUrl, {
                    orderNo:vue.order.orderNo,
                },function (res) {
                    if(res.code == 200){
                        layer.msg("取消成功",{time:1000},function () {
                            parent.location.reload();
                        })
    
                    }else{
                        alertError(res)
                    }
                })
                return false
            })