116 lines
4.6 KiB
HTML
116 lines
4.6 KiB
HTML
<div class="banner-list"></div>
|
|
<!--图片列表-->
|
|
<script type="text/html" id="goodsImage">
|
|
{{# if(Object.keys(d.list).length){ }}
|
|
{{# for(var i=0;i<d.list.length;i++){ }}
|
|
<div class="item upload_img_square_item" data-index="{{i}}">
|
|
<div class="img-wrap">
|
|
<img src="{{ns.img(d.list[i])}}" layer-src>
|
|
</div>
|
|
<div class="operation">
|
|
<i title="图片预览" class="iconfont iconreview js-preview"></i>
|
|
<i title="删除图片" class="layui-icon layui-icon-delete js-delete" data-index="{{i}}"></i>
|
|
<div class="replace_img" data-index="{{i}}">点击替换</div>
|
|
</div>
|
|
</div>
|
|
{{# } }}
|
|
{{# if(d.list.length < d.max){ }}
|
|
<div class="item js-add-goods-image upload_img_square">+</div>
|
|
{{# } }}
|
|
{{# }else{ }}
|
|
<div class="item js-add-goods-image upload_img_square">+</div>
|
|
{{# } }}
|
|
</script>
|
|
<script>
|
|
var BANNER_LIST = [];
|
|
$(function () {
|
|
layui.use(['laytpl'], function() {
|
|
var laytpl = layui.laytpl;
|
|
var data = {
|
|
list: BANNER_LIST || [],
|
|
max: 10
|
|
};
|
|
//渲染商品主图列表
|
|
function refreshGoodsImage() {
|
|
var goods_image_template = $("#goodsImage").html();
|
|
laytpl(goods_image_template).render(data, function (html) {
|
|
var bannerList = data['list'];
|
|
|
|
$(".banner-list").html(html);
|
|
//加载图片放大
|
|
loadImgMagnify();
|
|
if (bannerList.length) {
|
|
|
|
//预览
|
|
$(".banner-list .js-preview").click(function () {
|
|
$(this).parent().prev().find("img").click();
|
|
});
|
|
|
|
//图片删除
|
|
$(".banner-list .js-delete").click(function () {
|
|
var index = $(this).attr("data-index");
|
|
bannerList.splice(index, 1);
|
|
refreshGoodsImage();
|
|
});
|
|
|
|
// 拖拽
|
|
// $('.banner-list .upload_img_square_item').arrangeable({
|
|
// //拖拽结束后执行回调
|
|
// callback: function (e) {
|
|
// var indexBefore = $(e).attr("data-index");//拖拽前的原始位置
|
|
// var indexAfter = $(e).index();//拖拽后的位置
|
|
// var temp = bannerList[indexBefore];
|
|
// bannerList[indexBefore] = bannerList[indexAfter];
|
|
// bannerList[indexAfter] = temp;
|
|
// refreshGoodsImage();
|
|
// }
|
|
// });
|
|
}
|
|
//最多传十张图
|
|
if (bannerList.length < data['max']) {
|
|
$(".js-add-goods-image").show();
|
|
} else {
|
|
$(".js-add-goods-image").hide();
|
|
}
|
|
});
|
|
}
|
|
//添加商品主图
|
|
$("body").on("click", ".js-add-goods-image", function () {
|
|
var max = data['max'],imageList = data['list'];
|
|
openAlbum(function (data) {
|
|
dealWithPicThumb(data);
|
|
for (var i = 0; i < data.length; i++) {
|
|
if (imageList.length < max) BANNER_LIST.push(data[i].pic_path);
|
|
}
|
|
refreshGoodsImage();
|
|
}, max);
|
|
});
|
|
//处理图片缩略
|
|
function dealWithPicThumb(data){
|
|
var pic_id_arr = [];
|
|
data.forEach(function(item, index){
|
|
if(!item.is_thumb){
|
|
pic_id_arr.push(item.pic_id);
|
|
}
|
|
})
|
|
|
|
if(pic_id_arr.length > 0){
|
|
$.ajax({
|
|
url: ns.url("shop/album/createThumb"),
|
|
data: {
|
|
pic_ids:pic_id_arr.toString(),
|
|
},
|
|
dataType: 'JSON',
|
|
type: 'POST',
|
|
success: function (res) {
|
|
if(res.code >= 0){
|
|
//console.log(res);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
refreshGoodsImage();
|
|
});
|
|
});
|
|
</script> |