场地管理页面

mitao

2025-10-26 7a81970eb85110efb95b40ad4d2ec1fd95532d7b

场地管理页面

 cloud-server-management/src/main/webapp/WEB-INF/view/system/tSite/TSite_add.html

@@ -38,7 +38,115 @@
    #app1{
        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,74 +202,13 @@
             </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">&nbsp;&nbsp;至&nbsp;&nbsp;</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">
                <label class="col-sm-3 control-label">*场地责任险有效期：</label>
@@ -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\" />&nbsp;\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;\"/>&nbsp;\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

@@ -39,16 +39,208 @@
    #app1{
        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">&nbsp;&nbsp;至&nbsp;&nbsp;</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();
}