duolamaojiazhen/application/admin/view/webpage/add.html

{layout name="layout1" /}
<style>
    #div1{position: absolute;
        left:105%;
        bottom:65%;}
         .w50{
            width:50%;
        }
        .img{
            width: 60px;
            height:60px;
            position: relative;
             background: #f1f1f1;
             margin-right: 10px;
        }
        .img img{
            width: 100%;
            height: 100%;
            object-fit: cover;
           
        }
        .img input{
            position: absolute; 
        }
        .flex{
            display: flex;
            align-items: center;
        }
        .flexs{
             display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .item{
            width: 93%;
            margin: 10px auto;
            border-bottom: 1px solid #f1f1f1;
            border: 1px solid #dfdfdf;
            padding: 10px;
            border-radius: 5px;
        }
        ._img{
            display: flex;
            align-items: center;
            justify-content: center;
        }
        ._img{
            width: 100%;
            height: 100%;
            font-size: 25px;
            color: #999;
        }
        .flexe{
            border: none;
        }
        .w90{
            width: 90%;
        }
        .delline{
            color: red;
        }
</style>
<div class="layui-col-md12">
    <div class="layui-fluid">
    <div class="layui-card">

            <div class="layui-form" lay-filter="">
                <div class="layui-tab layui-tab-card">
                   <div class="body">
                        <div class="layui-form-item" style="margin-top: 20px;">
                            <label class="layui-form-label"><span class="form-label-asterisk">*</span>页面标题：</label>
                            <div class="layui-input-block">
                                <input type="text" name="name" lay-verify="custom_required"  class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item flexs item">
                           <div class="w90 flex">
                                <div class="img"> 
                                     <div class="_img">
                                         +
                                     </div>
                                     <input name="img[]" type="hidden" value=''>
                                </div>
                                <div class="w50">
                                     <input type="text" name="url[]"   value=""  class="layui-input" placeholder="请输入点击图片跳转链接">
                                </div>
                           </div>
                           <div class="delline">删除</div>
                        </div>
                   </div>
                    
                    <div class="flexe item">
                        <button type="button" class="layui-btn" onclick="addline()">新增一列</button>
                    </div>
                    
                    <!--<div class="layui-tab-content">-->
                    <!--    <div class="layui-tab-item layui-show">-->
                    <!--        <label class="layui-form-label"style="white-space: nowrap;">页面内容：</label>-->
                    <!--        <div class="layui-input-block">-->
                    <!--            <textarea  name="service" id="service" lay-verify="content" class="field-content"></textarea>-->
                    <!--        </div>-->
                    <!--    </div>-->
                    <!--</div>-->
                    <div class="layui-form-item layui-hide">
                        <input type="button" lay-submit lay-filter="add-user_level-submit" id="add-user_level-submit" value="确认">
                    </div>
                </div>


            </div>
    </div>
    </div>
</div>
<script>

     var $ = null
    
    function delline(){
        $('.delline').click(function(){
            $(this).parent().remove()
        }) 
       
    }
    
    function upimg(){
         $('.img').off()
         $('.img').click(function(){
             var t = $(this);
            var windows = layer.open({type: 2, title: "上传图片", content: '/admin/file/image.html', area: ["90%", "90%"]});
            window.callback = function (imgs) {
                if(imgs && imgs[0]){
                    t.find('img').remove()
                     t.find('._img').remove()
                      t.append('<img src="'+imgs[0]+'">')
                      t.find('input').val(imgs[0])
                }  
            };
            
        })
    }
    
     function addline(){
        var tp = `
             <div class="layui-form-item flexs item">
               <div class="w90 flex">
                    <div class="img"> 
                         <div class="_img">
                             +
                         </div>
                         <input name="img[]" type="hidden" value= ''>
                    </div>
                    <div class="w50">
                         <input type="text" name="url[]"   value=""  class="layui-input" placeholder="请输入点击图片跳转链接">
                    </div>
               </div>
               <div class="delline">删除</div>
            </div>
        `
        $('.body').append(tp)
        delline()
        upimg()
    }
    
    


    layui.config({
        version:"{$front_version}",
        base: '/static/plug/layui-admin/dist/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index','table','likeedit','like'], function(){
        var $ = layui.$
            ,form = layui.form
            ,like = layui.like
            ,likeedit = layui.likeedit;
            
            
         delline()
        upimg()
        
//富文本上传图片
        likeedit.set({
            uploadImage: {
                url: "{:url('file/image')}",
                type: 'post'
            }
        })
        var service = likeedit.build('service'); //建立编辑器
        var privacy = likeedit.build('privacy'); //建立编辑器
        var after_sale = likeedit.build('after_sale'); //建立编辑器
        form.verify({

            content: function() {
                likeedit.sync(service)
                likeedit.sync(privacy)
                likeedit.sync(after_sale)
            }
        })
        form.verify({

        });
        form.on('submit(setmnp)',function (data) {
            layui.$.ajax({
                url: '{:url("ShopSetting/setPolicy")}'//实际使用请改成服务端真实接口
                ,data: data.field
                ,type: 'post'
                ,success: function(res){

                    // if(res.code == 0)
                    // {
                    //     layer.msg(res.msg, {
                    //         offset: '15px'
                    //         ,icon: 2
                    //         ,time: 1000
                    //     });
                    //     return false;
                    // }

                    //登入成功的提示与跳转
                    layer.msg(res.msg, {
                        offset: '15px'
                        ,icon: 1
                        ,time: 1500
                    }, function(){
                        
                    });
                },
                error:function(res){
                    layer.msg('网络错误', {
                        offset: '15px'
                        ,icon: 2
                        ,time: 1000
                    }, function(){
                        return;
                    });
                }
            });
        });
    });

</script>