一个交互比较复杂的页面（2编辑）

最新推荐文章于 2022-08-11 11:16:29 发布

&友情岁月&

最新推荐文章于 2022-08-11 11:16:29 发布

阅读量448

点赞数

本文链接：https://blog.csdn.net/qq_42093488/article/details/88706755

版权

编辑页面

jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="${pageContext.request.contextPath}/plugin/layui/css/layui.css?time=${times}" media="all" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/private.css?time=${times}" media="all" />
<script type="text/javascript" src="${pageContext.request.contextPath}/plugin/layui/layui.js?time=${times}"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/json2.js?time=${times}"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/baidu.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/posterSpread/posterSpreadEdit.js?time=${times}"></script>
<title>海报裂变活动</title>
<style>
.activityadd-title{width: 100%;height: 35px;line-height: 35px; background: #eee; padding-left: 15px;}
.layui-form-item textarea{width: 665px;height: 200px;padding: 10px}
.layui-table { border: 1px solid #eee;}
.layui-table td, .layui-table th{text-align: center;}
.layui-layer-setwin{display: none;}
.left{float: left;}
.image-bg{
   width:450px;height:750px;margin-right:20px;position: relative;
}
.image-bg > img.bg{width:100%;height:100%;}
.t-1{
   position: absolute;
    top: 30px;
    left: 30px;
    width: 100px;
    height: 100px;
}
.t-2{
   position: absolute;
    bottom: 30px;
    left: 50%;
    margin-left:-60px;
    width: 120px;
    height: 120px;
}
</style>
</head>
<body style="padding: 20px;">
   <input type="hidden" id="webRoot" name="webRoot" value="${pageContext.request.contextPath}">
   <input type="hidden" id="terminalId" name="terminalId">
   <input type="hidden" id="statusCode" name="statusCode" value="${statusCode}">
   <input type="hidden" id="actPosterSpreadId" name="actPosterSpreadId" value="${actPosterSpreadParam.actPosterSpread.actPosterSpreadId}">
   <div class="left image-bg">
      <img class="bg" src="${actPosterSpreadParam.actPosterSpread.posterUrl}" />
      <img class="t-1" src="${pageContext.request.contextPath}/images/up-img-bg.jpg" />
      <img class="t-2" src="${pageContext.request.contextPath}/images/up-img-bg.jpg" />
   </div>
   <div class="left">
      <form class="layui-form">
         <p class="activityadd-title">基本信息</p>
         <div class="layui-form-item" style="margin-top: 20px;">
            <div class="layui-form-item" >
               <label class="layui-form-label text-left" ><font color="red">*</font>活动名称：</label>
               <div class="layui-input-inline" >
                  <input type="text" class="layui-input" id="actName" name="actName"  value="${actPosterSpreadParam.actPosterSpread.actName}" maxlength="20" οnblur="actNameIsExist()" <c:if test="${statusCode==5}">disabled</c:if>>
               </div>
            </div>
         </div>

         <div class="layui-form-item" style="margin-top: 20px;">
            <div class="layui-form-item" >
               <label class="layui-form-label text-left" ><font color="red">*</font>活动描述：</label>
               <textarea maxlength="500" id="actDescribe" name="actDescribe"  class="layui-textarea" value="" placeholder="最多可输入500个文字..." <c:if test="${statusCode==5}">disabled</c:if>>${actPosterSpreadParam.actPosterSpread.actDescribe}</textarea>
            </div>
         </div>


         <p class="activityadd-title">活动范围</p>
         <div class="layui-form-item" style="margin-top: 20px;">
            <div class="layui-form-item" >
               <label class="layui-form-label text-left" ><font color="red">*</font>生效时间：</label>
               <div class="layui-input-inline startTime">
                  <input name="startTime" id="startTime" autocomplete="off" placeholder="请输入开始时间" value="<fmt:formatDate  pattern='yyyy-MM-dd HH:mm:ss' value='${actPosterSpreadParam.actPosterSpread.startTime}'/>" class="layui-input" οnclick="layui.laydate({elem: this,istime: true,format:'YYYY-MM-DD hh:mm:ss'})" type="text" <c:if test="${statusCode==5}">disabled</c:if>>
               </div>
               <em style="float: left">—</em>
               <div class="layui-input-inline endTime">
                  <input name="endTime" id="endTime" autocomplete="off" placeholder="请输入结束时间" value="<fmt:formatDate  pattern='yyyy-MM-dd HH:mm:ss' value='${actPosterSpreadParam.actPosterSpread.endTime}'/>"  class="layui-input" οnclick="layui.laydate({elem: this,istime: true,format:'YYYY-MM-DD hh:mm:ss'})" type="text">
               </div>
            </div>
         </div>

         <p class="activityadd-title">活动页设置</p>
         <div class="layui-form-item" style="margin-top: 20px;">
            <div class="layui-form-item">
               <label class="layui-form-label text-left" style="width: 100px;"><font color="red">*</font>活动素材：</label>

               <div class="layui-input-inline" style="width: 300px;">
                  <div class="site-demo-upbar" style="margin-top: 10px;">
                     <input type="hidden" name="posterLogo" id="posterLogo" value="${actPosterSpreadParam.actPosterSpread.posterUrl}">
                     <img id="j-image" src="${actPosterSpreadParam.actPosterSpread.posterUrl}" style="width: 207px; height: 135px;">
                     <div class="site-demo-upbar" style="margin-top: 10px;">
                        <input type="file" name="photo" class="layui-upload-file" id="j-upload-picture" lay-title="请上传图片" <c:if test="${statusCode==5}">disabled</c:if>>
                     </div>
                  </div>
                  <div class="layui-inline" style="color: red;font-size:10px">建议尺寸为:750*1350</div>
                  <br>
                  <div class="layui-inline">海报图片</div>
                  <br>
               </div>

               <div class="layui-input-inline" style="width: 300px;">
                  <div class="site-demo-upbar" style="margin-top: 10px;">
                     <input type="hidden" name="ruleLogo" id="ruleLogo" value="${actPosterSpreadParam.actPosterSpread.ruleUrl}">
                     <img id="r-image" src="${actPosterSpreadParam.actPosterSpread.ruleUrl}" style="width: 207px; height: 135px;">
                     <div class="site-demo-upbar" style="margin-top: 10px;">
                        <input type="file" name="photo" class="layui-upload-file" id="r-upload-picture" lay-title="请上传图片" <c:if test="${statusCode==5}">disabled</c:if>>
                     </div>
                  </div>
                  <div class="layui-inline" style="color: red;font-size:10px">建议尺寸为:750*1350</div>
                  <br>
                  <div class="layui-inline">活动规则</div>
                  <br>
               </div>

            </div>
         </div>

         <p class="activityadd-title">中奖奖品设置</p>
         <div class="layui-form-item" style="margin-top: 20px;">

            <div class="layui-input-block" style="width:800px;display:inline-block;">
               <div class="layui-form-item" >
                  <c:if test="${statusCode!=5}">
                     <div class="layui-btn layui-btn-normal" οnclick="discountOpen()">添加奖品</div>
                  </c:if>
               </div>
               <table class="layui-table"  style="margin:0;">
                  <thead>
                  <tr>
                     <th style="display:none"></th>
                     <th>序号</th>
                     <th>奖品</th>
                     <th>奖品数量</th>
                     <th>需邀请人数</th>
                     <th>操作</th>
                  </tr>
                  </thead>

                  <tbody id="discountTbody">
                  <c:forEach items="${actPosterSpreadParam.actPosterSpreadPrizeList}" var="item" varStatus="i">

                        <tr>
                           <td style="display:none">${item.prizeTemplateId}</td>
                           <td>${i.count}</td>
                           <td>${item.prizeName}</td>
                           <td><input type="tel"  class="prizeNum" value="${item.prizeNum}" style="width:80px;text-align:center;" οnblur="prizeNumPost(this)" οninput="this.value=this.value.replace(/\D/g,'')"/></td>
                           <td><input type="tel"  class="inviteNum" value="${item.inviteNum}" style="width:80px;text-align:center;" οnblur="inviteNumPost(this)" οninput="this.value=this.value.replace(/\D/g,'')" <c:if test="${statusCode==5}">disabled</c:if> /></td>
                           <td>
                              <c:if test="${statusCode!=5}">
                              <a class="btn btn--success" οnclick="delIndexList(this, 1, ${item.prizeTemplateId})">删除</a>
                              </c:if>
                           </td>
                        </tr>

                  </c:forEach>
                  </tbody>
               </table>
            </div>
         </div>


         <p class="activityadd-title">补发奖品设置</p>
         <div class="layui-form-item" style="margin-top: 20px;">
            <div class="layui-form-item" >
               <label class="layui-form-label text-left" style="width: 100px">是否补发奖品：</label>
               <div class="layui-input-block">
                        <c:if test="${statusCode==4}">
                            <input type="radio" name="isSupplyAgain" value="0" title="否" lay-filter="isSupplyAgain" <c:if test="${actPosterSpreadParam.actPosterSpread.isSupplyAgain==0}">checked</c:if>>
                            <input type="radio" name="isSupplyAgain" value="1" title="是" lay-filter="isSupplyAgain" <c:if test="${actPosterSpreadParam.actPosterSpread.isSupplyAgain==1}">checked</c:if>>
                        </c:if>
                  <c:if test="${statusCode==5}">
                       <c:if test="${actPosterSpreadParam.actPosterSpread.isSupplyAgain==0}">
                         <input type="radio" name="isSupplyAgain" value="0" title="否" lay-filter="isSupplyAgain" <c:if test="${actPosterSpreadParam.actPosterSpread.isSupplyAgain==0}">checked</c:if>>
                      </c:if>
                       <c:if test="${actPosterSpreadParam.actPosterSpread.isSupplyAgain==1}">
                         <input type="radio" name="isSupplyAgain" value="1" title="是" lay-filter="isSupplyAgain" <c:if test="${actPosterSpreadParam.actPosterSpread.isSupplyAgain==1}">checked</c:if>>
                      </c:if>
                  </c:if>
            </div>
               <div class="prize-type" <c:if test="${actPosterSpreadParam.actPosterSpread.isSupplyAgain==0}">style="display: none;"</c:if> >
               <div class="layui-form-item" >
                  <label class="layui-form-label text-left" style="width: 100px">补发奖品：</label>
                  <div class="layui-input-block">
                     <c:if test="${statusCode!=5}">
                     <div class="layui-btn layui-btn-normal" style="float:left;" οnclick="activityOpen()">添加</div>
                     </c:if>
                  </div>
               </div>
               <div class="layui-input-block" style="width:800px;display:inline-block;">
                  <table class="layui-table "  style="margin:0;">
                     <thead>
                     <tr>
                        <th style="display:none"></th>
                        <th>序号</th>
                        <th>奖品</th>
                        <th>操作</th>
                     </tr>
                     </thead>
                     <tbody id="prizeTbody">
                     <c:forEach items="${actPosterSpreadParam.againActPosterSpreadPrizeList}" var="item" varStatus="i">

                           <tr>
                              <td style="display:none">${item.prizeTemplateId}</td>
                              <td>${i.count}</td>
                              <td>${item.prizeName}</td>
                              <td>
                                            <c:if test="${statusCode!=5}">
                                            <a class="btn btn--success" οnclick="delIndexList(this, 0, ${item.prizeTemplateId})">删除</a>
                                            </c:if>
                                        </td>
                           </tr>

                     </c:forEach>
                     </tbody>
                  </table>
               </div>
            </div>
         </div>


         <p class="activityadd-title">中奖文案设置</p>
         <div class="layui-form-item">
            <label class="layui-form-label text-left" style="width: 160px"><font color="red">*</font>好友关注成功文案：</label>
            <label class="layui-form-label text-left" style="width: 800px">你的好友【friend】应邀加入，已邀请【complete】位好友，还差【unfinished1】人即可获得【prize1】,还差【unfinished2】人即可获得【prize2】</label>
            <br>
            <div class="layui-form-item" style="margin-left: 20px">
               <label class="layui-form-label text-left" style="width: 100px;margin-left: 60px">追加文案：</label>
               <div class="layui-input-inline">
                  <textarea maxlength="500" id="customMessage"  class="layui-textarea" placeholder="最多可输入500个文字..." <c:if test="${statusCode==5}">disabled</c:if>>${actPosterSpreadParam.actPosterSpread.customMessage}</textarea>
               </div>
            </div>
         </div>

         <div class="layui-form-item" style="margin-top: 20px;">
            <div class="layui-form-item">
               <label class="layui-form-label text-left" style="width: 120px"><font color="red">*</font>好友已关注文案：</label>
               <div class="layui-input-inline" >
                  <label class="layui-form-label text-left" style="width: 500px">你的好友{friend}已经是【爱电影网】的老朋友了哦，无法再为你助力了。</label>
               </div>
            </div>
         </div>

         <div class="layui-form-item" style="margin-top: 20px;">
            <div class="layui-form-item">
               <label class="layui-form-label text-left"><font color="red">*</font>中奖文案：</label>
               <div class="layui-input-inline" >
                  <label class="layui-form-label text-left" style="width: 800px">你的好友{friend}应邀加入，已成功邀请【complete】位好友，恭喜你获得一张{prize1}，戳我领取！再邀请【unfinished2】位好友即可获得【prize2】，继续加油哦！</label>
               </div>
            </div>
         </div>

         <div class="layui-form-item" style="margin-top: 20px;">

                <div class="layui-form-item">
                    <label class="layui-form-label text-left tab-zdys1" style="width: 200px"><font color="red">*</font>奖品发完文案：</label>
                    <label class="layui-form-label text-left tab-zdys1" style="width: 200px;display: none"><font color="red">*</font>奖品补发文案：</label>
                    <div class="layui-input-inline tab-zdys" <c:if test="${actPosterSpreadParam.actPosterSpread.isSupplyAgain==1}"> style="display: none" </c:if>>
                        <textarea maxlength="500" id="noPrizeMessage" name="noPrizeMessage" class="layui-textarea" value="" placeholder="最多可输入500个文字..." <c:if test="${statusCode==5}">disabled</c:if>>${actPosterSpreadParam.actPosterSpread.noPrizeMessage}</textarea>
                    </div>
                    <div class="layui-input-inline tab-zdys" <c:if test="${actPosterSpreadParam.actPosterSpread.isSupplyAgain==0}"> style="display: none" </c:if>>
                        <label class="layui-form-label text-left" style="width: 800px" >{name},很抱歉你来晚了一步，{prize1}已发完~别难过，我们将送你一份额外的小礼物：{replace}，戳我领取！
                        </label>
                    </div>
                </div>

         </div>

         <div class="layui-form-item" style="padding:30px 0;border-bottom:1px solid #ddd;text-align: center;">
            <button class="layui-btn" lay-submit lay-filter="*" οnclick="return false;">保存</button>
            <button class="layui-btn btn--warning" οnclick="return false;" id="j-cancel-btn">返回</button>
         </div>

      </form>

      <!--添加优惠券扫码-->
      <div style="display:none;padding:20px;box-sizing:border-box;" id="tjCoupon" >
         <div class="layui-form-item" >
            <label class="layui-form-label text-left" style="width:90px">优惠券名称：</label>
            <div class="layui-input-inline" >
                 <input type="text" class="layui-input" id="couponName" name="couponName"  maxlength="20" >
            </div>
             <label class="layui-form-label" style="width:90px">优惠券类型：</label>
             <div class="layui-input-inline">
               <select name="couponType" id="couponType">
                 <option value="ALL">全部</option>
                 <option value="1">优惠券</option>
                 <option value="2">定额券</option>
                 <option value="3">实物券</option>
                 <option value="4">兑换券</option>
               </select>
             </div>
            <div class="layui-btn layui-btn-normal" οnclick="querydiscount()">查询</div>
            <div class="layui-btn btn--warning" >重置</div>
            <div class="layui-btn layui-btn-normal" style="float: right" data-url="${pageContext.request.contextPath}/coupon/couponDiscountList?layer=layer" οnclick="viewEffect(this)">新增<cite style="display:none">优惠券</cite></div>
         </div>
         <div class="layui-form-item">
            <table class="layui-table tableActivity" style="width: 100%">
               <thead>
                  <tr>
                     <th><input type="checkbox" id="allCheckBoxTwo" lay-filter="allCheckBoxTwo" /></th>
                     <th>优惠券名称</th>
                     <th>券类型</th>
                     <th>券面值</th>
                     <th>使用条件</th>
                  </tr>
               </thead>
               <!--内容容器-->    
               <tbody id="con2">
                  
               </tbody>
            </table>
         </div>
         <!-- </div> -->
         <div class="layui-form-item">
            <!--分页容器-->
            <div id="pagedtwo" style="float: right;"></div>
         </div>
      </div>

      <!--添加补发奖品-->
      <div style="display:none;padding:20px;box-sizing:border-box;" id="tjactive" >
         <div class="layui-form-item" >
            <label class="layui-form-label text-left" style="width:90px">优惠券名称：</label>
            <div class="layui-input-inline" >
               <input type="text" class="layui-input" id="couponName1" name="couponName1"  maxlength="20" >
            </div>
            <label class="layui-form-label" style="width:90px">优惠券类型：</label>
            <div class="layui-input-inline">
               <select name="couponType1" id="couponType1">
                  <option value="ALL">全部</option>
                  <option value="1">优惠券</option>
                  <option value="2">定额券</option>
                  <option value="3">实物券</option>
                  <option value="4">兑换券</option>
               </select>
            </div>
            <div class="layui-btn layui-btn-normal" οnclick="queryCoupon()">查询</div>
            <div class="layui-btn btn--warning" >重置</div>
            <div class="layui-btn layui-btn-normal" style="float: right" data-url="${pageContext.request.contextPath}/coupon/couponDiscountList?layer=layer" οnclick="viewEffect(this)">新增<cite style="display:none">优惠券</cite></div>
         </div>
         <div class="layui-form-item">
            <table class="layui-table tableActivity" style="width: 100%">
               <thead>
               <tr>
                  <th>序号</th>
                  <th></th>
                  <th>优惠券名称</th>
                  <th>券类型</th>
                  <th>券面值</th>
                  <th>使用条件</th>
               </tr>
               </thead>
               <!--内容容器-->
               <tbody id="con">

               </tbody>
            </table>
         </div>
         <!-- </div> -->
         <div class="layui-form-item">
            <!--分页容器-->
            <div id="paged" style="float: right;"></div>
         </div>
      </div>

      
   </div>

   <!--奖品弹窗列表数据 -->
   <script type="text/html" id="conTemp">
      {{# layui.each(d.list, function(index, item){ }}
      <tr data-name="{{item.couponName}}" data-id="{{item.couponDiscountId}}">
         <td>{{index+1}}</td>
         <td>
            {{# if(selectPrizeList.indexOf(item.couponDiscountId.toString()) != -1){}}
            <input type="checkbox" class="z-checkbox" lay-filter="z-checkbox" checked/>
            {{# }else{ }}
            <input type="checkbox" class="z-checkbox" lay-filter="z-checkbox" />
            {{# } }}
         </td>
         <td>{{item.couponName}}</td>
         <td>
            {{#  if(item.couponType == 1 ){ }}
            优惠券
            {{#  }else if(item.couponType == 2 ){ }}
            定额券
            {{#  }else if(item.couponType == 3 ){ }}
            实物券
            {{#  }else if(item.couponType == 4 ){ }}
            兑换券
            {{#  } }}
         </td>
         <td>{{item.quota}}</td>
         <td>
            {{#  if(item.couponType == 3 ){ }}
            核销码：{{item.writeoffCode}}
            {{#  }else{ }}
            {{item.conditions}}
            {{#  } }}
         </td>
      </tr>
      {{# }); }}
   </script>

   <!--优惠券弹窗列表数据 -->
   <script type="text/html" id="conTemptwo">
      {{# layui.each(d.list, function(index, item){ }}
      <tr data-name="{{item.couponName}}" data-id="{{item.couponDiscountId}}">
         <td>
            {{# if(selectCouponList.indexOf(item.couponDiscountId.toString()) != -1){}}
            <input type="checkbox" class="two-checkbox" lay-filter="two-checkbox" checked/>
            {{# }else{ }}
            <input type="checkbox" class="two-checkbox" lay-filter="two-checkbox" />
            {{# } }}
         </td>
         <td>{{item.couponName}}</td>
         <td>
            {{#  if(item.couponType == 1 ){ }}
            优惠券
            {{#  }else if(item.couponType == 2 ){ }}
            定额券
            {{#  }else if(item.couponType == 3 ){ }}
            实物券
            {{#  }else if(item.couponType == 4 ){ }}
            兑换券
            {{#  } }}
         </td>
         <td>{{item.quota}}</td>
         <td>
            {{#  if(item.couponType == 3 ){ }}
            核销码：{{item.writeoffCode}}
            {{#  }else{ }}
            {{item.conditions}}
            {{#  } }}
         </td>
      </tr>
      {{# }); }}
   </script>


</body>
</html>

js：

var form, $, paging, paging2, paging3;
var submitFlag = true;
var selectPrize = [],selectPrizeList = [];
var selectPrizeTemp = [],selectPrizeListTemp = [];
var selectCouponList = [],couponList = [],couponPost = [];
var selectCouponListTemp=[],couponListTemp=[],couponPostTemp=[];
var couponPostTemps=[];
layui.config({base : '../plugin/layui/'}).use([ "form", "jquery", 'paging', "layer", "upload", "laydate","laytpl" ],
function() {
   var laydate = layui.laydate, layer = layui.layer, laytpl = layui.laytpl, $ = layui.jquery;
   paging = layui.paging(),form = layui.form();

    var path = $("#webRoot").val();

   /* 表单验证 start */
   form.on('submit(*)', function(data) {

      var actName=$("#actName").val();
        $.ajax({
            type : "POST",
            url : path+"/actPosterSpread/actNameIsExist",
            data : {
               actName:actName,
                terminalId:$("#terminalId", parent.parent.document).val(),
                actPosterSpreadId:$("#actPosterSpreadId").val()
         },
            success : function(result) {
                if (result.code == 0) {

                } else {
                    layer.msg(result.msg);
                    $("#actName").focus();
                }
            },
            error : function() {
                layer.msg('系统异常');
            }
        });

        var getFormatCode=function(strValue){
            return strValue.replace(/\r\n/g, '<br/>').replace(/\n/g, '<br/>').replace(/\s/g, ' ');
        }

        var statusCode=$("#statusCode").val();

        var actDescribe=$("#actDescribe").val();
        if(actDescribe==""){
            layer.msg("请输入活动描述");
            $('textarea[name="actDescribe"]').focus();
            return;
        }else {
            actDescribe=getFormatCode(actDescribe);
        }

        var startTime=$("#startTime").val();
        var endTime=$("#endTime").val();
        if(startTime==""){
            layer.msg("开始时间不能为空");
            return;
        }
        if(endTime==""){
            layer.msg("结束时间不能为空");
            return;
        }
        var oDate1 = new Date(startTime);
        var oDate2 = new Date(endTime);
        var currentDate=new Date();
        if(statusCode!=5){
            if(oDate1.getYear()<currentDate.getYear()||oDate1.getMonth()<currentDate.getMonth()
                ||oDate1.getDate()<currentDate.getDate()){
                layer.msg("有效期开始时间不能小于当前时间");
                return;
            }
            if(oDate1>oDate2){
                layer.msg("有效期开始时间不能大于结束时间");
                return;
            }
        }else {
            if(oDate2.getYear()<currentDate.getYear()||oDate2.getMonth()<currentDate.getMonth()
                ||oDate2.getDate()<currentDate.getDate()){
                layer.msg("有效期结束时间不能小于当前时间");
                return;
            }
            if(oDate1>oDate2){
                layer.msg("有效期开始时间不能大于结束时间");
                return;
            }
        }


        var posterUrl=$("#posterLogo").val();
        if(posterUrl==null||posterUrl==''){
            layer.msg("请上传海报图片");
        }
        var ruleUrl=$("#ruleLogo").val();
        if(ruleUrl==null||ruleUrl==''){
            layer.msg("请上传海报图片");
        }

        var isSupplyAgain=$('input[name="isSupplyAgain"]:checked').val();

        console.log("isSupplyAgain"+isSupplyAgain)

        var customMessage=$("#customMessage").val();

        if(couponPost.length==0){
            layer.msg("请添加奖品");
            return;
        }else {
            for (var i = 0; i < couponPost.length; i++){
                if(parseInt(couponPost[i].inviteNum)==0){
                    layer.msg("邀请人数不能小于0");
                    return;
                }
            }
        }

        var noPrizeMessage="";
        console.log(isSupplyAgain=='0')
        if(isSupplyAgain=='0'){
            noPrizeMessage=$("#noPrizeMessage").val();
            console.log("将来了"+noPrizeMessage);
            if(noPrizeMessage=="" || noPrizeMessage==null){
                layer.msg("请输入奖品发完文案");
                $('textarea[name="noPrizeMessage"]').focus();
                return;
            }else {
                noPrizeMessage=getFormatCode(noPrizeMessage);
            }
        }else {
            if(selectPrize.length==0){
                layer.msg("请添加补发奖品");
                return;
            }
        }

      var actPosterSpread = {
            actPosterSpreadId:$("#actPosterSpreadId").val(),
         actName: actName,
            actDescribe:actDescribe,
         startTime: startTime,
         endTime: endTime,
            posterUrl: posterUrl,
            ruleUrl: ruleUrl,
            isSupplyAgain:isSupplyAgain,
         terminalId:$("#terminalId", parent.parent.document).val(),
            customMessage: customMessage,
            noPrizeMessage: noPrizeMessage
      }

      var params={
            actPosterSpread:actPosterSpread,
            actPosterSpreadPrizeList:couponPost,
            againActPosterSpreadPrizeList:selectPrize
      }

      if (submitFlag == false) {return;}
      submitFlag = false;
      var url = $("#webRoot").val()+"/actPosterSpread/updateActPosterSpread";
      $.ajax({
         type : "POST",
         url : url,
         contentType:"application/json",
         data : JSON.stringify(params),
         success : function(result) {
            if (result.code == 0) {
               layer.msg('保存成功');
               setTimeout("closeDialog()", 2000);
            } else {
               layer.msg(result.msg);
               submitFlag = true;
            }
         },
         error : function() {
            layer.msg('保存失败');
            submitFlag = true;
         }
      });
      return false;
   });
   /* 表单验证 end */

   // 重新渲染form表单元素
   form.render();

   
   
   /***====================== 影片监听事件 start ======================***/
   //单选框 - 影片范围 
   form.on("radio(isSupplyAgain)", function(data) {
        console.log("isSupplyAgain+进入监听");
        if(data.value == 1){
            $(".prize-type").show();
            $(".tab-zdys1").eq(0).hide();
            $(".tab-zdys").eq(0).hide();
            $(".tab-zdys").eq(1).show();
            $(".tab-zdys1").eq(1).show();
            $("#noPrizeMessage").val("");
        }else{
            $(".prize-type").hide();
            $(".tab-zdys1").eq(0).show();
            $(".tab-zdys").eq(0).show();
            $(".tab-zdys").eq(1).hide();
            $(".tab-zdys1").eq(1).hide();
            selectPrize = [];
            selectPrizeList = [];
            selectPrizeTemp = [];
            selectPrizeListTemp = [];
            showSelectPrizeList()
        }
      $("#isSupplyAgain").val(data.value);
   });
   //补发奖品checkBox监听
   form.on("checkbox(z-checkbox)", function(data) {
        updateSelectPrizeList();
   });
   //补发奖品全选checkBox监听
   /*form.on("checkbox(allCheckBox)", function(data) {
      if (data.elem.checked) {
         $(".z-checkbox").prop("checked", "checked");
      } else {
         $(".z-checkbox").prop("checked", false);
      }
        updateSelectPrizeList();
      form.render("checkbox");
   });*/
   /***====================== 影片监听事件 end ======================***/
   
   
   /***====================== 优惠券监听事件 end ======================***/
   //优惠券单选checkBox监听
   form.on("checkbox(two-checkbox)", function(data) {
        console.log("two-checkbox+进入监听");
      updateSelectCouponList();
   });
   //优惠券全选checkBox监听
   form.on("checkbox(allCheckBoxTwo)", function(data) {
      if (data.elem.checked) {
         $(".two-checkbox").prop("checked", "checked");
      } else {
         $(".two-checkbox").prop("checked", false);
      }
      updateSelectCouponList()
      form.render("checkbox");
   });
   /***====================== 优惠券监听事件 end ======================***/

    layui.upload({
        url: path + '/Upload/uploadImage',
        size: 1024*2,
        elem: '#j-upload-picture',
        method: 'post',//上传接口的http类型
        success: function (res) {
            if (res.code == 0) {
               //
               var image =new Image();
               image.src=res.data.uploadPath;
               image.οnlοad=function(){
                  console.log("width:"+image.width);
                  if(image.width >= 740 && image.width <= 760 ){
                        $("#j-image").attr("src", res.data.uploadPath);
                       $("#posterLogo").val(res.data.uploadPath);
                       $(".image-bg .bg").attr("src", res.data.uploadPath);
                       $(".image-bg").show();
                  }else{
                     $("#j-image").attr("src", path+'/images/up-img-bg.jpg');
                          $("#posterLogo").val('');
                         //$(".image-bg .bg").attr("src", res.data.uploadPath);
                        $(".image-bg").hide(); 
                       layer.msg('图片尺寸不对');
                  }
               }
            } else {
                layer.msg('上传失败');
            }
        }
    });

    layui.upload({
        url: path + '/Upload/uploadImage',
        size: 1024*2,
        elem: '#r-upload-picture',
        method: 'post',//上传接口的http类型
        success: function (res) {
            if (res.code == 0) {
                $("#r-image").attr("src", res.data.uploadPath);
                $("#ruleLogo").val(res.data.uploadPath);
            } else {
                layer.msg('上传失败');
            }
        }
    });
});


    layui.use([ "form", "jquery"], function() {
        var $ = layui.jquery,
            form = layui.form();
        form.render();

        // 取消
        $("#j-cancel-btn").bind("click",function(){
            closeDialog();
        });

        function closeDialog(){
            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
            window.parent.reloadData();
        }
    });




/***====================== 待选补发奖品处理函数Function start ======================***/
//打开待选补发奖品选择弹窗
function activityOpen() {
    console.log(selectPrizeList.length)
    if(selectPrizeList.length>0){
        layer.msg('补发奖品只能添加一个,若需修改,请删除当前补发奖品!');
        return;
    }
   paging =layui.paging();
   //获取影片
   paging.init({
      url:$("#webRoot").val()+"/coupon/couponDiscountListData",
      elem: '#con', 
      params: {
            couponName: $("input[name='couponName1']").val(),
            couponType: $("#couponType1 option:selected").val() == "ALL" ? '' :$("#couponType1 option:selected").val(),
            terminalId:$("#terminalId").val()
      }, 
      tempElem:'#conTemp',
      pageConfig: {elem: '#paged', pageSize: 5},
      success: function() {
            var i = 0;
            //获取复选框的数量
            var allCheckNum = $("input[name='z-checkbox']").length;
            //定义复选框被选中的数量
            $('input[name=z-checkbox]:checked').each(function(){
                i++;
            });
            if(i< allCheckNum){
                $("#allCheckBox").attr("checked", false);
            }else {
                $("#allCheckBox").attr("checked", true);
            }
      },
      fail: function(msg) {},
      complate: function() {form.render("checkbox");}
   });
   //查询
   queryCoupon();
   //打开选择窗
   layer.open({
      type : 1,
      content : $("#tjactive"),
      title : '指定影片',
      btn : [ '确定', '取消' ],
      area : [ '850px', '600px' ],
      yes : function(index, layero) {
            showSelectPrizeList();
            selectPrizeTemp=[];
            for(var i = 0; i < selectPrize.length; i++){
                selectPrizeTemp.push(selectPrize[i]);
            }
            selectPrizeListTemp=[];
            for(var i = 0; i < selectPrizeList.length; i++){
                selectPrizeListTemp.push(selectPrizeList[i]);
            }
         layer.close(index);
      },
      btn2 : function(index, layero) {
            selectPrize=[];
            for(var i = 0; i < selectPrizeTemp.length; i++){
                selectPrize.push(selectPrizeTemp[i]);
            }
            selectPrizeList=[];
            for(var i = 0; i < selectPrizeListTemp.length; i++){
                selectPrizeList.push(selectPrizeListTemp[i]);
            }
      }
   });
}
//更新补发选择数组
function updateSelectPrizeList(){
   for (var i = 0; i < $(".z-checkbox").length; i++) {
      var _this = $(".z-checkbox").eq(i);
        var couponBaseId = _this.parent().parent().attr("data-id"),
            couponBaseName = _this.parent().parent().attr("data-name")
      var index = selectPrizeList.indexOf(couponBaseId);
      if (_this.is(":checked")) {
         if(index == -1){
                selectPrize.push({prizeTemplateId: couponBaseId,prizeNum:0,inviteNum:0,prizeName:couponBaseName,type:2});
                selectPrizeList.push(couponBaseId);
         }
            if(selectPrizeList.length>1){
                selectPrizeList=[];
                selectPrize=[];
                layer.msg('补发奖品只能添加一个,不允许添加！');
                return;
            }
      }else{
         if(index != -1){
                selectPrize.splice(index, 1)
                selectPrizeList.splice(index, 1);
         }
      }
   }
}
//显示已选择的补发奖品
function showSelectPrizeList(){
   var html = []
   for (var i = 0; i < selectPrize.length; i++) {
      html[html.length] = '<tr>';
      html[html.length] = '  <td>' + (i + 1) + '</td>';
      html[html.length] = '  <td>' + selectPrize[i].prizeName  + '</td>';
      html[html.length] = '  <td><a class="btn btn--success" οnclick="delIndexList(this, 0, '+selectPrize[i].prizeTemplateId+')">删除</a></td>';
      html[html.length] = '</tr>';
   }
   $("#prizeTbody").html(html.join(""));
}
/***====================== 影片处理函数Function end ======================***/

/***====================== 优惠券处理函数Function start ======================***/
//添加优惠券
function discountOpen() {
   paging2 =layui.paging();
   // 优惠券
   paging2.init({
      url:$("#webRoot").val()+"/coupon/couponDiscountListData",
        elem: '#con2',
      params: {
         couponName: $("input[name='couponName']").val(),
         couponType: $("#couponType option:selected").val() == "ALL" ? '' :$("#couponType option:selected").val(),
         terminalId:$("#terminalId", parent.parent.document).val()
      }, 
      tempElem:'#conTemptwo',
      pageConfig: {elem: '#pagedtwo',pageSize: 5},
      success: function() {
            var i = 0;
            //获取复选框的数量
            var allCheckNum = $("input[name='two-checkbox']").length;

            //定义复选框被选中的数量
            $('input[name=two-checkbox]:checked').each(function(){
                i++;
            });
            if(i< allCheckNum){
                $("#allCheckBoxTwo").attr("checked", false);
            }else {
                $("#allCheckBoxTwo").attr("checked", true);
            }
          },
      fail: function(msg) {},
      complate: function() {form.render("checkbox");}
   }); 
   querydiscount();
   layer.open({
      type : 1,
      content : $("#tjCoupon"),
      title : '添加优惠券',
      btn : ['确定','取消'],
      area : [ '1000px', '600px' ],
      yes : function(index, layero) {
         showSelectCouponList();
            selectCouponListTemp=[];
            for(var i = 0; i < selectCouponList.length; i++){
                selectCouponListTemp.push(selectCouponList[i]);
         }
            couponListTemp=[];
            for(var i = 0; i < couponList.length; i++){
                couponListTemp.push(couponList[i]);
            }
            couponPostTemp=[];
            for(var i = 0; i < couponPost.length; i++){
                couponPostTemp.push(couponPost[i]);
            }
            layer.close(index);
      },
      btn2 : function(index, layero) {
            selectCouponList=[];
            for(var i = 0; i < selectCouponListTemp.length; i++){
                selectCouponList.push(selectCouponListTemp[i]);
            }
            couponList=[];
            for(var i = 0; i < couponListTemp.length; i++){
                couponList.push(couponListTemp[i]);
            }
            couponPost=[];
            for(var i = 0; i < couponPostTemp.length; i++){
                couponPost.push(couponPostTemp[i]);
            }

      }
   });
}
//更新优惠券选择数组
function updateSelectCouponList(){
   for (var i = 0; i < $(".two-checkbox").length; i++) {
      var _this = $(".two-checkbox").eq(i);
      var couponBaseId = _this.parent().parent().attr("data-id"),
         couponBaseName = _this.parent().parent().attr("data-name")
      var index = selectCouponList.indexOf(couponBaseId);
      if (_this.is(":checked")) {
         if(index == -1){
            couponList.push({prizeTemplateId: couponBaseId, prizeName: couponBaseName});
            couponPost.push({prizeTemplateId: couponBaseId, prizeNum:0,inviteNum:0,prizeName:couponBaseName,type:1});
            selectCouponList.push(couponBaseId);
         }
      }else{
         if(index != -1){
            couponList.splice(index, 1);
            couponPost.splice(index, 1);
            selectCouponList.splice(index, 1);
         }
      }
   }
}
//显示已选择的优惠券
function showSelectCouponList(){
    var statusCode=$("#statusCode").val();
   var html = [];
    console.log("couponList.length=="+couponList.length);
   for (var i = 0; i < couponList.length; i++) {
      html[html.length] = '<tr data-index="'+i+'">';
      html[html.length] = '  <td>' + (i + 1) + '</td>';
      html[html.length] = '  <td>' + couponList[i].prizeName + '</td>';
        html[html.length] = '  <td><input type="tel"  class="prizeNum" value="'+couponPost[i].prizeNum+'" οninput="this.value=this.value.replace(/\\D/g,\'\')" style="width:80px;text-align:center;" /></td>';
        if(statusCode!=5){
            html[html.length] = '  <td><input type="tel"  class="inviteNum" value="'+couponPost[i].inviteNum+'" οninput="this.value=this.value.replace(/\\D/g,\'\')" style="width:80px;text-align:center;" /></td>';
        }else {
            html[html.length] = '  <td><input type="tel"  class="inviteNum" value="'+couponPost[i].inviteNum+'" οninput="this.value=this.value.replace(/\\D/g,\'\')" style="width:80px;text-align:center;" disabled/></td>';
        }
      if(statusCode!=5){
            html[html.length] = '  <td><a class="btn btn--success" οnclick="delIndexList(this, 1, \''+couponList[i].prizeTemplateId+'\')">删除</a></td>';
        }else {
            html[html.length] = '  <td></td>';
        }

      html[html.length] = '</tr>';
   }
   $("#discountTbody").html(html.join(""));

    if(statusCode!=5) {
        $(".prizeNum").bind("input propertychange", function () {
            var index = parseInt($(this).parent().parent().attr("data-index")), value = $(this).val();
            couponPost[index].prizeNum = value;
        });
        $(".inviteNum").bind("input propertychange", function () {
            var index = parseInt($(this).parent().parent().attr("data-index")), value = $(this).val();
            couponPost[index].inviteNum = value;
        });
    }else {
        $(".prizeNum").blur(function () {
            var index = parseInt($(this).parent().parent().attr("data-index")), value = $(this).val();
            if(parseInt(value)<parseInt(couponPostTemps[index].prizeNum)){
                layer.msg('奖品数量不能小于原数量：'+couponPostTemps[index].prizeNum);
                couponPost[index].prizeNum=couponPostTemps[index].prizeNum;
                showSelectCouponList();
            }else {
                couponPost[index].prizeNum = value;
            }
        })
    }
}
/***====================== 优惠券处理函数Function end ======================***/




//添加奖品查询参数
function queryCoupon() {
    paging.config.params = {};
    paging.get({
        couponName: $("input[name='couponName1']").val(),
        couponType: $("#couponType1 option:selected").val() == "ALL" ? '' :$("#couponType1 option:selected").val(),
        terminalId:$("#terminalId", parent.parent.document).val()
    });
    form.render();
}

//添加优惠券查询参数
function querydiscount() {
   paging2.config.params = {};
   paging2.get({
      couponName: $("input[name='couponName']").val(),
      couponType: $("#couponType option:selected").val() == "ALL" ? '' :$("#couponType option:selected").val(),
      terminalId:$("#terminalId", parent.parent.document).val()
   });
   form.render();
}


function closeDialog() {
   var index = parent.layer.getFrameIndex(window.name);
   parent.layer.close(index);
   window.parent.reloadData();
}

//删除指定下标数组
function delIndexList(el, listName, id){
   $(el).parent().parent().remove();
   var index;
   if(listName == 0){
      index = selectPrize.indexOf(id.toString());
        selectPrize.splice(index, 1);
        selectPrizeTemp.splice(index, 1);
        selectPrizeList.splice(index, 1);
        selectPrizeListTemp.splice(index, 1);
        showSelectPrizeList();
   }else if(listName == 1){
      index = selectCouponList.indexOf(id.toString());
      selectCouponList.splice(index, 1);
        selectCouponListTemp.splice(index, 1);
      couponList.splice(index, 1);
        couponListTemp.splice(index, 1);
      couponPost.splice(index, 1);
        couponPostTemp.splice(index, 1);
        showSelectCouponList();
   }
}

function actNameIsExist() {
    var actName=$("#actName").val()
    $.ajax({
        type : "POST",
        url : $("#webRoot").val()+"/actPosterSpread/actNameIsExist",
        data : {
           actName:actName,
            terminalId:$("#terminalId", parent.parent.document).val(),
            actPosterSpreadId:$("#actPosterSpreadId").val()
      },
        success : function(result) {
            if (result.code == 0) {

            } else {
                layer.msg(result.msg);
                $("#actName").focus();
            }
        },
        error : function() {
            layer.msg('系统异常');
        }
    });
}

$(document).ready(function () {
    //初始化已选奖品
    var discountTbody = document.getElementById('discountTbody');
    var discountRows = discountTbody.rows;
    selectCouponList = [];
    couponList = [];
    couponPost = [];
    console.log("初始化selectCouponList");
    for (var i = 0; i < discountRows.length; i++) {//遍历行
        var cells = discountRows[i].cells;
        couponList.push({prizeTemplateId: cells[0].innerHTML, prizeName: cells[2].innerHTML});
        couponPost.push({prizeTemplateId: cells[0].innerHTML, prizeNum:cells[3].getElementsByTagName("input")[0].value,inviteNum:cells[4].getElementsByTagName("input")[0].value,prizeName:cells[2].innerHTML,type:1});
        couponPostTemps.push({prizeTemplateId: cells[0].innerHTML, prizeNum:cells[3].getElementsByTagName("input")[0].value,inviteNum:cells[4].getElementsByTagName("input")[0].value,prizeName:cells[2].innerHTML,type:1});
        selectCouponList.push(cells[0].innerHTML);
    }

    //初始化已选补发奖品
    var prizeTbody = document.getElementById('prizeTbody');
    var prizeRows = prizeTbody.rows;
    selectPrize = [];
    selectPrizeList = [];
    console.log("初始化selectPrizeList");
    for (var i = 0; i < prizeRows.length; i++) {//遍历行
        var cells = prizeRows[i].cells;
        selectPrize.push({prizeTemplateId: cells[0].innerHTML,prizeNum:0,inviteNum:0,prizeName:cells[2].innerHTML,type:2});
        selectPrizeList.push(cells[0].innerHTML);
    }

});

function prizeNumPost(that) {
    var num=$(that).val();
    console.log("num=="+num);
    //获取行号
    var i=parseInt($(that).parent().parent().index());
    console.log("i==="+i);
    if(parseInt(num)>=parseInt(couponPost[i].prizeNum)){
        couponPost[i].prizeNum = num;
    }else {
        $(that).val(num);
        layer.msg('奖品数量不能小于原数量：'+couponPost[i].prizeNum);
        showSelectCouponList();
    }

}

function viewEffect(event){
   top.parent.addTab($(event));
}

function inviteNumPost(that) {
    var num=$(that).val();
    console.log("num=="+num);
    //获取行号
    var i=parseInt($(that).parent().parent().index());
    console.log("i==="+i);
    couponPost[i].inviteNum = num;
}

&友情岁月&

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个交互比较复杂的页面（2编辑）

编辑页面jsp<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><%@ taglib prefix="fm...
复制链接

扫一扫