mashangyoujiu/Application/Super/View/App/updateimgs.html

<!DOCTYPE html>
<html>
<!--[1.1.96]-->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>服务商管理后台</title>
    <script src="__PUBLIC__/user/js/jquery-2.0.3.min.js"></script>
    <link href="__PUBLIC__/layui/css/layui.css" rel="stylesheet">
    <script src="__PUBLIC__/layui/layui.js" charset="utf-8"></script>
    <style>
        .box-list-content-title {
            font-size: 20px;
            color: #333333;
            border-bottom: 1px solid #ddd;
            background-color: white;
            line-height: 50px;
            text-align: center;
        }
        .box-content{
            width: 100%;
            padding: 20px 100px 200px;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }
        .box-list-content {
            cursor: auto;
            width: 100%;
            padding: 30px 20px 50px;
            background-color: white;
            border: 1px solid #ededed;
            border-radius: 5px;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }

        .list-content {
            display: inline-block;
            margin-right: 20px;
            margin-bottom: 20px;
            position: relative;
        }

        .list-content img {
            max-width: 300px;
        }

        .del {
            width: 20px;
            height: 20px;
            color: white;
            font-size: 24px;
            position: absolute;
            transform: rotateZ(45deg);
            text-align: center;
            line-height: 20px;
            top: -10px;
            right: -10px;
            border-radius: 50%;
            background-color: rgba(0, 0, 0, 0.4);
            display: none;
            cursor: pointer;
        }

        .list-content:hover > .del {
            display: block;
        }

        .list-content > .del:hover {
            background-color: rgba(0, 0, 0, 0.6);
        }

        .addimg {
            width: 100px;
            height: 100px;
            border: 1px dashed #cccccc;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }

        .addimg > label {
            font-size: 100px;
            color: #cccccc;
            cursor: pointer;
            font-weight: 300;
        }

        .addimgInput {
            position: absolute;
            width: 0;
            height: 0;
            opacity: 0;
        }
        .historyback {
            padding: 6px 22px;
            background: #fff;
            display: block;
            margin: 30px 0 0 20px;
            width: 50px;
            color: #787878;
            text-decoration: none;
            border-radius: 4px;
            border: 1px solid #ddd;
        }
        .historyback:hover{
            border-color: #FF6600;
            color: #FF6600;
        }
        a{
            margin: 0;
            padding: 0;
            text-decoration: none;
        }
    </style>
</head>
<body class="hold-transition skin-blue sidebar-mini" style="cursor: pointer;">
<div class="box-list-content-title">编辑预览图</div>
<div class="box-content">
    <div class="box-list-content">
        <volist name="list" id="li">
            <div class="list-content">
                <a target="_blank" href="{$li.imgurl}">
                    <img src="{$li.imgurl}">
                </a>
                <div class="del" data-id="{$li.id}">+</div>
            </div>
        </volist>
        <div class="addimg">
            <input type="button" class="addimgInput" id="addimgInput" value="添加预览图">
            <label for="addimgInput">+</label>
        </div>
        <center class="form-actions">
            <a class="historyback" href="javacript:void(0);" onclick="back()">返回</a>
        </center>
    </div>

</div>
<script>
    var layer = layui.use(['layer', 'form', 'laydate', 'upload'], function () {
        //文件上传
        var upload = layui.upload;
        //执行实例
        upload.render({
            elem: '#addimgInput',  //绑定元素
            url: '{:U("App/uploadimg")}',  //上传接口
            data: {
                id: "<php>echo I('get.id');</php>"
            },
            done: function (res, index, upload) {
                //上传完毕回调
                if(res.status==1){
                    var child = $(`<div class="list-content">
                                    <a target="_blank" href="${res.imgurl}">
                                        <img src="${res.imgurl}">
                                    </a>
                                    <div class="del" data-id="${res.id}">+</div>
                                </div>`);
                    $('.addimg').before(child);
                    top.layer.msg(res.msg,{icon:1,time:1000});
                }else {
                    top.layer.msg(res.msg);
                }
            }
        });
    });
    function back(){
        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
        parent.layer.close(index); //再执行关闭
    }
    $('.box-list-content').on('click', '.del', function () {
        let _this = this;
        top.layer.open({
            content: '确定删除该预览图吗？'
            ,btn: ['确定', '取消']
            ,yes: function(index, layero){
                //按钮【按钮一】的回调
                $.post("{:U('App/delimg')}",{id:$(_this).attr('data-id')},function (res) {
                    top.layer.msg(res.msg,{time:1000},function () {
                        if(res.status==1){
                            $(_this).parent('.list-content').remove();
                        }
                    })
                })
            }
            ,btn2: function(index, layero){
                //按钮【按钮二】的回调
                //return false 开启该代码可禁止点击该按钮关闭
            }
            ,cancel: function(){
                //右上角关闭回调
                //return false 开启该代码可禁止点击该按钮关闭
            }
        });
    })
</script>
</body>
</html>