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

{extend name="app/shop/view/base.html"/}
{block name="resources"}
<style>
	.goods_num {padding-left: 20px;}
</style>
{/block}
{block name="main"}
<div class="layui-form">
	<div class="layui-card card-common">
		<div class="layui-card-body">
			<div class="layui-form-item">
				<label class="layui-form-label"><span class="required">*</span>盲盒名称：</label>
				<div class="layui-input-block">
					<input type="text" name="blindbox_name" lay-verify="required" autocomplete="off" class="layui-input len-long" maxlength="40">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label"><span class="required">*</span>活动开始时间：</label>
				<div class="layui-input-block len-mid">
					<input type="text" class="layui-input" name="start_time" lay-verify="required" id="start_time" autocomplete="off" readonly>
					<i class="iconrili iconfont calendar"></i>
				</div>
			</div>

			<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|time" id="end_time" autocomplete="off" readonly>
					<i class="iconrili iconfont calendar"></i>
				</div>
				<div class="word-aux">
					<p>结束时间不能小于开始时间，也不能小于当前时间</p>
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label"><span class="required">*</span>盲盒分类：</label>
				<div class="layui-input-inline len-mid">
					<select class="category_id" name="category_id" lay-verify="required">
						<option value="">请选择</option>
						{foreach $category_data as $k=>$v}
						<option value="{$k}">{$v}</option>
						{/foreach}
					</select>
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">排序：</label>
				<div class="layui-input-block">
					<input type="number" min="0" name="sort" value="0" lay-verify='sort' onchange="detectionNumType(this,'integral')"  autocomplete="off" class="layui-input len-short">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">预警库存：</label>
				<div class="layui-input-block">
					<input type="number" min="0" name="early_inventory" value="0" lay-verify='sort' onchange="detectionNumType(this,'integral')"  autocomplete="off" class="layui-input len-short">
				</div>
				<div class="word-aux">
					<p>商品少于预警库存数量，商品列表库存数量标红显示，0为不预警</p>
				</div>
			</div>
			<label class="layui-form-label">盲盒封面：</label>
			<div class="layui-input-block">
				<div class="upload-img-block square">
					<div class="upload-img-box">
						<div class="upload-default" id="blindbox_images">
							<div class="upload">
								<i class="iconfont iconshangchuan"></i>
								<p>点击上传</p>
							</div>
						</div>
						<div class="operation">
							<div>
								<i title="图片预览" class="iconfont iconreview js-preview" style="margin-right: 20px;"></i>
								<i title="删除图片" class="layui-icon layui-icon-delete js-delete"></i>
							</div>
							<div class="replace_img js-replace">点击替换</div>
						</div>
						<input type="hidden" name="blindbox_images" />
					</div>
				</div>
			</div>
			<div class="word-aux">建议图片尺寸：690*330px</div>

			<div class="layui-form-item">
				<label class="layui-form-label"><span class="required">*</span>拆盒价格：</label>
				<div class="layui-input-block">
					<input type="text" min="0" name="price" onchange="detectionNumType(this,'positiveNumber')" lay-verify="required|price" class="layui-input len-short" autocomplete="off" placeholder="0.00">
				</div>
				<div class="word-aux">
					<p>拆盒价格指第一次参与该盲盒外的正常支付价格，如果未设置新人价那么拆盒价格等于新人价</p>
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">新人拆盒价：</label>
				<div class="layui-input-block">
					<input type="text" min="0" name="new_price" onchange="detectionNumType(this,'positiveNumber')" class="layui-input len-short" autocomplete="off" placeholder="0.00">
				</div>
				<div class="word-aux">
					<p>没有参与该盲盒的首次价格</p>
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label"><span class="required">*</span>是否允许余额支付：</label>
				<div class="layui-input-block">
					<input type="radio" name="is_balance" value="1" title="是" checked>
					<input type="radio" name="is_balance" value="0" title="否">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label"><span class="required">*</span>空盒是否显示：</label>
				<div class="layui-input-block">
					<input type="radio" name="is_emptybox" value="1" title="是" checked>
					<input type="radio" name="is_emptybox" value="2" title="否">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label"><span class="required">*</span>商品：</label>
				<div class="layui-input-block">
					<table class="layui-table" id="goods" lay-skin="line" lay-size="lg">
						<colgroup>
							<col width="45%">
							<col width="15%">
							<col width="15%">
							<col width="10%">
							<col width="15%">
						</colgroup>
						<thead>
							<tr>
								<th>商品名称</th>
								<th>价格</th>
								<th>库存</th>
								<th>数量</th>
								<th class="operation">操作</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td colspan="5">
									<div class="goods-empty">未添加商品</div>
								</td>
							</tr>
						</tbody>
					</table>
					<button class="layui-btn" onclick="addGoods()">添加商品</button> <span class="goods_num">已选商品（<span id="goods_num" class="text-color">0</span>）</span>
				</div>
			</div>

			<div class="layui-form-item layui-form-text">
				<label class="layui-form-label">活动规则说明：</label>
				<div class="layui-input-inline">
					<textarea name="remark" class="layui-textarea len-long" maxlength="150"></textarea>
				</div>
			</div>
			<div class="word-aux">
				<p>说明：盲盒不和其他优惠活动一起参与,比如：满减、积分抵扣、会员价、优惠券</p>
			</div>
			<div class="form-row">
				<button class="layui-btn" lay-submit lay-filter="save">保存</button>
				<button class="layui-btn layui-btn-primary" onclick="back()">返回</button>
				<a id="blindboxImagesId"></a>
			</div>
		</div>
	</div>
</div>
{/block}
{block name="script"}
<script>
	var form, laytpl, tableData = [],
			repeat_flag = false,
			awardId = 0,
			selectGoodsSkuId = [],
			num_list = [],
			goods = [],
			currentDate = new Date(),
			minDate = "",
			upload;
	var saveData = null;
	var totalUploadNum = 0;
	var completeUploadNum = 0;

	layui.use(['form', 'laytpl','laydate'], function () {
		var laydate = layui.laydate;
		form = layui.form;
		laytpl = layui.laytpl;

		currentDate.setDate(currentDate.getDate() + 30);
		form.render();

		laydate.render({
			elem: '#start_time'
			, type: 'datetime'
			, change: function (value, date, endDate) {
				$(".date-picker-btn").removeClass("selected");
			}
		});

		// 开始时间
		laydate.render({
			elem: '#start_time',//指定元素
			type: 'datetime',
			value: new Date(),
			done: function (value) {
				minDate = value;
				reRender();
			}
		});

		//结束时间
		laydate.render({
			elem: '#end_time',//指定元素
			type: 'datetime',
			value: new Date(currentDate)
		});

		/**
		 * 重新渲染结束时间
		 * */
		function reRender() {
			$("#end_time").remove();
			$(".end_time").html('<input type="text" id="end_time" name="end_time" placeholder="请输入结束时间" lay-verify="required|time" class="layui-input len-mid" autocomplete="off">');
			laydate.render({
				elem: '#end_time',
				type: 'datetime',
				min: minDate
			});
		}

		//表单验证
		form.verify({
			number: function (value) {
				if (value <= 0) {
					return "数量不能小于或等于0"
				}
			},
			sort: function (value) {
				if (value < 0) {
					return "排序不能小于0"
				}
			},
			price: function (value) {
				if (value == 0) {
					return "价格不能为0"
				}
			},
			time: function (value) {
				var now_time = (new Date()).getTime();
				var start_time = (new Date($("#start_time").val())).getTime();
				var end_time = (new Date(value)).getTime();
				if (now_time > end_time) {
					return '结束时间不能小于当前时间!'
				}
				if (start_time > end_time) {
					return '结束时间不能小于开始时间!';
				}
			},
			time_day: function (value) {
				var time_type = $('[name="time_type"]:checked').val();
				if (time_type == 3) {
					if (value <= 0) {
						return '有效期天数至少为一天!'
					}
				}
			}
		});

		upload = new Upload({
			elem: '#blindbox_images',
			auto: false,
			bindAction: '#blindboxImagesId',
			callback: function (res) {
				uploadComplete('blindbox_images', res.data.pic_path);
			}
		});

		function uploadComplete(field, pic_path) {
			saveData.field[field] = pic_path;
			completeUploadNum += 1;
			if (completeUploadNum == totalUploadNum) {
				saveFunc();
			}
		}

		function saveFunc() {
			var data = saveData;
			$.ajax({
				type: 'POST',
				dataType: 'JSON',
				url: ns.url("blindbox://shop/blindbox/add"),
				data: data.field,
				async: false,
				success: function (res) {
					repeat_flag = false;
					if (res.code >= 0) {
						layer.confirm('添加成功', {
							title: '操作提示',
							btn: ['返回列表', '继续添加'],
							closeBtn: 0,
							yes: function () {
								location.href = ns.url("blindbox://shop/blindbox/lists");
							},
							btn2: function () {
								location.href = ns.url("blindbox://shop/blindbox/add");
							}
						});
					} else {
						layer.msg(res.message);
					}
				}
			})
		}

		/**
		 * 表单提交
		 */
		form.on('submit(save)', function (data) {
			// 删除图片
			if (!data.field.blindbox_images) upload.delete();
			if (repeat_flag) return;
			repeat_flag = true;

			$("input[name='goods_num']").each(function () {
				num_list.push($(this).val());
			});

			for (var i = 0; i < selectGoodsSkuId.length; i++) {
				var obj = {};
				obj.sku_id = selectGoodsSkuId[i];
				obj.num = num_list[i];
				goods.push(obj)
			}

			if (goods.length <= 0) {
				layer.msg('请选择盲盒内商品');
				repeat_flag = false;
				return false;
			}

			data.field.goods = goods;

			saveData = data;
			var obj = $("img.img_prev[data-prev='1']");
			totalUploadNum = obj.length;
			if (totalUploadNum > 0) {
				obj.each(function () {
					var actionId = $(this).attr('data-action-id');
					$(actionId).click();
				})
			} else {
				saveFunc();
			}
		});
	});

	//删除奖品
	function delAward(data) {
		for (var i = 0; i < tableData.length; i++) {
			if (tableData[i].ident == data) {
				tableData.splice(i, 1);
				renderTable(tableData);
			}
		}
	}

	function back() {
		location.href = ns.url("blindbox://shop/blindbox/lists");
	}

	//检测数据类型
	function detectionNumType(el, type) {
		var value = $(el).val();
		//大于零 且 不是小数
		if (value < 0 && type == 'integral')
			$(el).val(0);
		else if (type == 'integral')
			$(el).val(Math.round(value));

		//大于1 且 不是小数
		if (value < 1 && type == 'positiveInteger')
			$(el).val(1);
		else if (type == 'positiveInteger')
			$(el).val(Math.round(value));
		//大于零可以是小数
		if (type == 'positiveNumber') {
			value = parseFloat(value).toFixed(2);
			if (value < 0) $(el).val(0);
			else $(el).val(value);
		}
	}

	/**
	 * 添加商品
	 */
	function addGoods() {
		goodsSelect(function (res) {
			if (!res.length) return false;
			var price = 0.00;
			selectGoodsSkuId = [];

			$("#goods tbody").html("");
			var html = $("#goods tbody .goods-empty").length ? '' : $("#goods tbody").html();
			for (var i = 0; i < res.length; i++) {
				for (var k = 0; k < res[i].selected_sku_list.length; k++) {
					var item = res[i].selected_sku_list[k];
					html += `<tr data-sku_id="${item.sku_id}">`;
					html += `
					<td>
						<div class="goods-title">
							<div class="goods-img">
								<img layer-src src="${item.sku_image ? ns.img(item.sku_image) : ''}" alt="">
							</div>
							<p class="multi-line-hiding goods-name">${item.sku_name}</p>
						</div>
					</td>
				`;
					html += `<td class='price-one'>${item.price }</td>`;
					html += `<td>${item.stock}</td>`;
					html += `<td><input type="number" name="goods_num" min="1" onchange="detectionNumType(this,'integral')" lay-verify="required|number" class="layui-input" value='1'></td>`;
					html += `<td class='operation'> <div class='table-btn'><a href='javascript:;' class='layui-btn' onclick='deleteGoods(this)'>删除商品</a></div></td>`;
					html += `</tr>`;

					price += Number(item.price);
					selectGoodsSkuId.push(item.sku_id);
				}
			}
			$("#goods_num").html(selectGoodsSkuId.length);
			$("#goods tbody").html(html);

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

	/**
	 * 删除商品
	 */
	function deleteGoods(data) {
		var obj = $(data).parent().parent().parent();
		$(obj).remove();
		for (var i in selectGoodsSkuId) {
			if (selectGoodsSkuId[i] == Number($(obj).attr("data-sku_id"))) {
				selectGoodsSkuId.splice(i, 1);
				num_list.splice(i, 1);
			}
		}
		$("#goods_num").html(selectGoodsSkuId.length);
	}
</script>
{/block}