jh-admin/addon/topic/shop/view/topic/goods.html

{extend name="app/shop/view/base.html"/}
{block name="resources"}
{/block}
{block name="main"}
<div class="layui-collapse tips-wrap">
	<div class="layui-colla-item">
		<ul class="layui-colla-content layui-show">
			<li>活动名称：{$topic_info.topic_name}</li>
			<li>开始时间：{$topic_info.start_time|date='Y-m-d H:i:s'}</li>
			<li>结束时间：{$topic_info.end_time|date='Y-m-d H:i:s'}</li>
		</ul>
	</div>
</div>

<!-- 搜索框 -->
<div class="single-filter-box">
	<button class="layui-btn" onclick="addGoods()">添加商品</button>
	
	<div class="layui-form">
		<div class="layui-input-inline">
			<input type="text" name="sku_name" placeholder="请输入商品名称" class="layui-input" autocomplete="off">
			<button type="button" class="layui-btn layui-btn-primary" lay-filter="search" lay-submit>
				<i class="layui-icon">&#xe615;</i>
			</button>
		</div>
	</div>
</div>

<!-- 列表 -->
<table id="good_list" lay-filter="good_list"></table>

<!-- 操作 -->
<script type="text/html" id="operation">
	<div class="table-btn">
		<a class="layui-btn" lay-event="delete">删除商品</a>
	</div>
</script>

<!-- 商品 -->
<script type="text/html" id="goodIntro">
	<div class="table-title">
		<div class="title-pic">
			{{#  if(d.sku_image){  }}
			<img layer-src src="{{ns.img(d.sku_image.split(',')[0],'small')}}"/>
			{{#  }  }}
		</div>
		<div class="title-content">
			<a href="javascript:;" class="multi-line-hiding text-color">{{d.sku_name}}</a>
		</div>
	</div>
</script>

<!-- 编辑价格 -->
<script type="text/html" id="editPrice">
	<input name="sort" type="number" onchange="editPrice({{d.sku_id}}, this)" value="{{d.topic_price}}" placeholder="请输入价格" class="layui-input edit-sort len-short" autocomplete="off">
</script>
{/block}
{block name="script"}
<script>
	var addGoods,form, table, laytpl;
	layui.use(['form', 'laytpl'], function() {
		
		form = layui.form;
		laytpl = layui.laytpl;
		var	repeat_flag = false, //防重复标识
			selectedGoodsSkuId = [];
		form.render();
		
		table = new Table({
			elem: '#good_list',
			url: '{:addon_url("topic://shop/topic/goods")}',
			where: {"topic_id" : "{$topic_id}"},
			parseData: function(res){
				for (var i in res.data.list) {
					selectedGoodsSkuId.push(res.data.list[i].sku_id);
				}
				removeDuplicates(selectedGoodsSkuId);
				return {
					"code": res.code,
					"msg": res.message,
					"count": res.data.count,
					"data": res.data.list,
				};
			},
			cols: [
				[{
					title: '商品',
					unresize: 'false',
					width: '30%',
					templet: '#goodIntro'
				}, {
					field: 'price',
					title: '商品价格',
					unresize: 'false',
					width: '15%',
					align: 'right',
					templet: function(data) {
						return '￥<span class="goods-price">'+ data.price +'</span>'
					}
				}, {
					field: 'topic_price',
					title: '价格(可编辑)',
					unresize: 'false',
					width: '22%',
					align: 'center',
					templet: '#editPrice'
				}, {
					title: '操作',
					toolbar: '#operation',
					unresize: 'false',
					align:'right'
				}]
			]
		});
		
		/**
		 * 添加商品弹框
		 */
		addGoods = function() {
			goodsSelect(function (res) {
				if(!res.length) return false;
				var sku_ids = [];
				for (var i = 0; i < res.length; i++) {
					for (var k = 0; k < res[i].selected_sku_list.length; k++) {
						sku_ids.push(res[i].selected_sku_list[k].sku_id);
					}
				}
				$.ajax({
					url: '{:addon_url("topic://shop/topic/addTopicGoods")}',
					type: 'POST',
					dataType: "JSON",
					data: {
						'sku_ids': sku_ids.toString(),
						'topic_id': "{$topic_id}"
					},
					success(res) {
						layer.msg(res.message);
						table.reload();
					}
				})
			}, selectedGoodsSkuId, {mode: "sku"});
		};
		
		/**
		 * 搜索功能 控制器沒有增加名称搜索字段
		 */
		form.on('submit(search)', function(data) {
			table.reload({
				page: {
					curr: 1
				},
				where: data.field
			});
		});
		
		/**
		 * 监听工具栏操作
		 */
		table.tool(function(obj) {
			var data = obj.data;
			switch (obj.event) {
				case 'delete': //删除
					deleteGoods(data.sku_id);
					break;
			}
		});
		
		/**
		 * 删除
		 */
		function deleteGoods(sku_id) {
			
			if (repeat_flag) return false;
			repeat_flag = true;
			
			layer.confirm('确定要删除该商品吗?', function() {
				$.ajax({
					url: '{:addon_url("topic://shop/topic/deleteTopicGoods")}',
					data: {
						"sku_id": sku_id,
						"topic_id": "{$topic_id}"
					},
					dataType: 'JSON',
					type: 'POST',
					success: function(res) {
						layer.msg(res.message);
						repeat_flag = false;
						
						if (res.code == 0) {
							selectedGoodsSkuId.splice(selectedGoodsSkuId.indexOf(sku_id),1);
							table.reload();
						}
					}
				});
			});
		}
	});
	
	// 监听单元格编辑
	function editPrice(id, event){
		var data = $(event).val();
		var goods_price = $(event).parents("tr").find(".goods-price").text();
		if(data < 0){
			layer.msg("活动价格不能小于0");
			return;
		}
		if (data > Number(goods_price)) {
			layer.msg("活动价格不能大于商品价格");
			return;
		}
		$.ajax({
			type: 'POST',
			url: ns.url("topic://shop/topic/editTopicGoods"),
			data: {
				"sku_id": id,
				"topic_id": "{$topic_id}",
				"price": data
			},
			dataType: 'JSON',
			success: function(res) {
				layer.msg(res.message);
				if(res.code==0){
					table.reload();
				}
			}
		});
	}

	function removeDuplicates(arr){
		if (!Array.isArray(arr)) {
			console.log('type error!');
			return
		}
		var array = [];
		for (var i = 0; i < arr.length; i++) {
			if (array.indexOf(arr[i]) === -1) {
				array.push(arr[i])
			}
		}
		return array;
	}
</script>
{/block}