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); }
|
||||
|
||||
indexData = d.data;
|
||||
layui.use(['index', 'table', 'laydate', 'util', 'coredropdown', 'coreHelper', 'element'],
|
||||
layui.use(['index', 'table', 'laydate', 'util', 'coredropdown', 'coreHelper', 'element', 'laytpl', 'view'],
|
||||
function () {
|
||||
var $ = layui.$
|
||||
, admin = layui.admin
|
||||
|
|
@ -275,34 +275,108 @@
|
|||
, coreHelper = layui.coreHelper
|
||||
, util = layui.util
|
||||
, view = layui.view
|
||||
, element = layui.element;
|
||||
, element = layui.element
|
||||
, laytpl = layui.laytpl;
|
||||
|
||||
var searchwhere;
|
||||
|
||||
// 加载房间选项
|
||||
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');
|
||||
|
||||
// 房间加载完成后渲染日历
|
||||
if (currentView === 'calendar' && selectedRoomId) {
|
||||
renderCalendar();
|
||||
}
|
||||
|
||||
// 日期内容模板缓存（只加载一次，永久缓存）
|
||||
var dayContentTemplate = null;
|
||||
var templateLoadPromise = null;
|
||||
|
||||
// 加载日期内容模板（只加载一次，后续直接返回缓存的模板）
|
||||
function loadDayContentTemplate() {
|
||||
// 如果模板已缓存，直接返回已解决的 Promise
|
||||
if (dayContentTemplate) {
|
||||
return $.Deferred().resolve().promise();
|
||||
}
|
||||
|
||||
// 如果正在加载，返回现有的 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);
|
||||
});
|
||||
|
||||
if (roomData && roomData.time_slots && Array.isArray(roomData.time_slots)) {
|
||||
var 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>');
|
||||
}
|
||||
// 使用统一的模板渲染函数
|
||||
var dayContentHtml = renderDayContent(roomData, null);
|
||||
dayElement.append(dayContentHtml);
|
||||
} else {
|
||||
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 ? '是' : '否');
|
||||
}
|
||||
|
||||
if (roomData && roomData.time_slots && Array.isArray(roomData.time_slots)) {
|
||||
var 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>');
|
||||
}
|
||||
// 使用统一的模板渲染函数
|
||||
var dayContentHtml = renderDayContent(roomData, null);
|
||||
dayElement.append(dayContentHtml);
|
||||
} else {
|
||||
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