yueshengshop/app/admin/view/goods/verify_list.html

{extend name="base"/}
{block name="resources"}
<style>
	.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{overflow: hidden;padding: 0 45px;}
	.sku-list li{float: left;display: flex;padding: 10px;margin-right: 10px;margin-bottom: 10px;border: 1px solid #EFEFEF;width: 294px;height: 140px;align-items: center;}
	.sku-list li .img-wrap{vertical-align: middle;margin-right: 8px;width: 120px;height: 120px;text-align: center;line-height: 120px;}
	.sku-list li .img-wrap img{max-width: 100%;max-height: 100%;}
	.sku-list li .info-wrap span{margin-bottom: 5px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;white-space: normal;word-break: break-all;-webkit-box-orient: vertical;-webkit-line-clamp: 1;}
	.sku-list li .info-wrap span.sku-name{-webkit-line-clamp: 2;margin-bottom: 5px;font-weight: bold;}
	.sku-list li .info-wrap span:last-child{margin-bottom: 0;}
</style>
{/block}
{block name="main"}
<div class="layui-collapse ns-tips">
	<div class="layui-colla-item">
		<h2 class="layui-colla-title">操作提示</h2>
		<ul class="layui-colla-content layui-show">
			<li>当前显示的是待审核的商品，当商品处于上架状态时前台显示。</li>
			<li>当前商品待审核，说明系统开启了商品审核，只有审核通过的商品才能操作上下架进行销售。</li>
		</ul>
	</div>
</div>

<div class="ns-screen layui-collapse">
	<div class="layui-colla-item">
		<h2 class="layui-colla-title">筛选</h2>
		<form class="layui-colla-content layui-form layui-show">
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">搜索方式：</label>
					<div class="layui-input-inline">
						<select name="search_text_type">
							<option value="goods_name">商品名称</option>
							<option value="site_name">店铺名称</option>
							<!--<option value="brand_name">品牌名称</option>-->
						</select>
					</div>
					<div class="layui-input-inline">
						<input type="text" name="search_text" autocomplete="off" class="layui-input" placeholder="输入商品名称/店铺名称" />
					</div>
				</div>
			</div>

			<div class="layui-form-item">

				<div class="layui-inline">
					<label class="layui-form-label">商品分类：</label>
					<div class="layui-input-inline">
						{include file="goods/category_select" /}
					</div>
				</div>
				
				<div class="layui-inline">
					<label class="layui-form-label">商品品牌：</label>
					<div class="layui-input-inline">
						<select name="goods_brand" lay-search="">
						</select>
					</div>
				</div>
							
				<div class="layui-inline">
				    <label class="layui-form-label">商品类型：</label>
				    <div class="layui-input-inline">
				        <select name="goods_attr_class" lay-search="">
				        </select>
				    </div>
				</div>
			</div>

			<div class="ns-form-row">
				<button class="layui-btn ns-bg-color" lay-submit lay-filter="btn_search">筛选</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</form>
	</div>
</div>

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

<!-- 商品信息 -->
<script type="text/html" id="goods_info">
	<div class="ns-table-tuwen-box">
		<div class="contraction" data-goods-id="{{d.goods_id}}" data-open="0">
			<span>+</span>
		</div>
		<div class="ns-img-box">
			<img layer-src src="{{ns.img(d.goods_image.split(',')[0])}}"/>
		</div>
		<div class="ns-font-box">
			<a href="javascript:;" class="ns-multi-line-hiding ns-text-color">{{d.goods_name}}</a>
		</div>
	</div>
</script>

<!-- 操作 -->
<script type="text/html" id="operation">
	<div class="ns-table-btn">
		<a class="layui-btn" lay-event="verify_on">通过</a>
		<a class="layui-btn" lay-event="verify_off">拒绝</a>
	</div>
</script>

<!-- 批量操作 -->
<script type="text/html" id="batchOperation">
	<button class="layui-btn layui-btn-primary" lay-event="verify_on">通过</button>
	<button class="layui-btn layui-btn-primary" lay-event="verify_off">拒绝</button>
</script>

<!-- SKU商品列表 -->
<script type="text/html" id="skuList">
	<tr class="js-sku-list-{{d.index}}">
		<td></td>
		<td colspan="9">
			<ul class="sku-list">
				{{# for(var i=0;i<d.list.length;i++){ }}
				<li>
					<div class="img-wrap">
						<img src="{{ns.img(d.list[i].sku_image)}}">
					</div>
					<div class="info-wrap">
						<span class="sku-name">{{d.list[i].sku_name}}</span>
						<span class="price">价格：￥{{d.list[i].price}}</span>
						<span class="stock">库存：{{d.list[i].stock}}</span>
						<span class="sale_num">销量：{{d.list[i].sale_num}}</span>
					</div>
				</li>
				{{# } }}
			</ul>
		</td>
	</tr>
</script>
{/block}

{block name="script"}
<script>
	var laytpl, form;
	$(function() {
		$("body").on("click", ".contraction", function() {
			var goods_id = $(this).attr("data-goods-id");
			var open = $(this).attr("data-open");
			var tr = $(this).parent().parent().parent().parent();
			var index = tr.attr("data-index");

			if (open == 1) {
				$(this).children("span").text("+");
				$(".js-sku-list-" + index).remove();
			} else {
				$(this).children("span").text("-");
				$.ajax({
					url: ns.url("admin/goods/getGoodsSkuList"),
					data: {
						goods_id: goods_id
					},
					dataType: 'JSON',
					type: 'POST',
					async: false,
					success: function(res) {
						var list = res.data;
						var sku_list = $("#skuList").html();
						var data = {
							list: list,
							index: index
						};
						laytpl(sku_list).render(data, function(html) {
							tr.after(html);
						});

					}
				});
			}
			$(this).attr("data-open", (open == 0 ? 1 : 0));

		});
		
		//商品品牌
		goodsBrand();
		//商品类型
		goodsSattr();
		
	});
	layui.use(['form', 'laytpl'], function() {
		form = layui.form;
		repeat_flag = false; //防重复标识
		laytpl = layui.laytpl;

		form.render();
		var table = new Table({
			elem: '#goods_list',
			url: ns.url("admin/goods/verifyList"),
			cols: [
				[{
						type: 'checkbox',
						unresize: 'false',
						width: '3%'
					},
					{
						title: '商品信息',
						unresize: 'false',
						width: '20%',
						templet: '#goods_info'
					},
					{
						field: 'site_name',
						title: '店铺名称',
						unresize: 'false',
						width: '10%',
					},

					{
						field: 'price',
						title: '价格(元)',
						unresize: 'false',
						width: '10%'
					},
					{
						field: 'goods_stock',
						title: '库存',
						unresize: 'false',
						width: '9%'
					},
					{
						field: 'sale_num',
						title: '销量',
						unresize: 'false',
						width: '6%'
					},
					{
						title: '商品状态',
						unresize: 'false',
						width: '8%',
						templet: function(data) {
							var str = '';
							if (data.goods_state == 1) {
								str = '上架';
							} else if (data.goods_state == 0) {
								str = '下架';
							}
							return str;
						}
					},
					{
						title: '审核状态',
						unresize: 'false',
						width: '8%',
						templet: function(data) {
							var str = '';
							if (data.verify_state == 1) {
								str = '已审核';
							} else if (data.verify_state == 0) {
								str = '待审核';
							} else if (data.verify_state == 10) {
								str = '<a href="javascript:getVerifyStateRemark(' + data.goods_id + ');" class="ns-text-color">违规下架</a>';
							} else if (data.verify_state == -1) {
								str = '审核中';
							} else if (data.verify_state == -2) {
								str = '审核失败';
							}
							return str;
						}
					},
					{
						title: '创建时间',
						unresize: 'false',
						width: '14%',
						templet: function(data) {
							return ns.time_to_date(data.create_time);
						}
					},
					{
						title: '操作',
						toolbar: '#operation',
						unresize: 'false',
						width: '12%'
					}
				]
			],
			bottomToolbar: "#batchOperation"
		});

		/**
		 * 监听工具栏操作
		 */
		table.tool(function(obj) {
			var data = obj.data;
			switch (obj.event) {
				case 'verify_on':
					//审核通过
					verifyOn(data.goods_id, 1);
					break;
				case 'verify_off':
					//审核失败
					verifyOn(data.goods_id, -2);
					break;
			}
		});

		//审核通过商品
		function verifyOn(goods_ids, verify_state) {

			if (repeat_flag) return;
			repeat_flag = true;

			$.ajax({
				url: ns.url("admin/goods/verifyOn"),
				data: {
					goods_ids: goods_ids.toString(),
					verify_state: verify_state
				},
				dataType: 'JSON',
				type: 'POST',
				success: function(res) {
					layer.msg(res.message);
					repeat_flag = false;
					if (res.code == 0) {
						table.reload();
					}
				}
			});

		}

		/**
		 * 批量操作
		 */
		table.bottomToolbar(function(obj) {
			if (obj.data.length < 1) {
				layer.msg('请选择要操作的数据');
				return;
			}
			var id_array = new Array();
			for (i in obj.data) id_array.push(obj.data[i].goods_id);
			switch (obj.event) {
				case 'verify_on':
					//审核通过
					verifyOn(id_array.toString(), 1);
					break;
				case 'verify_off':
					//审核失败
					verifyOn(id_array.toString(), -2);
					break;
			}
		});

		/**
		 * 搜索功能
		 */
		form.on('submit(btn_search)', function(data) {
			table.reload({
				page: {
					curr: 1
				},
				where: data.field
			});
            return false;
		});

	});

	/**
	 * 获取违规下架原因
	 * @param goods_id
	 */
	function getVerifyStateRemark(goods_id) {
		$.ajax({
			url: ns.url("admin/goods/getVerifyStateRemark"),
			data: {
				goods_id: goods_id
			},
			dataType: 'JSON',
			type: 'POST',
			success: function(res) {
				var data = res.data;
				if (data) {
					layer.open({
						title: '违规下架原因',
						content: data.verify_state_remark
					});
				}
			}
		});

	}
	
	//商品品牌
	function goodsBrand() {
	    var brandHtml = "";
	    $.ajax({
	        url: ns.url("admin/goodsbrand/lists"),
	        type: 'POST',
	        dataType: 'JSON',
	        success: function (res) {
	            brandHtml += '<option value="">直接选择或搜索选择</option>';
	            $.each(res.data.list, function (key, val) {
	                brandHtml += `<option value="${val.brand_id}">${val.brand_name}</option>`;
	            });
	            $("select[name='goods_brand']").html(brandHtml);
	            form.render('select');
	        }
	    });
	}
	
	//商品类型
	function goodsSattr() {
	    var sattrHtml = "";
	    $.ajax({
	        url: ns.url("admin/goodsattr/lists"),
	        type: 'POST',
	        dataType: 'JSON',
	        success: function (res) {
	            sattrHtml += '<option value="">直接选择或搜索选择</option>';
	            $.each(res.data.list, function (key, val) {
	                sattrHtml += `<option value="${val.class_id}">${val.class_name}</option>`;
	            });
	            $("select[name='goods_attr_class']").html(sattrHtml);
	            form.render('select');
	        }
	    });
	}
</script>
{/block}