caimei365
/
caimei365-manager


			
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652
							<%@ 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"/>
    <style>
        .iconBox {
            font-size: 0;
            margin-left: 130px !important;
        }

        .controls .conList {
            display: inline-block;
            margin-right: 15px;
        }

        .conList .btn:nth-of-type(1) {
            margin-left: 25px;
        }

        .upload-content {
            margin-top: -100px;
        }

        .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;
        }

        td {
            border: solid black;
            border-width: 0px 1px 1px 0px;
        }

        table {
            border-collapse: inherit;
            border: solid black;
            border-width: 1px 0px 0px 1px;
        }

        select {
            width: 85px;
            line-height: 25px;
            height: 25px
        }

        .tbMargin {
            margin: 15px 17px;
        }

        em {
            background: #d7d7d7;
            color: black;
            padding: 2px 8px;
            font-style: normal;
            font-size: 14px;
            display: inline-block;
            border-radius: 2px
        }

        .middleEm {
            position: absolute;
            left: 40%;
            margin-top: 7px;
        }

        .rightEm {
            float: right;
            margin-top: 7px;
            margin-right: 10px;
        }

        .templateButton {
            margin: 15px 0 15px 15px !important;
        }

        .displayTemplate, .mallTemplate {
            position: relative;
        }

        .templateImageTable {
            margin-left: 20px;
        }

        .templateImageDiv {
            padding: 5px 10px;
            text-align: center;
        }

        #templateTd label{
            font-weight: bolder;
            font-size: 18px;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            //表单提交
            $("#inputForm").validate({
                submitHandler: function (form) {
                    var templateType = $("input[type='radio']:checked").val();
                    if (templateType == '' || templateType == undefined) {
                        alertx("请配置模板图片区域");
                        return;
                    }
                    var type = $("#type").val();
                    if ((type == 'adsImage' && adsImageList.length > 0)) {
                        var stringify = JSON.stringify(adsImageList);
                        $('#images').val(stringify);
                    } else if ((type == 'infoImage' && infoImageList.length > 0)) {
                        var stringify = JSON.stringify(infoImageList);
                        $('#images').val(stringify);
                    } else if ((type == 'productImage' && productImageList.length > 0)) {
                        var stringify = JSON.stringify(productImageList);
                        $('#images').val(stringify);
                    } else {
                        alertx("至少上传一张图片");
                        return;
                    }
                    var wwwIcon1 = $("#wwwIcon1").val();
                    var crmIcon1 = $("#crmIcon1").val();
                    var wwwIcon2 = $("#wwwIcon2").val();
                    var crmIcon2 = $("#crmIcon2").val();
                    var wwwIcon3 = $("#wwwIcon3").val();
                    var crmIcon3 = $("#crmIcon3").val();
                    var wwwIcon4 = $("#wwwIcon4").val();
                    var crmIcon4 = $("#crmIcon4").val();
                    var wwwIcon5 = $("#wwwIcon5").val();
                    var crmIcon5 = $("#crmIcon5").val();
                    if (templateType >= 11 && templateType <= 20 && templateType != 14) {
                        if (wwwIcon1 === '') {
                            alertx("请上传网站端广告图1");
                            return;
                        }
                        if (crmIcon1 === '') {
                            alertx("请上传移动端广告图1");
                            return;
                        }
                        if (templateType >= 11 && templateType <= 17) {
                            if (wwwIcon2 === '') {
                                alertx("请上传网站端广告图2");
                                return;
                            }
                            if (crmIcon2 === '') {
                                alertx("请上传移动端广告图2");
                                return;
                            }
                            if (templateType >= 11 && templateType <= 15) {
                                if (wwwIcon3 === '') {
                                    alertx("请上传网站端广告图3");
                                    return;
                                }
                                if (crmIcon3 === '') {
                                    alertx("请上传移动端广告图3");
                                    return;
                                }
                                if (templateType == 13) {
                                    if (wwwIcon4 === '') {
                                        alertx("请上传网站端广告图4");
                                        return;
                                    }
                                    if (crmIcon4 === '') {
                                        alertx("请上传移动端广告图4");
                                        return;
                                    }
                                    if (wwwIcon5 === '') {
                                        alertx("请上传网站端广告图5");
                                        return;
                                    }
                                    if (crmIcon5 === '') {
                                        alertx("请上传移动端广告图5");
                                        return;
                                    }
                                } else {
                                    $(".Image4 .cancel-upload").click();
                                    $(".Image5 .cancel-upload").click();
                                }
                            } else {
                                $(".Image3 .cancel-upload").click();
                                $(".Image4 .cancel-upload").click();
                                $(".Image5 .cancel-upload").click();
                            }
                        } else {
                            $(".Image2 .cancel-upload").click();
                            $(".Image3 .cancel-upload").click();
                            $(".Image4 .cancel-upload").click();
                            $(".Image5 .cancel-upload").click();
                        }
                    } else {
                        $(".Image1 .cancel-upload").click();
                        $(".Image2 .cancel-upload").click();
                        $(".Image3 .cancel-upload").click();
                        $(".Image4 .cancel-upload").click();
                        $(".Image5 .cancel-upload").click();
                    }
                    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">
    <c:if test="${not empty floorContent.floorId}">
        <li><a href="${ctx}/newhome/newPageFloor/">楼层管理列表</a></li>
        <li class="active"><a href="${ctx}/newhome/newPageFloor/goContentPage?floorId=${floorContent.floorId}">内容</a>
        </li>
    </c:if>
    <c:if test="${empty floorContent.floorId}">
        <li><a href="${ctx}/cmpage/cmPage/?flag=2">网页列表</a></li>
        <li><a href="${ctx}/cmpage/cmPageCentre/?pageId=${floorContent.pageId}&type=6">活动专题商品楼层</a></li>
        <li class="active"><a
                href="${ctx}/cmpage/cmPageCentre/goContentPage?pageId=${floorContent.pageId}&centreId=${floorContent.centreId}&type=${floorContent.type}">内容</a>
        </li>
    </c:if>
</ul>
<br/>
<form:form id="inputForm" modelAttribute="floorContent" action="${ctx}/newhome/newPageFloor/saveFloorContent"
           method="post" class="form-horizontal">
    <form:hidden path="id"/>
    <form:hidden path="floorId"/>
    <form:hidden path="centreId"/>
    <form:hidden path="pageId"/>
    <form:hidden path="images" id="images"/>
    <form:hidden path="type"/>
    <sys:message content="${message}"/>
    <div class="control-group">
        楼层名称：<a style="text-decoration:none;">${floorContent.floorTitle}</a>
    </div>
    <div class="control-group">
        <table style="overflow:scroll;height: 400px !important;">
            <tr>
                <td style="width: 380px !important;height: 50px">
                    <label style="font-weight: bold;font-size: 16px" class="tbMargin">模板库</label>
                    <form:select path="" id="templateSelect" onchange="changeTemplateSelect()" class="tbMargin"
                                 cssStyle="width: 130px">
                        <form:option value="1" label="模板标签"/>
                        <form:option value="2" label="偏展会标签"/>
                        <form:option value="3" label="偏商城活动"/>
                    </form:select>
                    <form:select path="" id="sourceSelect" onchange="changeSourceSelect()" class="tbMargin"
                                 cssStyle="width: 90px">
                        <form:option value="1" label="PC端"/>
                        <form:option value="2" label="移动端"/>
                    </form:select>
                </td>
                <td rowspan="2" style=" width: 2800px;">
                    <div style="height: 100%;overflow-y:scroll;">
                        <label id="infoLabel"
                               style="position: relative;left: 200px;top: 200px; font-weight: bolder;font-size: 30px">请先选择左边模板后，再编辑模板相关内容</label>
                        <div class="control-group clear Image1">
                            <div style="float: left">
                                <span class="help-inline"><font color="red">*</font> </span>网站端广告图1：
                                <div class="controls upload-content iconBox" id="pcAdsImage1">
                                    <div class="conList">
                                        <form:hidden id="wwwIcon1" path="pcAdsImage1" htmlEscape="false" maxlength="255"
                                                     class="input-xlarge required"/>
                                        <sys:ckfinder input="wwwIcon1" type="images" uploadPath="/photo"
                                                      selectMultiple="false"
                                                      maxWidth="100" maxHeight="100"/> <br>
                                        <label id="pcImageSize1">建议图片分辨率1184px*160px</label>
                                    </div>
                                </div>
                            </div>
                            <div style="float: left">
                                <span class="help-inline"><font color="red">*</font> </span>移动端广告图1：
                                <div class="controls upload-content iconBox" id="appletsAdsImage1">
                                    <div class="conList">
                                        <form:hidden id="crmIcon1" path="appletsAdsImage1" htmlEscape="false"
                                                     maxlength="255"
                                                     class="input-xlarge required"/>
                                        <sys:ckfinder input="crmIcon1" type="images" uploadPath="/photo"
                                                      selectMultiple="false"
                                                      maxWidth="100" maxHeight="100"/><br>
                                        <label id="appletsImageSize1">建议图片分辨率702px*240px</label>
                                    </div>
                                </div>
                            </div>
                            <div style="float: left">
                                <span class="help-inline"></span>广告图1跳转链接：
                                <div class="controls">
                                    <form:input path="adsLink1" htmlEscape="false" maxlength="255"
                                                class="input-xlarge"/>
                                </div>
                            </div>
                        </div>
                        <div class="control-group clear Image2">
                            <div style="float: left">
                                <span class="help-inline"><font color="red">*</font> </span>网站端广告图2：
                                <div class="controls upload-content iconBox" id="pcAdsImage2">
                                    <div class="conList">
                                        <form:hidden id="wwwIcon2" path="pcAdsImage2" htmlEscape="false" maxlength="255"
                                                     class="input-xlarge required"/>
                                        <sys:ckfinder input="wwwIcon2" type="images" uploadPath="/photo"
                                                      selectMultiple="false"
                                                      maxWidth="100" maxHeight="100"/><br>
                                        <label id="pcImageSize2">建议图片分辨率344px*268px</label>
                                    </div>
                                </div>
                            </div>
                            <div style="float: left">
                                <span class="help-inline"><font color="red">*</font> </span>移动端广告图2：
                                <div class="controls upload-content iconBox" id="appletsAdsImage2">
                                    <div class="conList">
                                        <form:hidden id="crmIcon2" path="appletsAdsImage2" htmlEscape="false"
                                                     maxlength="255"
                                                     class="input-xlarge required"/>
                                        <sys:ckfinder input="crmIcon2" type="images" uploadPath="/photo"
                                                      selectMultiple="false"
                                                      maxWidth="100" maxHeight="100"/><br>
                                        <label id="appletsImageSize2">建议图片分辨率339px*516px</label>
                                    </div>
                                </div>
                            </div>
                            <div style="float: left">
                                <span class="help-inline"></span>广告图2跳转链接：
                                <div class="controls">
                                    <form:input path="adsLink2" htmlEscape="false" maxlength="255"
                                                class="input-xlarge"/>
                                </div>
                            </div>
                        </div>
                        <div class="control-group clear Image3">
                            <div style="float: left">
                                <span class="help-inline"><font color="red">*</font> </span>网站端广告图3：
                                <div class="controls upload-content iconBox" id="pcAdsImage3">
                                    <div class="conList">
                                        <form:hidden id="wwwIcon3" path="pcAdsImage3" htmlEscape="false" maxlength="255"
                                                     class="input-xlarge required"/>
                                        <sys:ckfinder input="wwwIcon3" type="images" uploadPath="/photo"
                                                      selectMultiple="false"
                                                      maxWidth="100" maxHeight="100"/><br>
                                        <label id="pcImageSize3">建议图片分辨率344px*268px</label>
                                    </div>
                                </div>
                            </div>
                            <div style="float: left">
                                <span class="help-inline"><font color="red">*</font> </span>移动端广告图3：
                                <div class="controls upload-content iconBox" id="appletsAdsImage3">
                                    <div class="conList">
                                        <form:hidden id="crmIcon3" path="appletsAdsImage3" htmlEscape="false"
                                                     maxlength="255"
                                                     class="input-xlarge required"/>
                                        <sys:ckfinder input="crmIcon3" type="images" uploadPath="/photo"
                                                      selectMultiple="false"
                                                      maxWidth="100" maxHeight="100"/><br>
                                        <label id="appletsImageSize3">建议图片分辨率339px*516px</label>
                                    </div>
                                </div>
                            </div>
                            <div style="float: left">
                                <span class="help-inline"></span>广告图3跳转链接：
                                <div class="controls">
                                    <form:input path="adsLink3" htmlEscape="false" maxlength="255"
                                                class="input-xlarge"/>
                                </div>
                            </div>
                        </div>
                        <div class="control-group clear Image4">
                            <div style="float: left">
                                <span class="help-inline"><font color="red">*</font> </span>网站端广告图4：
                                <div class="controls upload-content iconBox" id="pcAdsImage4">
                                    <div class="conList">
                                        <form:hidden id="wwwIcon4" path="pcAdsImage4" htmlEscape="false" maxlength="255"
                                                     class="input-xlarge required"/>
                                        <sys:ckfinder input="wwwIcon4" type="images" uploadPath="/photo"
                                                      selectMultiple="false"
                                                      maxWidth="100" maxHeight="100"/><br>
                                        <label id="pcImageSize4">建议图片分辨率344px*268px</label>
                                    </div>
                                </div>
                            </div>
                            <div style="float: left">
                                <span class="help-inline"><font color="red">*</font> </span>移动端广告图4：
                                <div class="controls upload-content iconBox" id="appletsAdsImage4">
                                    <div class="conList">
                                        <form:hidden id="crmIcon4" path="appletsAdsImage4" htmlEscape="false"
                                                     maxlength="255"
                                                     class="input-xlarge required"/>
                                        <sys:ckfinder input="crmIcon4" type="images" uploadPath="/photo"
                                                      selectMultiple="false"
                                                      maxWidth="100" maxHeight="100"/><br>
                                        <label id="appletsImageSize4">建议图片分辨率339px*516px</label>
                                    </div>
                                </div>
                            </div>
                            <div style="float: left">
                                <span class="help-inline"></span>广告图4跳转链接：
                                <div class="controls">
                                    <form:input path="adsLink4" htmlEscape="false" maxlength="255"
                                                class="input-xlarge"/>
                                </div>
                            </div>
                        </div>
                        <div class="control-group clear Image5">
                            <div style="float: left">
                                <span class="help-inline"><font color="red">*</font> </span>网站端广告图5：
                                <div class="controls upload-content iconBox" id="pcAdsImage5">
                                    <div class="conList">
                                        <form:hidden id="wwwIcon5" path="pcAdsImage5" htmlEscape="false" maxlength="255"
                                                     class="input-xlarge required"/>
                                        <sys:ckfinder input="wwwIcon5" type="images" uploadPath="/photo"
                                                      selectMultiple="false"
                                                      maxWidth="100" maxHeight="100"/><br>
                                        <label id="pcImageSize5">建议图片分辨率344px*268px</label>
                                    </div>
                                </div>
                            </div>
                            <div style="float: left">
                                <span class="help-inline"><font color="red">*</font> </span>移动端广告图5：
                                <div class="controls upload-content iconBox" id="appletsAdsImage5">
                                    <div class="conList">
                                        <form:hidden id="crmIcon5" path="appletsAdsImage5" htmlEscape="false"
                                                     maxlength="255"
                                                     class="input-xlarge required"/>
                                        <sys:ckfinder input="crmIcon5" type="images" uploadPath="/photo"
                                                      selectMultiple="false"
                                                      maxWidth="100" maxHeight="100"/><br>
                                        <label id="appletsImageSize5">建议图片分辨率339px*516px</label>
                                    </div>
                                </div>
                            </div>
                            <div style="float: left">
                                <span class="help-inline"></span>广告图5跳转链接：
                                <div class="controls">
                                    <form:input path="adsLink5" htmlEscape="false" maxlength="255"
                                                class="input-xlarge"/>
                                </div>
                            </div>
                        </div>
                        <br>
                        <div class="control-group templateImageTable">
                            <input class="btn" id="del" style="width: 50px" onclick="batchDeletion()" value="删除"/>&nbsp;&nbsp;&nbsp;&nbsp;
                            <input class="btn btn-primary" id="sortBtn" style="width: 70px" onclick="batchSaveSort()"
                                   value="一键排序"/>&nbsp;&nbsp;&nbsp;&nbsp;
                            <input class="btn btn-primary" id="showSelectBtn" style="width: 50px"
                                   onclick="showSelect('${ctx}/newhome/newPageFloor/addActivityImage')" value="添加"/>
                            <br><br>
                            <table id="adsImageTable" class="table table-striped table-bordered table-condensed"
                                   style="display: none">
                                <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="adsImageTbody"></tbody>
                            </table>
                            <table id="infoImageTable" class="table table-striped table-bordered table-condensed"
                                   style="display: none">
                                <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>
                                    <th>创建时间</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody id="infoImageTbody"></tbody>
                            </table>
                            <table id="productImageTable" class="table table-striped table-bordered table-condensed"
                                   style="display: none">
                                <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>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody id="productImageTbody"></tbody>
                            </table>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td id="templateTd" style="display: block;height: 580px;overflow-y:scroll;width: 380px !important;">
                    <div>
                        <div id="pcTemplate" style="position: relative">
                            <div id="pcTemplate1" class="displayTemplate" style="position: relative;">
                                <form:radiobutton path="templateType" value="1" label="模板1" cssClass="templateButton"
                                onclick="showContent('pc')"/>
                                <em class="middleEm">偏展会活动</em>
                                <em class="rightEm">PC端</em>
                                <div class="templateImageDiv">
                                    <img src="/static/template/activity/pc/1.png">
                                </div>
                            </div>
                            <div id="pcTemplate2" class="displayTemplate">
                                <form:radiobutton path="templateType" value="2" label="模板2" cssClass="templateButton"
                                                  onclick="showContent('pc')"/>
                                <em class="middleEm">偏展会活动</em>
                                <em class="rightEm">PC端</em>
                                <div class="templateImageDiv">
                                    <img src="/static/template/activity/pc/2.png">
                                </div>
                            </div>
                            <div id="pcTemplate3" class="displayTemplate">
                                <form:radiobutton path="templateType" value="3" label="模板3" cssClass="templateButton"
                                                  onclick="showContent('pc')"/>
                                <em class="middleEm">偏展会活动</em>
                                <em class="rightEm">PC端</em>
                                <div class="templateImageDiv">
                                    <img src="/static/template/activity/pc/3.png">
                                </div>
                            </div>
                            <div id="pcTemplate4" class="displayTemplate">
                                <form:radiobutton path="templateType" value="4" label="模板4" cssClass="templateButton"
                                                  onclick="showContent('pc')"/>
                                <em class="middleEm">偏展会活动</em>
                                <em class="rightEm">PC端</em>
                                <div class="templateImageDiv">
                                    <img src="/static/template/activity/pc/4.png">
                                </div>
                            </div>
                            <div id="pcTemplate5" class="displayTemplate">
                                <form:radiobutton path="templateType" value="5" label="模板5" cssClass="templateButton"
                                                  onclick="showContent('pc')"/>
                                <em class="middleEm">偏展会活动</em>
                                <em class="rightEm">PC端</em>
                                <div class="templateImageDiv">
                                    <img src="/static/template/activity/pc/5.png">
                                </div>
                            </div>
                            <div id="pcTemplate6" class="displayTemplate">
                                <form:radiobutton path="templateType" value="6" label="模板6" cssClass="templateButton"
                                                  onclick="showContent('pc')"/>
                                <em class="middleEm">偏展会活动</em>
                                <em class="rightEm">PC端</em>
                                <div class="templateImageDiv">
                                    <img src="/static/template/activity/pc/6.png">
                                </div>
                            </div>
                            <div id="pcTemplate7" class="displayTemplate">
                                <form:radiobutton path="templateType" value="7" label="模板7" cssClass="templateButton"
                                                  onclick="showContent('pc')"/>
                                <em class="middleEm">偏展会活动</em>
                                <em class="rightEm">PC端</em>
                                <div class="templateImageDiv">
                                    <img src="/static/template/activity/pc/7.png">
                                </div>
                            </div>
                            <div id="pcTemplate8" class="displayTemplate">
                                <form:radiobutton path="templateType" value="8" label="模板8" cssClass="templateButton"
                                                  onclick="showContent('pc')"/>
                                <em class="middleEm">偏展会活动</em>
                                <em class="rightEm">PC端</em>
                                <div class="templateImageDiv">
                                    <img src="/static/template/activity/pc/8.png">
                                </div>
                            </div>
                            <div id="pcTemplate9" class="displayTemplate">
                                <form:radiobutton path="templateType" value="9" label="模板9" cssClass="templateButton"
                                                  onclick="showContent('pc')"/>
                                <em class="middleEm">偏展会活动</em>
                                <em class="rightEm">PC端</em>
                                <div class="templateImageDiv">
                                    <img src="/static/template/activity/pc/9.png">
                                </div>
                            </div>
                            <div id="pcTemplate10" class="displayTemplate">
                                <form:radiobutton path="templateType" value="10" label="模板10" cssClass="templateButton"
                                                  onclick="showContent('pc')"/>
                                <em class="middleEm">偏展会活动</em>
                                <em class="rightEm">PC端</em>
                                <div class="templateImageDiv">
                                    <img src="/static/template/activity/pc/10.png">
                                </div>
                            </div>
                            <div id="pcTemplate11" class="mallTemplate">
                                <form:radiobutton path="templateType" value="11" label="模板11" cssClass="templateButton"
                                                  onclick="showContent('pc')"/>
                                <em class="middleEm">偏商城活动</em>
                                <em class="rightEm">PC端</em>
                                <div class="templateImageDiv">
                                    <img src="/static/template/activity/pc/11.png">
                                </div>
                            </div>
                            <div id="pcTemplate12" class="mallTemplate">
                                <form:radiobutton path="templateType" value="12" label="模板12" cssClass="templateButton"
                                                  onclick="showContent('pc')"/>
                                <em class="middleEm">偏商城活动</em>
                                <em class="rightEm">PC端</em>
                                <div class="templateImageDiv">
                                    <img src="/static/template/activity/pc/12.png">
                                </div>
                            </div>
                            <div id="pcTemplate13" class="mallTemplate">
                                <form:radiobutton path="templateType" value="13" label="模板13" cssClass="templateButton"
                                                  onclick="showContent('pc')"/>
                                <em class="middleEm">偏商城活动</em>
                                <em class="rightEm">PC端</em>
                                <div class="templateImageDiv">
                                    <img src="/static/template/activity/pc/13.png">
                                </div>
                            </div>
                            <div id="pcTemplate14" class="mallTemplate">
                                <form:radiobutton path="templateType" value="14" label="模板14" cssClass="templateButton"
                                                  onclick="showContent('pc')"/>
                                <em class="middleEm">偏商城活动</em>
                                <em class="rightEm">PC端</em>
                                <div class="templateImageDiv">
                                    <img src="/static/template/activity/pc/14.png">
                                </div>
                            </div>
                            <div id="pcTemplate15" class="mallTemplate">
                                <form:radiobutton path="templateType" value="15" label="模板15" cssClass="templateButton"
                                                  onclick="showContent('pc')"/>
                                <em class="middleEm">偏商城活动</em>
                                <em class="rightEm">PC端</em>
                                <div class="templateImageDiv">
                                    <img src="/static/template/activity/pc/15.png">
                                </div>
                            </div>
                            <div id="pcTemplate16" class="mallTemplate">
                                <form:radiobutton path="templateType" value="16" label="模板16" cssClass="templateButton"
                                                  onclick="showContent('pc')"/>
                                <em class="middleEm">偏商城活动</em>
                                <em class="rightEm">PC端</em>
                                <div class="templateImageDiv">
                                    <img src="/static/template/activity/pc/16.png">
                                </div>
                            </div>
                            <div id="pcTemplate17" class="mallTemplate">
                                <form:radiobutton path="templateType" value="17" label="模板17" cssClass="templateButton"
                                                  onclick="showContent('pc')"/>
                                <em class="middleEm">偏商城活动</em>
                                <em class="rightEm">PC端</em>
                                <div class="templateImageDiv">
                                    <img src="/static/template/activity/pc/17.png">
                                </div>
                            </div>
                            <div id="pcTemplate18" class="mallTemplate">
                                <form:radiobutton path="templateType" value="18" label="模板18" cssClass="templateButton"
                                                  onclick="showContent('pc')"/>
                                <em class="middleEm">偏商城活动</em>
                                <em class="rightEm">PC端</em>
                                <div class="templateImageDiv">
                                    <img src="/static/template/activity/pc/18.png">
                                </div>
                            </div>
                            <div id="pcTemplate19" class="mallTemplate">
                                <form:radiobutton path="templateType" value="19" label="模板19" cssClass="templateButton"
                                                  onclick="showContent('pc')"/>
                                <em class="middleEm">偏商城活动</em>
                                <em class="rightEm">PC端</em>
                                <div class="templateImageDiv">
                                    <img src="/static/template/activity/pc/19.png">
                                </div>
                            </div>
                            <div id="pcTemplate20" class="mallTemplate">
                                <form:radiobutton path="templateType" value="20" label="模板20" cssClass="templateButton"
                                                  onclick="showContent('pc')"/>
                                <em class="middleEm">偏商城活动</em>
                                <em class="rightEm">PC端</em>
                                <div class="templateImageDiv">
                                    <img src="/static/template/activity/pc/20.png">
                                </div>
                            </div>
                            <div id="pcTemplate21" class="mallTemplate">
                                <form:radiobutton path="templateType" value="21" label="模板21" cssClass="templateButton"
                                                  onclick="showContent('pc')"/>
                                <em class="middleEm">偏商城活动</em>
                                <em class="rightEm">PC端</em>
                                <div class="templateImageDiv">
                                    <img src="/static/template/activity/pc/21.png">
                                </div>
                            </div>
                        </div>
                        <div id="appletsTemplate" class="hide">
                            <div id="appletsTemplate1" class="displayTemplate">
                                <form:radiobutton path="templateType" value="51" label="模板1" cssClass="templateButton"
                                                  onclick="showContent('applets')"/>
                                <em class="middleEm">偏展会活动</em>
                                <em class="rightEm">移动端</em>
                                <div class="templateImageDiv">
                                    <img src="/static/template/activity/applets/1.png">
                                </div>
                            </div>
                            <div id="appletsTemplate2" class="displayTemplate">
                                <form:radiobutton path="templateType" value="52" label="模板2" cssClass="templateButton"
                                                  onclick="showContent('applets')"/>
                                <em class="middleEm">偏展会活动</em>
                                <em class="rightEm">移动端</em>
                                <div class="templateImageDiv">
                                    <img src="/static/template/activity/applets/2.png">
                                </div>
                            </div>
                            <div id="appletsTemplate3" class="displayTemplate">
                                <form:radiobutton path="templateType" value="53" label="模板3" cssClass="templateButton"
                                                  onclick="showContent('applets')"/>
                                <em class="middleEm">偏展会活动</em>
                                <em class="rightEm">移动端</em>
                                <div class="templateImageDiv">
                                    <img src="/static/template/activity/applets/3.png">
                                </div>
                            </div>
                            <div id="appletsTemplate4" class="displayTemplate">
                                <form:radiobutton path="templateType" value="54" label="模板4" cssClass="templateButton"
                                                  onclick="showContent('applets')"/>
                                <em class="middleEm">偏展会活动</em>
                                <em class="rightEm">移动端</em>
                                <div class="templateImageDiv">
                                    <img src="/static/template/activity/applets/4.png">
                                </div>
                            </div>
                            <div id="appletsTemplate5" class="displayTemplate">
                                <form:radiobutton path="templateType" value="55" label="模板5" cssClass="templateButton"
                                                  onclick="showContent('applets')"/>
                                <em class="middleEm">偏展会活动</em>
                                <em class="rightEm">移动端</em>
                                <div class="templateImageDiv">
                                    <img src="/static/template/activity/applets/5.png">
                                </div>
                            </div>
                            <div id="appletsTemplate6" class="displayTemplate">
                                <form:radiobutton path="templateType" value="56" label="模板6" cssClass="templateButton"
                                                  onclick="showContent('applets')"/>
                                <em class="middleEm">偏展会活动</em>
                                <em class="rightEm">移动端</em>
                                <div class="templateImageDiv">
                                    <img src="/static/template/activity/applets/6.png">
                                </div>
                            </div>
                            <div id="appletsTemplate7" class="displayTemplate">
                                <form:radiobutton path="templateType" value="57" label="模板7" cssClass="templateButton"
                                                  onclick="showContent('applets')"/>
                                <em class="middleEm">偏展会活动</em>
                                <em class="rightEm">移动端</em>
                                <div class="templateImageDiv">
                                    <img src="/static/template/activity/applets/7.png">
                                </div>
                            </div>
                            <div id="appletsTemplate8" class="displayTemplate">
                                <form:radiobutton path="templateType" value="58" label="模板8" cssClass="templateButton"
                                                  onclick="showContent('applets')"/>
                                <em class="middleEm">偏展会活动</em>
                                <em class="rightEm">移动端</em>
                                <div class="templateImageDiv">
                                    <img src="/static/template/activity/applets/8.png">
                                </div>
                            </div>
                            <div id="appletsTemplate9" class="displayTemplate">
                                <form:radiobutton path="templateType" value="59" label="模板9" cssClass="templateButton"
                                                  onclick="showContent('applets')"/>
                                <em class="middleEm">偏展会活动</em>
                                <em class="rightEm">移动端</em>
                                <div class="templateImageDiv">
                                    <img src="/static/template/activity/applets/9.png">
                                </div>
                            </div>
                            <div id="appletsTemplate10" class="displayTemplate">
                                <form:radiobutton path="templateType" value="60" label="模板10" cssClass="templateButton"
                                                  onclick="showContent('applets')"/>
                                <em class="middleEm">偏展会活动</em>
                                <em class="rightEm">移动端</em>
                                <div class="templateImageDiv">
                                    <img src="/static/template/activity/applets/10.png">
                                </div>
                            </div>
                            <div id="appletsTemplate11" class="mallTemplate">
                                <form:radiobutton path="templateType" value="61" label="模板11" cssClass="templateButton"
                                                  onclick="showContent('applets')"/>
                                <em class="middleEm">偏商城活动</em>
                                <em class="rightEm">移动端</em>
                                <div class="templateImageDiv">
                                    <img src="/static/template/activity/applets/11.png">
                                </div>
                            </div>
                            <div id="appletsTemplate12" class="mallTemplate">
                                <form:radiobutton path="templateType" value="62" label="模板12" cssClass="templateButton"
                                                  onclick="showContent('applets')"/>
                                <em class="middleEm">偏商城活动</em>
                                <em class="rightEm">移动端</em>
                                <div class="templateImageDiv">
                                    <img src="/static/template/activity/applets/12.png">
                                </div>
                            </div>
                            <div id="appletsTemplate13" class="mallTemplate">
                                <form:radiobutton path="templateType" value="63" label="模板13" cssClass="templateButton"
                                                  onclick="showContent('applets')"/>
                                <em class="middleEm">偏商城活动</em>
                                <em class="rightEm">移动端</em>
                                <div class="templateImageDiv">
                                    <img src="/static/template/activity/applets/13.png">
                                </div>
                            </div>
                            <div id="appletsTemplate14" class="mallTemplate">
                                <form:radiobutton path="templateType" value="64" label="模板14" cssClass="templateButton"
                                                  onclick="showContent('applets')"/>
                                <em class="middleEm">偏商城活动</em>
                                <em class="rightEm">移动端</em>
                                <div class="templateImageDiv">
                                    <img src="/static/template/activity/applets/14.png">
                                </div>
                            </div>
                            <div id="appletsTemplate15" class="mallTemplate">
                                <form:radiobutton path="templateType" value="65" label="模板15" cssClass="templateButton"
                                                  onclick="showContent('applets')"/>
                                <em class="middleEm">偏商城活动</em>
                                <em class="rightEm">移动端</em>
                                <div class="templateImageDiv">
                                    <img src="/static/template/activity/applets/15.png">
                                </div>
                            </div>
                            <div id="appletsTemplate16" class="mallTemplate">
                                <form:radiobutton path="templateType" value="66" label="模板16" cssClass="templateButton"
                                                  onclick="showContent('applets')"/>
                                <em class="middleEm">偏商城活动</em>
                                <em class="rightEm">移动端</em>
                                <div class="templateImageDiv">
                                    <img src="/static/template/activity/applets/16.png">
                                </div>
                            </div>
                            <div id="appletsTemplate17" class="mallTemplate">
                                <form:radiobutton path="templateType" value="67" label="模板17" cssClass="templateButton"
                                                  onclick="showContent('applets')"/>
                                <em class="middleEm">偏商城活动</em>
                                <em class="rightEm">移动端</em>
                                <div class="templateImageDiv">
                                    <img src="/static/template/activity/applets/17.png">
                                </div>
                            </div>
                            <div id="appletsTemplate18" class="mallTemplate">
                                <form:radiobutton path="templateType" value="68" label="模板18" cssClass="templateButton"
                                                  onclick="showContent('applets')"/>
                                <em class="middleEm">偏商城活动</em>
                                <em class="rightEm">移动端</em>
                                <div class="templateImageDiv">
                                    <img src="/static/template/activity/applets/18.png">
                                </div>
                            </div>
                            <div id="appletsTemplate19" class="mallTemplate">
                                <form:radiobutton path="templateType" value="69" label="模板19" cssClass="templateButton"
                                                  onclick="showContent('applets')"/>
                                <em class="middleEm">偏商城活动</em>
                                <em class="rightEm">移动端</em>
                                <div class="templateImageDiv">
                                    <img src="/static/template/activity/applets/19.png">
                                </div>
                            </div>
                            <div id="appletsTemplate20" class="mallTemplate">
                                <form:radiobutton path="templateType" value="70" label="模板20" cssClass="templateButton"
                                                  onclick="showContent('applets')"/>
                                <em class="middleEm">偏商城活动</em>
                                <em class="rightEm">移动端</em>
                                <div class="templateImageDiv">
                                    <img src="/static/template/activity/applets/20.png">
                                </div>
                            </div>
                            <div id="appletsTemplate21" class="mallTemplate">
                                <form:radiobutton path="templateType" value="71" label="模板21" cssClass="templateButton"
                                                  onclick="showContent('applets')"/>
                                <em class="middleEm">偏商城活动</em>
                                <em class="rightEm">移动端</em>
                                <div class="templateImageDiv">
                                    <img src="/static/template/activity/applets/21.png">
                                </div>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
    </div>
    <div class="form-actions">
        <shiro:hasPermission name="newhome:newPageFloor: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>

<script>
    var adsImageList = [];
    var infoImageList = [];
    var productImageList = [];
    var productIds = '';
    $(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) {
                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 < 10; 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(showImage(), 100);
        });

        var templateType = $("input[type='radio']:checked").val();
        if (templateType != undefined) {
            //数据填充
            if (templateType == 1 || templateType == 2 || templateType == 7 || templateType == 8 || templateType == 9 || templateType == 10) {
                <c:forEach items="${floorContent.floorImageList}" var="floorImage" varStatus="index">
                adsImageList.push({
                    id: "${floorImage.id}",
                    image: "${floorImage.image}",
                    adsImage: "${floorImage.adsImage}",
                    link: "${floorImage.link}",
                    sort: "${floorImage.sort}",
                    pcStatus: "${floorImage.pcStatus}",
                    appletsStatus: "${floorImage.appletsStatus}",
                    createDate: "${floorImage.createDate}"
                });
                </c:forEach>
            } else if (templateType == 3 || templateType == 4 || templateType == 5 || templateType == 6) {
                <c:forEach items="${floorContent.floorImageList}" var="floorImage" varStatus="index">
                infoImageList.push({
                    id: "${floorImage.id}",
                    name: "${floorImage.name}",
                    image: "${floorImage.image}",
                    adsImage: "${floorImage.adsImage}",
                    content: "${floorImage.content}",
                    link: "${floorImage.link}",
                    sort: "${floorImage.sort}",
                    pcStatus: "${floorImage.pcStatus}",
                    appletsStatus: "${floorImage.appletsStatus}",
                    createDate: "${floorImage.createDate}"
                });
                </c:forEach>
            } else {
                <c:forEach items="${floorContent.floorImageList}" var="floorImage" varStatus="index">
                productImageList.push({
                    id: "${floorImage.id}",
                    productId: "${empty floorImage.productId ? "":floorImage.productId}",
                    image: "${floorImage.image}",
                    name: "${floorImage.name}",
                    link: "${floorImage.link}",
                    sort: "${floorImage.sort}",
                    pcStatus: "${floorImage.pcStatus}",
                    appletsStatus: "${floorImage.appletsStatus}",
                    label: "${floorImage.label}",
                    createDate: "${floorImage.createDate}"
                });
                </c:forEach>
            }
        }
        showContent('pc');
    });


    //展示选中模板对应的表单
    function showContent(templateClassify) {
        var list = [];
        var type;
        for (var i = 1; i < 22; i++) {
            if ('pc' == templateClassify) {
                list.push('#pcTemplate' + i);
            } else {
                list.push('#appletsTemplate' + i);
            }
        }
        var templateType = parseInt($("input[type='radio']:checked").val());
        if (templateType > 50) {
            templateType = templateType - 50;
        }
        $('.Image1').hide();
        $('.Image2').hide();
        $('.Image3').hide();
        $('.Image4').hide();
        $('.Image5').hide();
        if (!isNaN(templateType)) {
            if ('pc' == templateClassify) {
                toTop(list, '#pcTemplate', $("#pcTemplate" + templateType))
            } else {
                toTop(list, '#appletsTemplate', $("#appletsTemplate" + templateType))
            }
            //滚动条滚动到最上方
            document.getElementById("templateTd").scrollTop = 0;
            //展示模板内容表单
            $("#infoLabel").hide();
            $(".templateImageTable").show();
            $("#adsImageTable").hide();
            $("#infoImageTable").hide();
            $("#productImageTable").hide();
            //广告图
            if (templateType == 11 || templateType == 12 || templateType == 15) {
                $('.Image1').show();
                $('.Image2').show();
                $('.Image3').show();
            } else if (templateType == 13) {
                $('.Image1').show();
                $('.Image2').show();
                $('.Image3').show();
                $('.Image4').show();
                $('.Image5').show();
            } else if (templateType == 16 || templateType == 17) {
                $('.Image1').show();
                $('.Image2').show();
            } else if (templateType == 18 || templateType == 19 || templateType == 20) {
                $('.Image1').show();
            }
            //删除按钮和表格展示
            if (templateType == 1 || templateType == 2 || templateType == 7 || templateType == 8 || templateType == 9 || templateType == 10) {
                if (adsImageList.length == 0) {
                    $("#del").attr("disabled", "disabled");
                } else {
                    $("#adsImageTable").show();
                    $("#del").removeAttr("disabled");
                }
                type = 'adsImage';
            } else if (templateType == 3 || templateType == 4 || templateType == 5 || templateType == 6) {
                if (infoImageList.length == 0) {
                    $("#del").attr("disabled", "disabled");
                } else {
                    $("#infoImageTable").show();
                    $("#del").removeAttr("disabled");
                }
                type = 'infoImage';
            } else {
                //图片表格
                if (productImageList.length == 0) {
                    $("#del").attr("disabled", "disabled");
                } else {
                    $("#productImageTable").show();
                    $("#del").removeAttr("disabled");
                }
                type = 'productImage';
            }
            $("#type").val(type);
            //广告图建议尺寸
            if (templateType == 11) {
                $("#pcImageSize1").text("建议图片分辨率1184px*160px");
                $("#appletsImageSize1").text("建议图片分辨率702px*240px");
                $("#pcImageSize2").text("建议图片分辨率584px*240px");
                $("#appletsImageSize2").text("建议图片分辨率339px*260px");
                $("#pcImageSize3").text("建议图片分辨率584px*240px");
                $("#appletsImageSize3").text("建议图片分辨率339px*260px");
            }else if (templateType == 12) {
                $("#pcImageSize1").text("建议图片分辨率704px*360px");
                $("#appletsImageSize1").text("建议图片分辨率339px*516px");
                $("#pcImageSize2").text("建议图片分辨率464px*172px");
                $("#appletsImageSize2").text("建议图片分辨率339px*246px");
                $("#pcImageSize3").text("建议图片分辨率464px*172px");
                $("#appletsImageSize3").text("建议图片分辨率339px*246px");
            }else if (templateType == 13) {
                $("#pcImageSize1").text("建议图片分辨率704px*360px");
                $("#appletsImageSize1").text("建议图片分辨率339px*516px");
                $("#pcImageSize2").text("建议图片分辨率224px*172px");
                $("#appletsImageSize2").text("建议图片分辨率339px*246px");
                $("#pcImageSize3").text("建议图片分辨率224px*172px");
                $("#appletsImageSize3").text("建议图片分辨率339px*246px");
                $("#pcImageSize4").text("建议图片分辨率224px*172px");
                $("#appletsImageSize4").text("建议图片分辨率339px*246px");
                $("#pcImageSize5").text("建议图片分辨率224px*172px");
                $("#appletsImageSize5").text("建议图片分辨率339px*246px");
            }else if (templateType == 15 || templateType == 16 || templateType ==19 ||templateType == 20) {
                $("#pcImageSize1").text("建议图片分辨率884px*120px");
                $("#appletsImageSize1").text("建议图片分辨率702px*240px");
                $("#pcImageSize2").text("建议图片分辨率524px*268px");
                $("#appletsImageSize2").text("建议图片分辨率339px*516px");
                $("#pcImageSize3").text("建议图片分辨率344px*268px");
                $("#appletsImageSize3").text("建议图片分辨率339px*516px");
            }else if (templateType == 17 || templateType == 18) {
                $("#pcImageSize1").text("建议图片分辨率524px*268px");
                $("#appletsImageSize1").text("建议图片分辨率339px*516px");
                $("#pcImageSize2").text("建议图片分辨率344px*268px");
                $("#appletsImageSize2").text("建议图片分辨率339px*516px");
            }
            showImage();
            batchSaveSort();
        } else {
            $("#infoLabel").show();
            $(".templateImageTable").hide();
        }
    }

    //被选中的模板置顶
    function toTop(list = [], parent, children) {
        list.forEach(function (item, index) {
            $(parent).append($(item))
        })
        $(parent).prepend($(children))
    }

    //展示图片
    function showImage() {
        for (var i = 0; i <= 5; i++) {
            $("#pcAdsImage" + i).find("input.input-xlarge").each(function (j, ele) {
                if ($(ele).val() && $(ele).val() != '') {
                    $(ele).next().find("li").css("z-index", "99");
                    $(ele).parents(".conList").find(".cancel-upload").show();
                    $(ele).parents(".conList").next().removeClass("hide-pic");
                } else {
                    $("#pcAdsImage" + i + " .cancel-upload").click();
                }
            });
            $("#appletsAdsImage" + i).find("input.input-xlarge").each(function (j, ele) {
                if ($(ele).val() && $(ele).val() != '') {
                    $(ele).next().find("li").css("z-index", "99");
                    $(ele).parents(".conList").find(".cancel-upload").show();
                    $(ele).parents(".conList").next().removeClass("hide-pic")
                } else {
                    $("#appletsAdsImage" + i + " .cancel-upload").click();
                }
            });
        }
    }

    //点击添加
    function showSelect(url) {
        var title = '添加';
        var width = $(top.document).width() - 800;
        var height = $(top.document).height() - 160;
        var type = $("#type").val();
        var templateType = $("input[type=radio]:checked").val();
        if (type == 'adsImage') {
            url = url + "?type=adsImage&templateType=" + templateType;
        } else if (type == 'infoImage') {
            url = url + "?type=infoImage&templateType=" + templateType;
        } else {
            url = url + "?type=productImage&productCategory=1&productIds=" + productIds + "&templateType=" + templateType;
            title = '商品图片';
            width = $(top.document).width() - 400;
            height = $(top.document).height() - 160;
        }
        top.$.jBox("iframe:" + url, {
            iframeScrolling: 'yes',
            width: width,
            height: height,
            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();
                    items.createDate = '<fmt:formatDate value="<%=new Date()%>" pattern="yyyy-MM-dd HH:mm:ss"/>';
                    console.log(items);
                    if (type == 'adsImage') {
                        //宣传图
                        if (items.image == '') {
                            alertx("请上传图片");
                            return false;
                        }
                        if (items.sort == '') {
                            alertx("请输入排序值");
                            return false;
                        }
                        adsImageList.push(items);
                        $('#adsImageTable').show();
                        $('#infoImageTable').hide();
                        $('#productImageTable').hide();

                    } else if (type == 'infoImage') {
                        //信息宣传图
                        if (items.image == '') {
                            alertx("请上传图片");
                            return false;
                        }
                        if (items.name == '') {
                            alertx("请输入名称");
                            return false;
                        }
                        if (items.content == '') {
                            alertx("请输入名称");
                            return false;
                        }
                        if (items.sort == '') {
                            alertx("请输入排序值");
                            return false;
                        }
                        infoImageList.push(items);
                        $('#adsImageTable').hide();
                        $('#infoImageTable').show();
                        $('#productImageTable').hide();
                    } else {
                        //商品图片
                        if (items.productId == "") {
                            if (items.image == '') {
                                alertx("请上传图片");
                                return false;
                            }
                            if (items.name == '') {
                                alertx("请输入名称");
                                return false;
                            }
                            if (items.link == '') {
                                alertx("请输入跳转链接");
                                return false;
                            }
                            if (items.sort == '') {
                                alertx("请输入排序值");
                                return false;
                            }
                            if (items.label == '') {
                                alertx("请输入标签");
                                return false;
                            }
                        }
                        productImageList.push(items);
                        $('#adsImageTable').hide();
                        $('#infoImageTable').hide();
                        $('#productImageTable').show();
                    }
                    $("#del").removeAttr("disabled");
                    batchSaveSort();
                }
                return true;
            }
        });
    }

    //相关图片列表数据
    function appendShopOrderHead(data, index) {
        var type = $("#type").val();
        var html = '<tr id ="ads' + 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>' +
            (type == 'infoImage' ? (
                ('<td>' + '<input value="' + data.name + '"  onchange="changeName(' + index + ',this)">' + '</td>') +
                ('<td>' + '<input value="' + data.content + '"  onchange="changeContent(' + index + ',this)">' + '</td>')
            ) : '') +
            (type == 'productImage' ?
                ('<td>' + (data.productId == '' ? ('<input name="name" value="' + data.name + '"  onchange="changeName(' + index + ',this)">') : (data.name)) + '</td>') : '') +
            (type == 'adsImage' || type == 'infoImage' ? (
                        ('<td>' + '<input value="' + data.link + '"  onchange="changeLink(' + index + ',this)">' + '</td>') +
                        ('<td>' + '<img src="' + data.adsImage + '" width="60px" border="none">' + '</td>')
                    ) :
                    (
                        ('<td>' + (data.productId == '' ? ('<input value="' + data.link + '"  onchange="changeLink(' + index + ',this)">') : ('------')) + '</td>') +
                        ('<td>' + (data.productId == '' ? ('<input value="' + data.label + '"  onchange="changeLabel(' + index + ',this)" maxlength = "10">') : ('------')) + '</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.createDate == '' ? (
                '<fmt:formatDate value="<%=new Date()%>" pattern="yyyy-MM-dd HH:mm:ss"/>'
            ) : (
                data.createDate
            )) +
            '</td>' +
            '<td>' +
            '<a href="javascript:;" onclick="delect(' + index + ')">删除</a>' +
            '</td>' +
            '</tr>';
        return html;
    }

    function insertHtml(list) {
        var html = '';
        var type = $("#type").val();
        if (type == 'adsImage') {
            list.forEach(function (item, index) {
                html += appendShopOrderHead(item, index);
            })
            $("#adsImageTbody").html(html);
        } else if (type == 'infoImage') {
            list.forEach(function (item, index) {
                html += appendShopOrderHead(item, index);
            })
            $("#infoImageTbody").html(html);
        } else {
            productIds = '';
            list.forEach(function (item, index) {
                html += appendShopOrderHead(item, index);
                productIds += "," + item.productId;
            });
            $("#productImageTbody").html(html);
        }
    }

    /**
     * 一键排序
     */
    function batchSaveSort() {
        var type = $("#type").val();
        if (type == 'adsImage') {
            adsImageList.sort(sort);
            insertHtml(adsImageList);
        } else if (type == 'infoImage') {
            infoImageList.sort(sort);
            insertHtml(infoImageList);
        } else {
            productImageList.sort(sort);
            insertHtml(productImageList);
        }
    }

    //根据sort值 从小到大排序
    function sort(a, b) {
        debugger
        return ((a.sort - b.sort) == 0 ? (a.createDate > b.createDate ? -1 : 1) : (a.sort - b.sort));
    }

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

    function changeSort(index, sortThis) {
        var sort = sortThis.value;
        var image = getImage(index);
        image.sort = sort;
    }

    function changeName(index, nameThis) {
        var name = nameThis.value;
        var image = getImage(index);
        image.name = name;
    }

    function changeContent(index, nameThis) {
        var content = nameThis.value;
        var image = infoImageList[index];
        image.content = content;
    }

    function changeLink(index, linkThis) {
        var link = linkThis.value;
        var image = getImage(index);
        image.link = link;
    }

    function changeLabel(index, labelThis) {
        var label = labelThis.value;
        var image = productImageList[index];
        image.label = label;
    }

    /**
     * 删除操作
     */
    function delect(index) {
        var type = $("#type").val();
        return confirmx("确定删除该数据吗？", function () {
            var image = getImage(index);
            if (type == 'adsImage') {
                adsImageList.splice(index, 1);
                insertHtml(adsImageList, 'adsImage');
                if (adsImageList.length == 0) {
                    $("#del").attr("disabled", "disabled");
                    $('#adsImageTable').hide();
                }
            } else if (type == 'infoImage') {
                infoImageList.splice(index, 1);
                insertHtml(infoImageList, 'infoImage');
                if (infoImageList.length == 0) {
                    $("#del").attr("disabled", "disabled");
                    $('#infoImageTable').hide();
                }
            } else {
                if (image.productId != '') {
                    productIds = productIds.replace(image.productId, "");
                }
                productImageList.splice(index, 1);
                insertHtml(productImageList, 'productImage');
                if (productImageList.length == 0) {
                    $("#del").attr("disabled", "disabled");
                    $('#productImageTable').hide();
                }
            }
        });
    }

    /**
     * 批量删除
     */
    function batchDeletion() {
        var index = -1;
        var i = 1;
        var type = $("#type").val();
        var length = $('input[name="info"]:checked').length;
        if (length > 0) {
            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 = getImage(thisIndex);
                    if (type == 'adsImage') {
                        adsImageList.splice(thisIndex, 1);
                    } else if (type == 'infoImage') {
                        infoImageList.splice(thisIndex, 1);
                    } else {
                        if (image.productId != '') {
                            productIds = productIds.replace(image.productId, "");
                        }
                        productImageList.splice(thisIndex, 1);
                    }
                });
                if (type == 'adsImage') {
                    insertHtml(adsImageList);
                    if (adsImageList.length == 0) {
                        $("#del").attr("disabled", "disabled");
                        $('#adsImageTable').hide();
                    } else {
                        $("#del").removeAttr("disabled");
                    }
                } else if (type == 'infoImage') {
                    insertHtml(infoImageList);
                    if (infoImageList.length == 0) {
                        $("#del").attr("disabled", "disabled");
                        $('#infoImageTable').hide();
                    } else {
                        $("#del").removeAttr("disabled");
                    }
                } else {
                    insertHtml(productImageList);
                    if (productImageList.length == 0) {
                        $('#productImageTable').hide();
                        $("#del").attr("disabled", "disabled");
                    } else {
                        $("#del").removeAttr("disabled");
                    }
                }
            });
        } else {
            alertx("请先选中要删除的数据")
        }
    }

    function getImage(index) {
        var image;
        var type = $("#type").val();
        if (type == 'adsImage') {
            image = adsImageList[index];
        } else if (type == 'infoImage') {
            image = infoImageList[index];
        } else {
            image = productImageList[index];
        }
        return image;
    }

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

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

    function showTemplate() {
        var title = '';
        var url = "${ctx}/newhome/newPageFloor/showTemplate";
        title = "模板";
        top.$.jBox("iframe:" + url, {
            iframeScrolling: 'yes',
            width: $(top.document).width() - 600,
            height: $(top.document).height() - 160,
            persistent: true,
            title: title,
            buttons: {"关闭": '-1'}
        })
    }

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

    //修改偏展会/商城筛选项
    function changeTemplateSelect() {
        let templateSelect = $("#templateSelect").val();
        if (1 == templateSelect) {
            $(".displayTemplate").removeClass("hide");
            $(".mallTemplate").removeClass("hide");
        } else if (2 == templateSelect) {
            $(".displayTemplate").removeClass("hide");
            $(".mallTemplate").addClass("hide");
        } else if (3 == templateSelect) {
            $(".mallTemplate").removeClass("hide");
            $(".displayTemplate").addClass("hide");
        }
    }

    //修改偏pc/移动端筛选项
    function changeSourceSelect() {
        let source = $("#sourceSelect").val();
        var templateType = parseInt($("input[type='radio']:checked").val());
        if (1 == source) {
            $("#pcTemplate").removeClass("hide");
            $("#appletsTemplate").addClass("hide");
            $('input:radio[value=' + templateType + ']').attr('checked', false);
            templateType = templateType - 50;
            $('input:radio[value=' + templateType + ']').attr('checked', true);
        } else if (2 == source) {
            $("#appletsTemplate").removeClass("hide");
            $("#pcTemplate").addClass("hide");
            $('input:radio[value=' + templateType + ']').attr('checked', false);
            templateType = templateType + 50;
            $('input:radio[value=' + templateType + ']').attr('checked', true);
        }
        showContent(1 == source ? 'pc' : 'applets');
    }
</script>
</body>
</html>