场地预约

mitao

2025-10-30 1970dd918e188aef69338e1c69e346bcd197ac1d

 cloud-server-management/src/main/webapp/WEB-INF/view/system/ball/yuyue_add.html

@@ -3,6 +3,59 @@
    .green-button {
        background-color: green;
    }
    
    /* 时间段表格样式 */
    #timeSlotTable {
        margin-top: 10px;
    }
    
    #timeSlotTable thead th {
        background-color: #f5f5f5;
        font-weight: bold;
        text-align: center;
    }
    
    #timeSlotTable tbody tr {
        transition: background-color 0.3s;
    }
    
    #timeSlotTable tbody tr:not(.disabled):hover {
        background-color: #f0f0f0;
    }
    
    #timeSlotTable tbody tr.disabled {
        background-color: #f5f5f5;
        color: #999;
    }
    
    #timeSlotTable tbody td {
        text-align: center;
        vertical-align: middle;
    }
    
    /* 价格单元格颜色 */
    #timeSlotTable tbody td.price-cell {
        padding: 8px;
    }
    
    #timeSlotTable tbody td.price-cell.price-unavailable {
        background-color: #ffcccc !important;
        color: #cc0000;
    }
    
    #timeSlotTable tbody td.price-cell.price-selected {
        background-color: #ccffcc !important;
        color: #006600;
        font-weight: bold;
    }
    
    /* 散客数量显示 */
    .capacity-info {
        display: block;
        font-size: 12px;
        color: #666;
        margin-top: 3px;
    }
</style>
<div class="ibox float-e-margins">
    <div class="ibox-content">
@@ -90,11 +143,27 @@
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">*预约时间段：</label>
                    <div class="col-sm-5" id="ttt1">
                        <div class="layui-btn-group" id="ttt2">
                        </div>
                    <label class="col-sm-3 control-label">*入场方式：</label>
                    <div class="col-sm-4">
                       <input type="radio" name="targetAudience" value="1" checked="" onclick="updateTargetAudience(1)"> 订场
                        <input type="radio" name="targetAudience" value="2" onclick="updateTargetAudience(2)"> 散客
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">*预约时间段：</label>
                    <div class="col-sm-8" id="ttt1">
                        <table class="table table-bordered table-hover" id="timeSlotTable" style="display:none;">
                            <thead>
                                <tr id="tableHeader">
                                    <th>时段</th>
                                    <th id="priceHeader">价格（次）</th>
                                </tr>
                            </thead>
                            <tbody id="timeSlotBody">
                            </tbody>
                        </table>
                        <div id="noDataTip" style="color: #999;">请先选择预约时间</div>
                    </div>
                </div>

@@ -148,6 +217,37 @@
</div>
<script src="${ctxPath}/modular/system/ball/yuyue_info.js"></script>
<script type="text/javascript">
    // 全局变量存储已选择的时间段数据
    var selectedTimeSlots = [];
    // 全局变量存储所有时间段数据
    var allTimeSlots = [];

    // 入场方式切换
    function updateTargetAudience(value) {
        // 更新表头
        var priceHeader = document.getElementById('priceHeader');
        if (value == 1) {
            priceHeader.innerText = '价格（次）';
        } else {
            priceHeader.innerText = '价格（人）';
        }
        
        // 清空已选择的时间段
        selectedTimeSlots = [];
        
        // 移除所有价格单元格的选中样式
        $('#timeSlotTable tbody td.price-cell').removeClass('price-selected');
        
        // 如果已选择日期，重新加载时间段
        if ($('#time').val()) {
            CoursePackageInfo.addTime();
        }
        
        // 重置价格
        $('#cash').val('');
        $('#play').val('');
    }

    function updateType(o) {
        if(o==1){
            // 选择半场 查询支持半场的场地
@@ -250,6 +350,80 @@



    // 点击表格行选择时间段（支持连续选择）
    function toggleTimeSlot(row, index) {
        var $row = $(row);
        var $priceCell = $row.find('td.price-cell');
        
        // 如果行是禁用的，不处理
        if ($row.hasClass('disabled')) {
            return;
        }
        
        var timeSlot = window.allTimeSlots[index];
        
        // 检查是否已选中
        var selectedIndex = -1;
        for (var i = 0; i < selectedTimeSlots.length; i++) {
            if (selectedTimeSlots[i].index === index) {
                selectedIndex = i;
                break;
            }
        }
        
        if (selectedIndex > -1) {
            // 已选中，取消选择
            selectedTimeSlots.splice(selectedIndex, 1);
            $priceCell.removeClass('price-selected');
        } else {
            // 未选中，检查是否连续
            if (selectedTimeSlots.length > 0) {
                // 获取已选择的索引
                var selectedIndexes = selectedTimeSlots.map(function(item) {
                    return item.index;
                }).sort(function(a, b) {
                    return a - b;
                });
                
                var minIndex = selectedIndexes[0];
                var maxIndex = selectedIndexes[selectedIndexes.length - 1];
                
                // 检查新选择的索引是否与已选择的连续
                if (index !== minIndex - 1 && index !== maxIndex + 1) {
                    Feng.error("只能选择连续的时间段！");
                    return;
                }
            }
            
            // 添加选择，保存索引
            timeSlot.index = index;
            selectedTimeSlots.push(timeSlot);
            $priceCell.addClass('price-selected');
        }
        
        // 重新排序
        selectedTimeSlots.sort(function(a, b) {
            return a.index - b.index;
        });
        
        // 计算总价格
        calculateTotalPrice();
    }
    
    // 计算总价格
    function calculateTotalPrice() {
        var totalCash = 0;
        var totalCoin = 0;
        
        for (var i = 0; i < selectedTimeSlots.length; i++) {
            totalCash += parseFloat(selectedTimeSlots[i].cashPrice || 0);
            totalCoin += parseFloat(selectedTimeSlots[i].coinPrice || 0);
        }
        
        $('#cash').val(totalCash.toFixed(2));
        $('#play').val(totalCoin.toFixed(0));
    }

    function toggleColor(button) {
        button.classList.toggle("green-button");

@@ -284,77 +458,24 @@
    }

    laydate.render({
        elem: '#time'
        ,lang:"CN",
        elem: '#time',
        lang:"CN",
        min:0,
        max:9,
        format:'yyyy-MM-dd',
        done:function (a) {
            console.log("==========="+a)
            var ajax = new $ax(Feng.ctxPath + "/ball/yuyuetimes/"+ $('#siteId').val(), function(data){
                console.log("================"+data)
                if(data!=null){
                    var content='';
                    $.each(data, function(k, v) {
                        var buttonClass = "layui-btn layui-btn-primary";
                        var style = "";
                        if (v.state === 0) {
                            style = "background-color: red;";
                        }
                        var disabledAttribute = v.state === 0 ? "disabled" : "";
                        content += '<button type="button" class="' + buttonClass + '" ' + disabledAttribute + ' style="' + style + '" onclick="toggleColor(this)">' + v.time + '</button>';
                    });
                    $("#ttt2").empty().append(content);
                }
            })
            var siteId = document.getElementById("nextSite");
            var siteName = siteId.options[siteId.selectedIndex].text;
            ajax.set("siteName",siteName);
            if (siteName ==""){
                var siteId = document.getElementById("siteId");
                var siteName = siteId.options[siteId.selectedIndex].text;
                ajax.set("siteName",siteName);
        done:function (date) {
            console.log("选择日期：" + date);
            // 调用addTime方法加载时间段
            if ($('#siteId').val()) {
                CoursePackageInfo.addTime();
            }

            var radios = document.getElementsByName("type");
            var selectedValue;

            for (var i = 0; i < radios.length; i++) {
                if (radios[i].checked) {
                    selectedValue = radios[i].value;
                    break;
                }
            }
            console.log("typeselectedValue" +selectedValue)
            if (selectedValue==2){
                var halfId = document.getElementById("half");
                var halfName = halfId.options[halfId.selectedIndex].text;
                ajax.set("halfName",halfName);
            }



            ajax.set("date",$('#time').val());
            ajax.start()

            // var ajax1 = new $ax(Feng.ctxPath + "/ball/halfName/"+ $('#siteId').val(), function(data){
            //     console.log("================"+data)
            //     if(data!=null){
            //         let htmlStr = '';
            //         for (let i = 0; i < data.length; i++) {
            //             htmlStr += '<option value="' + data[i] + '">' + data[i] + '</option>'
            //         }
            //         $("#half").empty().append(htmlStr);
            //     }
            // })
            // ajax1.start()

        }
    });

    laydate.render({
        elem: '#holitime'
        ,range: true //或 range: '~' 来自定义分割字符
        ,trigger: 'click'
    });

    var avatarUp = new $WebUpload("coverDrawing");
@@ -368,6 +489,7 @@
    var avatarUp1 = new $WebUpload("introduceDrawing");
    avatarUp1.setUploadBarId("progressBar");
    avatarUp1.init();
    
    function addTime(){
        var i =  $('#dayTime > div').length

@@ -380,8 +502,23 @@
        laydate.render({
            elem: '#classStartTime'+i,
            type: 'time',
            range: true
            range: true,
            trigger: 'click',
        });
    }
    
    // 监听半场选择变化
    $('#half').change(function() {
        if ($('#time').val()) {
            CoursePackageInfo.addTime();
        }
    });
    
    // 监听选择场地变化
    $('#nextSite').change(function() {
        if ($('#time').val()) {
            CoursePackageInfo.addTime();
        }
    });
</script>
@}