zhongshen_project/addon/blindbox/shop/view/blindbox/detail.html

{extend name="app/shop/view/base.html"/}
{block name="resources"}
<link rel="stylesheet" href="STATIC_CSS/promotion_detail.css">
{/block}
{block name="main"}
<div class="layui-card card-common card-brief">
	<div class="layui-card-header">
		<div>
			<span class="card-title">基本信息</span>
		</div>
	</div>
	<div class="layui-card-body">
		<div class="promotion-view">
			<div class="promotion-view-item">
				<label>活动名称：</label>
				<span>{$blindbox_info.blindbox_name}</span>
				{if $blindbox_info.blindbox_status == 0 || $blindbox_info.blindbox_status == 1}
				<i class="layui-icon text-color" style="margin-left: 5px;" onclick="editName(this)"> </i>
				{/if}
			</div>
			<div class="promotion-view-item">
				<label>盲盒分类：</label>
				<span>{$blindbox_info.category_name}</span>
				{if $blindbox_info.blindbox_status == 0 || $blindbox_info.blindbox_status == 1}
				<i class="layui-icon text-color" style="margin-left: 5px;" onclick="editCategory(this)"> </i>
				{/if}
			</div>
			<div class="promotion-view-item">
				<label>拆盒价：</label>
				<span>{$blindbox_info.price}</span>
			</div>
			<div class="promotion-view-item">
				<label>状态：</label>
				<span>
					{switch name="$blindbox_info.blindbox_status"}
						{case value="0"}未开始{/case}
						{case value="1"}进行中{/case}
						{case value="2"}已结束{/case}
						{case value="-1"}已关闭{/case}
					{/switch}
				</span>
			</div>
			<div class="promotion-view-item">
				<label>盒子数：</label>
				<span>{$blindbox_info.blindbox_count}</span>
			</div>
			<div class="promotion-view-item">
				<label>已拆：</label>
				<span>{$blindbox_info.blindbox_num}</span>
			</div>
			<div class="promotion-view-item">
				<label>未拆：</label>
				<span>{$blindbox_info.blindbox_inventory}</span>
			</div>
			<div class="promotion-view-item">
				<label>开始时间：</label>
				<span>{:date('Y-m-d H:i:s',$blindbox_info.start_time)}</span>
			</div>
			<div class="promotion-view-item">
				<label>结束时间：</label>
				<span>{:date('Y-m-d H:i:s',$blindbox_info.end_time)}</span>
				{if $blindbox_info.blindbox_status == 0 || $blindbox_info.blindbox_status == 1}
				<i class="layui-icon text-color" style="margin-left: 5px;" onclick="editEndtime(this)"> </i>
				{/if}
			</div>
			<div class="promotion-view-item">
				<label>是否余额支付：</label>
				<span data-value="{$blindbox_info.is_balance}">
					{switch name="$blindbox_info.is_balance"}
						{case value="0"}否{/case}
						{case value="1"}是{/case}
					{/switch}
				</span>
			</div>
			<div class="promotion-view-item">
				<label>空盒是否显示：</label>
				<span data-value="{$blindbox_info.is_emptybox}">
					{switch name="$blindbox_info.is_emptybox"}
						{case value="1"}显示{/case}
						{case value="2"}不显示{/case}
					{/switch}
				</span>
				{if $blindbox_info.blindbox_status == 0 || $blindbox_info.blindbox_status == 1}
				<i class="layui-icon text-color" style="margin-left: 5px;" onclick="editIsEmptybox(this)"> </i>
				{/if}
			</div>
		</div>
	</div>
</div>
<input type="hidden" name="blindbox_id" value="{$blindbox_info.blindbox_id}" />

<div class="layui-card card-common card-brief">
	<div class="layui-card-header">
		<div>
			<span class="card-title">活动商品</span>
		</div>
	</div>

	<div class='promotion-view-list'>
		<div class="layui-tab-brief" lay-filter="blindbox_tab">

			<div class="layui-tab-content">
				{if $blindbox_info.blindbox_status == 0 || $blindbox_info.blindbox_status == 1}
					<div class="single-filter-box">
						<button class="layui-btn"lay-submit lay-filter="add_goods" >添加盲盒</button>
					</div>
				{/if}
				<!--筛选面板-->
				<div class="screen layui-collapse" lay-filter="selection_panel">
					<div class="layui-colla-item">
						<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">
										<input type="text" name="goods_name" placeholder="请输入商品名称" autocomplete="off" class="layui-input">
									</div>
								</div>

								<div class="layui-inline">
									<label class="layui-form-label">盲盒状态：</label>
									<div class="layui-input-inline">
										<select name="status">
											<option value="">全部</option>
											<option value="0">未拆</option>
											<option value="1">已拆</option>
										</select>
									</div>
								</div>
							</div>

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

							</div>
						</form>
					</div>
				</div>

				<!-- 盒子列表 -->
				<table id="promotion_list" lay-filter="promotion_list"></table>
			</div>
		</div>
	</div>

</div>

<!-- 操作 -->
<script type="text/html" id="operation">
	<div class="operation-wrap" data-coupon-id="{{d.category_id}}">
		<div class="table-btn">
			{{#  if(d.status == 0 && ({$blindbox_info.blindbox_status} == 0 || {$blindbox_info.blindbox_status} == 1)){  }}
			<a class="layui-btn" lay-event="edit">更换商品</a>
			<a class="layui-btn" lay-event="del">删除</a>
			{{#  }  }}
			{{#  if(d.status == 1){  }}
			<a class="layui-btn" lay-event="detail">详情</a>
			{{#  }  }}
		</div>
	</div>
</script>

{if $blindbox_info.blindbox_status == 0 || $blindbox_info.blindbox_status == 1}
<script type="text/html" id="toolbarOperation">
	<button class="layui-btn layui-btn-primary" lay-event="dels">批量删除</button>
</script>
{/if}

<script type="text/html" id="blindboxOrder">
	<div class="shop-information">
		<div class="shop-information-table">
			<table lay-filter="parse-table-order-product" lay-skin="line">
				<thead>
					<tr class="table-trOne">
						<th>订单号</th>
						<th>商品名</th>
						<th>实付金额</th>
						<th>付款方式</th>
						<th>购买会员</th>
						<th>订单状态</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr class="table-trTow">
						<td>{{d.order_number}}</td>
						<td>{{d.sku_name}}</td>
						<td>{{d.order_price}}</td>
						<td>{{d.pay_type_name}}</td>
						<td><a class="text-color" onclick="memberInfo({{d.member_id}})">{{d.nickname}}</a></td>
						<td>已支付</td>
						{{#  if(d.is_dispatch == 0){  }}
							<td>待用户完善订单信息</td>
						{{#  }else {  }}
							<td><a class="text-color" onclick="goodsOrderInfo({{d.id}})">查看订单</a></td>
						{{# }}}
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</script>
{/block}
{block name="script"}
<script type='text/html' id="promotion_list_item_box_html">
	<div class="promotion-list-item-title">
		<div class="promotion-list-item-title-icon">
			<img src="{{ ns.img(d.sku_image) }}" alt="">
		</div>
		<p class="promotion-list-item-title-name multi-line-hiding">{{ d.sku_name }}</p>
	</div>
</script>
<script>
	var laytpl,repeat_flag = false; //防重复标识
	var blindbox_id,selectedGoodsId = [],
			currentDate = new Date(),
			minDate = "",
			box_id,form,laydate;
	blindbox_id = {$blindbox_info.blindbox_id};
	blindbox_end_time = {$blindbox_info.end_time};
	// currentDate = {$blindbox_info.end_time};
	layui.use(['form', 'laytpl', 'laydate', 'element'], function () {
		var table;
		laydate = layui.laydate;
		currentDate.setDate(currentDate.getDate() + 30);
		minDate = "";
		form = layui.form,
		laytpl = layui.laytpl,
				form.render();

		table = new Table({
			elem: '#promotion_list',
			url: ns.url("blindbox://shop/blindboxGoods/lists",{'blindbox_id':blindbox_id}),
			cols: [
				[{
					width: "3%",
					type: 'checkbox',
					unresize: 'false'
				}, {
					title: '商品信息',
					unresize: 'false',
					width: '25%',
					templet: '#promotion_list_item_box_html'
				},{
					field: 'price',
					title: '价格',
					unresize: 'false',
					width: '20%',
					templet:function (data){
						return '￥' + data.price;
					}
				},{
					field: 'status',
					title: '状态',
					unresize: 'false',
					width: '20%',
					templet: function (data) {
						var status_name = '';
						if(data.status == 1 ){
							status_name = '已拆';
						}else{
							status_name = '未拆';
						}
						return status_name;
					}
				},{
					title: '操作',
					toolbar: '#operation',
					unresize: 'false',
					align:'right'
				}]
			],
			toolbar: '#toolbarOperation',
		});

		/**
		 * 批量操作
		 */
		table.toolbar(function(obj) {
			if (obj.data.length < 1) {
				layer.msg('请选择要操作的数据');
				return;
			}

			switch (obj.event) {
				case "dels":
					var id_array = new Array();
					var sku_array = new Array();
					for (i in obj.data) id_array.push(obj.data[i].id);
					for (i in obj.data) sku_array.push(obj.data[i].sku_id);
					dels(id_array.toString(),sku_array.toString());
					break;
			}
		});

		/**
		 * 监听工具栏操作
		 */
		table.tool(function (obj) {
			var data = obj.data;
			switch (obj.event) {
				case 'edit': //编辑
					editGoods(data.id);
					break;
				case 'del': //删除
					dels(data.id,data.sku_id);
					break;
				case 'detail':
					blindboxOrderInfo(data);
					break;
			}
		});

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

	});
	// 盲盒订单详情
	function blindboxOrderInfo(data){
		laytpl($("#blindboxOrder").html()).render(data, function(html){
			layer.open({
				type: 1,
				title:'盲盒订单信息',
				content: html,
				area: ['1500px','300px']
			});
		})
	}
	function memberInfo(id){
		location.href = ns.url("shop/member/editmember", {"member_id": id})
	}
	// 商品订单详情
	function goodsOrderInfo(id){
		$.ajax({
			url: ns.url("blindbox://shop/blindboxGoods/boxOrderInfo",{'id':id}),
			dataType: 'JSON',
			type: 'POST',
			success: function (res) {
				if(res.data != null){
					var order_id = res.data.order_id;
					location.href = ns.url("shop/order/detail", {"order_id": order_id})
				}

			}
		});
	}

	function dels(ids,sku_ids){
		layer.confirm('确定要删除该盲盒盒子吗?', function () {
			if (repeat_flag) return false;
			repeat_flag = true;

			$.ajax({
				url: ns.url("blindbox://shop/blindboxGoods/dels",{'blindbox_id':blindbox_id,'ids':ids,'sku_ids':sku_ids}),
				dataType: 'JSON',
				type: 'POST',
				success: function (res) {
					layer.msg(res.message);
					repeat_flag = false;
					location.reload();
				}
			});
		}, function () {
			layer.close();
			repeat_flag = false;
		});
	}

	function editName(event){
		var blindbox_name = $(event).prev('span').text();
		var html = `<div class="layui-form form-wrap">
						<div class="layui-form-item">
							<label class="layui-form-label" style="width:auto"><span class="required">*</span>名称：</label>
							<div class="layui-input-block" style="margin-left: 0;">
								<input name="blindbox_name" type="text" lay-verify="required" value="`+ blindbox_name +`" class="layui-input len-mid" maxlength="40">
							</div>
						</div>
					</div>`;
		layer.open({
			title: '编辑名称',
			skin: 'edit-blindbox-layer',
			type: 1,
			area: ['360px', '180px'],
			content: html,
			success: function(){
				form.render();
			},
			btn: ['保存', '取消'],
			yes: function () {
				if($.trim($('[name="blindbox_name"]').val()) == ''){
					layer.msg('名称不能为空');
					return false;
				}
				var data = {blindbox_name: $.trim($('[name="blindbox_name"]').val())};
				editBlindbox(data, function(res){
					if (res.code == 0) {
						$(event).prev('span').text(data.blindbox_name);
						layer.closeAll();
					} else {
						layer.msg(res.message);
					}
				});
			}
		})
	}

	function editCategory(){
		var html = `<div class="layui-form form-wrap">
						<div class="layui-form-item">
							<label class="layui-form-label" style="width:auto"><span class="required">*</span>盲盒分类：</label>
							<div class="layui-input-inline len-mid">
								<select class="category_id" name="category_id" lay-verify="required">
								{foreach $category_data as $k=>$v}
								<option value="{$k}" {if $blindbox_info['category_id']== $k }selected{/if}> {$v}</option>
								{/foreach}
								</select>
							</div>
						</div>
					</div>`;
		layer.open({
			title: '编辑盲盒分类',
			skin: 'edit-blindbox-layer',
			type: 1,
			area: ['400px', '200px'],
			content: html,
			success: function(){
				form.render();
			},
			btn: ['保存', '取消'],
			yes: function () {
				var data = {category_id: $.trim($('[name="category_id"]').val())};
				editBlindbox(data, function(res){
					if (res.code == 0) {
						location.reload();
					} else {
						layer.msg(res.message);
					}
				});
			}
		})
	}

	function editEndtime(){
		var html = `<div class="layui-form-item">
						<label class="layui-form-label"><span class="required">*</span>活动结束时间：</label>
						<div class="layui-input-block len-mid end_time">
							<input type="text" class="layui-input" name="end_time" lay-verify="required" id="end_time" autocomplete="off" readonly value="{:date('Y-m-d H:i:s',$blindbox_info.end_time)}">
							<i class=" iconrili iconfont calendar"></i>
						</div>
					</div>`;
		layer.open({
			title: '编辑活动结束时间',
			skin: 'edit-blindbox-layer',
			type: 1,
			area: ['600px', '200px'],
			content: html,
			zIndex: 9999,
			success: function(){
				//结束时间
				laydate.render({
					elem: '#end_time',//指定元素
					type: 'datetime',
				});
			},
			btn: ['保存', '取消'],
			yes: function () {
				end_time = $.trim($('[name="end_time"]').val());
				if(ns.date_to_time(end_time) < blindbox_end_time){
					layer.msg('修改日期不能小于之前日期');
					return false;
				}

				var data = {end_time: $.trim($('[name="end_time"]').val())};
				editBlindbox(data, function(res){
					if (res.code == 0) {
						location.reload();
					} else {
						layer.msg(res.message);
					}
				});
			}
		})
	}
	function editIsEmptybox(event){
		var is_emptybox = $(event).prev('span').attr('data-value');
		var html = `<div class="layui-form form-wrap">
						<div class="layui-form-item">
							<label class="layui-form-label" style="width:auto"><span class="required">*</span>空盒是否显示：</label>
							<div class="layui-input-block" style="margin-left: 0;">
								<input type="radio" name="is_emptybox" value="1" title="显示" `+ (is_emptybox == 1 ? 'checked' : '') +`>
								<input type="radio" name="is_emptybox" value="2" title="不显示" `+ (is_emptybox == 2 ? 'checked' : '') +`>
							</div>
						</div>
					</div>`;
		layer.open({
			title: '空盒是否显示',
			skin: 'edit-blindbox-layer',
			type: 1,
			area: ['320px', '160px'],
			content: html,
			success: function(){
				form.render();
			},
			btn: ['保存', '取消'],
			yes: function () {
				var data = {is_emptybox: $('[name="is_emptybox"]:checked').val()};
				if (!data.is_emptybox) {
					layer.msg('请选择空盒是否显示', {icon: 5});
					return;
				}
				editBlindbox(data, function(res){
					if (res.code == 0) {
						$(event).prev('span').text($('[name="is_emptybox"]:checked').attr('title'));
						$(event).prev('span').attr('data-value', data.is_emptybox);
						layer.closeAll();
					} else {
						layer.msg(res.message);
					}
				});
			}
		})
	}

	function editBlindbox(data, callback){
		if(repeat_flag) return false;
		repeat_flag = true;

		data.blindbox_id = '{$blindbox_info.blindbox_id}';

		$.ajax({
			url: ns.url("blindbox://shop/blindbox/edit"),
			data: data,
			dataType: 'JSON', //服务器返回json格式数据
			type: 'POST', //HTTP请求类型
			success: function(res) {
				repeat_flag = false;
				typeof callback == 'function' && callback(res);
			}
		});
	}

	/* 商品 */
	function addGoods() {
		goodsSelect(function (res) {
			if (!res.length) return false;
			sku_id = [];
			for (var i = 0; i < res.length; i++) {
				for(var s = 0; s < res[i]['selected_sku_list'].length;s++){
					sku_id.push(res[i]['selected_sku_list'][s].sku_id);
				}
			}
			$.ajax({
				url: ns.url("blindbox://shop/blindboxGoods/add",{'blindbox_id':blindbox_id,'sku_id_arr':sku_id}),
				dataType: 'JSON',
				type: 'POST',
				success: function (res) {
					layer.msg(res.message);
					repeat_flag = false;
					location.reload();
				}
			});

		}, selectedGoodsId, {mode: "sku"});
		return false;
	}

	/* 商品 */
	function editGoods(id) {
		box_id = id;
		goodsSelect(function (res) {
			if (!res.length) return false;

			if (res.length > 1){
				layer.msg('只能选择一件商品哦！亲！');
				return false;
			}
			sku_id = res[0]['selected_sku_list'][0]['sku_id'];

			$.ajax({
				url: ns.url("blindbox://shop/blindboxGoods/edit",{'blindbox_id':blindbox_id,'id':box_id,'sku_id':sku_id}),
				dataType: 'JSON',
				type: 'POST',
				success: function (res) {
					layer.msg(res.message);
					repeat_flag = false;
					location.reload();
				}
			});

		}, selectedGoodsId, {mode: "sku"});

	}
</script>
{/block}