cloud-server-management/src/main/webapp/WEB-INF/view/system/tSite/TSite_add.html
@@ -39,6 +39,114 @@ margin-left: 255px; } /* 价格配置相关样式 */ .step-container { display: none; } .step-container.active { display: block; } .price-config-section { background: #fff; padding: 20px; margin-bottom: 20px; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .section-title { font-size: 16px; font-weight: bold; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 2px solid #409EFF; } .field-item { display: flex; align-items: center; margin-bottom: 10px; padding: 10px; background: #f9f9f9; border-radius: 4px; } .field-item label { min-width: 100px; margin: 0 10px 0 0; font-weight: normal; } .field-item .form-control { flex: 1; margin-right: 10px; } .btn-add { cursor: pointer; color: #1ab394; margin-left: 10px; font-size: 16px; } .btn-add:hover { color: #18a689; } .btn-remove { cursor: pointer; color: #ed5565; font-size: 16px; } .btn-remove:hover { color: #da4453; } .audience-checkboxes { display: flex; gap: 20px; } .info-alert { background-color: #e7f4ff; border-left: 4px solid #409EFF; padding: 10px 15px; margin-bottom: 15px; border-radius: 4px; } .price-table-container { overflow-x: auto; margin-top: 15px; } .price-table { width: 100%; border-collapse: collapse; background: white; } .price-table th, .price-table td { border: 1px solid #ddd; padding: 8px; text-align: center; } .price-table th { background-color: #f5f7fa; font-weight: bold; color: #333; } .price-input { width: 80px; padding: 5px; text-align: center; } </style> <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.15&key=77b37f0753049c4e712ea79a24e0719c"></script> @@ -94,73 +202,12 @@ </div> <#input style="width: 300px" id="name" name="*场地名称" type="text"/> <div class="form-group"> <label class="col-sm-3 control-label">是否可预约:</label> <div class="col-sm-9"> <input type="radio" name="reservation" value="1" checked onclick="updateHtml(1)"> 是 <input type="radio" name="reservation" value="0" onclick="updateHtml(0)"> 否 </div> </div> <div id = reservation> <div class="form-group" > <label class="col-sm-3 control-label">*可预约时间段:</label> <!-- <input style="width: 300px" class="form-control" type="time">--> <div class="col-sm-9" style="display: flex"> <input style="width: 136px;" value="开始时间" id="start-time" class="form-control" type="time" > <span style="margin-top: 7px"> 至 </span> <input style="width: 136px;" value="结束时间" id="end-time" class="form-control" type="time" > </div> </div> <div class="form-group" > <label class="col-sm-3 control-label">*现金价格:</label> <div class="col-sm-9" style="display: flex;"> <input style="width: 300px" class="form-control" id="cashPrice" name="playPaiCoin" placeholder="请输入价格" type="text"> <span style="margin-left: 5px;margin-top: 5px" id="priceLabel3">元/半小时</span> </div> </div> <div class="form-group" > <label class="col-sm-3 control-label">*玩湃币价格:</label> <div class="col-sm-9" style="display: flex;"> <input style="width: 300px" class="form-control" id="playPaiCoin" name="playPaiCoin" placeholder="请输入价格" type="text"> <span style="margin-left: 5px;margin-top: 5px" id="priceLabel4">币/半小时</span> </div> </div> <div class="form-group" id="siteMore" style=" margin-left: 255px;"> <div class="form-group">多场地配置:<i class="fa fa-plus" onclick="addBox()"></i></div> </div> <div class="form-group"> <label class="col-sm-3 control-label">是否可预定半场:</label> <div class="col-sm-9"> <input type="radio" name="ishalf" value="2" checked onclick="updateHalf(1)"> 否 <input type="radio" name="ishalf" value="1" onclick="updateHalf(2)"> 是 </div> </div> <div id="halfCode" hidden> <div class="form-group" style="margin-left: 100px;" > <label class="col-sm-3 control-label">*现金价格:</label> <div class="col-sm-9" style="display: flex;"> <input style="width: 300px" class="form-control" id="cashPriceOne" name="playPaiCoin" placeholder="请输入价格" type="text"> <span id="priceLabel" style="margin-left: 5px;margin-top: 5px">元/半小时</span> </div> </div> <div class="form-group" style="margin-left: 100px;"> <label class="col-sm-3 control-label">*玩湃币价格:</label> <div class="col-sm-9" style="display: flex;"> <input style="width: 300px" class="form-control" id="playPaiCoinOne" name="playPaiCoin" placeholder="请输入价格" type="text"> <span id="priceLabel1" style="margin-left: 5px;margin-top: 5px">币/半小时</span> </div> </div> <div class="form-group" id="halfName" > <label class="col-sm-3 control-label">*半场名称:</label> <div class="col-sm-8" style="display: flex;"> <input style="width: 240px" class="form-control" name="name2" type="text"><i class="fa fa-plus" onclick="addBox1()" style="margin-left: 32px;margin-top: 10px;"></i> </div> </div> </div> </div> <div class="form-group"> @@ -213,6 +260,7 @@ <div class="row btn-group-m-t"> <div class="col-sm-10 col-sm-offset-5" > <#button btnCss="info" name="提交" id="ensure" icon="fa-check" clickFun="TSite.addSubmit()"/> <#button btnCss="primary" name="下一步,设置价格" id="btn_next_price" icon="fa-arrow-right" clickFun="TSite.nextStep()"/> <#button btnCss="danger" name="取消" id="cancel" icon="fa-eraser" clickFun="TSite.close()"/> </div> </div> @@ -283,52 +331,9 @@ laydate.render({ elem: '#start-time', type: "time", format: "HH:mm", ready: formatminutes }); laydate.render({ elem: '#end-time' , type: "time", format: "HH:mm", ready: formatminutes }); function addBox() { var a=" <div class=\"col-sm-8 control-label\" id=\"far\">\n" + " <label class=\"col-sm-2 control-label\">*单个场地名</label>\n" + " <div class=\"col-sm-3\">\n" + " <input type=\"text\" name=\"name1\" class=\"form-control newWidth\" /> \n" + " </div> \n" + " <div class=\"col-sm-1\">\n" + " <i class=\"col-sm-1 fa fa-remove\" onclick=\"delBox(this)\" style=\"margin-top:10px\"></i>\n" + " </div> \n" + " </div> " $("#siteMore").append($(a)) } function addBox1() { var a=" <div class=\"col-sm-8 control-label\" id=\"far\" style=\"margin-left: 210px;\">\n" + " <label class=\"col-sm-2 control-label\">*半场名称:</label>\n" + " <div class=\"col-sm-3\">\n" + " <input type=\"text\" name=\"name2\" class=\"form-control newWidth\" style=\"margin-left: 8px;width: 240px;\"/> \n" + " </div> \n" + " <div class=\"col-sm-1\">\n" + " <i class=\"col-sm-1 fa fa-remove\" onclick=\"delBox(this)\" style=\"margin-top:10px\"></i>\n" + " </div> \n" + " </div> " $("#halfName").append($(a)) } function delBox(o) { $(o).parent("div").parent("div").remove() } function updateHalf(e) { if(e==1){ $("#halfCode").hide() }else { $("#halfCode").show() } function updateHtml(e) { console.log("是否可预约变更:", e); // 暂时不需要特殊处理,价格配置在步骤2进行 } @@ -366,109 +371,5 @@ created() { }, }); var selectElement = document.getElementById('store'); var startTime = document.getElementById('start-time'); var endTime = document.getElementById('end-time'); startTime.disabled = true; endTime.disabled = true; selectElement.addEventListener('change',function () { if (selectElement.value !== ''){ startTime.disabled = false; endTime.disabled = false; }else{ startTime.disabled = true; endTime.disabled = true; } }); function updateHtml(e) { console.log("进入看看") console.log(e) if(e==0){ $("#reservation").hide() }else { $("#reservation").show() } } function updateTime1() { var selectedValue = document.getElementById("siteTypeOne").value; var priceLabel = document.getElementById("priceLabel"); var priceLabel1 = document.getElementById("priceLabel1"); var priceLabel3 = document.getElementById("priceLabel3"); var priceLabel4 = document.getElementById("priceLabel4"); if (selectedValue === "智慧场地") { console.log("=============智慧场地=") priceLabel.innerText = "元/15分钟"; priceLabel1.innerText = "元/15分钟"; priceLabel3.innerText = "元/15分钟"; priceLabel4.innerText = "元/15分钟"; } else { priceLabel.innerText = "元/半小时"; priceLabel1.innerText = "元/半小时"; priceLabel3.innerText = "元/半小时"; priceLabel4.innerText = "元/半小时"; } $("#end-time").val(''); $("#start-time").val(''); } function updateTime(e) { let one = $("#siteTypeOne").val() var timeInputs = document.querySelectorAll('input[type="time"]'); console.log(timeInputs) var selectedTime=''; if(e==1){ var selectedTime = $("#start-time").val(); }else { var selectedTime = $("#end-time").val(); } var hour = selectedTime.split(':')[0]; var minute = selectedTime.split(':')[1]; if(one=="普通场地"){ console.log( one ) if (minute < 30 &&minute>0) { minute = '30'; } else if (minute >30) { hour++; minute = '00'; if (hour<10){ hour = '0'+hour; } } }else { console.log( one,minute ) if (minute <= 15 && minute>0) { console.log(1) minute = '15'; }else if(minute<=30){ console.log(2) minute = '30'; }else if(minute<=45){ console.log(3) minute = '45'; }else if (minute >45) { console.log(4) hour++; minute = '00'; if (hour<10){ hour = '0'+hour; } } } if(e==1){ $("#start-time").val(hour + ':' + minute) }else { $("#end-time").val(hour + ':' + minute) } } </script> @} cloud-server-management/src/main/webapp/WEB-INF/view/system/tSite/TSite_edit.html
@@ -40,15 +40,207 @@ margin-left: 255px; } /* 价格配置相关样式 */ .step-container { display: none; } .step-container.active { display: block; } .price-config-section { background: #fff; padding: 20px; margin-bottom: 20px; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .section-title { font-size: 16px; font-weight: bold; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 2px solid #409EFF; } .field-item { display: flex; align-items: center; margin-bottom: 10px; padding: 8px; background: #f5f7fa; border-radius: 4px; } .field-item input[type="text"] { flex: 1; margin-right: 10px; padding: 5px 10px; border: 1px solid #ddd; border-radius: 3px; } .field-item .btn-remove { color: #f56c6c; cursor: pointer; font-size: 18px; } .btn-add { color: #409EFF; cursor: pointer; margin-left: 5px; } .audience-checkboxes { display: flex; gap: 20px; } .audience-checkboxes label { display: flex; align-items: center; cursor: pointer; } .audience-checkboxes input[type="checkbox"] { margin-right: 5px; } .time-slots-container { margin-top: 15px; } .time-slot-item { display: flex; align-items: center; margin-bottom: 10px; padding: 8px; background: #f5f7fa; border-radius: 4px; } .time-slot-item input[type="time"] { margin: 0 10px; padding: 5px; border: 1px solid #ddd; border-radius: 3px; } .price-table-container { margin-top: 20px; overflow-x: auto; } .price-table { width: 100%; border-collapse: collapse; margin-top: 15px; } .price-table th, .price-table td { border: 1px solid #ddd; padding: 10px; text-align: center; } .price-table th { background-color: #409EFF; color: white; font-weight: bold; } .price-table tbody tr:nth-child(even) { background-color: #f9f9f9; } .price-input { width: 80px; padding: 4px; border: 1px solid #ddd; border-radius: 3px; text-align: center; } .price-cell { display: flex; flex-direction: column; gap: 5px; align-items: center; } .price-label { font-size: 12px; color: #666; margin-bottom: 3px; } .info-alert { background-color: #fff3cd; border: 1px solid #ffc107; border-radius: 4px; padding: 12px; margin-bottom: 20px; color: #856404; } .tab-container { margin-bottom: 20px; } .tab-buttons { display: flex; gap: 10px; margin-bottom: 15px; border-bottom: 2px solid #e4e7ed; } .tab-btn { padding: 10px 20px; border: none; background: none; cursor: pointer; position: relative; color: #606266; } .tab-btn.active { color: #409EFF; } .tab-btn.active::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background-color: #409EFF; } .tab-content { display: none; } .tab-content.active { display: block; } </style> <div class="ibox float-e-margins"> <div class="ibox-content"> <!-- 步骤1:基本信息 --> <div class="step-container active" id="step1_basic_info"> <div class="form-horizontal" id="carInfoForm"> <input id="type_" value="${list.ishalf}" hidden> <input id="reservation" value="${list.reservation}" hidden> <input id="objectType" value="${objectType}" hidden> <input type="hidden" id="siteId" value="${list.id}"> @if(objectType == 1){ <div class="form-group" > @@ -110,89 +302,6 @@ <input type="radio" name="reservation" value="0" onclick="updateHtml(0)"> 否 </div> </div> <div id = reservation1> <div class="form-group" > <label class="col-sm-3 control-label">*可预约时间段:</label> <div class="col-sm-9" style="display: flex"> <input style="width: 150px;" value="${list.appointmentStartTime}" id="start-time" class="form-control" type="time" > <span style="margin-top: 7px"> 至 </span> <input style="width: 150px;" value="${list.appointmentEndTime}" id="end-time" class="form-control" type="time"> </div> </div> <div class="form-group" > <label class="col-sm-3 control-label">*现金价格:</label> <div class="col-sm-9" style="display: flex;"> <input style="width: 300px" class="form-control" id="cashPrice" name="playPaiCoin" type="text" value="${list.cashPrice}"> <span style="margin-left: 5px;margin-top: 5px" id="priceLabel">元/半小时</span> </div> </div> <div class="form-group" > <label class="col-sm-3 control-label">*玩湃币价格:</label> <div class="col-sm-9" style="display: flex;"> <input style="width: 300px" class="form-control" id="playPaiCoin" name="playPaiCoin" type="text" value="${list.playPaiCoin}"> <span style="margin-left: 5px;margin-top: 5px" id="priceLabel1">币/半小时</span> </div> </div> <div class="form-group" id="siteMore" style=" margin-left: 255px;"> <div class="form-group">多场地配置:<i class="fa fa-plus" onclick="addBox()"></i></div> @for(n in nextNames!){ <div class="col-sm-8 control-label" id="far"> <label class="col-sm-2 control-label">*单个场地名</label> <div class="col-sm-3"> <input type="text" name="name1" class="form-control newWidth" value="${n}"/> </div> <div class="col-sm-1"> <i class="col-sm-1 fa fa-remove" onclick="delBox(this)" style="margin-top:10px"></i> </div> </div> @} </div> <div class="form-group"> <label class="col-sm-3 control-label">是否可预定半场:</label> <div class="col-sm-9"> <input type="radio" name="ishalf" value="2" checked onclick="updateHalf(1)"> 否 <input type="radio" name="ishalf" value="1" onclick="updateHalf(2)"> 是 </div> </div> <div id="halfCode" hidden> <div class="form-group" style="margin-left: 100px;" > <label class="col-sm-3 control-label">*现金价格:</label> <div class="col-sm-9" style="display: flex;"> <input style="width: 300px" class="form-control" id="cashPriceOne" name="playPaiCoin" placeholder="请输入价格" type="text" value="${list.cashPriceOne}"> <span style="margin-left: 5px;margin-top: 5px" id="priceLabel3">元/半小时</span> </div> </div> <div class="form-group" style="margin-left: 100px;"> <label class="col-sm-3 control-label">*玩湃币价格:</label> <div class="col-sm-9" style="display: flex;"> <input style="width: 300px" class="form-control" id="playPaiCoinOne" name="playPaiCoin" placeholder="请输入价格" type="text" value="${list.playPaiCoinOne}"> <span style="margin-left: 5px;margin-top: 5px" id="priceLabel4">币/半小时</span> </div> </div> <div class="form-group" id="halfName" > <label class="col-sm-3 control-label">*半场名称:</label> <div class="col-sm-8" style="display: flex;"> <input style="width: 240px" class="form-control" name="name2" type="text" value="${halfName}"><i class="fa fa-plus" onclick="addBox1()" style="margin-left: 32px;margin-top: 10px;"></i> </div> </div> @for(h in halfNames){ <div class="form-group" > <label class="col-sm-3 control-label">*半场名称:</label> <div class="col-sm-8" style="display: flex;"> <input style="width: 240px" class="form-control" name="name2" type="text" value="${h}"> <i class="col-sm-1 fa fa-remove" onclick="delBox(this)" style="margin-top:10px"></i> </div> </div> @} </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">*场地责任险有效期:</label> @@ -252,6 +361,7 @@ <div class="col-sm-10 col-sm-offset-5" > @if(type==1){ <#button btnCss="info" name="提交" id="ensure" icon="fa-check" clickFun="TSiteInfo.addSubmit()"/> <#button btnCss="primary" name="下一步,设置价格" id="btn_next_price" icon="fa-arrow-right" clickFun="TSiteInfo.nextStep()"/> @} <#button btnCss="danger" name="关闭" id="cancel" icon="fa-eraser" clickFun="TSiteInfo.close()"/> </div> @@ -259,6 +369,144 @@ <input hidden id="role" value="${role}"> <input type="hidden" id="id" value="${list.id}"> </div> </div> <!-- 步骤1结束 --> <!-- 步骤2:价格配置 --> <div class="step-container" id="step2_price_config"> <div class="info-alert"> <strong>场地信息:</strong> <span id="display_site_name"></span> <span id="display_next_names"></span> <span id="display_half_names"></span> </div> <!-- 场地配置区域(顶部) --> <div class="price-config-section"> <div class="section-title">时段价格设置</div> <div class="form-group" id="siteMore_step2"> <label class="control-label">多场地配置:<i class="fa fa-plus btn-add" onclick="TSiteInfo.addFieldBox()"></i></label> <div id="field_container" style="margin-top: 10px;"> @for(n in nextNames!){ <div class="field-item"> <label>*单个场地名</label> <input type="text" name="name1_step2" class="form-control" value="${n}" style="flex:1;margin-right:10px;"/> <i class="fa fa-remove btn-remove" onclick="TSiteInfo.removeFieldBox(this)"></i> </div> @} </div> </div> <div class="form-group"> <label class="control-label">*是否可预定半场:</label> <div> <label style="margin-right: 20px;"> <input type="radio" name="ishalf_step2" value="2" checked onclick="TSiteInfo.updateHalfField(2)"> 否 </label> <label> <input type="radio" name="ishalf_step2" value="1" onclick="TSiteInfo.updateHalfField(1)"> 是 </label> </div> </div> <div class="form-group" id="halfCode_step2" style="display:none;"> <label class="control-label">*半场名称:<i class="fa fa-plus btn-add" onclick="TSiteInfo.addHalfFieldBox()"></i></label> <div id="half_field_container" style="margin-top: 10px;"> @for(h in halfNames){ <div class="field-item"> <label>*半场名称</label> <input type="text" name="name2_step2" class="form-control" value="${h}" style="flex:1;margin-right:10px;"/> <i class="fa fa-remove btn-remove" onclick="TSiteInfo.removeHalfFieldBox(this)"></i> </div> @} </div> </div> </div> <!-- 价格配置区域 --> <div class="price-config-section"> <div class="section-title">价格配置</div> <div class="info-alert"> <i class="fa fa-info-circle"></i> <strong>说明:</strong> 点击"添加时段"按钮添加新的时段价格配置。全场价格适用于所有子场地,半场价格适用于所有半场。 </div> <!-- 面向人群 --> <div class="form-group"> <label class="control-label">*面向人群:</label> <div class="audience-checkboxes"> <label> <input type="checkbox" value="1" id="audience_booking"> 订场 </label> <label> <input type="checkbox" value="2" id="audience_walkin" checked> 散客 </label> </div> <small class="text-muted">至少选择一项,选择后对应的价格表才会显示</small> </div> <!-- 容纳散客数 --> <div class="form-group" id="walkin_capacity_group" style="display:none;"> <label class="control-label">*容纳散客数:</label> <input type="number" id="walkin_capacity" class="form-control" style="width: 200px;" min="1" value="20" placeholder="请输入容纳散客数"> </div> </div> <!-- 订场价格表区域 --> <div class="price-config-section" id="booking_section" style="display:none;"> <div class="section-title"> 订场价格 <button type="button" class="btn btn-sm btn-primary" style="margin-left: 20px;" onclick="TSiteInfo.addBookingTimeSlot()"> <i class="fa fa-plus"></i> 添加时段 </button> </div> <div class="price-table-container"> <table class="price-table" id="booking_price_table"> <thead id="booking_thead"> <!-- 表头将根据是否可预订半场动态生成 --> </thead> <tbody id="booking_price_tbody"> <!-- 价格行将动态添加 --> </tbody> </table> </div> </div> <!-- 散客价格表区域 --> <div class="price-config-section" id="walkin_section" style="display:block;"> <div class="section-title"> 散客价格 <button type="button" class="btn btn-sm btn-primary" style="margin-left: 20px;" onclick="TSiteInfo.addWalkinTimeSlot()"> <i class="fa fa-plus"></i> 添加时段 </button> </div> <div class="price-table-container"> <table class="price-table" id="walkin_price_table"> <thead id="walkin_thead"> <!-- 表头将根据是否可预订半场动态生成 --> </thead> <tbody id="walkin_price_tbody"> <!-- 价格行将动态添加 --> </tbody> </table> </div> </div> <!-- 底部按钮组 --> <div class="row btn-group-m-t"> <div class="col-sm-10 col-sm-offset-5"> <#button btnCss="default" name="上一步" id="btn_prev" icon="fa-arrow-left" clickFun="TSiteInfo.previousStep()"/> <#button btnCss="success" name="保存价格配置" id="btn_save_price" icon="fa-save" clickFun="TSiteInfo.savePriceConfig()"/> <#button btnCss="danger" name="关闭" id="btn_close" icon="fa-eraser" clickFun="TSiteInfo.close()"/> </div> </div> </div> <!-- 步骤2结束 --> <!-- <img id="img" value="${list.insuranceImg}"/>--> <!-- <img id = "plan" value="${list.managementPlan}"/>--> </div> cloud-server-management/src/main/webapp/static/modular/system/tSite/tSite.js
@@ -862,3 +862,24 @@ }) }); }); /** * 下一步:跳转到价格配置 */ TSite.nextStep = function() { // 验证基本信息是否填写完整 var storeName = $("#name").val(); if (!storeName) { Feng.error("请先填写场地名称!"); return; } var insuranceEndTime = $("#insuranceEndTime").val(); if (!insuranceEndTime) { Feng.error("请先填写场地责任险有效期!"); return; } // 提示:需要先保存基本信息 Feng.info("请先点击【提交】按钮保存场地基本信息,保存成功后在编辑页面进行价格配置!"); }; cloud-server-management/src/main/webapp/static/modular/system/tSite/tSite_info.js
@@ -563,6 +563,643 @@ TSiteInfo.close = function() { parent.layer.close(window.parent.TSite.layerIndex); } /** * 下一步:切换到价格配置 */ TSiteInfo.nextStep = function() { var siteName = $("#name").val(); var isHalf = $("input[name='ishalf']:checked").val() || 2; // 验证场地名称 if (!siteName) { Feng.error("请输入场地名称!"); return; } // 收集子场地名称 var nextNames = []; $("input[name='name1']").each(function() { var val = $(this).val(); if (val) { nextNames.push(val); } }); // 收集半场名称 var halfNames = []; $("input[name='name2']").each(function() { var val = $(this).val(); if (val) { halfNames.push(val); } }); // 保存信息到全局变量 TSiteInfo.priceConfig = { siteName: siteName, isHalf: isHalf, nextNames: nextNames, halfNames: halfNames, timeSlots: [], priceData: {} }; // 显示场地信息 $("#display_site_name").text(siteName); if (nextNames.length > 0) { $("#display_next_names").html(" | <strong>子场地:</strong>" + nextNames.join('、')); } if (isHalf == 1 && halfNames.length > 0) { $("#display_half_names").html(" | <strong>半场:</strong>" + halfNames.join('、')); } // 切换步骤 $("#step1_basic_info").removeClass('active'); $("#step2_price_config").addClass('active'); // 初始化价格配置 TSiteInfo.initPriceConfig(); // 滚动到顶部 $('html, body').animate({scrollTop: 0}, 300); } /** * 上一步:返回基本信息 */ TSiteInfo.previousStep = function() { $("#step2_price_config").removeClass('active'); $("#step1_basic_info").addClass('active'); // 滚动到顶部 $('html, body').animate({scrollTop: 0}, 300); } /** * 初始化价格配置 */ TSiteInfo.initPriceConfig = function() { // 监听人群选择 $("#audience_booking, #audience_walkin").off('change').on('change', function() { TSiteInfo.updateAudienceUI(); }); // 清空价格表 $("#booking_price_tbody").empty(); $("#walkin_price_tbody").empty(); // 初始化计数器 TSiteInfo.bookingRowIndex = 0; TSiteInfo.walkinRowIndex = 0; // 生成表头 TSiteInfo.buildTableHeaders(); // 更新界面 TSiteInfo.updateAudienceUI(); // 初始化是否可预定半场状态 var isHalf = TSiteInfo.priceConfig.isHalf; if (isHalf == 1) { $("input[name='ishalf_step2'][value='1']").prop('checked', true); $("#halfCode_step2").show(); } else { $("input[name='ishalf_step2'][value='2']").prop('checked', true); $("#halfCode_step2").hide(); } } /** * 添加场地名 */ TSiteInfo.addFieldBox = function() { var html = '<div class="field-item">' + '<label>*单个场地名</label>' + '<input type="text" name="name1_step2" class="form-control" style="flex:1;margin-right:10px;" placeholder="请输入场地名"/>' + '<i class="fa fa-remove btn-remove" onclick="TSiteInfo.removeFieldBox(this)"></i>' + '</div>'; $("#field_container").append(html); } /** * 删除场地名 */ TSiteInfo.removeFieldBox = function(btn) { $(btn).closest('.field-item').remove(); } /** * 添加半场名称 */ TSiteInfo.addHalfFieldBox = function() { var html = '<div class="field-item">' + '<label>*半场名称</label>' + '<input type="text" name="name2_step2" class="form-control" style="flex:1;margin-right:10px;" placeholder="请输入半场名称"/>' + '<i class="fa fa-remove btn-remove" onclick="TSiteInfo.removeHalfFieldBox(this)"></i>' + '</div>'; $("#half_field_container").append(html); } /** * 删除半场名称 */ TSiteInfo.removeHalfFieldBox = function(btn) { $(btn).closest('.field-item').remove(); } /** * 更新半场字段显示 */ TSiteInfo.updateHalfField = function(value) { if (value == 1) { $("#halfCode_step2").show(); // 更新isHalf并重新生成表头 TSiteInfo.priceConfig.isHalf = 1; } else { $("#halfCode_step2").hide(); TSiteInfo.priceConfig.isHalf = 2; } // 重新生成表头 TSiteInfo.buildTableHeaders(); } /** * 更新人群相关UI */ TSiteInfo.updateAudienceUI = function() { var bookingChecked = $("#audience_booking").is(':checked'); var walkinChecked = $("#audience_walkin").is(':checked'); // 显示/隐藏订场表格 if (bookingChecked) { $("#booking_section").show(); } else { $("#booking_section").hide(); } // 显示/隐藏散客表格和容纳散客数 if (walkinChecked) { $("#walkin_section").show(); $("#walkin_capacity_group").show(); } else { $("#walkin_section").hide(); $("#walkin_capacity_group").hide(); } } /** * 构建表头 */ TSiteInfo.buildTableHeaders = function() { var isHalf = TSiteInfo.priceConfig.isHalf; var headerHtml = '<tr>' + '<th rowspan="3" width="120">时段开始</th>' + '<th rowspan="3" width="120">时段结束</th>'; // 周一到周日的表头 var weekDays = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']; if (isHalf == 1) { // 如果可预订半场,每天有4列(全场×2 + 半场×2) for (var i = 0; i < weekDays.length; i++) { headerHtml += '<th colspan="4">' + weekDays[i] + '</th>'; } headerHtml += '<th rowspan="3" width="80">操作</th>' + '</tr>' + '<tr>'; // 第二行:全场/半场 for (var i = 0; i < weekDays.length; i++) { headerHtml += '<th colspan="2">全场</th>' + '<th colspan="2">半场</th>'; } headerHtml += '</tr>' + '<tr>'; // 第三行:现金/玩湃币 for (var i = 0; i < weekDays.length; i++) { headerHtml += '<th width="80">现金</th>' + '<th width="80">玩湃币</th>' + '<th width="80">现金</th>' + '<th width="80">玩湃币</th>'; } } else { // 如果不可预订半场,每天有2列(全场×2) for (var i = 0; i < weekDays.length; i++) { headerHtml += '<th colspan="2">' + weekDays[i] + '</th>'; } headerHtml += '<th rowspan="3" width="80">操作</th>' + '</tr>' + '<tr>'; // 第二行:全场 for (var i = 0; i < weekDays.length; i++) { headerHtml += '<th colspan="2">全场</th>'; } headerHtml += '</tr>' + '<tr>'; // 第三行:现金/玩湃币 for (var i = 0; i < weekDays.length; i++) { headerHtml += '<th width="80">现金</th>' + '<th width="80">玩湃币</th>'; } } headerHtml += '</tr>'; // 设置表头 $("#booking_thead").html(headerHtml); $("#walkin_thead").html(headerHtml); } /** * 添加订场时段 */ TSiteInfo.addBookingTimeSlot = function() { var isHalf = TSiteInfo.priceConfig.isHalf; var index = TSiteInfo.bookingRowIndex++; var html = '<tr data-index="' + index + '">' + '<td><input type="time" class="form-control" id="booking_start_' + index + '" value="09:00"></td>' + '<td><input type="time" class="form-control" id="booking_end_' + index + '" value="10:00"></td>'; // 周一到周日,每天的价格输入框 for (var day = 1; day <= 7; day++) { if (isHalf == 1) { // 全场现金、全场玩湃币、半场现金、半场玩湃币 html += '<td><input type="number" class="form-control price-input" id="booking_' + index + '_' + day + '_full_cash" min="0" step="0.01" placeholder="0"></td>' + '<td><input type="number" class="form-control price-input" id="booking_' + index + '_' + day + '_full_coin" min="0" step="0.01" placeholder="0"></td>' + '<td><input type="number" class="form-control price-input" id="booking_' + index + '_' + day + '_half_cash" min="0" step="0.01" placeholder="0"></td>' + '<td><input type="number" class="form-control price-input" id="booking_' + index + '_' + day + '_half_coin" min="0" step="0.01" placeholder="0"></td>'; } else { // 全场现金、全场玩湃币 html += '<td><input type="number" class="form-control price-input" id="booking_' + index + '_' + day + '_full_cash" min="0" step="0.01" placeholder="0"></td>' + '<td><input type="number" class="form-control price-input" id="booking_' + index + '_' + day + '_full_coin" min="0" step="0.01" placeholder="0"></td>'; } } html += '<td><button type="button" class="btn btn-sm btn-danger" onclick="TSiteInfo.removeTimeSlot(this)"><i class="fa fa-trash"></i></button></td>' + '</tr>'; $("#booking_price_tbody").append(html); } /** * 添加散客时段 */ TSiteInfo.addWalkinTimeSlot = function() { var isHalf = TSiteInfo.priceConfig.isHalf; var index = TSiteInfo.walkinRowIndex++; var html = '<tr data-index="' + index + '">' + '<td><input type="time" class="form-control" id="walkin_start_' + index + '" value="09:00"></td>' + '<td><input type="time" class="form-control" id="walkin_end_' + index + '" value="10:00"></td>'; // 周一到周日,每天的价格输入框 for (var day = 1; day <= 7; day++) { if (isHalf == 1) { // 全场现金、全场玩湃币、半场现金、半场玩湃币 html += '<td><input type="number" class="form-control price-input" id="walkin_' + index + '_' + day + '_full_cash" min="0" step="0.01" placeholder="0"></td>' + '<td><input type="number" class="form-control price-input" id="walkin_' + index + '_' + day + '_full_coin" min="0" step="0.01" placeholder="0"></td>' + '<td><input type="number" class="form-control price-input" id="walkin_' + index + '_' + day + '_half_cash" min="0" step="0.01" placeholder="0"></td>' + '<td><input type="number" class="form-control price-input" id="walkin_' + index + '_' + day + '_half_coin" min="0" step="0.01" placeholder="0"></td>'; } else { // 全场现金、全场玩湃币 html += '<td><input type="number" class="form-control price-input" id="walkin_' + index + '_' + day + '_full_cash" min="0" step="0.01" placeholder="0"></td>' + '<td><input type="number" class="form-control price-input" id="walkin_' + index + '_' + day + '_full_coin" min="0" step="0.01" placeholder="0"></td>'; } } html += '<td><button type="button" class="btn btn-sm btn-danger" onclick="TSiteInfo.removeTimeSlot(this)"><i class="fa fa-trash"></i></button></td>' + '</tr>'; $("#walkin_price_tbody").append(html); } /** * 删除时段 */ TSiteInfo.removeTimeSlot = function(btn) { $(btn).closest('tr').remove(); } /** * 检查时段是否重叠 */ TSiteInfo.checkTimeOverlap = function(start1, end1, start2, end2) { // 将时间字符串转换为分钟数便于比较 var toMinutes = function(time) { var parts = time.split(':'); return parseInt(parts[0]) * 60 + parseInt(parts[1]); }; var s1 = toMinutes(start1); var e1 = toMinutes(end1); var s2 = toMinutes(start2); var e2 = toMinutes(end2); // 检查重叠:时段1的结束时间 > 时段2的开始时间 且 时段1的开始时间 < 时段2的结束时间 return (e1 > s2 && s1 < e2); } /** * 验证订场和散客时段不重叠 */ TSiteInfo.validateNoTimeOverlap = function() { var bookingTimeSlots = []; var walkinTimeSlots = []; // 收集订场时段 $("#booking_price_tbody tr").each(function() { var index = $(this).data('index'); var startTime = $("#booking_start_" + index).val(); var endTime = $("#booking_end_" + index).val(); if (startTime && endTime) { bookingTimeSlots.push({start: startTime, end: endTime}); } }); // 收集散客时段 $("#walkin_price_tbody tr").each(function() { var index = $(this).data('index'); var startTime = $("#walkin_start_" + index).val(); var endTime = $("#walkin_end_" + index).val(); if (startTime && endTime) { walkinTimeSlots.push({start: startTime, end: endTime}); } }); // 检查订场时段之间是否重叠 for (var i = 0; i < bookingTimeSlots.length; i++) { for (var j = i + 1; j < bookingTimeSlots.length; j++) { if (TSiteInfo.checkTimeOverlap( bookingTimeSlots[i].start, bookingTimeSlots[i].end, bookingTimeSlots[j].start, bookingTimeSlots[j].end )) { Feng.error("订场价格表中存在重叠的时段:" + bookingTimeSlots[i].start + "-" + bookingTimeSlots[i].end + " 与 " + bookingTimeSlots[j].start + "-" + bookingTimeSlots[j].end); return false; } } } // 检查散客时段之间是否重叠 for (var i = 0; i < walkinTimeSlots.length; i++) { for (var j = i + 1; j < walkinTimeSlots.length; j++) { if (TSiteInfo.checkTimeOverlap( walkinTimeSlots[i].start, walkinTimeSlots[i].end, walkinTimeSlots[j].start, walkinTimeSlots[j].end )) { Feng.error("散客价格表中存在重叠的时段:" + walkinTimeSlots[i].start + "-" + walkinTimeSlots[i].end + " 与 " + walkinTimeSlots[j].start + "-" + walkinTimeSlots[j].end); return false; } } } return true; } /** * 保存价格配置 */ TSiteInfo.savePriceConfig = function() { // 验证人群选择 var bookingChecked = $("#audience_booking").is(':checked'); var walkinChecked = $("#audience_walkin").is(':checked'); if (!bookingChecked && !walkinChecked) { Feng.error("请至少选择一种面向人群!"); return; } // 验证容纳散客数 if (walkinChecked) { var walkinCapacity = parseInt($("#walkin_capacity").val()); if (!walkinCapacity || walkinCapacity <= 0) { Feng.error("请输入有效的容纳散客数!"); return; } } // 验证时段不重叠 if (!TSiteInfo.validateNoTimeOverlap()) { return; } // 收集价格数据 var priceDetails = TSiteInfo.collectPriceData(); if (priceDetails.length === 0) { Feng.error("请至少添加一个时段并填写价格!"); return; } var siteId = $("#siteId").val(); if (!siteId) { Feng.error("场地ID不存在,请先保存场地基本信息!"); return; } // 收集场地配置 var nextNames = []; $("input[name='name1_step2']").each(function() { var val = $(this).val(); if (val) { nextNames.push(val); } }); var halfNames = []; $("input[name='name2_step2']").each(function() { var val = $(this).val(); if (val) { halfNames.push(val); } }); var isHalf = $("input[name='ishalf_step2']:checked").val(); // 构建提交数据 var targetAudience = []; if (bookingChecked) targetAudience.push('1'); if (walkinChecked) targetAudience.push('2'); var data = { siteId: parseInt(siteId), targetAudience: targetAudience.join(','), walkinCapacity: walkinChecked ? parseInt($("#walkin_capacity").val()) : 0, nextName: nextNames.join(','), halfName: halfNames.join(','), isHalf: parseInt(isHalf), priceDetails: priceDetails }; // 确认提交 layer.confirm('确定要保存价格配置吗?', { btn: ['确定', '取消'] }, function(index) { layer.close(index); // 提交到后端 $.ajax({ url: Feng.ctxPath + "/tSite/savePriceConfig", type: "POST", data: JSON.stringify(data), contentType: "application/json", success: function(response) { Feng.success("价格配置保存成功!"); // 刷新列表 if (window.parent.TSite && window.parent.TSite.table) { window.parent.TSite.table.refresh(); } // 关闭页面 setTimeout(function() { TSiteInfo.close(); }, 1500); }, error: function(xhr, status, error) { var errorMsg = "保存失败"; if (xhr.responseJSON && xhr.responseJSON.message) { errorMsg = xhr.responseJSON.message; } Feng.error(errorMsg); } }); }); } /** * 收集价格数据 */ TSiteInfo.collectPriceData = function() { var priceDetails = []; var isHalf = TSiteInfo.priceConfig.isHalf; var bookingChecked = $("#audience_booking").is(':checked'); var walkinChecked = $("#audience_walkin").is(':checked'); // 收集订场价格 if (bookingChecked) { $("#booking_price_tbody tr").each(function() { var index = $(this).data('index'); var startTime = $("#booking_start_" + index).val(); var endTime = $("#booking_end_" + index).val(); // 验证时段 if (!startTime || !endTime) { Feng.error("订场价格配置中存在空的时段!"); return false; } if (startTime >= endTime) { Feng.error("订场价格配置中,结束时间必须大于开始时间!"); return false; } // 遍历周一到周日 for (var day = 1; day <= 7; day++) { var fullCash = parseFloat($("#booking_" + index + "_" + day + "_full_cash").val() || 0); var fullCoin = parseFloat($("#booking_" + index + "_" + day + "_full_coin").val() || 0); // 全场价格 if (fullCash > 0 || fullCoin > 0) { priceDetails.push({ startTime: startTime, endTime: endTime, dayOfWeek: day, targetAudience: 1, fieldType: 'full', cashPrice: fullCash, coinPrice: fullCoin }); } // 半场价格(如果可预订半场) if (isHalf == 1) { var halfCash = parseFloat($("#booking_" + index + "_" + day + "_half_cash").val() || 0); var halfCoin = parseFloat($("#booking_" + index + "_" + day + "_half_coin").val() || 0); if (halfCash > 0 || halfCoin > 0) { priceDetails.push({ startTime: startTime, endTime: endTime, dayOfWeek: day, targetAudience: 1, fieldType: 'half', cashPrice: halfCash, coinPrice: halfCoin }); } } } }); } // 收集散客价格 if (walkinChecked) { $("#walkin_price_tbody tr").each(function() { var index = $(this).data('index'); var startTime = $("#walkin_start_" + index).val(); var endTime = $("#walkin_end_" + index).val(); // 验证时段 if (!startTime || !endTime) { Feng.error("散客价格配置中存在空的时段!"); return false; } if (startTime >= endTime) { Feng.error("散客价格配置中,结束时间必须大于开始时间!"); return false; } // 遍历周一到周日 for (var day = 1; day <= 7; day++) { var fullCash = parseFloat($("#walkin_" + index + "_" + day + "_full_cash").val() || 0); var fullCoin = parseFloat($("#walkin_" + index + "_" + day + "_full_coin").val() || 0); // 全场价格 if (fullCash > 0 || fullCoin > 0) { priceDetails.push({ startTime: startTime, endTime: endTime, dayOfWeek: day, targetAudience: 2, fieldType: 'full', cashPrice: fullCash, coinPrice: fullCoin }); } // 半场价格(如果可预订半场) if (isHalf == 1) { var halfCash = parseFloat($("#walkin_" + index + "_" + day + "_half_cash").val() || 0); var halfCoin = parseFloat($("#walkin_" + index + "_" + day + "_half_coin").val() || 0); if (halfCash > 0 || halfCoin > 0) { priceDetails.push({ startTime: startTime, endTime: endTime, dayOfWeek: day, targetAudience: 2, fieldType: 'half', cashPrice: halfCash, coinPrice: halfCoin }); } } } }); } return priceDetails; } function UploadFileFn(){ $('#upFile').click(); }