diff --git a/server/CoreCms.Net.Web.Admin/wwwroot/views/sq/sqroompricing/date-details.html b/server/CoreCms.Net.Web.Admin/wwwroot/views/sq/sqroompricing/date-details.html
new file mode 100644
index 0000000..204af3e
--- /dev/null
+++ b/server/CoreCms.Net.Web.Admin/wwwroot/views/sq/sqroompricing/date-details.html
@@ -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>
diff --git a/server/CoreCms.Net.Web.Admin/wwwroot/views/sq/sqroompricing/index.html b/server/CoreCms.Net.Web.Admin/wwwroot/views/sq/sqroompricing/index.html
index 34f91f1..d5113c1 100644
--- a/server/CoreCms.Net.Web.Admin/wwwroot/views/sq/sqroompricing/index.html
+++ b/server/CoreCms.Net.Web.Admin/wwwroot/views/sq/sqroompricing/index.html
@@ -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,
-                                title: roomName + ' - ' + dateStr + ' 详情',
-                                area: ['1200px', '90%'],
-                                content: content,
-                                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
-                                            };
-                                        });
-
-                                        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 }
-                                                        ]]
-                                                    });
-                                                });
-                                            }
-                                        }
-                                    }
+                    // 使用模板弹窗
+                    admin.popup({
+                        title: roomName + ' - ' + dateStr + ' 详情',
+                        area: ['1200px', '90%'],
+                        id: 'LAY-popup-sqroompricing-datedetails',
+                        success: function (layero, index) {
+                            view(this.id).render('sq/sqroompricing/date-details', {
+                                data: {
+                                    dateStr: dateStr,
+                                    roomId: selectedRoomId,
+                                    roomName: roomName
                                 }
+                            }).done(function () {
+                                // 模板加载完成后的回调
                             });
-                        } else {
-                            layer.msg(e.msg || '获取数据失败');
                         }
                     });
                 }