caimei365
/
caimei365-manager


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227
							<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>呵呵商城活动管理</title>
	<meta name="decorator" content="default"/>
	<style>
		.iconBox{
			font-size: 0;
		}
		.controls .conList{
			display: inline-block;
			margin-right: 15px;
		}
		.conList .btn:nth-of-type(1){
			margin-left: 25px;
		}
		.upload-content {
			margin-top: -70px;
		}
		.upload-content .conList .btn:nth-of-type(1) {
			width: 90px;
			height: 100px;
			border: 2px solid #eee;
			background: #fff;
			position: relative;
		}
		.upload-content .conList .btn:nth-of-type(1)>div {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			color: #666;
		}
		.upload-content .conList .btn:nth-of-type(1) span {
			font-size: 35px;
		}
		.upload-content .conList .btn:nth-of-type(1) h5 {
			color: #666;
		}
		.cancel-upload {
			background: transparent;
			border: none;
			box-shadow: none;
			position: relative;
			top: -38px;
			left: -25px;
			cursor: pointer;
			z-index: 100;
		}
		.upload-content .conList ol li {
			width: 114px;
			min-height: 80px;
			text-align: center;
			background: #fff;
			position: relative;
			top: 120px;
			margin-left: 2px;
		}
		.hide-pic {
			display: none !important;
		}
	</style>
	<script type="text/javascript">
		$(document).ready(function() {
			//$("#name").focus();
			$("#inputForm").validate({
				submitHandler: function(form){

					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>
</head>
<body>
	<ul class="nav nav-tabs">
		<li><a href="${ctx}/hehe/cmHeheActivity/list">活动列表</a></li>
		<li class="active"><a href="${ctx}/hehe/cmHeheActivity/form?id=${cmHeheActivity.id}">${not empty cmHeheActivity.id?'编辑':'添加'}活动</a></li>
	</ul><br/>
	<form:form id="inputForm" modelAttribute="cmHeheActivity" action="${ctx}/hehe/cmHeheActivity/save" method="post" class="form-horizontal">
		<form:hidden path="id"/>
		<sys:message content="${message}"/>
		<div class="control-group">
			<label class="control-label"><font color="red">*</font>活动名称：</label>
			<div class="controls">
				<form:input path="name" htmlEscape="false" maxlength="30" style="position:relative" placeholder="最多输入30个汉字" class="input-xlarge required"/>
			</div>
		</div>
		<div class="control-group iconBox">
			<label class="control-label"><font color="red">*</font>小程序列表缩略图：</label>
			<div class="controls upload-content" id="listImageBox">
				<div class="conList">
					<form:hidden id="listImage" path="listImage" htmlEscape="false" maxlength="255" class="input-xlarge required"/>
					<sys:ckfinder input="listImage" type="images" uploadPath="/photo" selectMultiple="false" maxWidth="100" maxHeight="100"/>
					<br>
					<label style="margin-left: 150px">建议图片分辨率180px*180px</label>
				</div>
			</div>
		</div>
		<div class="control-group iconBox">
			<label class="control-label"><font color="red">*</font>小程序详情主题图：</label>
			<div class="controls upload-content" id="detailsImageBox">
				<div class="conList">
					<form:hidden id="detailsImage" path="detailsImage" htmlEscape="false" maxlength="255" class="input-xlarge required"/>
					<sys:ckfinder input="detailsImage" type="images" uploadPath="/photo" selectMultiple="false" maxWidth="100" maxHeight="100"/>
					<br>
					<label style="margin-left: 150px">建议图片分辨率750px*600px</label>
				</div>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label"><font color="red">*</font>开始时间：</label>
			<div class="controls">
				<input name="beginTime" type="text" readonly="readonly" maxlength="20" class="input-medium Wdate " required
					value="<fmt:formatDate value="${cmHeheActivity.beginTime}" pattern="yyyy-MM-dd HH:mm:ss"/>"
					onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:false});"/>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label"><font color="red">*</font>结束时间：</label>
			<div class="controls">
				<input name="endTime" type="text" readonly="readonly" maxlength="20" class="input-medium Wdate " required
					value="<fmt:formatDate value="${cmHeheActivity.endTime}" pattern="yyyy-MM-dd HH:mm:ss"/>"
					onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:false});"/>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label"><font color="red">*</font>小程序状态：</label>
			<div class="controls">
				<form:select path="status" class="input-xlarge required">
					<form:option value="1" label="启用"/>
					<form:option value="2" label="停用"/>
				</form:select>
			</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 .conList .btn:nth-of-type(1)').html('<div><span>+</span><h5>选择图片</h5></div>');
			$('.upload-content .conList .btn:nth-of-type(2)').after('<img class="cancel-upload" src="/static/images/close-btn1.png">').remove();
			$('.upload-content .conList').find('.cancel-upload').hide();
			var observeEle = document.getElementsByClassName('upload-content')[0];
			var observeEle1 = document.getElementsByClassName('upload-content')[1];
			var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
			var MutationObserverConfig = {
				childList: true,
				subtree: true,
				characterData: true
			};
			var observer = new MutationObserver(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').show();
						if (nextEle.hasClass('hide-pic')) {
							nextEle.removeClass('hide-pic');
						}
					}
				})
			});
			observer.observe(observeEle, MutationObserverConfig);
			observer.observe(observeEle1, MutationObserverConfig);

			$('body').on('click', '.cancel-upload', function () {
				var wrapper = $(this).closest('.conList');
				wrapper.find('li').css('z-index', '-1');
				wrapper.find('input').val('');
				$(this).hide();
				wrapper.removeClass("hide-pic");
				wrapper.parent().append(wrapper.clone());
				wrapper.remove();
				$(".conList").each(function (i, ele) {
					if ($(ele).find("input.input-xlarge").val()) {
						$(ele).next().removeClass("hide-pic")
					}
				})
			});
			$(window).on("load", function () {
				setTimeout(function () {
					$("#listImageBox").find("input.input-xlarge").each(function (i, ele) {
						if ($(ele).val()) {
							$(ele).next().find("li").css("z-index", "99");
							$(ele).parents(".conList").find(".cancel-upload").show();
							$(ele).parents(".conList").next().removeClass("hide-pic")
						}
					})
					$("#detailsImageBox").find("input.input-xlarge").each(function (i, ele) {
						if ($(ele).val()) {
							$(ele).next().find("li").css("z-index", "99");
							$(ele).parents(".conList").find(".cancel-upload").show();
							$(ele).parents(".conList").next().removeClass("hide-pic")
						}
					})
				}, 200);
			});
		});

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