zzwy2/view/manager/widget/multi.html

{php}
use app\service\Image as WImage;
{/php}
<div class="upload-image-box" xmlns="http://www.w3.org/1999/html">
    <input type="hidden" class="append-val" value="{$append}">
    <div id="upload_img_list{$append}" class="upload_img_list">
        {if !empty($imgs)}
        {php}
        $imgs = json_decode($imgs, true);
        $imgs = array_values($imgs);
        {/php}
        {foreach $imgs as $k => $img}
        <dd class="item_img" id="img_{$k}">
            <div class="imgs">
                <div class="operate">
                    <i onclick="UPLOAD_IMG_DEL(this)" class="close layui-icon"></i>
                </div>
                <div class="layer-photos">
                    <img src="{$img.src}" layer-src="{$img.src}"/>
                    <input type="hidden" name="img{$append}[{$k}][src]" value="{$img.src}" class="info-src" />
                </div>
                <div class="operate2">
<!--                    <i class="img-change layui-icon" title="替换图片"></i>-->
<!--                    <i onclick="CHANGE_MULTI_CLOUD_IMG(this)" class="cloud-img-change layui-icon" title="选择替换图片"></i>-->
                </div>
            </div>
            <div class="info">
                {foreach $fields as $name => $desc}
                {if $name == 'desc'}
                <textarea class="layui-textarea" name="img{$append}[{$k}][{$name}]" placeholder="{$desc}">{$img[$name] ?? ''}</textarea>
                {else}
                <input type="text" class="layui-input" name="img{$append}[{$k}][{$name}]" value="{$img[$name] ?? ''}" placeholder="{$desc}" />
                {/if}
                {/foreach}
            </div>
        </dd>
        {/foreach}
        {/if}
    </div>
    <div class="upload_img_btn" id="upload-images{$append}">
        <i></i><p>上传图片</p>
    </div>
    <div class="upload_img_btn" id="serverImgList{$append}" style="margin-left: 15px;">
        <i></i><p>服务器图片</p>
    </div>
    <div class="layui-clear"></div>
    <div class="upload-image-points">
        {if !empty($imgSize)}
        <div class="layui-form-mid layui-word-aux">注：图片最佳尺寸为： {$imgSize} 数字0表示不限制</div>
        {else /}
        <div class="layui-form-mid layui-word-aux">请上传大小合适的图片</div>
        {/if}
    </div>
</div>
<style type="text/css">
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0;}
</style>
<script type="text/javascript">
    var _token = $('#token').attr('content');
    var append = "{$append}";
    var page = 1;

    $(document).on("click", ".layer-photos", function(e) {
        layer.photos({
            photos: {
                "data": [{
                    "src": e.target.src
                }]
            },
            anim: 5
        });
    });

    $(document).ready(function() {
        var numid = $('#upload_img_list{$append}>dd').length;
        $(".upload_img_list").sortable({
            cursor: "move",
            items: "dd", //只是li可以拖动
            opacity: 0.6, //拖动时，透明度为0.6
            revert: true, //释放时，增加动画
            update: function(event, ui) { //更新排序之后
                //alert($(this).sortable("toArray"));
            }
        });
        var uploadUrl = "{:url('manager.upload/image')}";
        layui.use(['upload', 'element'], function() {
            var upload = layui.upload;
            var element = layui.element;
            upload.render({
                elem: '#upload-images{$append}',
                url: uploadUrl,
                data: {_token:_token},
                field: 'image',
                multiple: true,
                before: function(obj) {
                    layer.msg('图片上传中...', {
                        icon: 16,
                        shade: 0.01,
                        time: 0
                    })
                },
                done: function(res) {
                    if(res.code == 0){
                        layer.close(layer.msg()); //关闭上传提示窗口
                        //调用多图上传方法,其中res.imgid为后台返回的一个随机数字
                        let fieldList = generateFiledHtml(numid, `img{$append}`);

                        $('#upload_img_list{$append}').append('<dd class="item_img" id="img_'+ append + numid +'">'+
                            '<div class="imgs"><div class="operate"><i onclick="UPLOAD_IMG_DEL(this)" class="close layui-icon"></i></div>'+
                            '<img src="' +res.data.src +'"></div>'+
                            '<input type="hidden" name="img{$append}['+numid+'][src]" value="'+ res.data.src +'" />'+
                            '<div class="info">'+ fieldList +'</div></dd>');
                        numid++;

                        // $('#upload_img_list{$append}').append('<dd class="item_img" id="img_' + numid +'">'+
                        // '<div class="imgs"><div class="operate"><i onclick="UPLOAD_IMG_DEL(this)" class="close layui-icon"></i></div>'+
                        // '<img src="' +res.data.thumb_src +'"></div>'+
                        // '<div class="info">'+
                        //     '<textarea name="img{$append}['+numid+'][title]" class="layui-textarea" placeholder="标题"></textarea>' +
                        //     '<textarea name="img{$append}['+numid+'][desc]" class="layui-textarea" placeholder="描述"></textarea>' +
                        //     '<input type="text" class="layui-input" name="img{$append}['+numid+'][alt]" value="" placeholder="ALT属性，选填" />'+
                        //     '<input type="text" class="layui-input" name="img{$append}['+numid+'][link]" value="" placeholder="链接，选填" />'+
                        //     '<input type="text" class="layui-input" name="img{$append}['+numid+'][other]" value="" placeholder="其他，选填" />'+
                        //     '<input type="hidden" name="img{$append}['+numid+'][src]" value="' +res.data.src + '" />' +
                        // '</div></dd>');
                        // numid++;
                        $(window).trigger("resize");
                    }else{
                        layer.msg(res.msg);
                    }
                }
            })

            $('#serverImgList{$append}').click(function(){
                var html = '';
                page = 1;
                $.ajax('/manager/file/list',{
                    data:{
                        type:'img',
                        page:page,
                        size:30
                    },
                    headers: {
                        'X-CSRF-TOKEN': _token
                    },
                    dataType:'json',//服务器返回json格式数据
                    type:'post',//HTTP请求类型
                    timeout:10000,//超时时间设置为10秒；
                    success:function(data){
                        if(data.code == 0){
                            if(data.data.length > 0){
                                html += '<div class="layui-card-body"><div class="serverImgsList"><ul id="selectable">'
                                $.each(data.data,function(i,item){
                                    html += '<li><img src="'+item.src+'" data-box="upload_img_list{$append}" data-field="{:json_encode($fields)}" data-append="{$append}" onclick="imgListUrl(this, ' + numid + ')"></li>'
                                })
                                html += '</ul></div>';
                                if(data.data.length >= 30){
                                    html += '<div class="serverMore"><a data-box="upload_img_list{$append}" data-append="{$append}" onclick="imgsList(this, ' + numid + ')">加载更多</a></div>'
                                    page++
                                }
                                html += '<div class="layui-clear"></div></div>';
                                layer.open({
                                    type: 1,
                                    title: '服务器图片',
                                    shadeClose: true,
                                    area: ['800px',''], //宽高
                                    move: false,
                                    content: html,
                                    success:function(layero, index) {
                                        alertRender()
                                        layero.find('.serverImgsList ul li img').attr('data-id',index)
                                        layero.find('.serverMore a').attr('data-id',index)
                                    }
                                });
                                numid++;
                            }else{
                                layer.msg('暂无数据')
                            }
                        }
                    },
                    error:function(xhr,type,errorThrown){

                    }
                });

            })

        });
    });
    function imgListUrl(obj, numid){
        let append = $(obj).data('append');
        let fields = {:json_encode($fields, 256)};
        let fieldsHtml = '';
        for (let key in fields) {
            if (key == 'desc') {
                fieldsHtml += `<textarea class="layui-textarea" name="img${append}[${numid}][${key}]" placeholder="${fields[key]}" ></textarea>`;
            } else {
                fieldsHtml += `<input type="text" class="layui-input" name="img${append}[${numid}][${key}]" value="" placeholder="${fields[key]}" />`;
            }
        }
        var imTpl = '<dd class="item_img" id="img_' + numid +'">'+
        '<div class="imgs"><div class="operate"><i onclick="UPLOAD_IMG_DEL(this)" class="close layui-icon"></i></div>'+
        '<img src="' + $(obj).attr('src') +'"></div>'+
        '<div class="info">'+
            fieldsHtml+
            // '<textarea name="img'+append+'['+numid+'][title]" class="layui-textarea" placeholder="标题"></textarea>' +
            // '<textarea name="img'+append+'['+numid+'][desc]" class="layui-textarea" placeholder="描述"></textarea>' +
            // '<input type="text" class="layui-input" name="img'+append+'['+numid+'][alt]" value="" placeholder="ALT属性，选填" />'+
            // '<input type="text" class="layui-input" name="img'+append+'['+numid+'][link]" value="" placeholder="链接，选填" />'+
            // '<input type="text" class="layui-input" name="img'+append+'['+numid+'][taskId]" value="" placeholder="taskId，选填" />'+
            '<input type="hidden" name="img'+append+'['+numid+'][src]" value="' + $(obj).attr('src') + '" />' +
        '</div></dd>';
        numid++;
        $('#'+$(obj).attr('data-box')).append(imTpl);
        parent.layer.close($(obj).attr('data-id'));
    }

    function generateFiledHtml(numId, fieldName) {
        let fieldList = '';
        {foreach $fields as $name => $desc}
        fieldList += '<input type="text" class="layui-input" name="'+ fieldName +'['+numId+'][{$name}]" value="" placeholder="{$desc}" />';
        {/foreach}
        return fieldList;
    }

    function imgsList(obj, numid){
        $.ajax('/manager/file/list',{
            data:{
                type:'img',
                page:page,
                size:30
            },
            headers: {
                'X-CSRF-TOKEN': _token
            },
            dataType:'json',//服务器返回json格式数据
            type:'post',//HTTP请求类型
            timeout:10000,//超时时间设置为10秒；
            success:function(data){
                if(data.code == 0){
                    if(data.data.length > 0){
                        var html = ''
                        $.each(data.data,function(i,item){
                            html += '<li><img src="'+item.src+'" data-id="'+$(obj).attr('data-id')+'" data-box="'+$(obj).attr('data-box')+'" onclick="imgListUrl(this, ' + numid + ')"></li>'
                        })
                        $(obj).parent().parent().find('.serverImgsList ul').append(html)
                        $(window).trigger("resize");
                        if(data.data.length < 30){
                            $(obj).parent().append('<p>没有了</p>')
                            $(obj).parent().find('a').remove();
                        }else{
                            page++;
                        }
                    }else{
                        layer.msg(data.msg)
                    }
                }
            },
            error:function(xhr,type,errorThrown){

            }
        });
    }


    /*
    删除上传图片
    */
    function UPLOAD_IMG_DEL(divs) {
        $(divs).closest('dd.item_img').remove()
    }

</script>