caimei365
/
caimei365-manager


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300
							<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>banner管理</title>
	<meta name="decorator" content="default"/>
	<style>
		.jumpType{
			margin-left: 20px;
			width: 400px;
		}
	</style>
	<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;
		}

		.paramRow {
			margin-top: 10px;
		}
	</style>
	<script type="text/javascript">
		$(document).ready(function() {
			//$("#name").focus();
			$("#inputForm").validate({
				submitHandler: function(form){
					var bannerType = ${cmBaikeBanner.bannerType};
					var productPcBanner = $("#productPcBanner").val();
					var productAppBanner = $("#productAppBanner").val();
					var instrumentPcBanner = $("#instrumentPcBanner").val();
					var instrumentAppBanner = $("#instrumentAppBanner").val();
					if (bannerType == 1) {
						if (productPcBanner === '') {
							alertx("请上传pc端banner");
							return false;
						}
						if (productAppBanner === '') {
							alertx("请上传移动端banner");
							return false;
						}
					} else {
						if (instrumentPcBanner === '') {
							alertx("请上传pc端banner");
							return false;
						}
						if (instrumentAppBanner === '') {
							alertx("请上传移动端banner");
							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>
</head>
<body>
	<ul class="nav nav-tabs">
		<li  class="${cmBaikeBanner.bannerType eq 1?'active':''}">
			<a href="${ctx}/baike/cmBaikeHotSearch/bannerForm?bannerType=1">产品banner</a>
		</li>
		<li  class="${cmBaikeBanner.bannerType eq 2?'active':''}">
			<a href="${ctx}/baike/cmBaikeHotSearch/bannerForm?bannerType=2">仪器banner</a>
		</li>
	</ul><br/>
	<form:form id="inputForm" modelAttribute="cmBaikeBanner" action="${ctx}/baike/cmBaikeHotSearch/saveBanner" method="post" class="form-horizontal">
		<form:hidden path="id"/>
		<form:hidden path="bannerType" />
		<sys:message content="${message}"/>
		<div id="pcBanner" style="${cmBaikeBanner.bannerType eq 1?'':'display:none'}">
			<div class="control-group iconBox">
				<label class="control-label"><span class="help-inline"><font color="red">*</font> </span>PC端banner：</label>
				<div class="controls upload-content" id="bannerBox1">
					<div class="conList">
						<form:hidden id="productPcBanner" path="productPcBanner" htmlEscape="false" maxlength="255" class="input-xlarge required"/>
						<sys:ckfinder input="productPcBanner" type="images" uploadPath="/photo" selectMultiple="false" maxWidth="100"
									  maxHeight="100"/>
						<br>
						<label style="margin-left: 150px">建议图片分辨率1920px*510px</label>
					</div>
				</div>
			</div>
			<div class="control-group iconBox">
				<label class="control-label"><span class="help-inline"><font color="red">*</font> </span>移动端banner：</label>
				<div class="controls upload-content" id="bannerBox2">
					<div class="conList">
						<form:hidden id="productAppBanner" path="productAppBanner" htmlEscape="false" maxlength="255"
									 class="input-xlarge required"/>
						<sys:ckfinder input="productAppBanner" type="images" uploadPath="/photo" selectMultiple="false"
									  maxWidth="100" maxHeight="100"/>
						<br>
						<label style="margin-left: 150px">建议图片分辨率750px*366px</label>
					</div>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">banner跳转链接：</label>
				<div class="controls">
					<form:input path="productLink" htmlEscape="false" placeholder="输入URL地址"
								class="input-xlarge"/>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">状态：</label>
				<div class="controls">
					<form:select path="productStatus" class="input-xlarge required">
						<form:option value="1" label="启用"/>
						<form:option value="0" label="停用"/>
					</form:select>
				</div>
			</div>

		</div>


		<div id="appBanner" style="${cmBaikeBanner.bannerType eq 2?'':'display:none'}">
			<div class="control-group iconBox">
				<label class="control-label"><span class="help-inline"><font color="red">*</font> </span>PC端banner：</label>
				<div class="controls upload-content" id="bannerBox3">
					<div class="conList">
						<form:hidden id="instrumentPcBanner" path="instrumentPcBanner" htmlEscape="false" maxlength="255" class="input-xlarge required"/>
						<sys:ckfinder input="instrumentPcBanner" type="images" uploadPath="/photo" selectMultiple="false" maxWidth="100"
									  maxHeight="100"/>
						<br>
						<label style="margin-left: 150px">建议图片分辨率1920px*510px</label>
					</div>
				</div>
			</div>
			<div class="control-group iconBox">
				<label class="control-label"><span class="help-inline"><font color="red">*</font> </span>移动端banner：</label>
				<div class="controls upload-content" id="bannerBox4">
					<div class="conList">
						<form:hidden id="instrumentAppBanner" path="instrumentAppBanner" htmlEscape="false" maxlength="255"
									 class="input-xlarge required"/>
						<sys:ckfinder input="instrumentAppBanner" type="images" uploadPath="/photo" selectMultiple="false"
									  maxWidth="100" maxHeight="100"/>
						<br>
						<label style="margin-left: 150px">建议图片分辨率750px*366px</label>
					</div>
				</div>
			</div>

			<div class="control-group">
				<label class="control-label">banner跳转链接：</label>
				<div class="controls">
					<form:input path="instrumentLink" htmlEscape="false" placeholder="输入URL地址"
								class="input-xlarge"/>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">状态：</label>
				<div class="controls">
					<form:select path="instrumentStatus" class="input-xlarge required">
						<form:option value="1" label="启用"/>
						<form:option value="0" label="停用"/>
					</form:select>
				</div>
			</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 MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
		var MutationObserverConfig = {
			childList: true,
			subtree: true,
			characterData: true
		};
		var observer = new MutationObserver(function (mutations) {
			$.each(mutations, function (index, item) {
			    debugger
				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');
					}
				}
			})
		});
		for (var i = 0; i < 4; i++) {
			var observeEle = document.getElementsByClassName('upload-content')[i];
			observer.observe(observeEle, 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 () {
				for (var i = 1;i<=4;i++) {
					$("#bannerBox" + i).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);
		});
	});
</script>
</body>
</html>