场地管理页面

mitao

3 天以前 7a81970eb85110efb95b40ad4d2ec1fd95532d7b

 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>