caimei365
/
caimei365-manager


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242
							<%@ page import="com.caimei.modules.newhome.entity.NewPageFirstNavigation" %>
<%@ 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){
					if ($('#icon').val() == ""){
						alertx("请上传图标");
						return;
					}
					const type = $('#type').val()
					const number = $('#number').val()
					const status = $('.wwwEnabledStatus').val()
					if (type != 2 && '1' == status && number >= 8) {
						top.$.jBox.confirm("网站端最多只能启用8个菜单，请停用其他菜单后再重新启用本菜单。", "提示");
						return;
					}
					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);
					}
				}
			});
		});

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

		$(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 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);

			$('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 () {
					$("#iconBox").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")
						}
					})
				}, 500);
			});
		});
	</script>
</head>
<body>
	<ul class="nav nav-tabs">
		<li class=${newPageFirstNavigation.type==0?"active":""}><a href="${ctx}/newhome/newPageFirstNavigation?type=0">主菜单列表</a></li>
		<li class=${newPageFirstNavigation.type==2?"active":""}><a href="${ctx}/newhome/newPageFirstNavigation?type=2">快捷运营菜单</a></li>
		<li class="active"><a href="${ctx}/newhome/newPageFirstNavigation/form?id=${newPageFirstNavigation.id}">${not empty newPageFirstNavigation.id?'编辑':'添加'}</a></li>
	</ul><br/>
	<form:form id="inputForm" modelAttribute="newPageFirstNavigation" action="${ctx}/newhome/newPageFirstNavigation/save" method="post" class="form-horizontal">
		<form:hidden path="id"/>
		<input id="number" name="number" type="hidden" value="${number}"/>
		<form:hidden path="type"/>
		<sys:message content="${message}"/>
		<div class="control-group">
			<label class="control-label"><font color="red">*</font><c:if test="${newPageFirstNavigation.type==0}">主</c:if>菜单名称：</label>
			<div class="controls">
				<form:input path="navigationName" htmlEscape="false" cssStyle="position: relative" maxlength="5" class="required input-xlarge "/>
			</div>
		</div>
		<c:if test="${newPageFirstNavigation.type!=0}">
		<div class="control-group">
			<label class="control-label"><c:if test="${newPageFirstNavigation.type==0}">主</c:if>菜单备注：</label>
			<div class="controls">
				<form:input path="remark" htmlEscape="false" cssStyle="position: relative" maxlength="8" class=" input-xlarge "/>
			</div>
		</div>
		</c:if>
		<c:if test="${newPageFirstNavigation.type != 0}">
			<div class="control-group iconBox">
				<label class="control-label"><span class="help-inline"><font color="red">*</font> </span>图标：</label>
				<div class="controls upload-content" id="iconBox">
					<div class="conList">
						<form:hidden id="icon" path="icon" htmlEscape="false" maxlength="255" class="input-xlarge required"/>
						<sys:ckfinder input="icon" type="images" uploadPath="/photo" selectMultiple="false" maxWidth="100" maxHeight="100"/>
						<br><label>建议图片分辨率110px*110px</label>
					</div>
				</div>
			</div>
		</c:if>
		<div class="control-group">
			<label class="control-label"><font color="red">*</font>跳转链接：</label>
			<div class="controls">
				<form:input path="link" htmlEscape="false" maxlength="255" class="required input-xlarge"/>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label"><font color="red">*</font>排序：</label>
			<div class="controls">
				<form:input path="sort" htmlEscape="false" maxlength="11" class="required input-xlarge " onkeyup="onlynum(this)"/>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label"><font color="red">*</font>网站状态：</label>
			<div class="controls">
				<form:select path="wwwEnabledStatus" class="input-xlarge wwwEnabledStatus">
					<form:options items="${fns:getDictList('enabled_status')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
				</form:select>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label"><font color="red">*</font>小程序状态：</label>
			<div class="controls">
				<form:select path="crmEnabledStatus" class="input-xlarge ">
					<form:options items="${fns:getDictList('enabled_status')}" itemLabel="label" itemValue="value" htmlEscape="false"/><%--label="${fns:getDictList('enabled_status')[0]}"--%>
				</form:select>
			</div>
		</div>
		<div class="form-actions">
			<shiro:hasPermission name="newhome:newPageFirstNavigation:edit"><input id="btnSubmit" class="btn btn-primary" type="submit" value="保 存"/>&nbsp;</shiro:hasPermission>
			<input id="btnCancel" class="btn" type="button" value="返 回" onclick="history.go(-1)"/>
		</div>
	</form:form>
</body>
</html>