caimei365
/
caimei365-manager


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635
							<%@ page import="java.util.Date" %>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>优惠券管理</title>
	<meta name="decorator" content="default"/>
	<script type="text/javascript">
		$(document).ready(function() {
			//$("#name").focus();
			$("#inputForm").validate({
				submitHandler: function(form){
					if (imageList.length > 0) {
						var productInfo = JSON.stringify(imageList);
						$('#productInfo').val(productInfo);
					}
					var  productType = $("input[name='productType']:checked").val();
					if (productType == 2){
						var pcBanner = $('#pcBanner').val();
						var appletsBanner = $('#appletsBanner').val();
						if (pcBanner == '' || appletsBanner == '') {
							alertx("请上传Banner图");
							return false;
						}
					}
					var couponAmount = $("#couponAmount").val()*1;
					var touchPrice = $("#touchPrice").val()*1;
					if (couponAmount >= touchPrice) {
						alertx("优惠券金额必须小于优惠条件金额");
						return false;
					}
					var startDate = $("#startDate").val();
					var endDate = $("#endDate").val();
					if (startDate >= endDate) {
						alertx("结束时间不能早于开始时间");
						return false;
					}
					loading('正在提交，请稍等...');
					form.submit();
				},
				errorContainer: "#messageBox",
				errorPlacement: function(error, element) {
					$("#messageBox").text("输入有误，请先更正。");
					if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
						error.appendTo(element.parent().parent());
					} else {
						error.insertAfter(element);
					}
				}
			});
		});
	</script>

	<style>
		.iconBox {
			font-size: 0;
		}
		.conList .btn:nth-of-type(1){
			margin-left: 25px;
		}
		.upload-content-image {
			margin-top: -70px;
		}

		.upload-content-image .conList .btn:nth-of-type(1) {
			width: 90px;
			height: 100px;
			border: 2px solid #eee;
			background: #fff;
			position: relative;
		}

		.upload-content-image .conList .btn:nth-of-type(1) > div {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			color: #666;
		}

		.upload-content-image .conList .btn:nth-of-type(1) span {
			font-size: 35px;
		}

		.upload-content-image .conList .btn:nth-of-type(1) h5 {
			color: #666;
		}
		.upload-content-image .conList ol li {
			width: 114px;
			min-height: 80px;
			text-align: center;
			background: #fff;
			position: relative;
			top: 120px;
			margin-left: 2px;
		}
		.cancel-upload-image {
			background: transparent;
			border: none;
			box-shadow: none;
			position: relative;
			top: -38px;
			left: -25px;
			cursor: pointer;
			z-index: 100;
		}
		.hide-pic-image {
			display: none !important;
		}
	</style>
</head>
<body>
	<ul class="nav nav-tabs">
		<li><a href="${ctx}/coupon/cmCoupon/list?couponType=0">活动券</a></li>
		<li class="active"><a href="${ctx}/coupon/cmCoupon/form?couponType=0&id=${cmCoupon.id}">${not empty cmCoupon.id?'编辑':'添加'}</a></li>
	</ul><br/>
	<font style="color: red;margin-left: 20px">活动券适合在某些节日或者主题活动时创建，并且适用于全部客户以及商城全部商品或指定商品（不包括二手商品）。</font><br><br>
	<form:form id="inputForm" modelAttribute="cmCoupon" action="${ctx}/coupon/cmCoupon/save" method="post" class="form-horizontal">
		<form:hidden path="id"/>
		<form:hidden path="productInfo" id="productInfo"/>
		<input type="hidden" name="couponType" value="0"/>
		<sys:message content="${message}"/>
		<form:hidden path="receiveFlag"/>
		<div class="control-group">
			<label class="control-label"><font color="red">*</font>活动主题：</label>
			<div class="controls">
				<form:input path="name" htmlEscape="false" maxlength="30" placeholder="30个汉字以内" class="input-xlarge required"/>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label"><font color="red">*</font>优惠券金额：</label>
			<div class="controls">
				<input type="number" id="couponAmount" name="couponAmount" value="${cmCoupon.couponAmount}" min="0" required>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label"><font color="red">*</font>优惠条件：</label>
			<div class="controls">
				订单商品总额满&nbsp;&nbsp;&nbsp;&nbsp;<input type="number" name="touchPrice" id="touchPrice" value="${cmCoupon.touchPrice}" min="0" required>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label"><font color="red">*</font>开始时间：</label>
			<div class="controls">
				<input name="startDate" id="startDate" type="text" required readonly="readonly" maxlength="20" class="input-medium Wdate "
					value="<fmt:formatDate value="${cmCoupon.startDate}" pattern="yyyy-MM-dd 00:00:00"/>"
					onclick="WdatePicker({dateFmt:'yyyy-MM-dd 00:00:00',isShowClear:false});" onblur="dateShow()">
			</div>
		</div>
		<div class="control-group">
			<label class="control-label"><font color="red">*</font>结束时间：</label>
			<div class="controls">
				<input name="endDate" id="endDate" type="text" required readonly="readonly" maxlength="20" class="input-medium Wdate "
					value="<fmt:formatDate value="${cmCoupon.endDate}" pattern="yyyy-MM-dd 23:59:59"/>"
					onclick="WdatePicker({dateFmt:'yyyy-MM-dd 23:59:59',isShowClear:false});" onblur="dateShow()"/>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label"><font color="red">*</font>领取期限：</label>
			<div class="controls">
				<input type="number" id="receivePeriod" name="receivePeriod" onkeyup="onlynum(this)" value="${cmCoupon.receivePeriod}" min="1" required> 天
				<input type="checkbox" id="receiveFlag" name="receiveFlag" style="margin-left:20px !important" value="${cmCoupon.receiveFlag eq 1?1:0}"
					${cmCoupon.receiveFlag eq 1 ? "checked" : ""} onclick="changeCondition('receiveFlag','receivePeriod')" />同活动开始-结束时间
				<input id="receivePeriodTemp" type="hidden" value="${cmCoupon.receivePeriod}">
			</div>
		</div>
		<div class="control-group">
			<label class="control-label"><font color="red">*</font>使用期限：</label>
			<div class="controls">
				<input type="number" id="usePeriod" name="usePeriod" value="${cmCoupon.usePeriod}" min="1" required> 天
			</div>
		</div>
		<div class="control-group">
			<label class="control-label"><font color="red">*</font>优惠状态：</label>
			<div class="controls">
				<label id="initializeShow">
					<c:if test="${empty cmCoupon.status || cmCoupon.status eq 0}">
						<font color="#800080">未生效</font>
					</c:if>
					<c:if test="${cmCoupon.status eq 1}">
						<font color="#00CC66">已生效</font>
					</c:if>
					<c:if test="${cmCoupon.status eq 2}">
						<font color="red">已关闭</font>
					</c:if>
					<c:if test="${cmCoupon.status eq 3}">
						<font color="#FF6600">已失效</font>
					</c:if>
				</label>
				<label id="closeShow" style="display: none">
					<font color="red">已关闭</font>
				</label>
				<input type="hidden" id="hiddenStatus" name="status" value="">
				<input type="checkbox" id="status" name="status" value="2" ${cmCoupon.status eq "2" ? "checked" : ""} onclick="statusShow()" />关闭
			</div>
		</div>
		<div class="control-group">
			<label class="control-label"><font color="red">*</font>优惠商品：</label>
			<div class="controls">
				<form:radiobutton path="productType" value="1" label="全商城商品" onclick="productShow()" checked ="${empty cmCoupon.productType ? true:false}"/>
				<form:radiobutton path="productType" value="2" label="指定商品" onclick="productShow()"/>
			</div>
		</div>
		<div class="productData" hidden="hidden">
			<div class="control-group">
				<label class="control-label"><font color="red">*</font>网站活动页banner：</label>
				<div class="controls upload-content-image iconBox">
					<div class="conList">
						<form:hidden id="pcBanner" path="pcBanner" htmlEscape="false" maxlength="255" class="input-xlarge"/>
						<sys:ckfinder input="pcBanner" type="images" uploadPath="/photo" selectMultiple="false" maxWidth="100" maxHeight="100"/>
						<br>
					</div>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label"><font color="red">*</font>小程序活动页banner：</label>
				<div class="controls upload-content-image iconBox">
					<div class="conList">
						<form:hidden id="appletsBanner" path="appletsBanner" htmlEscape="false" maxlength="255" class="input-xlarge"/>
						<sys:ckfinder input="appletsBanner" type="images" uploadPath="/photo" selectMultiple="false" maxWidth="100" maxHeight="100"/>
						<br>
					</div>
				</div>
			</div>
			<div class="control-group">
				<input class="btn" id="del" style="width: 50px" onclick="batchDeletion()" value="删除"/>&nbsp;&nbsp;&nbsp;&nbsp;
				<input class="btn btn-primary" style="width: 70px" onclick="batchSaveSort()" value="一键排序"/>&nbsp;&nbsp;&nbsp;&nbsp;
				<input class="btn btn-primary" style="width: 50px" onclick="showSelect()" value="添加"/>
				<br><br>
				<table id="contentTable" class="table table-striped table-bordered table-condensed" hidden="hidden">
					<thead>
					<tr>
						<th style="width:20px;"><input class="check-all" type="checkbox" onclick="clickAllSelect(this)"/> 全选
						</th>
						<th>商品图片</th>
						<th>商品名称</th>
						<th>供应商</th>
						<th>网站状态</th>
						<th>小程序状态</th>
						<th>排序</th>
						<th>添加时间</th>
						<th>操作</th>
					</tr>
					</thead>
					<tbody id="hotSearch"></tbody>
				</table>
			</div>
		</div>
		<div class="form-actions">
			<input id="btnSubmit" class="btn btn-primary" type="submit" value="保 存"/>&nbsp;
			<input id="btnCancel" class="btn" type="button" value="返 回" onclick="history.go(-1)"/>
		</div>
	</form:form>
<script>
	//图片初始化
	$(function () {
		$('.upload-content-image .conList .btn:nth-of-type(1)').html('<div><span>+</span><h5>选择图片</h5></div>');
		$('.upload-content-image .conList .btn:nth-of-type(2)').after('<img class="cancel-upload-image" src="/static/images/close-btn1.png">').remove();
		$('.upload-content-image .conList').find('.cancel-upload-image').hide();
		var observeEleImage = document.getElementsByClassName('upload-content-image')[0];
		var observeEleImage1 = document.getElementsByClassName('upload-content-image')[1];
		var MutationObserverImage = window.MutationObserver || window.WebKitMutationObserver;
		var MutationObserverConfigImage = {
			childList: true,
			subtree: true,
			characterData: true
		};
		var observerImage = new MutationObserverImage(function (mutations) {
			$.each(mutations, function (index, item) {
				if (item.type === 'childList') {
					// 在创建新的 element 时调用
					var target = $(item.target),
							thisWrapper = target.closest('.conList'),
							nextEle = thisWrapper.next();
					thisWrapper.find('li').css('z-index', 99);
					thisWrapper.find('.cancel-upload-image').show();
					if (nextEle.hasClass('hide-pic-image')) {
						nextEle.removeClass('hide-pic-image');
					}
				}
			})
		});
		observerImage.observe(observeEleImage, MutationObserverConfigImage);
		observerImage.observe(observeEleImage1, MutationObserverConfigImage);

		$('body').on('click', '.upload-content-image li', function () {
			var index = $(this).closest('.conList').index() + 1,
					str = 'remarkImage' + index + 'FinderOpen';
			eval(str + '()');
		});
		$('body').on('click', '.cancel-upload-image', function () {
			var wrapper = $(this).closest('.conList');
			wrapper.find('li').css('z-index', '-1');
			wrapper.find('input').val('');
			$(this).hide();
			wrapper.removeClass("hide-pic-image");
			wrapper.parent().append(wrapper.clone());
			wrapper.remove();
			$(".conList").each(function (i, ele) {
				if ($(ele).find("input.input-xlarge").val()) {
					$(ele).next().removeClass("hide-pic-image")
				}
			})
		});
		$(window).on("load", function () {
			setTimeout(function () {
				var input = $("#pcBanner");
				if (input.val()) {
					input.next().find("li").css("z-index", "99");
					input.parents(".conList").find(".cancel-upload-image").show();
					input.parents(".conList").next().removeClass("hide-pic-image")
				}
				input = $("#appletsBanner");
				if (input.val()) {
					input.next().find("li").css("z-index", "99");
					input.parents(".conList").find(".cancel-upload-image").show();
					input.parents(".conList").next().removeClass("hide-pic-image")
				}
			}, 500);
		});
		productShow();

		initInputDisplay();
	});

	var productIds = '';
	var imageList = [];

	$(function () {
		<c:forEach items="${associateList}" var="associate" varStatus="index">
		imageList.push({
			id: "${associate.id}",
			productId: "${empty associate.productId ? "":associate.productId}",
			image: "${associate.image}",
			productName: "${associate.productName}",
			shopName: "${associate.shopName}",
			sort: "${associate.sort}",
			pcStatus: "${associate.pcStatus}",
			appletsStatus: "${associate.appletsStatus}",
			addTime: "<fmt:formatDate value="${associate.addTime}" pattern="yyyy-MM-dd HH:mm:ss"/>"
		});
		</c:forEach>

		if (imageList.length > 0) {
			$('#contentTable').show();
			batchSaveSort();
		}
	});

	//点击添加
	function showSelect() {
		var url = "${ctx}/coupon/cmCoupon/toAddProduct?productIds=" + productIds;
		var title = '';
		title = "选择商品";
		top.$.jBox("iframe:" + url, {
			iframeScrolling: 'yes',
			width: $(top.document).width() - 400,
			height: $(top.document).height() - 160,
			persistent: true,
			title: title,
			buttons: {"确定": '1', "取消": '-1'},
			submit: function (v, h, f) {
				//确定
				var $jboxFrame = top.$('#jbox-iframe');
				var $mainFrame = top.$('#mainFrame');
				if ('1' == v && 1 == $jboxFrame.size() && 1 == $mainFrame.size()) {
					var items = $jboxFrame[0].contentWindow.getCheckedItems();
					console.log(items);
					console.log(items[0]);
					for (var i = 0; i < items.length; i++) {
						console.log(items[i]);
						imageList.push(items[i]);
						$('#contentTable').show();
						$("#del").removeAttr("disabled");
						batchSaveSort();
					};
				}
				return true;
			}
		});
	}

	/**
	 * 一键排序
	 */
	function batchSaveSort() {
		imageList.sort(sort);
		insertHtml(imageList);
	}

	//根据sort值 从小到大排序
	function sort(a, b) {
		return a.sort - b.sort;
	}

	//相关图片列表数据
	function appendShopOrderHead(data, index) {
		var html = '<tr id ="ai' + index + '">' +
				'<td>' +
				'<input class="check-item" type="checkbox" name="info" value="' + index + '"/>' + (index + 1) +
				'</td>' +
				'<td>' +
				'<img src="' + data.image + '" width="60px" border="none" title="启用">' +
				'</td>' +
				'<td>' +
				data.productName +
				'</td>' +
				'<td>' +
				data.shopName +
				'</td>' +
				'<td>' +
				(data.pcStatus == 1 ? (
						'<font color="green">已启用</font>&nbsp;&nbsp;&nbsp;' +
						'<a href="javascript:void(0);" onclick="updatePcStatus(0,' + index + ');" >' +
						'停用</a>'
				) : (
						'<font color="red">已停用</font>&nbsp;&nbsp;&nbsp;' +
						'<a href="javascript:void(0)" onclick="updatePcStatus(1,' + index + ');">' +
						'启用</a>'
				)) +
				'</td>' +
				'<td>' +
				(data.appletsStatus == 1 ? (
						'<font color="green">已启用</font>&nbsp;&nbsp;&nbsp;' +
						'<a href="javascript:void(0);" onclick="updateAppletsStatus(0,' + index + ');" >' +
						'停用</a>'
				) : (
						'<font color="red">已停用</font>&nbsp;&nbsp;&nbsp;' +
						'<a href="javascript:void(0)" onclick="updateAppletsStatus(1,' + index + ');">' +
						'启用</a>'
				)) +
				'</td>' +
				'<td>' +
				'<input name="sort" style="width:50px;" value="' + data.sort + '"  onkeyup="onlynum(this)"  onchange="changeSort(' + index + ',this)"></td>' +
				'</td>' +
				'<td>' +
				(data.addTime == '' ? (
						'<fmt:formatDate value="<%=new Date()%>" pattern="yyyy-MM-dd HH:mm:ss"/>'
				) : (
						data.addTime
				)) +
				'</td>' +
				'<td>' +
				'<a href="javascript:;" onclick="delect(' + index + ')">删除</a>' +
				'</td>' +
				'</tr>';
		return html;
	}

	function insertHtml(list) {
		var html = '';
		productIds = '';
		list.forEach(function (item, index) {
			html += appendShopOrderHead(item, index);
			productIds += "," + item.productId;
		});
		$("#hotSearch").html(html);
	}

	function changeSort(index, sortThis) {
		var sort = sortThis.value;
		if (sort <= 0) {

		}
		var image = imageList[index];
		image.sort = sort;
	}

	function updatePcStatus(status, index) {
		var image = imageList[index];
		confirmx(status == 0 ? '确定停用吗？' : '确定启用吗？', function () {
			image.pcStatus = status;
			batchSaveSort();
		})
	}

	function updateAppletsStatus(status, index) {
		var image = imageList[index];
		confirmx(status == 0 ? '确定停用吗？' : '确定启用吗？', function () {
			image.appletsStatus = status;
			batchSaveSort();
		})
	}

	function clickAllSelect(ckb) {
		var isChecked = ckb.checked;
		$(".check-item").attr('checked', isChecked);
	}

	/**
	 * 删除操作
	 */
	function delect(index) {
		return confirmx("确定删除吗？", function () {
			var image = imageList[index];
			if (image.productId != '') {
				productIds = productIds.replace(image.productId,"");
			}
			imageList.splice(index, 1);
			insertHtml(imageList);
			if (imageList.length == 0) {
				$('#contentTable').hide();
				$("#del").attr("disabled", "disabled");
			}
		});
	}


	/**
	 * 批量删除
	 */
	function batchDeletion() {
		var index = -1;
		var i = 1;
		return confirmx("确定删除吗？", function () {
			$('input[name="info"]:checked').each(function () {
				var thisIndex = $(this).val();
				if (index >= 0 && index < thisIndex) {
					thisIndex = thisIndex - i;
					i++;
				} else {
					index = thisIndex;
				}
				var image = imageList[thisIndex];
				if (image.productId != '') {
					productIds = productIds.replace(image.productId, "");
				}
				imageList.splice(thisIndex, 1);
				insertHtml(imageList);
				if (imageList.length == 0) {
					$('#contentTable').hide();
					$("#del").attr("disabled", "disabled");
				}
			});
		});
	}

	function productShow() {
		var  productType = $("input[name='productType']:checked").val();
		if (productType == 2){
			$(".productData").show();
		}else {
			$(".productData").hide();
		}
	}

	function statusShow() {
		var status = $("input[name='status']:checked").val();
		if (status == 2) {
			$("#initializeShow").hide();
			$("#closeShow").show();
		} else {
			$("#initializeShow").show();
			$("#closeShow").hide();
			$("#hiddenStatus").val(0);
		}
	}

	function dateShow() {
		var startDate = $("#startDate").val();
		var startMs = new Date(startDate).getTime();
		var endDate = $("#endDate").val();
		var endMs = new Date(endDate).getTime();
		var nowMs = new Date().getTime();
		if (nowMs < startMs) {
			$("#initializeShow").html("<font color=\"#800080\">未生效</font>");
		} else if (nowMs > endMs) {
			$("#initializeShow").html("<font color=\"#FF6600\">已失效</font>");
		} else {
			$("#initializeShow").html("<font color=\"#00CC66\">已生效</font>");
		}
	}


	/**
	 * @param obj
	 * jquery控制input只能输入数字
	 */
	function onlynum(obj) {
		obj.value = obj.value.replace(/[^\d]/g, ""); //清除"数字"以外的字符
	}

	function changeCondition(flag, name) {
		var obj = $("#" + flag);
		var val = obj.val();
		if (val === '1') {
			obj.val(0);
			val = '0';
		} else {
			obj.val(1);
			val = '1';
		}
		var inputObj = $("#" + name);
		// 临时数据
		var tempObj = $("#" + name + "Temp");
		if (name.indexOf("Time") !== -1) {
			//修改时间
			if (val === '1') {
				inputObj.attr('onclick', '');
				inputObj.removeClass('required');
			} else {
				inputObj.attr('onclick', "WdatePicker({dateFmt:'yyyy-MM-dd HH:mm',isShowClear:false})");
				inputObj.addClass('required');
			}
		}else {
			if (val === '1') {
				inputObj.attr('readonly', true);
				inputObj.attr('required', false);
			} else {
				inputObj.attr('readonly', false);
				inputObj.attr('required', true);
			}
		}
		if (val === '1') {
			tempObj.val(inputObj.val());
			inputObj.val('');
		} else {
			inputObj.val(tempObj.val());
			tempObj.val('');
		}
	}

	function initInputDisplay() {
		var receiveFlag = $("#receiveFlag").val();
		if (receiveFlag === '1') {
			$("#receivePeriod").attr('readonly', true);
			$("#receivePeriod").attr('required', false);
		} else {
			$("#receivePeriod").attr('readonly', false);
			$("#receivePeriod").attr('required', true);
		}
	}
</script>
</body>
</html>