场地管理页面

mitao

2 天以前 79d99529f3bf1ab14a3de599fdb3fe63ea633337

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

@@ -68,41 +68,29 @@
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        padding: 10px;
        background: #f9f9f9;
        padding: 8px;
        background: #f5f7fa;
        border-radius: 4px;
    }
    
    .field-item label {
        min-width: 100px;
        margin: 0 10px 0 0;
        font-weight: normal;
    }
    
    .field-item .form-control {
    .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;
        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;
        margin-left: 5px;
    }
    
    .audience-checkboxes {
@@ -110,51 +98,145 @@
        gap: 20px;
    }
    
    .info-alert {
        background-color: #e7f4ff;
        border-left: 4px solid #409EFF;
        padding: 10px 15px;
        margin-bottom: 15px;
    .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;
        margin-top: 15px;
    }
    
    .price-table {
        width: 100%;
        border-collapse: collapse;
        background: white;
        margin-top: 15px;
    }
    
    .price-table th,
    .price-table td {
        border: 1px solid #ddd;
        padding: 8px;
        padding: 10px;
        text-align: center;
    }
    
    .price-table th {
        background-color: #f5f7fa;
        background-color: #409EFF;
        color: white;
        font-weight: bold;
        color: #333;
    }
    
    .price-table tbody tr:nth-child(even) {
        background-color: #f9f9f9;
    }
    
    .price-input {
        width: 80px;
        padding: 5px;
        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>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.15&key=77b37f0753049c4e712ea79a24e0719c"></script>
<div class="ibox float-e-margins">
    <input hidden id="objectType" value="${objectType}">
    <input hidden id="objectId" value="${objectId}">
    <div class="ibox-content">
        <!-- 步骤1：基本信息 -->
        <div class="step-container active" id="step1_basic_info">
        <div class="form-horizontal" id="carInfoForm">
            <input hidden id="objectType" value="${objectType}">
            <input hidden id="objectId" value="${objectId}">
            <input hidden id="role" value="${role}">
            @if(objectType==1){
            <div class="form-group" >
@@ -202,7 +284,6 @@
             </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">
@@ -257,19 +338,148 @@
                    </div>
                </div>
                @}
<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>

            <div class="row btn-group-m-t">
                <div class="col-sm-10 col-sm-offset-5" >
                    <#button btnCss="danger" name="关闭" id="cancel" icon="fa-eraser" clickFun="TSite.close()"/>
                    <#button btnCss="primary" name="下一步，设置价格" id="btn_next_price" icon="fa-arrow-right" clickFun="TSite.nextStep()"/>
                </div>
            </div>
        </div>
        </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="TSite.addFieldBox()"></i></label>
                    <div id="field_container" style="margin-top: 10px;">
                        <!-- 动态添加的场地名称 -->
                    </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="TSite.updateHalfField(2)"> 否
                        </label>
                        <label>
                            <input type="radio" name="ishalf_step2" value="1" onclick="TSite.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="TSite.addHalfFieldBox()"></i></label>
                    <div id="half_field_container" style="margin-top: 10px;">
                        <!-- 动态添加的半场名称 -->
                    </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 class="form-group">
                    <button type="button" class="btn btn-primary" onclick="TSite.generatePriceTables()">
                        <i class="fa fa-table"></i> 生成价格表
                    </button>
                    <small class="text-muted" style="margin-left: 10px;">修改面向人群或半场配置后，需要重新生成价格表</small>
                </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="TSite.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="TSite.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="TSite.previousStep()"/>
                    <#button btnCss="success" name="保存场地信息" id="btn_save_all" icon="fa-save" clickFun="TSite.saveAllData()"/>
                    <#button btnCss="danger" name="关闭" id="btn_close" icon="fa-eraser" clickFun="TSite.close()"/>
                </div>
            </div>
        </div>
        <!-- 步骤2结束 -->
    </div>

</div>

<script src="${ctxPath}/modular/system/tSite/tSite.js"></script>
@@ -331,9 +541,52 @@



    function updateHtml(e) {
        console.log("是否可预约变更:", e);
        // 暂时不需要特殊处理，价格配置在步骤2进行
    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()
        }
    }


@@ -371,5 +624,109 @@
        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>
@}