caimei365
/
caimei365-manager


			
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126
							<%@ 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;
        }

        .table-striped {
            margin-right: 10px;
        }

        .table-striped td {
            border-collapse: inherit;
            border: 1px solid #ddd;
            border-width: 1px 0px 0px 1px;
        }

        .table-striped th, .table-striped td {
            text-align: center !important;
        }

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

        #displayDateDiv {
            height: 30px;
        }

        .relative-pst {
            margin-top: 20px !important;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            //表单提交
            $("#inputForm").validate({
                submitHandler: function (form) {
                    var templateType = $("input[name='templateType']:checked").val();
                    if (templateType == '' || templateType == undefined) {
                        alertx("请配置模板图片区域");
                        return;
                    }
                    var displayDateNo = $("input[name='displayDateRadio']:checked").val();
                    if (productImageList.length > 0) {
                        var stringify = JSON.stringify(productImageList);
                        $('#images').val(stringify);
                    } else {
                        alertx("至少上传一个商品");
                        return;
                    }
                    var appletsIcon1 = $("#appletsIcon1").val();
                    var appletsIcon2 = $("#appletsIcon2").val();
                    var appletsIcon3 = $("#appletsIcon3").val();
                    var appletsIcon4 = $("#appletsIcon4").val();
                    var appletsIcon5 = $("#appletsIcon5").val();
                    if (templateType == 1 || templateType == 2 || templateType == 3 || templateType == 6 || templateType == 7 || templateType == 8) {
                        if (appletsIcon1 == '') {
                            alertx("请上传广告图1");
                            return;
                        }
                        if (templateType == 2 || templateType == 3 || templateType == 6 || templateType == 7) {
                            if (appletsIcon2 == '') {
                                alertx("请上传广告图2");
                                return;
                            }
                            if (templateType == 2 || templateType == 6 || templateType == 7) {
                                if (appletsIcon3 == '') {
                                    alertx("请上传广告图3");
                                    return;
                                }
                                if ( templateType == 7) {
                                    if (appletsIcon4 == '') {
                                        alertx("请上传广告图4");
                                        return;
                                    }
                                    if (appletsIcon5 == '') {
                                        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();
                    }
                    for (var i = 1; i <= 5; i++) {
                        var jumpTypeName = 'jumpType' + i;
                        var jumpType = $("input[name=" + jumpTypeName + "]:checked").val();
                        if (3 == jumpType) {
                            var jumpImage = $("#jumpIcon"+i).val();
                            if (jumpImage == '') {
                                alertx("请上传广告图" + i + "跳转图片");
                                return false;
                            }
                        }
                    }
                    $("#formType").val(8);
                    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/cmPageCentre/?pageId=${floorContent.pageId}&type=8">商品楼层列表</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="images2" id="images2"/>
    <form:hidden path="images3" id="images3"/>
    <form:hidden path="type"/>
    <form:hidden path="formType"/>
    <form:hidden path="redirectFlag"/>
    <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;" class="templateTable">
            <tr>
                <td id="templateTd" style="display: block;height: 580px;overflow-y:scroll;width: 380px !important;">
                    <div>
                        <div id="template" style="position: relative">
                            <div id="template1" class="displayTemplate" style="position: relative;">
                                <form:radiobutton path="templateType" name="templateType" value="1" label="模板1" id="templateType1"
                                                  cssClass="templateButton"
                                                  onclick="showContent()"/>
                                <div class="templateImageDiv">
                                    <img src="/static/template/hehe/1.png">
                                </div>
                            </div>
                            <div id="template2" class="displayTemplate">
                                <form:radiobutton path="templateType" name="templateType" value="2" label="模板2" id="templateType2"
                                                  cssClass="templateButton"
                                                  onclick="showContent()"/>
                                <div class="templateImageDiv">
                                    <img src="/static/template/hehe/2.png">
                                </div>
                            </div>
                            <div id="template3" class="displayTemplate">
                                <form:radiobutton path="templateType" name="templateType" value="3" label="模板3" id="templateType3"
                                                  cssClass="templateButton"
                                                  onclick="showContent()"/>
                                <div class="templateImageDiv">
                                    <img src="/static/template/hehe/3.png">
                                </div>
                            </div>
                            <div id="template4" class="displayTemplate">
                                <form:radiobutton path="templateType" name="templateType" value="4" label="模板4" id="templateType4"
                                                  cssClass="templateButton"
                                                  onclick="showContent()"/>
                                <div class="templateImageDiv">
                                    <img src="/static/template/hehe/4.png">
                                </div>
                            </div>
                            <div id="template5" class="displayTemplate">
                                <form:radiobutton path="templateType" name="templateType" value="5" label="模板5" id="templateType5"
                                                  cssClass="templateButton"
                                                  onclick="showContent()"/>
                                <div class="templateImageDiv">
                                    <img src="/static/template/hehe/5.png">
                                </div>
                            </div>
                            <div id="template6" class="displayTemplate">
                                <form:radiobutton path="templateType" name="templateType" value="6" label="模板6" id="templateType6"
                                                  cssClass="templateButton"
                                                  onclick="showContent()"/>
                                <div class="templateImageDiv">
                                    <img src="/static/template/hehe/6.png">
                                </div>
                            </div>
                            <div id="template7" class="displayTemplate">
                                <form:radiobutton path="templateType" name="templateType" value="7" label="模板7" id="templateType7"
                                                  cssClass="templateButton"
                                                  onclick="showContent()"/>
                                <div class="templateImageDiv">
                                    <img src="/static/template/hehe/7.png">
                                </div>
                            </div>
                            <div id="template8" class="displayTemplate">
                                <form:radiobutton path="templateType" name="templateType" value="8" label="模板8" id="templateType8"
                                                  cssClass="templateButton"
                                                  onclick="showContent()"/>
                                <div class="templateImageDiv">
                                    <img src="/static/template/hehe/8.png">
                                </div>
                            </div>
                            <div id="template9" class="displayTemplate">
                                <form:radiobutton path="templateType" name="templateType" value="9" label="模板9" id="templateType9"
                                                  cssClass="templateButton"
                                                  onclick="showContent()"/>
                                <div class="templateImageDiv">
                                    <img src="/static/template/hehe/9.png">
                                </div>
                            </div>
                        </div>
                    </div>
                </td>
                <td style=" width: 2800px;">
                    <div style="height: 100%;overflow-y:scroll;">
                        <label id="infoLabel"
                               style="display: none; position: relative;left: 200px;top: 200px; font-weight: bolder;font-size: 30px">请先选择左边模板后，再编辑模板相关内容</label>
                        <div class="control-group clear Image1" style="display: none">
                            <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="appletsIcon1" path="appletsAdsImage1" htmlEscape="false" maxlength="255"
                                                     class="input-xlarge required"/>
                                        <sys:ckfinder input="appletsIcon1" type="images" uploadPath="/photo"
                                                      selectMultiple="false"
                                                      maxWidth="100" maxHeight="100"/> <br>
                                        <label id="imageSize1">建议图片分辨率1184px*160px</label>
                                    </div>
                                </div>
                            </div>
                            <div style="float: left">
                                <span class="help-inline"></span>跳转方式：
                                <div style="margin-left: 100px">
                                    <div>
                                        <input type="radio" name="jumpType1" value="1" onchange="changeJumpType(1)" ${(floorContent.jumpType1 eq null || floorContent.jumpType1 eq 1 )? "checked" : ""} />链接：
                                        <form:input path="adsLink1" htmlEscape="false" maxlength="255"
                                                    class="input-xlarge"/>
                                    </div>
                                    <div style="margin-top: 20px">
                                        <input type="radio" name="jumpType1" value="2" onchange="changeJumpType(1)" ${floorContent.jumpType1 eq 2? "checked" : ""} />产品：
                                        <form:select path="productId1" class="select-ele input-xlarge">
                                            <form:option value="" label="请选择"/>
                                            <form:options items="${productList}" itemLabel="name" itemValue="productId"
                                                          htmlEscape="false"/>
                                        </form:select>
                                    </div>
                                    <div style="margin-top: 20px">
                                        <input type="radio" name="jumpType1" value="4" onchange="changeJumpType(1)" ${floorContent.jumpType1 eq 4? "checked" : ""} />无
                                    </div>
                                </div>
                            </div>
                            <div style="float: left;margin: 25px 0px 0px 100px">
                                <span class="help-inline"></span>
                                <input type="radio" name="jumpType1" value="3" onchange="changeJumpType(1)" ${floorContent.jumpType1 eq 3? "checked" : ""} />图片：
                                <div class="controls upload-content iconBox" id="jumpImage1">
                                    <div class="conList">
                                        <form:hidden id="jumpIcon1" path="jumpImage1" htmlEscape="false" maxlength="255"
                                                     class="input-xlarge required"/>
                                        <sys:ckfinder input="jumpIcon1" type="images" uploadPath="/photo"
                                                      selectMultiple="false"
                                                      maxWidth="100" maxHeight="100"/> <br>
                                        <label>建议图片分辨率750px*1624px</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="control-group clear Image2" style="display: none">
                            <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="appletsIcon2" path="appletsAdsImage2" htmlEscape="false" maxlength="255"
                                                     class="input-xlarge required"/>
                                        <sys:ckfinder input="appletsIcon2" type="images" uploadPath="/photo"
                                                      selectMultiple="false"
                                                      maxWidth="100" maxHeight="100"/><br>
                                        <label id="imageSize2">建议图片分辨率344px*268px</label>
                                    </div>
                                </div>
                            </div>
                            <div style="float: left">
                                <span class="help-inline"></span>跳转方式：
                                <div style="margin-left: 100px">
                                    <div>
                                        <input type="radio" name="jumpType2" value="1" onchange="changeJumpType(2)" ${(floorContent.jumpType2 eq null || floorContent.jumpType2 eq 1 )? "checked" : ""} />链接：
                                        <form:input path="adsLink2" htmlEscape="false" maxlength="255"
                                                    class="input-xlarge"/>
                                    </div>
                                    <div style="margin-top: 20px">
                                        <input type="radio" name="jumpType2" value="2" onchange="changeJumpType(2)" ${floorContent.jumpType2 eq 2? "checked" : ""} />产品：
                                        <form:select path="productId2" class="select-ele input-xlarge">
                                            <form:option value="" label="请选择"/>
                                            <form:options items="${productList}" itemLabel="name" itemValue="productId"
                                                          htmlEscape="false"/>
                                        </form:select>
                                    </div>
                                    <div style="margin-top: 20px">
                                        <input type="radio" name="jumpType2" value="4" onchange="changeJumpType(2)" ${floorContent.jumpType2 eq 4? "checked" : ""} />无
                                    </div>
                                </div>
                            </div>
                            <div style="float: left;margin: 25px 0px 0px 100px">
                                <span class="help-inline"></span>
                                <input type="radio" name="jumpType2" value="3" onchange="changeJumpType(2)" ${floorContent.jumpType2 eq 3? "checked" : ""} />图片：
                                <div class="controls upload-content iconBox" id="jumpImage2">
                                    <div class="conList">
                                        <form:hidden id="jumpIcon2" path="jumpImage2" htmlEscape="false" maxlength="255"
                                                     class="input-xlarge required"/>
                                        <sys:ckfinder input="jumpIcon2" type="images" uploadPath="/photo"
                                                      selectMultiple="false"
                                                      maxWidth="100" maxHeight="100"/> <br>
                                        <label>建议图片分辨率750px*1624px</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="control-group clear Image3" style="display: none">
                            <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="appletsIcon3" path="appletsAdsImage3" htmlEscape="false" maxlength="255"
                                                     class="input-xlarge required"/>
                                        <sys:ckfinder input="appletsIcon3" type="images" uploadPath="/photo"
                                                      selectMultiple="false"
                                                      maxWidth="100" maxHeight="100"/><br>
                                        <label id="imageSize3">建议图片分辨率344px*268px</label>
                                    </div>
                                </div>
                            </div>
                            <div style="float: left">
                                <span class="help-inline"></span>跳转方式：
                                <div style="margin-left: 100px">
                                    <div>
                                        <input type="radio" name="jumpType3" value="1" onchange="changeJumpType(3)" ${(floorContent.jumpType3 eq null || floorContent.jumpType3 eq 1 )? "checked" : ""} />链接：
                                        <form:input path="adsLink3" htmlEscape="false" maxlength="255"
                                                    class="input-xlarge"/>
                                    </div>
                                    <div style="margin-top: 20px">
                                        <input type="radio" name="jumpType3" value="2" onchange="changeJumpType(3)" ${floorContent.jumpType3 eq 2? "checked" : ""} />产品：
                                        <form:select path="productId3" class="select-ele input-xlarge">
                                            <form:option value="" label="请选择"/>
                                            <form:options items="${productList}" itemLabel="name" itemValue="productId"
                                                          htmlEscape="false"/>
                                        </form:select>
                                    </div>
                                    <div style="margin-top: 20px">
                                        <input type="radio" name="jumpType3" value="4" onchange="changeJumpType(3)" ${floorContent.jumpType3 eq 4? "checked" : ""} />无
                                    </div>
                                </div>
                            </div>
                            <div style="float: left;margin: 25px 0px 0px 100px">
                                <span class="help-inline"></span>
                                <input type="radio" name="jumpType3" value="3" onchange="changeJumpType(3)" ${floorContent.jumpType3 eq 3? "checked" : ""} />图片：
                                <div class="controls upload-content iconBox" id="jumpImage3">
                                    <div class="conList">
                                        <form:hidden id="jumpIcon3" path="jumpImage3" htmlEscape="false" maxlength="255"
                                                     class="input-xlarge required"/>
                                        <sys:ckfinder input="jumpIcon3" type="images" uploadPath="/photo"
                                                      selectMultiple="false"
                                                      maxWidth="100" maxHeight="100"/> <br>
                                        <label>建议图片分辨率750px*1624px</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="control-group clear Image4" style="display: none">
                            <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="appletsIcon4" path="appletsAdsImage4" htmlEscape="false" maxlength="255"
                                                     class="input-xlarge required"/>
                                        <sys:ckfinder input="appletsIcon4" type="images" uploadPath="/photo"
                                                      selectMultiple="false"
                                                      maxWidth="100" maxHeight="100"/><br>
                                        <label id="imageSize4">建议图片分辨率344px*268px</label>
                                    </div>
                                </div>
                            </div>
                            <div style="float: left">
                                <span class="help-inline"></span>跳转方式：
                                <div style="margin-left: 100px">
                                    <div>
                                        <input type="radio" name="jumpType4" value="1" onchange="changeJumpType(4)" ${(floorContent.jumpType4 eq null || floorContent.jumpType4 eq 1 )? "checked" : ""} />链接：
                                        <form:input path="adsLink4" htmlEscape="false" maxlength="255"
                                                    class="input-xlarge"/>
                                    </div>
                                    <div style="margin-top: 20px">
                                        <input type="radio" name="jumpType4" value="2" onchange="changeJumpType(4)" ${floorContent.jumpType4 eq 2? "checked" : ""} />产品：
                                        <form:select path="productId4" class="select-ele input-xlarge">
                                            <form:option value="" label="请选择"/>
                                            <form:options items="${productList}" itemLabel="name" itemValue="productId"
                                                          htmlEscape="false"/>
                                        </form:select>
                                    </div>
                                    <div style="margin-top: 20px">
                                        <input type="radio" name="jumpType4" value="4" onchange="changeJumpType(4)" ${floorContent.jumpType4 eq 4? "checked" : ""} />无
                                    </div>
                                </div>
                            </div>
                            <div style="float: left;margin: 25px 0px 0px 100px">
                                <span class="help-inline"></span>
                                <input type="radio" name="jumpType4" value="3" onchange="changeJumpType(4)" ${floorContent.jumpType4 eq 3? "checked" : ""} />图片：
                                <div class="controls upload-content iconBox" id="jumpImage4">
                                    <div class="conList">
                                        <form:hidden id="jumpIcon4" path="jumpImage4" htmlEscape="false" maxlength="255"
                                                     class="input-xlarge required"/>
                                        <sys:ckfinder input="jumpIcon4" type="images" uploadPath="/photo"
                                                      selectMultiple="false"
                                                      maxWidth="100" maxHeight="100"/> <br>
                                        <label>建议图片分辨率750px*1624px</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="control-group clear Image5" style="display: none">
                            <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="appletsIcon5" path="appletsAdsImage5" htmlEscape="false" maxlength="255"
                                                     class="input-xlarge required"/>
                                        <sys:ckfinder input="appletsIcon5" type="images" uploadPath="/photo"
                                                      selectMultiple="false"
                                                      maxWidth="100" maxHeight="100"/><br>
                                        <label id="imageSize5">建议图片分辨率344px*268px</label>
                                    </div>
                                </div>
                            </div>
                            <div style="float: left">
                                <span class="help-inline"></span>跳转方式：
                                <div style="margin-left: 100px">
                                    <div>
                                        <input type="radio" name="jumpType5" value="1" onchange="changeJumpType(5)" ${(floorContent.jumpType5 eq null || floorContent.jumpType5 eq 1 )? "checked" : ""} />链接：
                                        <form:input path="adsLink5" htmlEscape="false" maxlength="255"
                                                    class="input-xlarge"/>
                                    </div>
                                    <div style="margin-top: 20px">
                                        <input type="radio" name="jumpType5" value="2" onchange="changeJumpType(5)" ${floorContent.jumpType5 eq 2? "checked" : ""} />产品：
                                        <form:select path="productId5" class="select-ele input-xlarge">
                                            <form:option value="" label="请选择"/>
                                            <form:options items="${productList}" itemLabel="name" itemValue="productId"
                                                          htmlEscape="false"/>
                                        </form:select>
                                    </div>
                                    <div style="margin-top: 20px">
                                        <input type="radio" name="jumpType5" value="4" onchange="changeJumpType(5)" ${floorContent.jumpType5 eq 4? "checked" : ""} />无
                                    </div>
                                </div>
                            </div>
                            <div style="float: left;margin: 25px 0px 0px 100px">
                                <span class="help-inline"></span>
                                <input type="radio" name="jumpType5" value="3" onchange="changeJumpType(5)" ${floorContent.jumpType5 eq 3? "checked" : ""} />图片：
                                <div class="controls upload-content iconBox" id="jumpImage5">
                                    <div class="conList">
                                        <form:hidden id="jumpIcon5" path="jumpImage5" htmlEscape="false" maxlength="255"
                                                     class="input-xlarge required"/>
                                        <sys:ckfinder input="jumpIcon5" type="images" uploadPath="/photo"
                                                      selectMultiple="false"
                                                      maxWidth="100" maxHeight="100"/> <br>
                                        <label>建议图片分辨率750px*1624px</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <br>
                        <div class="control-group templateImageTable">
                            <br><br>
                            <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: 70px"
                                   onclick="showSelect('${ctx}/newhome/newPageFloor/addHeheImage')" value="上线商品"/>&nbsp;&nbsp;&nbsp;&nbsp;
                            <br><br>
                            <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>商品ID</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>
        </table>
    </div>
    <div class="form-actions">
        <shiro:hasPermission name="newhome:newPageFloor:edit"><input id="btnSubmit" class="btn btn-primary"
                                                                     type="submit" onclick="changeRedirectFlag(1)"
                                                                     value="保 存"/>&nbsp;</shiro:hasPermission>
        <input id="btnSubmit" class="btn btn-primary"
               type="submit" onclick="changeRedirectFlag(0)"
               value="保存并继续"/>&nbsp;
        <input id="btnCancel" class="btn" type="button" value="返 回" onclick="history.go(-1)"/>
    </div>
</form:form>

<script>
    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[name='templateType']:checked").val();
        if (templateType != undefined) {
            //数据填充
            <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}",
                shopName: "${floorImage.shopName}",
                link: "${floorImage.link}",
                sort: "${floorImage.sort}",
                pcStatus: "${floorImage.pcStatus}",
                appletsStatus: "${floorImage.appletsStatus}",
                recommend: "${floorImage.recommend}",
                label: "${floorImage.label}",
                createDate: "${floorImage.createDate}"
            });
            </c:forEach>
        }
        showContent();
    });


    //展示选中模板对应的表单
    function showContent() {
        var list = [];
        var type;
        for (var i = 1; i <= 9; i++) {
            list.push('#template' + i);
        }
        var templateType = parseInt($("input[name='templateType']:checked").val());
        $('.Image1').hide();
        $('.Image2').hide();
        $('.Image3').hide();
        $('.Image4').hide();
        $('.Image5').hide();
        if (!isNaN(templateType)) {
            toTop(list, '#template', $("#template" + templateType))
            //滚动条滚动到最上方
            document.getElementById("templateTd").scrollTop = 0;
            //展示模板内容表单
            $("#infoLabel").hide();
            $(".templateImageTable").show();
            $("#displayDateDiv").css('display', 'none');
            $("#productImageTable").hide();
            //广告图
            if (templateType === 1 || templateType === 2 || templateType === 3 || templateType === 6 || templateType === 7 || templateType == 8) {
                $('.Image1').show();
            }
            if (templateType === 2 || templateType === 3 || templateType === 6 || templateType === 7) {
                $('.Image2').show();
            }
            if (templateType === 2 || templateType === 6 || templateType === 7) {
                $('.Image3').show();
            }
            if ( templateType === 7) {
                $('.Image4').show();
                $('.Image5').show();
            }
            //删除按钮和表格展示
            //图片表格
            if (productImageList.length == 0) {
                $("#del").attr("disabled", "disabled");
            } else {
                $("#productImageTable").show();
                $("#del").removeAttr("disabled");
            }

            //广告图建议尺寸
            if (templateType == 1 || templateType == 8) {
                $("#imageSize1").text("建议图片分辨率702px*240px");
            } else if (templateType == 2) {
                $("#imageSize1").text("建议图片分辨率702px*240px");
                $("#imageSize2").text("建议图片分辨率343px*524px");
                $("#imageSize3").text("建议图片分辨率343px*524px");
            } else if (templateType == 3) {
                $("#imageSize1").text("建议图片分辨率343px*524px");
                $("#imageSize2").text("建议图片分辨率343px*524px");
            } else if (templateType == 6) {
                $("#imageSize1").text("建议图片分辨率343px*524px");
                $("#imageSize2").text("建议图片分辨率343px*254px");
                $("#imageSize3").text("建议图片分辨率343px*254px");
            } else if (templateType == 7) {
                $("#imageSize1").text("建议图片分辨率343px*524px");
                $("#imageSize2").text("建议图片分辨率343px*254px");
                $("#imageSize3").text("建议图片分辨率343px*254px");
                $("#imageSize4").text("建议图片分辨率343px*254px");
                $("#imageSize5").text("建议图片分辨率343px*254px");
            }
            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++) {
            $("#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();
                }
            });
            $("#jumpImage" + 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 {
                    $("#jumpImage" + i + " .cancel-upload").click();
                }
            });
        }
    }

    //点击添加
    function showSelect(url) {
        var title = '添加';
        var width = $(top.document).width() - 800;
        var height = $(top.document).height() - 160;
        var templateType = $("input[name='templateType']:checked").val();
        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 (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);
                    $('#productImageTable').show();
                    $("#del").removeAttr("disabled");
                    batchSaveSort();
                }
                return true;
            }
        });
    }

    //相关图片列表数据
    function appendShopOrderHead(data, index) {
        var type = 'productImage';
        var html = '<tr id ="ads' + index + '">' +
            '<td>' +
            '<input class="check-item" type="checkbox" name="info" value="' + index + '"/>' + (index + 1) +
            '</td>' +
            '<td>' + data.productId + '</td>' +
            '<td>' +
            '<img src="' + data.image + '" width="60px" border="none" title="启用">' +
            '</td>' +
            '<td>' + data.name +'</td>' +
            '<td>' + data.shopName +'</td>' +
            '<td>' +
            (data.appletsStatus == 1 ?
                '<font color="green">已上架</font>':'<font color="red">已下架</font>'
            ) +
            '</td>' +
            '<td>' +
            '<input name="sort" style="width:50px;" value="' + data.sort + '"  onkeyup="onlynum(this)"  onchange="changeSort(' + index + ',this)"></td>' +
            '</td>' +
            '<td>' +
            '<img src="'+(data.recommend == 1?'/static/images/yes.gif':'/static/images/no.gif')+'" width="15px" border="none"/>' +
            '</td>' +
            '<td>' +
            (data.createDate == '' ? (
                '<fmt:formatDate value="<%=new Date()%>" pattern="yyyy-MM-dd HH:mm:ss"/>'
            ) : (
                data.createDate
            )) +
            '</td>' +
            '<td>' +
            '<a href="javascript:;" onclick="updateAppletsStatus('+(data.appletsStatus == 1?0:1)+',' + index + ');"">'+(data.appletsStatus == 1?"下架":"上架")+'</a>'+
            '   <a href="javascript:;" onclick="updateRecommend('+(data.recommend == 1?0:1)+',' + index + ');"">'+(data.recommend == 1?"取消推荐":"设为推荐")+'</a>'+
            '   <a href="javascript:;" onclick="delect(' + index + ')">删除</a>' +
            '</td>' +
            '</tr>';
        return html;
    }

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

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

    //根据sort值 从小到大排序
    function sort(a, b) {
        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 displayDateNo = $("input[name='displayDateRadio']:checked").val();
        return confirmx("确定删除该数据吗？", function () {
            var image = getImage(index);
            if (image.productId != '') {
                productIds = productIds.replace(image.productId, "");
            }
            productImageList.splice(index, 1);
            insertHtml(productImageList);
            if (productImageList.length == 0) {
                $("#del").attr("disabled", "disabled");
                $('#productImageTable').hide();
            }
        });
    }

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


    function getImage(index) {
        var 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 updateRecommend(status, index) {
        var image = getImage(index);
        confirmx(status == 0 ? '确定取消推荐吗？' : '确定将该商品设为推荐商品吗？', function () {
            image.recommend = status;
            batchSaveSort();
        })
    }

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

    // 保存完是否重定向到楼层列表
    function changeRedirectFlag(redirectFlag) {
        $("#redirectFlag").val(redirectFlag);
    }

    function changeJumpType(index){
        var jumpTypeName = 'jumpType' + index;
        var jumpType = $("input[name=" + jumpTypeName + "]:checked").val();
        var jumpLink = $("#adsLink"+index);
        var jumpProductId = $("#productId"+index);
        if (1 == jumpType) {
            jumpLink.addClass("required");
            jumpProductId.removeClass("required");
        }else if (2 == jumpType) {
            jumpProductId.addClass("required");
            jumpLink.removeClass("required");
        } else {
            jumpProductId.removeClass("required");
            jumpLink.removeClass("required");
        }
    }

</script>
</body>
</html>