276 lines
13 KiB
HTML
Executable File
276 lines
13 KiB
HTML
Executable File
{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="{$fieldsJson}" 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>
|