@layout("/common/_container.html"){
|
<style>
|
.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">
|
<div class="form-horizontal">
|
<div class="row">
|
@if(objectType == 1){
|
<div class="form-group">
|
<label class="col-sm-3 control-label">*所在省：</label>
|
<div class="col-sm-4">
|
<select class="form-control" id="provinceCode" name="provinceCode">
|
@for(obj in province){
|
<option value="${obj.code}">${obj.name}</option>
|
@}
|
</select>
|
</div>
|
</div>
|
<div class="form-group">
|
<label class="col-sm-3 control-label">*所在市：</label>
|
<div class="col-sm-4">
|
<select class="form-control" id="cityCode" name="cityCode">
|
@for(obj in city){
|
<option value="${obj.code}">${obj.name}</option>
|
@}
|
</select>
|
</div>
|
</div>
|
@}
|
<div class="form-group">
|
<label class="col-sm-3 control-label">*所属门店：</label>
|
<div class="col-sm-4">
|
<select class="form-control" id="storeId" name="storeId">
|
@for(obj in store){
|
<option value="${obj.id}">${obj.name}</option>
|
@}
|
</select>
|
</div>
|
</div>
|
|
|
|
<div class="form-group">
|
<label class="col-sm-3 control-label">*预约类型：</label>
|
<div class="col-sm-4">
|
<input type="radio" name="type" value="1" checked="" onclick="updateType(1)" > 全场
|
<input type="radio" name="type" value="2" onclick="updateType(2)" > 半场
|
</div>
|
</div>
|
|
|
|
<div class="form-group">
|
<label class="col-sm-3 control-label">*上课场地：</label>
|
<div class="col-sm-4">
|
<select class="form-control" id="siteId" name="siteId" onchange="CoursePackageInfo.queryHalf()" >
|
<option >请选择场地</option>
|
@for(obj in site){
|
<option value="${obj.id}" data-custom-data="1">${obj.name}</option>
|
@}
|
</select>
|
</div>
|
</div>
|
|
<div class="form-group" id="nextSite1" hidden="hidden">
|
<label class="col-sm-3 control-label">*选择场地：</label>
|
<div class="col-sm-4">
|
<select class="form-control" name="nextSite" id="nextSite">
|
</select>
|
</div>
|
</div>
|
|
|
<div class="form-group" id="half1" hidden="hidden">
|
<label class="col-sm-3 control-label">*选择半场：</label>
|
<div class="col-sm-4">
|
<select class="form-control" name="half" id="half">
|
</select>
|
</div>
|
</div>
|
|
<div class="form-group">
|
<label class="col-sm-3 control-label">预约时间：</label>
|
<div class="col-sm-4">
|
<input class="form-control" id="time" name="time" type="text" onchange="CoursePackageInfo.addTime()">
|
</div>
|
</div>
|
|
<div class="form-group">
|
<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>
|
|
|
|
<div class="form-group">
|
<label class="col-sm-3 control-label">现金价格：</label>
|
<div class="col-sm-4">
|
<input class="form-control " id="cash" name="cash" type="text" disabled>
|
</div>
|
元
|
</div>
|
|
<div class="form-group">
|
<label class="col-sm-3 control-label">玩派币价格：</label>
|
<div class="col-sm-4">
|
<input class="form-control" id="play" name="play" type="text" disabled >
|
|
</div>币
|
</div>
|
|
|
<div class="form-group">
|
<label class="col-sm-3 control-label">预约人：</label>
|
<div class="col-sm-4">
|
<input class="form-control" id="booker" name="booker" type="text" >
|
|
</div>
|
</div>
|
|
|
|
|
<div class="form-group">
|
<label class="col-sm-3 control-label">联系电话：</label>
|
<div class="col-sm-4">
|
<input class="form-control" id="phone" name="phone" type="text" >
|
|
</div>
|
</div>
|
<!-- <input type="text" id = "counpons">-->
|
</div>
|
<div class="row btn-group-m-t">
|
<div class="col-sm-10">
|
<#button btnCss="info" name="提交" id="ensure" icon="fa-check" clickFun="CoursePackageInfo.addSubmit()"/>
|
<#button btnCss="danger" name="取消" id="cancel" icon="fa-eraser" clickFun="CoursePackageInfo.close()"/>
|
</div>
|
</div>
|
</div>
|
</div>
|
</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){
|
// 选择半场 查询支持半场的场地
|
let ajax = new $ax(Feng.ctxPath + "/coursePackage/querySite1", function (data) {
|
let htmlStr = '';
|
htmlStr += '<option value="">' + "请选择" + '</option>'
|
|
for (let i = 0; i < data.length; i++) {
|
htmlStr += '<option value="' + data[i].id + '">' + data[i].name + '</option>'
|
}
|
$('#siteId').html(htmlStr);
|
$('#nextSite').html("");
|
|
}, function (data) {
|
Feng.error("获取失败!" + data.responseJSON.message + "!");
|
});
|
ajax.set("storeId", $('#storeId').val());
|
ajax.set("type", 2);
|
ajax.start();
|
var elements = document.getElementsByClassName("layui-btn layui-btn-primary green-button");
|
var count = elements.length;
|
|
console.log("Number of elements: " + count);
|
|
$("#half1").hide()
|
var radios = document.getElementsByName("type");
|
var selectedValue;
|
|
for (var i = 0; i < radios.length; i++) {
|
if (radios[i].checked) {
|
selectedValue = radios[i].value;
|
break;
|
}
|
}
|
|
var ajax3 = new $ax(Feng.ctxPath + "/ball/getMoney/"+$('#siteId').val()+'/'+selectedValue, function(data){
|
console.log("===========3333====="+data)
|
if(data!=null){
|
|
$("#cash").val(data[0] * count);
|
$("#play").val(data[1] * count);
|
|
}
|
})
|
ajax3.start()
|
}else {
|
// 选择半场 查询支持半场的场地
|
let ajax = new $ax(Feng.ctxPath + "/coursePackage/querySite1", function (data) {
|
let htmlStr = '';
|
htmlStr += '<option value="">' + "请选择" + '</option>'
|
|
for (let i = 0; i < data.length; i++) {
|
htmlStr += '<option value="' + data[i].id + '">' + data[i].name + '</option>'
|
}
|
$('#siteId').html(htmlStr);
|
$('#nextSite').html("");
|
}, function (data) {
|
Feng.error("获取失败!" + data.responseJSON.message + "!");
|
});
|
ajax.set("storeId", $('#storeId').val());
|
ajax.set("type", 1);
|
ajax.start();
|
|
var elements = document.getElementsByClassName("layui-btn layui-btn-primary green-button");
|
var count = elements.length;
|
|
console.log("Number of elements: " + count);
|
|
$("#half1").show()
|
var radios = document.getElementsByName("type");
|
var selectedValue;
|
|
for (var i = 0; i < radios.length; i++) {
|
if (radios[i].checked) {
|
selectedValue = radios[i].value;
|
break;
|
}
|
}
|
|
var ajax3 = new $ax(Feng.ctxPath + "/ball/getMoney/"+$('#siteId').val()+'/'+selectedValue, function(data){
|
console.log("===========3333====="+data)
|
if(data!=null){
|
|
$("#cash").val(data[0] * count);
|
$("#play").val(data[1] * count);
|
|
}
|
})
|
ajax3.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()
|
|
}
|
|
}
|
|
|
|
// 点击表格行选择时间段（支持连续选择）
|
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");
|
|
var elements = document.getElementsByClassName("layui-btn layui-btn-primary green-button");
|
var count = elements.length;
|
|
console.log("Number of elements: " + count);
|
|
|
var radios = document.getElementsByName("type");
|
var selectedValue;
|
|
for (var i = 0; i < radios.length; i++) {
|
if (radios[i].checked) {
|
selectedValue = radios[i].value;
|
break;
|
}
|
}
|
|
var ajax3 = new $ax(Feng.ctxPath + "/ball/getMoney/"+$('#siteId').val()+'/'+selectedValue, function(data){
|
console.log("===========3333====="+data)
|
if(data!=null){
|
|
$("#cash").val(data[0] * count);
|
$("#play").val(data[1] * count);
|
|
}
|
})
|
ajax3.start()
|
|
|
}
|
|
laydate.render({
|
elem: '#time',
|
lang:"CN",
|
min:0,
|
max:9,
|
format:'yyyy-MM-dd',
|
done:function (date) {
|
console.log("选择日期：" + date);
|
// 调用addTime方法加载时间段
|
if ($('#siteId').val()) {
|
CoursePackageInfo.addTime();
|
}
|
}
|
});
|
|
laydate.render({
|
elem: '#holitime'
|
,range: true //或 range: '~' 来自定义分割字符
|
,trigger: 'click'
|
});
|
|
var avatarUp = new $WebUpload("coverDrawing");
|
avatarUp.setUploadBarId("progressBar");
|
avatarUp.init();
|
|
var avatarUp1 = new $WebUpload("detailDrawing");
|
avatarUp1.setUploadBarId("progressBar");
|
avatarUp1.init();
|
|
var avatarUp1 = new $WebUpload("introduceDrawing");
|
avatarUp1.setUploadBarId("progressBar");
|
avatarUp1.init();
|
|
function addTime(){
|
var i = $('#dayTime > div').length
|
|
let htmlStr =' <div style="display:flex">\n' +
|
' <input class="form-control" id="classStartTime'+i+'" name="classStartTime" placeholder="请选择" style="width: 200px;">\n' +
|
' <i class="fa fa-trash-o" style="font-size:24px" onclick="removePrice1(this)"></i>\n' +
|
' </div>'
|
$('#dayTime').append(htmlStr);
|
console.log("========="+i)
|
laydate.render({
|
elem: '#classStartTime'+i,
|
type: 'time',
|
range: true,
|
trigger: 'click',
|
});
|
}
|
|
// 监听半场选择变化
|
$('#half').change(function() {
|
if ($('#time').val()) {
|
CoursePackageInfo.addTime();
|
}
|
});
|
|
// 监听选择场地变化
|
$('#nextSite').change(function() {
|
if ($('#time').val()) {
|
CoursePackageInfo.addTime();
|
}
|
});
|
</script>
|
@}
|
