321
This commit is contained in:
zpc
parent
2fe3facdce
commit
507f05d2fd
|
|
@ -0,0 +1,36 @@
|
||||||
|
<script type="text/html" id="LAY-template-day-content">
|
||||||
|
{{# if(d.roomData && d.roomData.time_slots && d.roomData.time_slots.length > 0) { }}
|
||||||
|
{{# var firstSlot = d.roomData.time_slots[0]; }}
|
||||||
|
{{# if(firstSlot && firstSlot.price_desc_standard && firstSlot.price_desc_standard !== '') { }}
|
||||||
|
<div class="calendar-day-price">{{ firstSlot.price_desc_standard }}</div>
|
||||||
|
{{# } }}
|
||||||
|
{{# if(firstSlot && firstSlot.price_desc_member && firstSlot.price_desc_member !== '') { }}
|
||||||
|
<div class="calendar-day-price">{{ firstSlot.price_desc_member }}</div>
|
||||||
|
{{# } }}
|
||||||
|
|
||||||
|
<div class="calendar-day-slots">
|
||||||
|
{{# layui.each(d.roomData.time_slots, function(index, slot) { }}
|
||||||
|
{{# var statusClass = 'unavailable'; }}
|
||||||
|
{{# var statusIcon = '✗'; }}
|
||||||
|
|
||||||
|
{{# if(slot.status === 'unavailable' && slot.unavailable_type === 2) { }}
|
||||||
|
{{# statusClass = 'backend-reservation'; }}
|
||||||
|
{{# statusIcon = '✓'; }}
|
||||||
|
{{# } else if(slot.status === 'available') { }}
|
||||||
|
{{# statusClass = 'available'; }}
|
||||||
|
{{# statusIcon = '◯'; }}
|
||||||
|
{{# } else if(slot.status === 'reserved') { }}
|
||||||
|
{{# statusClass = 'reserved'; }}
|
||||||
|
{{# statusIcon = '✓ '; }}
|
||||||
|
{{# } else if(slot.status === 'using') { }}
|
||||||
|
{{# statusClass = 'using'; }}
|
||||||
|
{{# statusIcon = '✗'; }}
|
||||||
|
{{# } }}
|
||||||
|
|
||||||
|
<div class="calendar-slot {{ statusClass }}">{{ slot.slot_name }}{{ statusIcon }}</div>
|
||||||
|
{{# }); }}
|
||||||
|
</div>
|
||||||
|
{{# } else { }}
|
||||||
|
<div style="text-align:center;color:#999;padding:10px 0;">无房间数据</div>
|
||||||
|
{{# } }}
|
||||||
|
</script>
|
||||||
|
|
@ -264,7 +264,7 @@
|
||||||
if (debug) { console.log(d); }
|
if (debug) { console.log(d); }
|
||||||
|
|
||||||
indexData = d.data;
|
indexData = d.data;
|
||||||
layui.use(['index', 'table', 'laydate', 'util', 'coredropdown', 'coreHelper', 'element'],
|
layui.use(['index', 'table', 'laydate', 'util', 'coredropdown', 'coreHelper', 'element', 'laytpl', 'view'],
|
||||||
function () {
|
function () {
|
||||||
var $ = layui.$
|
var $ = layui.$
|
||||||
, admin = layui.admin
|
, admin = layui.admin
|
||||||
|
|
@ -275,34 +275,108 @@
|
||||||
, coreHelper = layui.coreHelper
|
, coreHelper = layui.coreHelper
|
||||||
, util = layui.util
|
, util = layui.util
|
||||||
, view = layui.view
|
, view = layui.view
|
||||||
, element = layui.element;
|
, element = layui.element
|
||||||
|
, laytpl = layui.laytpl;
|
||||||
|
|
||||||
var searchwhere;
|
var searchwhere;
|
||||||
|
|
||||||
// 加载房间选项
|
// 日期内容模板缓存（只加载一次，永久缓存）
|
||||||
coreHelper.Post("Api/SQRoomUnavailableTimes/GetIndex", null, function (e) {
|
var dayContentTemplate = null;
|
||||||
if (e.code === 0 && e.data && e.data.roomOptions) {
|
var templateLoadPromise = null;
|
||||||
roomOptions = e.data.roomOptions;
|
|
||||||
var roomSelect = $('#search_room_id');
|
// 加载日期内容模板（只加载一次，后续直接返回缓存的模板）
|
||||||
roomSelect.empty();
|
function loadDayContentTemplate() {
|
||||||
roomSelect.append('<option value="">请选择房间号</option>');
|
// 如果模板已缓存，直接返回已解决的 Promise
|
||||||
layui.each(roomOptions, function (index, item) {
|
if (dayContentTemplate) {
|
||||||
roomSelect.append('<option value="' + item.id + '">' + item.name + '</option>');
|
return $.Deferred().resolve().promise();
|
||||||
});
|
|
||||||
|
|
||||||
// 默认选择第一个房间并渲染日历视图
|
|
||||||
if (roomOptions.length > 0) {
|
|
||||||
selectedRoomId = roomOptions[0].id;
|
|
||||||
roomSelect.val(selectedRoomId);
|
|
||||||
}
|
|
||||||
|
|
||||||
form.render('select');
|
|
||||||
|
|
||||||
// 房间加载完成后渲染日历
|
|
||||||
if (currentView === 'calendar' && selectedRoomId) {
|
|
||||||
renderCalendar();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 如果正在加载，返回现有的 Promise
|
||||||
|
if (templateLoadPromise) {
|
||||||
|
return templateLoadPromise;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 创建新的加载 Promise（只加载一次）
|
||||||
|
templateLoadPromise = $.ajax({
|
||||||
|
url: setter.views + 'sq/sqroompricing/day-content.html',
|
||||||
|
type: 'GET',
|
||||||
|
dataType: 'html',
|
||||||
|
cache: true // 启用浏览器缓存
|
||||||
|
}).then(function(html) {
|
||||||
|
var tempDiv = $('<div>').html(html);
|
||||||
|
var templateElement = tempDiv.find('#LAY-template-day-content');
|
||||||
|
if (templateElement.length > 0) {
|
||||||
|
// 缓存模板内容，后续不再请求
|
||||||
|
dayContentTemplate = templateElement.html();
|
||||||
|
return dayContentTemplate;
|
||||||
|
} else {
|
||||||
|
console.error('日期内容模板未找到');
|
||||||
|
throw new Error('日期内容模板未找到');
|
||||||
|
}
|
||||||
|
}).fail(function() {
|
||||||
|
console.error('加载日期内容模板失败');
|
||||||
|
templateLoadPromise = null; // 失败后重置，允许重试
|
||||||
|
throw new Error('加载日期内容模板失败');
|
||||||
|
});
|
||||||
|
|
||||||
|
return templateLoadPromise;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 统一的日期内容渲染函数（使用缓存的模板 + laytpl 处理数据）
|
||||||
|
// 注意：此函数假设模板已经加载并缓存，直接使用缓存的模板进行渲染
|
||||||
|
function renderDayContent(roomData, errorMsg) {
|
||||||
|
// 错误信息直接返回，不使用模板
|
||||||
|
if (errorMsg) {
|
||||||
|
return '<div style="text-align:center;color:#f44336;padding:10px 0;">' + (errorMsg || '加载失败') + '</div>';
|
||||||
|
}
|
||||||
|
|
||||||
|
// 如果没有房间数据，直接返回提示
|
||||||
|
if (!roomData || !roomData.time_slots || !Array.isArray(roomData.time_slots) || roomData.time_slots.length === 0) {
|
||||||
|
return '<div style="text-align:center;color:#999;padding:10px 0;">无房间数据</div>';
|
||||||
|
}
|
||||||
|
|
||||||
|
// 使用缓存的模板，通过 laytpl 渲染数据（不再请求网络，直接使用内存中的缓存）
|
||||||
|
if (dayContentTemplate) {
|
||||||
|
// 模板已缓存，直接使用 laytpl 渲染（不请求网络，使用缓存）
|
||||||
|
return laytpl(dayContentTemplate).render({ roomData: roomData });
|
||||||
|
} else {
|
||||||
|
// 模板未加载（正常情况下不应该发生，因为初始化时已加载）
|
||||||
|
console.warn('模板未加载，返回默认提示');
|
||||||
|
return '<div style="text-align:center;color:#999;padding:10px 0;">模板加载中...</div>';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ========== 页面初始化加载流程：先加载模板，模板加载成功后再加载日历数据 ==========
|
||||||
|
// 步骤1：页面加载时先获取模板（只加载一次并缓存）
|
||||||
|
loadDayContentTemplate().then(function() {
|
||||||
|
// 步骤2：模板加载成功后，再加载房间选项
|
||||||
|
coreHelper.Post("Api/SQRoomUnavailableTimes/GetIndex", null, function (e) {
|
||||||
|
if (e.code === 0 && e.data && e.data.roomOptions) {
|
||||||
|
roomOptions = e.data.roomOptions;
|
||||||
|
var roomSelect = $('#search_room_id');
|
||||||
|
roomSelect.empty();
|
||||||
|
roomSelect.append('<option value="">请选择房间号</option>');
|
||||||
|
layui.each(roomOptions, function (index, item) {
|
||||||
|
roomSelect.append('<option value="' + item.id + '">' + item.name + '</option>');
|
||||||
|
});
|
||||||
|
|
||||||
|
// 默认选择第一个房间并渲染日历视图
|
||||||
|
if (roomOptions.length > 0) {
|
||||||
|
selectedRoomId = roomOptions[0].id;
|
||||||
|
roomSelect.val(selectedRoomId);
|
||||||
|
}
|
||||||
|
|
||||||
|
form.render('select');
|
||||||
|
|
||||||
|
// 步骤3：房间加载完成后渲染日历（此时模板已经加载成功并缓存）
|
||||||
|
if (currentView === 'calendar' && selectedRoomId) {
|
||||||
|
renderCalendar();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}).fail(function(error) {
|
||||||
|
console.error('模板加载失败，无法继续加载日历数据', error);
|
||||||
|
layer.msg('模板加载失败，请刷新页面重试');
|
||||||
});
|
});
|
||||||
|
|
||||||
//监听搜索
|
//监听搜索
|
||||||
|
|
@ -994,52 +1068,13 @@
|
||||||
return r.id == selectedRoomId || r.id == parseInt(selectedRoomId);
|
return r.id == selectedRoomId || r.id == parseInt(selectedRoomId);
|
||||||
});
|
});
|
||||||
|
|
||||||
if (roomData && roomData.time_slots && Array.isArray(roomData.time_slots)) {
|
// 使用统一的模板渲染函数
|
||||||
var dayContentHtml = '';
|
var dayContentHtml = renderDayContent(roomData, null);
|
||||||
|
dayElement.append(dayContentHtml);
|
||||||
// 显示价格信息
|
|
||||||
var firstSlot = roomData.time_slots[0];
|
|
||||||
if (firstSlot && firstSlot.price_desc_standard != '') {
|
|
||||||
dayContentHtml += '<div class="calendar-day-price">' + firstSlot.price_desc_standard + '</div>';
|
|
||||||
}
|
|
||||||
if (firstSlot && firstSlot.price_desc_member != '') {
|
|
||||||
dayContentHtml += '<div class="calendar-day-price">' + firstSlot.price_desc_member + '</div>';
|
|
||||||
}
|
|
||||||
|
|
||||||
// 显示时段状态
|
|
||||||
dayContentHtml += '<div class="calendar-day-slots">';
|
|
||||||
roomData.time_slots.forEach(function (slot) {
|
|
||||||
var statusClass = 'unavailable';
|
|
||||||
var statusIcon = '✗';
|
|
||||||
|
|
||||||
// 检查该时段是否被后台预约禁用（unavailable_type=2）
|
|
||||||
if (slot.status === 'unavailable' && slot.unavailable_type === 2) {
|
|
||||||
// 后台预约：深橙色 + ✓
|
|
||||||
statusClass = 'backend-reservation';
|
|
||||||
statusIcon = '✓';
|
|
||||||
} else if (slot.status === 'available') {
|
|
||||||
statusClass = 'available';
|
|
||||||
statusIcon = '◯';
|
|
||||||
} else if (slot.status === 'reserved') {
|
|
||||||
statusClass = 'reserved';
|
|
||||||
statusIcon = '✓ ';
|
|
||||||
} else if (slot.status === 'using') {
|
|
||||||
statusClass = 'using';
|
|
||||||
statusIcon = '✗';
|
|
||||||
}
|
|
||||||
|
|
||||||
dayContentHtml += '<div class="calendar-slot ' + statusClass + '">' +
|
|
||||||
slot.slot_name + statusIcon + '</div>';
|
|
||||||
});
|
|
||||||
dayContentHtml += '</div>';
|
|
||||||
|
|
||||||
dayElement.append(dayContentHtml);
|
|
||||||
} else {
|
|
||||||
dayElement.append('<div style="text-align:center;color:#999;padding:10px 0;">无房间数据</div>');
|
|
||||||
}
|
|
||||||
} else {
|
} else {
|
||||||
var errorMsg = e.msg || '加载失败';
|
var errorMsg = e.msg || '加载失败';
|
||||||
dayElement.append('<div style="text-align:center;color:#f44336;padding:10px 0;">' + errorMsg + '</div>');
|
var errorHtml = renderDayContent(null, errorMsg);
|
||||||
|
dayElement.append(errorHtml);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -1097,53 +1132,13 @@
|
||||||
console.log('查找房间:', roomId, '找到:', roomData ? '是' : '否');
|
console.log('查找房间:', roomId, '找到:', roomData ? '是' : '否');
|
||||||
}
|
}
|
||||||
|
|
||||||
if (roomData && roomData.time_slots && Array.isArray(roomData.time_slots)) {
|
// 使用统一的模板渲染函数
|
||||||
var dayContentHtml = '';
|
var dayContentHtml = renderDayContent(roomData, null);
|
||||||
|
dayElement.append(dayContentHtml);
|
||||||
// 显示价格信息
|
|
||||||
var firstSlot = roomData.time_slots[0];
|
|
||||||
if (firstSlot && firstSlot.price_desc_standard != '') {
|
|
||||||
dayContentHtml += '<div class="calendar-day-price">' + firstSlot.price_desc_standard + '</div>';
|
|
||||||
}
|
|
||||||
if (firstSlot && firstSlot.price_desc_member != '') {
|
|
||||||
dayContentHtml += '<div class="calendar-day-price">' + firstSlot.price_desc_member + '</div>';
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// 显示时段状态
|
|
||||||
dayContentHtml += '<div class="calendar-day-slots">';
|
|
||||||
roomData.time_slots.forEach(function (slot) {
|
|
||||||
var statusClass = 'unavailable';
|
|
||||||
var statusIcon = '✗';
|
|
||||||
|
|
||||||
// 检查该时段是否被后台预约禁用（unavailable_type=2）
|
|
||||||
if (slot.status === 'unavailable' && slot.unavailable_type === 2) {
|
|
||||||
// 后台预约：深橙色 + ✓
|
|
||||||
statusClass = 'backend-reservation';
|
|
||||||
statusIcon = '✓';
|
|
||||||
} else if (slot.status === 'available') {
|
|
||||||
statusClass = 'available';
|
|
||||||
statusIcon = '◯';
|
|
||||||
} else if (slot.status === 'reserved') {
|
|
||||||
statusClass = 'reserved';
|
|
||||||
statusIcon = '✓ ';
|
|
||||||
} else if (slot.status === 'using') {
|
|
||||||
statusClass = 'using';
|
|
||||||
statusIcon = '✗';
|
|
||||||
}
|
|
||||||
|
|
||||||
dayContentHtml += '<div class="calendar-slot ' + statusClass + '">' +
|
|
||||||
slot.slot_name + statusIcon + '</div>';
|
|
||||||
});
|
|
||||||
dayContentHtml += '</div>';
|
|
||||||
|
|
||||||
dayElement.append(dayContentHtml);
|
|
||||||
} else {
|
|
||||||
dayElement.append('<div style="text-align:center;color:#999;padding:10px 0;">无房间数据</div>');
|
|
||||||
}
|
|
||||||
} else {
|
} else {
|
||||||
var errorMsg = e.msg || '加载失败';
|
var errorMsg = e.msg || '加载失败';
|
||||||
dayElement.append('<div style="text-align:center;color:#f44336;padding:10px 0;">' + errorMsg + '</div>');
|
var errorHtml = renderDayContent(null, errorMsg);
|
||||||
|
dayElement.append(errorHtml);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user