321
This commit is contained in:
zpc
parent
6749e1e882
commit
131768c78b
|
|
@ -0,0 +1,271 @@
|
|||
<script type="text/html" template lay-done="layui.data.sendParams(d);">
|
||||
<div style="padding: 20px;">
|
||||
<!-- 日期和房间信息 -->
|
||||
<div class="layui-row">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header"><h3>日期信息</h3></div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-row">
|
||||
<div class="layui-col-md6">
|
||||
<p><strong>日期：</strong>{{d.params.data.dateStr || ''}}</p>
|
||||
<p><strong>房间：</strong>{{d.params.data.roomName || ''}}</p>
|
||||
</div>
|
||||
<div class="layui-col-md6">
|
||||
<p><strong>星期：</strong><span id="weekDayText"></span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 时段详情 -->
|
||||
<div class="layui-row" style="margin-top: 20px;" id="timeSlotsSection">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header"><h3>时段详情</h3></div>
|
||||
<div class="layui-card-body">
|
||||
<table id="dateDetailsTable" lay-filter="dateDetailsTable"></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 预约详情列表（按时段分组） -->
|
||||
<div id="reservationsBySlot"></div>
|
||||
</div>
|
||||
</script>
|
||||
<script>
|
||||
var debug = layui.setter.debug;
|
||||
layui.data.sendParams = function (d) {
|
||||
//开启调试情况下获取接口赋值数据
|
||||
if (debug) { console.log(d.params.data); }
|
||||
|
||||
layui.use(['admin', 'table', 'coreHelper', 'layer'],
|
||||
function () {
|
||||
var $ = layui.$
|
||||
, table = layui.table
|
||||
, admin = layui.admin
|
||||
, coreHelper = layui.coreHelper
|
||||
, layer = layui.layer;
|
||||
|
||||
// 从 d.params.data 中获取参数
|
||||
var params = d.params.data;
|
||||
var dateStr = params.dateStr;
|
||||
var roomId = params.roomId;
|
||||
var roomName = params.roomName;
|
||||
|
||||
// 获取星期几的辅助函数
|
||||
function getWeekDay(dateStr) {
|
||||
var date = new Date(dateStr);
|
||||
var weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
|
||||
return weekDays[date.getDay()];
|
||||
}
|
||||
|
||||
// 设置星期显示
|
||||
$('#weekDayText').text(getWeekDay(dateStr));
|
||||
|
||||
// 请求详细数据
|
||||
coreHelper.Get("Api/SQRoomPricing/GetDateDetails?date=" + encodeURIComponent(dateStr) + "&roomId=" + roomId, function (e) {
|
||||
if (e.code === 0 && e.data) {
|
||||
var data = e.data;
|
||||
|
||||
// 渲染时段详情表格
|
||||
if (data.time_slots && data.time_slots.length > 0) {
|
||||
var tableData = data.time_slots.map(function (slot) {
|
||||
return {
|
||||
slot_name: slot.slot_name || '',
|
||||
status: slot.status || '',
|
||||
price_desc_standard: slot.price_desc_standard || '',
|
||||
price_desc_member: slot.price_desc_member || '',
|
||||
participant_avatars: slot.participant_avatars || [],
|
||||
reservation_count: slot.reservation_count || 0
|
||||
};
|
||||
});
|
||||
|
||||
table.render({
|
||||
elem: '#dateDetailsTable',
|
||||
data: tableData,
|
||||
page: false,
|
||||
cols: [[
|
||||
{ field: 'slot_name', title: '时段', width: 100 },
|
||||
{
|
||||
field: 'status',
|
||||
title: '状态',
|
||||
width: 100,
|
||||
templet: function (d) {
|
||||
var statusText = '';
|
||||
var statusColor = '';
|
||||
if (d.status === 'available') {
|
||||
statusText = '可用';
|
||||
statusColor = '#5FB878';
|
||||
} else if (d.status === 'reserved') {
|
||||
statusText = '已预约';
|
||||
statusColor = '#FFB800';
|
||||
} else if (d.status === 'using') {
|
||||
statusText = '使用中';
|
||||
statusColor = '#999';
|
||||
} else if (d.status === 'unavailable') {
|
||||
statusText = '不可用';
|
||||
statusColor = '#FF5722';
|
||||
} else {
|
||||
statusText = d.status;
|
||||
statusColor = '#999';
|
||||
}
|
||||
return '<span style="background: ' + statusColor + '; color: white; padding: 2px 8px; border-radius: 3px; font-size: 12px;">' + statusText + '</span>';
|
||||
}
|
||||
},
|
||||
{ field: 'price_desc_standard', title: '普通价格描述', width: 150 },
|
||||
{ field: 'price_desc_member', title: '会员价格描述', width: 150 },
|
||||
{
|
||||
field: 'participant_avatars',
|
||||
title: '预约人头像',
|
||||
width: 200,
|
||||
templet: function (d) {
|
||||
if (!d.participant_avatars || d.participant_avatars.length === 0) {
|
||||
return '<span style="color: #999;">无</span>';
|
||||
}
|
||||
var html = '<div style="display: flex; gap: 4px; flex-wrap: wrap;">';
|
||||
d.participant_avatars.forEach(function (avatar) {
|
||||
html += '<img src="' + avatar + '" style="width:28px;height:28px;border-radius:50%;object-fit:cover;" onerror="this.src=\'/images/default-avatar.png\'" />';
|
||||
});
|
||||
html += '</div>';
|
||||
return html;
|
||||
}
|
||||
},
|
||||
{ field: 'reservation_count', title: '预约人数', width: 100 }
|
||||
]]
|
||||
});
|
||||
} else {
|
||||
// 如果没有时段数据，隐藏时段详情区域
|
||||
$('#timeSlotsSection').hide();
|
||||
}
|
||||
|
||||
// 渲染按时段分组的预约详情
|
||||
if (data.reservations_by_slot) {
|
||||
var slotNames = ['凌晨', '上午', '下午', '晚上'];
|
||||
var reservationsBySlotContainer = $('#reservationsBySlot');
|
||||
|
||||
for (var slotType = 0; slotType <= 3; slotType++) {
|
||||
var slotReservations = data.reservations_by_slot[slotType];
|
||||
|
||||
if (slotReservations && slotReservations.length > 0) {
|
||||
// 时段标题
|
||||
var slotHtml = '<div class="layui-row" style="margin-top: 20px;">';
|
||||
slotHtml += ' <div class="layui-col-md12">';
|
||||
slotHtml += ' <h3 style="padding: 10px; background: #f8f8f8; border-left: 4px solid #009688;">预约详情列表（' + slotNames[slotType] + '）</h3>';
|
||||
|
||||
// 遍历该时段的每个预约
|
||||
slotReservations.forEach(function (reservation, idx) {
|
||||
slotHtml += ' <div class="layui-card" style="margin-top: 10px;">';
|
||||
slotHtml += ' <div class="layui-card-header">';
|
||||
slotHtml += ' <div class="layui-row">';
|
||||
slotHtml += ' <div class="layui-col-md3"><strong>组局名称：</strong>' + (reservation.title || '无') + '</div>';
|
||||
slotHtml += ' <div class="layui-col-md2"><strong>参与人数：</strong>' + (reservation.player_count || 0) + '人</div>';
|
||||
slotHtml += ' <div class="layui-col-md2"><strong>鸽子费：</strong>' + (reservation.deposit_fee || 0) + '元</div>';
|
||||
slotHtml += ' <div class="layui-col-md3"><strong>最晚到店：</strong>' + (reservation.latest_arrival_time || '无') + '</div>';
|
||||
slotHtml += ' </div>';
|
||||
slotHtml += ' <div class="layui-row" style="margin-top: 5px;">';
|
||||
slotHtml += ' <div class="layui-col-md3"><strong>玩法类型：</strong>' + (reservation.game_type || '无') + '</div>';
|
||||
slotHtml += ' <div class="layui-col-md3"><strong>具体规则：</strong>' + (reservation.game_rule || '无') + '</div>';
|
||||
slotHtml += ' <div class="layui-col-md4"><strong>开始时间：</strong>' + (reservation.start_time || '无') + '</div>';
|
||||
slotHtml += ' </div>';
|
||||
slotHtml += ' </div>';
|
||||
slotHtml += ' <div class="layui-card-body">';
|
||||
slotHtml += ' <table id="participantsTable_' + slotType + '_' + reservation.id + '" lay-filter="participantsTable_' + slotType + '_' + reservation.id + '"></table>';
|
||||
slotHtml += ' </div>';
|
||||
slotHtml += ' </div>';
|
||||
});
|
||||
|
||||
slotHtml += ' </div>';
|
||||
slotHtml += '</div>';
|
||||
|
||||
reservationsBySlotContainer.append(slotHtml);
|
||||
|
||||
// 渲染每个预约的参与者表格
|
||||
slotReservations.forEach(function (reservation, idx) {
|
||||
var participants = reservation.participants || [];
|
||||
|
||||
table.render({
|
||||
elem: '#participantsTable_' + slotType + '_' + reservation.id,
|
||||
data: participants,
|
||||
page: false,
|
||||
cols: [[
|
||||
{ field: 'id', title: 'ID', width: 60 },
|
||||
{ field: 'user_id', title: '用户ID', width: 80 },
|
||||
{ field: 'user_name', title: '用户昵称', width: 120 },
|
||||
{
|
||||
field: 'avatar_image',
|
||||
title: '用户头像',
|
||||
width: 80,
|
||||
templet: function (d) {
|
||||
if (d.avatar_image) {
|
||||
return '<img src="' + d.avatar_image + '" style="width:40px;height:40px;border-radius:50%;object-fit:cover;" onerror="this.src=\'/images/default-avatar.png\'" />';
|
||||
}
|
||||
return '<span style="color: #999;">无</span>';
|
||||
}
|
||||
},
|
||||
{ field: 'join_time', title: '参与时间', width: 150 },
|
||||
{
|
||||
field: 'role',
|
||||
title: '角色',
|
||||
width: 80,
|
||||
templet: function (d) {
|
||||
return d.role === 1 ? '<span style="color: #ff5722;">发起者</span>' : '参与者';
|
||||
}
|
||||
},
|
||||
{ field: 'quit_time', title: '退出时间', width: 150 },
|
||||
{
|
||||
field: 'is_refund',
|
||||
title: '鸽子费状态',
|
||||
width: 100,
|
||||
templet: function (d) {
|
||||
var refundText = '';
|
||||
var refundColor = '';
|
||||
switch (d.is_refund) {
|
||||
case 0:
|
||||
refundText = '无需退款';
|
||||
refundColor = '#999';
|
||||
break;
|
||||
case 1:
|
||||
refundText = '未付鸽子费';
|
||||
refundColor = '#1E9FFF';
|
||||
break;
|
||||
case 2:
|
||||
refundText = '已付鸽子费';
|
||||
refundColor = '#FFB800';
|
||||
break;
|
||||
case 3:
|
||||
refundText = '退款中';
|
||||
refundColor = '#5FB878';
|
||||
break;
|
||||
case 4:
|
||||
refundText = '退款成功';
|
||||
refundColor = '#5FB878';
|
||||
break;
|
||||
case 9:
|
||||
refundText = '退款失败';
|
||||
refundColor = '#FF5722';
|
||||
break;
|
||||
default:
|
||||
refundText = '未知状态';
|
||||
refundColor = '#999';
|
||||
}
|
||||
return '<span style="background: ' + refundColor + '; color: white; padding: 2px 6px; border-radius: 3px; font-size: 12px;">' + refundText + '</span>';
|
||||
}
|
||||
},
|
||||
{ field: 'remarks', title: '备注', minWidth: 150 }
|
||||
]]
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
layer.msg(e.msg || '获取数据失败');
|
||||
}
|
||||
});
|
||||
})
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1325,252 +1325,21 @@
|
|||
});
|
||||
var roomName = selectedRoom ? selectedRoom.name : '未知房间';
|
||||
|
||||
// 请求详细数据
|
||||
coreHelper.Get("Api/SQRoomPricing/GetDateDetails?date=" + encodeURIComponent(dateStr) + "&roomId=" + selectedRoomId, function (e) {
|
||||
if (e.code === 0 && e.data) {
|
||||
var data = e.data;
|
||||
|
||||
// 构建弹窗内容
|
||||
var content = '<div style="padding: 20px;">';
|
||||
|
||||
// 日期和房间信息
|
||||
content += '<div class="layui-row">';
|
||||
content += ' <div class="layui-col-md12">';
|
||||
content += ' <div class="layui-card">';
|
||||
content += ' <div class="layui-card-header"><h3>日期信息</h3></div>';
|
||||
content += ' <div class="layui-card-body">';
|
||||
content += ' <div class="layui-row">';
|
||||
content += ' <div class="layui-col-md6">';
|
||||
content += ' <p><strong>日期：</strong>' + dateStr + '</p>';
|
||||
content += ' <p><strong>房间：</strong>' + roomName + '</p>';
|
||||
content += ' </div>';
|
||||
content += ' <div class="layui-col-md6">';
|
||||
content += ' <p><strong>星期：</strong>' + getWeekDay(dateStr) + '</p>';
|
||||
content += ' </div>';
|
||||
content += ' </div>';
|
||||
content += ' </div>';
|
||||
content += ' </div>';
|
||||
content += ' </div>';
|
||||
content += '</div>';
|
||||
|
||||
// 时段详情
|
||||
if (data.time_slots && data.time_slots.length > 0) {
|
||||
content += '<div class="layui-row" style="margin-top: 20px;">';
|
||||
content += ' <div class="layui-col-md12">';
|
||||
content += ' <div class="layui-card">';
|
||||
content += ' <div class="layui-card-header"><h3>时段详情</h3></div>';
|
||||
content += ' <div class="layui-card-body">';
|
||||
content += ' <table id="dateDetailsTable" lay-filter="dateDetailsTable"></table>';
|
||||
content += ' </div>';
|
||||
content += ' </div>';
|
||||
content += ' </div>';
|
||||
content += '</div>';
|
||||
}
|
||||
|
||||
// 预约详情列表（按时段分组）
|
||||
content += '<div id="reservationsBySlot"></div>';
|
||||
|
||||
content += '</div>';
|
||||
|
||||
// 弹出窗口
|
||||
layer.open({
|
||||
type: 1,
|
||||
// 使用模板弹窗
|
||||
admin.popup({
|
||||
title: roomName + ' - ' + dateStr + ' 详情',
|
||||
area: ['1200px', '90%'],
|
||||
content: content,
|
||||
id: 'LAY-popup-sqroompricing-datedetails',
|
||||
success: function (layero, index) {
|
||||
// 渲染时段详情表格
|
||||
if (data.time_slots && data.time_slots.length > 0) {
|
||||
var tableData = data.time_slots.map(function (slot) {
|
||||
return {
|
||||
slot_name: slot.slot_name || '',
|
||||
status: slot.status || '',
|
||||
price_desc_standard: slot.price_desc_standard || '',
|
||||
price_desc_member: slot.price_desc_member || '',
|
||||
participant_avatars: slot.participant_avatars || [],
|
||||
reservation_count: slot.reservation_count || 0
|
||||
};
|
||||
view(this.id).render('sq/sqroompricing/date-details', {
|
||||
data: {
|
||||
dateStr: dateStr,
|
||||
roomId: selectedRoomId,
|
||||
roomName: roomName
|
||||
}
|
||||
}).done(function () {
|
||||
// 模板加载完成后的回调
|
||||
});
|
||||
|
||||
table.render({
|
||||
elem: '#dateDetailsTable',
|
||||
data: tableData,
|
||||
page: false,
|
||||
cols: [[
|
||||
{ field: 'slot_name', title: '时段', width: 100 },
|
||||
{
|
||||
field: 'status',
|
||||
title: '状态',
|
||||
width: 100,
|
||||
templet: function (d) {
|
||||
var statusText = '';
|
||||
var statusColor = '';
|
||||
if (d.status === 'available') {
|
||||
statusText = '可用';
|
||||
statusColor = '#5FB878';
|
||||
} else if (d.status === 'reserved') {
|
||||
statusText = '已预约';
|
||||
statusColor = '#FFB800';
|
||||
} else if (d.status === 'using') {
|
||||
statusText = '使用中';
|
||||
statusColor = '#999';
|
||||
} else if (d.status === 'unavailable') {
|
||||
statusText = '不可用';
|
||||
statusColor = '#FF5722';
|
||||
} else {
|
||||
statusText = d.status;
|
||||
statusColor = '#999';
|
||||
}
|
||||
return '<span style="background: ' + statusColor + '; color: white; padding: 2px 8px; border-radius: 3px; font-size: 12px;">' + statusText + '</span>';
|
||||
}
|
||||
},
|
||||
{ field: 'price_desc_standard', title: '普通价格描述', width: 150 },
|
||||
{ field: 'price_desc_member', title: '会员价格描述', width: 150 },
|
||||
{
|
||||
field: 'participant_avatars',
|
||||
title: '预约人头像',
|
||||
width: 200,
|
||||
templet: function (d) {
|
||||
if (!d.participant_avatars || d.participant_avatars.length === 0) {
|
||||
return '<span style="color: #999;">无</span>';
|
||||
}
|
||||
var html = '<div style="display: flex; gap: 4px; flex-wrap: wrap;">';
|
||||
d.participant_avatars.forEach(function (avatar) {
|
||||
html += '<img src="' + avatar + '" style="width:28px;height:28px;border-radius:50%;object-fit:cover;" onerror="this.src=\'/images/default-avatar.png\'" />';
|
||||
});
|
||||
html += '</div>';
|
||||
return html;
|
||||
}
|
||||
},
|
||||
{ field: 'reservation_count', title: '预约人数', width: 100 }
|
||||
]]
|
||||
});
|
||||
}
|
||||
|
||||
// 渲染按时段分组的预约详情
|
||||
if (data.reservations_by_slot) {
|
||||
var slotNames = ['凌晨', '上午', '下午', '晚上'];
|
||||
var reservationsBySlotContainer = $('#reservationsBySlot');
|
||||
|
||||
for (var slotType = 0; slotType <= 3; slotType++) {
|
||||
var slotReservations = data.reservations_by_slot[slotType];
|
||||
|
||||
if (slotReservations && slotReservations.length > 0) {
|
||||
// 时段标题
|
||||
var slotHtml = '<div class="layui-row" style="margin-top: 20px;">';
|
||||
slotHtml += ' <div class="layui-col-md12">';
|
||||
slotHtml += ' <h3 style="padding: 10px; background: #f8f8f8; border-left: 4px solid #009688;">预约详情列表（' + slotNames[slotType] + '）</h3>';
|
||||
|
||||
// 遍历该时段的每个预约
|
||||
slotReservations.forEach(function (reservation, idx) {
|
||||
slotHtml += ' <div class="layui-card" style="margin-top: 10px;">';
|
||||
slotHtml += ' <div class="layui-card-header">';
|
||||
slotHtml += ' <div class="layui-row">';
|
||||
slotHtml += ' <div class="layui-col-md3"><strong>组局名称：</strong>' + (reservation.title || '无') + '</div>';
|
||||
slotHtml += ' <div class="layui-col-md2"><strong>参与人数：</strong>' + (reservation.player_count || 0) + '人</div>';
|
||||
slotHtml += ' <div class="layui-col-md2"><strong>鸽子费：</strong>' + (reservation.deposit_fee || 0) + '元</div>';
|
||||
slotHtml += ' <div class="layui-col-md3"><strong>最晚到店：</strong>' + (reservation.latest_arrival_time || '无') + '</div>';
|
||||
slotHtml += ' </div>';
|
||||
slotHtml += ' <div class="layui-row" style="margin-top: 5px;">';
|
||||
slotHtml += ' <div class="layui-col-md3"><strong>玩法类型：</strong>' + (reservation.game_type || '无') + '</div>';
|
||||
slotHtml += ' <div class="layui-col-md3"><strong>具体规则：</strong>' + (reservation.game_rule || '无') + '</div>';
|
||||
slotHtml += ' <div class="layui-col-md4"><strong>开始时间：</strong>' + (reservation.start_time || '无') + '</div>';
|
||||
slotHtml += ' </div>';
|
||||
slotHtml += ' </div>';
|
||||
slotHtml += ' <div class="layui-card-body">';
|
||||
slotHtml += ' <table id="participantsTable_' + slotType + '_' + reservation.id + '" lay-filter="participantsTable_' + slotType + '_' + reservation.id + '"></table>';
|
||||
slotHtml += ' </div>';
|
||||
slotHtml += ' </div>';
|
||||
});
|
||||
|
||||
slotHtml += ' </div>';
|
||||
slotHtml += '</div>';
|
||||
|
||||
reservationsBySlotContainer.append(slotHtml);
|
||||
|
||||
// 渲染每个预约的参与者表格
|
||||
slotReservations.forEach(function (reservation, idx) {
|
||||
var participants = reservation.participants || [];
|
||||
|
||||
table.render({
|
||||
elem: '#participantsTable_' + slotType + '_' + reservation.id,
|
||||
data: participants,
|
||||
page: false,
|
||||
cols: [[
|
||||
{ field: 'id', title: 'ID', width: 60 },
|
||||
{ field: 'user_id', title: '用户ID', width: 80 },
|
||||
{ field: 'user_name', title: '用户昵称', width: 120 },
|
||||
{
|
||||
field: 'avatar_image',
|
||||
title: '用户头像',
|
||||
width: 80,
|
||||
templet: function (d) {
|
||||
if (d.avatar_image) {
|
||||
return '<img src="' + d.avatar_image + '" style="width:40px;height:40px;border-radius:50%;object-fit:cover;" onerror="this.src=\'/images/default-avatar.png\'" />';
|
||||
}
|
||||
return '<span style="color: #999;">无</span>';
|
||||
}
|
||||
},
|
||||
{ field: 'join_time', title: '参与时间', width: 150 },
|
||||
{
|
||||
field: 'role',
|
||||
title: '角色',
|
||||
width: 80,
|
||||
templet: function (d) {
|
||||
return d.role === 1 ? '<span style="color: #ff5722;">发起者</span>' : '参与者';
|
||||
}
|
||||
},
|
||||
{ field: 'quit_time', title: '退出时间', width: 150 },
|
||||
{
|
||||
field: 'is_refund',
|
||||
title: '鸽子费状态',
|
||||
width: 100,
|
||||
templet: function (d) {
|
||||
var refundText = '';
|
||||
var refundColor = '';
|
||||
switch (d.is_refund) {
|
||||
case 0:
|
||||
refundText = '无需退款';
|
||||
refundColor = '#999';
|
||||
break;
|
||||
case 1:
|
||||
refundText = '未付鸽子费';
|
||||
refundColor = '#1E9FFF';
|
||||
break;
|
||||
case 2:
|
||||
refundText = '已付鸽子费';
|
||||
refundColor = '#FFB800';
|
||||
break;
|
||||
case 3:
|
||||
refundText = '退款中';
|
||||
refundColor = '#5FB878';
|
||||
break;
|
||||
case 4:
|
||||
refundText = '退款成功';
|
||||
refundColor = '#5FB878';
|
||||
break;
|
||||
case 9:
|
||||
refundText = '退款失败';
|
||||
refundColor = '#FF5722';
|
||||
break;
|
||||
default:
|
||||
refundText = '未知状态';
|
||||
refundColor = '#999';
|
||||
}
|
||||
return '<span style="background: ' + refundColor + '; color: white; padding: 2px 6px; border-radius: 3px; font-size: 12px;">' + refundText + '</span>';
|
||||
}
|
||||
},
|
||||
{ field: 'remarks', title: '备注', minWidth: 150 }
|
||||
]]
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
layer.msg(e.msg || '获取数据失败');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user