yueshengshop/app/shop/view/goods/goods_select.html

{extend name="base"/}
{block name="resources"}
<style>
	.select-goods{padding: 20px 20px 0;}
	.contraction{display: inline-block;margin-right: 5px;}
	.contraction span{cursor: pointer;display: inline-block;width: 17px;height: 17px;text-align: center;line-height: 14px;/* border: 1px solid #e9e9e9;*/user-select: none;/* background: #fff;*/}
	.sku-list{display: none;border-bottom: 1px solid #e6e6e6;}
	.sku-list td:nth-of-type(2){display: flex;align-items: center;}
	.sku-list td{border-bottom: 0;padding: 5px 15px !important;}
</style>
{/block}
{block name="body"}
<div class="select-goods">
	<div class="ns-single-filter-box">
		<div class="layui-form">
			<div class="layui-input-inline">
				<input type="text" name="goods_name" placeholder="请输入商品名称" class="layui-input">
				<button type="button" class="layui-btn layui-btn-primary" lay-submit lay-filter="search">
					<i class="layui-icon">&#xe615;</i>
				</button>
			</div>
		</div>
	</div>
	
	<!-- 列表 -->
	<table id="goods_list" lay-filter="goods_list"></table>
</div>
{/block}
{block name="script"}
<script type="text/html" id="checkbox">
	{{# if(mode == "spu" && $.inArray(d.goods_id.toString(), selected_id_arr) != -1){ }}
		{{# if(disabled == 1){ }}
		<input type="checkbox" data-goods-id="{{d.goods_id}}" name="goods_checkbox" lay-skin="primary" lay-filter="goods_checkbox" checked disabled>
		{{# }else{ }}
		<input type="checkbox" data-goods-id="{{d.goods_id}}" name="goods_checkbox" lay-skin="primary" lay-filter="goods_checkbox" checked>
		{{# } }}
	{{# }else{ }}
	<input type="checkbox" data-goods-id="{{d.goods_id}}" name="goods_checkbox" lay-skin="primary" lay-filter="goods_checkbox">
	{{# } }}
	<input type="hidden" data-goods-id="{{d.goods_id}}" name="goods_json" value='{{ JSON.stringify(d) }}' />
	<input type="hidden" data-goods-id="{{d.goods_id}}" name="goods_sku_list_json" value='{{ JSON.stringify(d.sku_list) }}' />
</script>

<!-- 商品信息 -->
<script type="text/html" id="goods_info">
	<div class="ns-table-title">
		{{# if(mode == "sku"){ }}
		<div class="contraction" data-goods-id="{{d.goods_id}}" data-open="0">
			<span>+</span>
		</div>
		{{# } }}
		<div class="ns-title-pic" id="goods_img_{{d.goods_id}}">
			<img layer-src src="{{ns.img(d.goods_image.split(',')[0], 'small')}}"/>
		</div>
		<div class="ns-title-content">
			<a href="javascript:;" class="ns-multi-line-hiding ns-text-color" title="{{d.goods_name}}">{{d.goods_name}}</a>
			<a href="javascript:;" class="ns-multi-line-hiding ns-text-color" >￥{{d.price}}</a>
		</div>
	</div>
</script>

<!-- SKU商品列表 -->
<script type="text/html" id="skuList">
	{{# for(var i=0;i<d.list.length;i++){ }}
	<tr class="sku-list js-sku-list-{{d.list[i].goods_id}}" id="sku_img_{{d.list[i].goods_id}}">
		<td></td>
		<td>
			{{# if(d.checked || (mode == "sku" && $.inArray(d.list[i].sku_id.toString(), selected_id_arr) != -1) ){ }}
				{{# if(disabled == 1){ }}
				<input type="checkbox" data-goods-id="{{d.list[i].goods_id}}" data-sku-id="{{d.list[i].sku_id}}" name="goods_sku_checkbox" lay-skin="primary" lay-filter="goods_sku_checkbox" checked disabled>
				{{# }else{ }}
				<input type="checkbox" data-goods-id="{{d.list[i].goods_id}}" data-sku-id="{{d.list[i].sku_id}}" name="goods_sku_checkbox" lay-skin="primary" lay-filter="goods_sku_checkbox" checked>
				{{# } }}
			{{# }else{ }}
			<input type="checkbox" data-goods-id="{{d.list[i].goods_id}}" data-sku-id="{{d.list[i].sku_id}}" name="goods_sku_checkbox" lay-skin="primary" lay-filter="goods_sku_checkbox">
			{{# } }}
			<input type="hidden" data-sku-id="{{d.list[i].sku_id}}" value='{{ JSON.stringify(d.list[i]) }}' name="goods_sku_json" />
			<div class="ns-table-title">
				<div class="ns-title-pic" id="sku_img_{{d.sku_id}}">
					<img layer-src src="{{ns.img(d.list[i].sku_image, 'small')}}"/>
				</div>
				<div class="ns-title-content">
					<a href="javascript:;" class="ns-multi-line-hiding ns-text-color" title="{{d.list[i].sku_name}}" lay-event="preview">{{d.list[i].sku_name}}</a>
					<a href="javascript:;" class="ns-multi-line-hiding ns-text-color" >￥{{d.list[i].price}}</a>
				</div>
			</div>
		</td>
		<td>{{d.list[i].stock}}</td>
		<td>{{d.list[i].goods_class_name}}</td>
	</tr>
	{{# } }}
</script>

<script>
	var select_id = "{$select_id}",
		mode = "{$mode}",
		max_num = "{$max_num}",
		min_num = "{$min_num}",
		disabled = "{$disabled}",
		selected_id_arr = select_id.length ? select_id.split(',') : [],
		table, form,laytpl;
	$(function () {
		layui.use(['form','laytpl'], function () {
			form = layui.form;
			laytpl = layui.laytpl;
			
			table = new Table({
				elem: '#goods_list',
				url: '{:addon_url("shop/goods/goodsselect")}',
				where: {is_virtual: "{$is_virtual}"},
				cols: [
					[
						{
							unresize: 'false',
							width: '8%',
							templet: '#checkbox'
						},
						{
							title: '商品',
							unresize: 'false',
							width: '62%',
							templet: '#goods_info'
						},
						{
							field: 'goods_stock',
							title: '库存',
							unresize: 'false',
							width: '15%'
						},
						{
							field: 'goods_class_name',
							title: '商品类型',
							unresize: 'false',
							width: '15%'
						}
					]
				],
				 done: function(res, curr, count){
				    //如果是异步请求数据方式，res即为你接口返回的信息。
				    //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
				    console.log(res);
				    console.log(1111);
				    //得到当前页码
				    console.log(curr); 
				    
				    //得到数据总量
				    console.log(count);
				  },
				callback : function () {
					if(mode == "sku") {
						$("input[name='goods_checkbox'][data-goods-id]").each(function () {
							var goods_id = $(this).attr("data-goods-id");
							var tr = $(this).parent().parent().parent();
							var data = getGoodsSkuData(goods_id);
							laytpl(data.sku_list).render(data, function (html) {
								tr.after(html);
								form.render();
								layer.photos({
									photos: '.img-wrap',
									anim: 5
								});
								
							});
						});
					}
					// 更新商品复选框状态
					for (var i=0;i<selected_id_arr.length;i++) {
						if(mode == 'spu') {
							var selected_goods = $("input[name='goods_checkbox'][data-goods-id='" + selected_id_arr[i] + "']");
							if (selected_goods.length) {
								$("input[name='goods_checkbox'][data-goods-id='" + selected_id_arr[i] + "']").prop("checked", true);
								if(disabled == 1){
									$("input[name='goods_checkbox'][data-goods-id='" + selected_id_arr[i] + "']").attr("disabled", "disabled");
								}
							}
						}
						if(mode == 'sku'){
							var selected_goods_sku = $("input[name='goods_sku_checkbox'][data-sku-id='" + selected_id_arr[i] + "']:checked");
							if(selected_goods_sku.length){
								$("input[name='goods_checkbox'][data-goods-id='" + selected_goods_sku.attr("data-goods-id") + "']").prop("checked", true);
								if(disabled == 1){
									$("input[name='goods_checkbox'][data-goods-id='" + selected_goods_sku.attr("data-goods-id") + "']").attr("disabled", "disabled");
								}
							}
						}
					}
					form.render();
				}
				
			});
			
			/**
			 * 监听搜索
			 */
			form.on('submit(search)', function (data) {
				table.reload({
					page: {
						curr: 1
					},
					where: data.field
				});
			});
			
			// 勾选商品
			form.on('checkbox(goods_checkbox)', function(data) {
				var goods_id = $(data.elem).attr("data-goods-id");
				$("input[name='goods_sku_checkbox'][data-goods-id='" + goods_id + "']").prop("checked",data.elem.checked);
				form.render();
			});
			
			// 勾选商品SKU
			form.on('checkbox(goods_sku_checkbox)', function(data) {
				var goods_id = $(data.elem).attr("data-goods-id");
				if($("input[name='goods_sku_checkbox'][data-goods-id='" + goods_id + "']:checked").length) {
					$("input[name='goods_checkbox'][data-goods-id='" + goods_id + "']").prop("checked", true);
				}else{
					$("input[name='goods_checkbox'][data-goods-id='" + goods_id + "']").prop("checked", false);
				}
				form.render();
			});
		});
		
		$("body").on("click", ".contraction", function () {
			var goods_id = $(this).attr("data-goods-id");
			var open = $(this).attr("data-open");
			if (open == 1) {
				$(this).children("span").text("+");
				$(".js-sku-list-" + goods_id).hide();
			} else {
				$(this).children("span").text("-");
				$(".js-sku-list-" + goods_id).show();
			}
			$(this).attr("data-open", (open == 0 ? 1 : 0));
		});
		
	});
	
	function getGoodsSkuData(goods_id) {
		var list = JSON.parse($("input[name='goods_sku_list_json'][data-goods-id='" + goods_id + "']").val().toString());
		var sku_list = $("#skuList").html();
		var checked = $("input[name='goods_checkbox'][data-goods-id='" + goods_id + "']:checked").length ? true : false;
		var data = {
			checked : checked,
			sku_list : sku_list,
			list: list
		};
		return data;
	}
	
	function selectGoods(callback) {
		var res = [];
		
		$("input[name='goods_checkbox'][data-goods-id]:checked").each(function () {
			var goods_id = $(this).attr("data-goods-id");
			var goods_info = JSON.parse($("input[name='goods_json'][data-goods-id='" + goods_id + "']").val().toString());
			delete goods_info.LAY_INDEX;
			delete goods_info.LAY_TABLE_INDEX;
			delete goods_info.create_time;
			var goods_sku = $("input[name='goods_sku_checkbox'][data-goods-id='" + goods_id + "']:checked");
			var sku_list = [];
			if (goods_sku.length) {
				goods_sku.each(function () {
					var sku_id = $(this).attr("data-sku-id");
					sku_list.push(JSON.parse($("input[name='goods_sku_json'][data-sku-id='" + sku_id + "']").val().toString()));
				});
			} else {
				// 得多全部SKU商品
				var sku_data = getGoodsSkuData(goods_id);
				sku_list = sku_data.list;
			}
			
			var obj = goods_info;
			obj.selected_sku_list = sku_list;// 具体选的的SKU商品
			res.push(obj);
		});
		
		var num = 0;
		if (mode == "spu") {
			for (var i = 0; i < res.length; i++) {
				num++;
			}
		} else if (mode == "sku") {
			for (var i = 0; i < res.length; i++) {
				for (var k = 0; k < res[i].selected_sku_list.length; k++) {
					num++;
				}
			}
		}
		
		if (max_num && max_num > 0 && num > max_num) {
			layer.msg("所选商品数量不能超过" + max_num + '件');
			return;
		}
		
		if (min_num && min_num > 0 && num < min_num) {
			layer.msg("所选商品数量最少不能少于" + min_num + '件');
			return;
		}
		
		callback(res);
	}
</script>
{/block}