fastadmin 列表页,某一个字段,点击弹窗显示信息

                        {
                            field: 'foreign_logistics_detail', 
                            title: '国外物流最新事件',
                            events: {
                                "click .foreign-logistics-info": function(e, value, row, index) {
                                    console.log(row.foreign_logistics_detail)
                                    var html = '';
                                    html += '<style>* {box-sizing: border-box;margin: 0;padding: 0;}.container {width: 90%;max-width: 1000px;margin: 20px auto;border: 1px solid #ccc;border-radius: 10px;padding: 20px;}.info {display: flex;align-items: center;justify-content: space-between;}.info-item {font-size: 18px;margin-right: 10px;}.info-item span {font-weight: bold;}.timeline {margin-top: 20px;}.timeline-item {display: flex;align-items: center;margin-bottom: 10px;}.timeline-icon {width: 20px;height: 20px;border-radius: 50%;background-color: #eee;}.timeline-icon.active {background-color: #66cc66;}.timeline-line {width: 10px;height: 100%;background-color: #eee;}.timeline-line.active {background-color: #66cc66; }.timeline-content{font-size: 16px;margin-left: 10px;line-height: 1.5;word-break: break-all;overflow-wrap: break-word;max-width: calc(100% - 40px);white-space: pre-wrap;text-align: left;vertical-align: top;color: #333333;font-family: Arial, Helvetica, sans-serif;font-weight: normal;font-style: normal;text-decoration: none;text-transform: none;letter-spacing: normal;word-spacing: normal;text-indent: normal;text-shadow: none;display: inline-block;direction: ltr;unicode-bidi: normal;}</style><div class="container"><div class="info"><div class="info-item">物流单号:<span>';
                                    html += row.foreign_logistics_detail.LogisticCode;
                                    html += '</span></div><div class="info-item">物流状态:<span>';
                                    html += row.foreign_logistics_status_text;
                                    html += '</span></div><div class="info-item">历经时长:<span>';
                                    html += row.foreign_logistics_detail.takeTime??'-';
                                    html += '</span></div><div class="info-item">承运公司:<span>';
                                    html += row.foreign_logistics_detail.Name??'-';
                                    html += '</span></div></div>';

                                    var html2 = '';
                                    if(row.foreign_logistics_detail.Traces.length > 0){
                                        html2 += '<div class="timeline">';
                                        var traces = row.foreign_logistics_detail.Traces;
                                        for (var i = traces.length; i > 0; i--) {
                                            html2 += '<div class="timeline-item"><div class="timeline-icon active"></div><div class="timeline-line active"></div><div class="timeline-content">';
                                            html2 += traces[i-1].AcceptTime;
                                            html2 += '<br>';
                                            html2 += traces[i-1].AcceptStation;
                                            html2 += '</div></div>';
                                        }

                                        html2 += '</div>';
                                    }else{
                                        html2 += '<div style="margin-top: 50px;text-align: center;font-size: 18px;font-weight: bold;">原因:';
                                        html2 +=  row.foreign_logistics_detail.Reason;
                                        html2 += '</div>';
                                    }

                                    var html3 = html + html2;
                                    layer.open({
                                        shadeClose: true, 
                                        type: 1,//基本层类型:     1(页面层)
                                        title: "物流信息",//标题
                                        content: html3,//正文
                                        area: ["1000px", '500px'],//窗口大小
                                    });
                                    return false;
                                },
                            },
                            formatter: function () {
                                return '<a href="javascript:;" class="foreign-logistics-info btn-xs">' + __('查看') + '</a>';
                            }
                        },
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值