zhongshen_project/addon/giftcard/shop/view/media/media.html

{extend name="app/shop/view/base.html"/}
{block name="resources"}
<link rel="stylesheet" type="text/css" href="GIFTCARD_CSS/media_manager.css" />
<style>
	body{background-color: #fff;}
	#iframeIcon{border: none;width: 100%;height: 449px;}
	.media-box .media-list-box{height: 380px;margin-right: 20px;display: flex;flex-direction: column;}
	.media-box .media-list-box .media-list {flex: 1;height: 0;overflow-y: scroll}
	.media-box .media-list-box .media-list::-webkit-scrollbar{display: none;}
	.media-box .media-img{max-height: 336px;}
	.media-box .media-img li{width: 185px;height: auto; margin: 0 7px 15px;}
	.media-box .media-img li div{height: 119.7px;line-height: 119.7px;background-size: cover;background-repeat: no-repeat;background-position: center;cursor: pointer;}
	.media-box .media-img li:nth-child(5n){margin-right: 0;}
	.layui-tab-content{padding: 0;height: 449px;}
	.layui-tab{margin: 5px 0 0;}
	.layui-tab .layui-tab-item{height: 449px;}
	.layui-laypage{margin: 10px 0 0;}
	.layui-tab-title {margin: 0 20px}
	#media {padding: 20px 20px 0;}
	.page {text-align: right}
</style>
{/block}
{block name='body'}
<div class="layui-tab layui-tab-brief media-tab">
	<ul class="layui-tab-title layui-hide">
		<li class="layui-this">选择图片</li>
	</ul>
	<div class="layui-tab-content">
		<div id="media" class="layui-tab-item">
			<div class="media-box">
				<div class="media-content">
					<ul class="media-img"></ul>
					<div id="paged" class="page"></div>
				</div>
			</div>
		</div>
		<div class="layui-tab-item">
			<iframe id="iframeIcon" src=""></iframe>
		</div>

		<input type="hidden" name="media_ids" value="{$media_ids}" />
	</div>
</div>

<!-- 图片展示 -->
<script type="text/html" id="mediaList">
	{{# layui.each(d.list,function(index,item){ }}
	<li data-media-id="{{item.media_id}}" data-json_data='{{JSON.stringify(item)}}' class="media-list-item">
		<div class="bg-color-gray" style="background-image:url({{ ns.img(item.media_path) }})">
			{{#  if( getActiveArrayIndex(item.media_id) != "-1"){ }}
			<div class="image-box-active border-color"><i class="active-index">{{ getActiveArrayIndex(item.media_id) }}</i></div>
			{{#  } }}
		</div>
	</li>
	{{# }) }}
	{{#  if(d.list.length === 0){ }}
	<div class="empty-data">暂无数据</div>
	{{#  } }}
</script>

<script>
	var form, laytpl, laypage, upload,element,
			limit = 10,
			active_array = [],
			repeat_flag = false;
	layui.use(['form', 'laytpl', 'laypage', 'upload', 'element'], function() {
		form = layui.form;
		laytpl = layui.laytpl;
		laypage = layui.laypage;
		element = layui.element;
		upload = layui.upload;

		form.render();
		//初始化数据
		init();

		//监听搜索事件
		form.on('submit(search)', function() {
			mediaImgList(1, limit);
		});
	});

	/**
	 * 素材图片加载
	 * @param page
	 * @param limit
	 */
	function mediaImgList(page, limit) {
		$.ajax({
			url: ns.url("giftcard://shop/media/media"),
			type: "POST",
			dataType: "JSON",
			async: false,
			data: {
				limit,
				page,
				media_name: $(".media-img-sreach").val(),
				app_module:ns_url.appModule,
				site_id:ns_url.siteId
			},
			success: function(res) {
				laytpl($("#mediaList").html()).render(res.data, function(data) {
					$(".media-img").html(data);
				});
				laypage.render({
					elem: 'paged',
					count: res.data.count,
					limit,
					curr: page,
					jump: function(obj, first) {
						if (!first) {
							mediaImgList(obj.curr, obj.limit);
						}
					}
				})
			}
		})
	}

	/**
	 * 选择个体
	 */
	function checkItem() {
		$("#media").unbind('click').on("click", ".media-list-item", function() {
			var json_data = $(this).data("json_data");
			json_data.id = parseInt(json_data.media_id);

			if ($(this).find(".image-box-active").length > 0) {
				var active_index = getDelateActiveArrayIndex(json_data.id);
				sortActiveArrayIndex(active_index);
				$(this).find(".image-box-active").remove();
			} else {
				json_data.index = active_array.length + 1;
				if (json_data.index > imgNum) {
					$(".media-box .media-img li").each((index,item) => {
						if(active_array.length > 0 && $(item).attr("data-media-id") == active_array[0].media_id)
							$(item).find(".image-box-active").remove();
					});
					var active_index = active_array.length > 0 ? getDelateActiveArrayIndex(active_array[0].media_id) : 0;
					sortActiveArrayIndex(active_index);
					--json_data.index;
				}
				active_array.push(json_data);
				var active_html = '<div class="image-box-active border-color"><i class="active-index">' + active_array.length +
						'</i></div>';
				$(this).find("div").append(active_html);
			}
		});
	}

	//获取选择图片信息
	function getCheckItem(callback) {
		if (typeof callback != "function") return false;
		if($(".layui-tab-content .layui-tab-item").eq(0).hasClass("layui-show")){
			callback(active_array);
		}else{
			var currIcon = document.getElementById('iframeIcon').contentWindow.currIcon;
			callback(currIcon);
		}

	}

	//获取选中
	function getActiveArrayIndex(id) {
		var delete_index = -1;
		$.each(active_array, function(i, item) {
			if (item.media_id == id) {
				delete_index = item.index;
				return false;
			}
		});
		return delete_index;
	}

	//删除选中
	function getDelateActiveArrayIndex(id) {
		var delete_index;
		$.each(active_array, function(i, item) {
			if (item.id == id) {
				delete_index = item.index;
				active_array.splice(i, 1);
				return false;
			}
		});
		return delete_index;
	}

	//重新排序
	function sortActiveArrayIndex(index) {
		$.each(active_array, function(i, item) {
			var item_index = item.index;
			if (item_index > index) {
				active_array[i]["index"] = item_index - 1;
				if ($("#media").find(".media-list-item[data-media-id = '" + item["id"] + "']").length > 0) {
					$("#media").find(".media-list-item[data-media-id = '" + item["id"] + "']").find(".image-box-active i ").text(item["index"]);
				}
			}
		})
	}

	/**
	 * 初始化数据
	 */
	function init() {
		mediaImgList(1, limit); //分组图像
		checkItem(); //选择个体
		$(".layui-tab-content .layui-tab-item").eq(0).addClass('layui-show').siblings().removeClass('layui-show');
	}

	var search = window.location.search,
		imgNum = parseInt(getSearchString('imgNum', search));
	function getSearchString(key, Url) {
		var str = Url;
		str = str.substring(1, str.length); // 获取URL中?之后的字符（去掉第一位的问号）
		// 以&分隔字符串，获得类似name=xiaoli这样的元素数组
		var arr = str.split("&");
		var obj = new Object();
		// 将每一个数组元素以=分隔并赋给obj对象
		for (var i = 0; i < arr.length; i++) {
			var tmp_arr = arr[i].split("=");
			obj[decodeURIComponent(tmp_arr[0])] = decodeURIComponent(tmp_arr[1]);
		}
		return obj[key];
	}

</script>
{/block}