111

<!-- 客单详情弹窗（Chrome/Edge/微信 全兼容） -->

<div id="detailModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 9999; overflow: hidden;">

<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 94%; max-width: 450px; max-height: 90vh; background: #fff; border-radius: 8px; display: flex; flex-direction: column; overflow: hidden;">

<!-- 头部固定 -->

<div style="background: #009E50; color: #fff; padding: 10px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;">

<div style="display: flex; align-items: center;">

<div id="modalRoomNum" style="width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: bold; margin-right: 8px;">1006</div>

<h3 style="font-size: 16px; font-weight: bold; margin: 0;">客单详情</h3>

</div>

<button onclick="closeModal()" style="background: none; border: none; color: #fff; font-size: 24px; line-height: 1; cursor: pointer;">×</button>

</div>

<!-- 内容区独立滚动 -->

<div id="modalBody" style="padding: 10px; font-size: 12px; overflow-y: auto; flex: 1;">

<div style="text-align: center; padding: 20px;">

<i class="fa-solid fa-spinner fa-spin" style="color: #009E50;"></i>

<p style="margin-top: 8px;">加载中...</p>

</div>

</div>

</div>

</div>

// 打开弹窗（统一用 display + 内联样式，避免类名冲突）

function showOrderDetail(orderid, roomNum) {

document.getElementById('modalRoomNum').innerText = roomNum;

document.getElementById('detailModal').style.display = 'block'; // 用 block 替代 flex

const modalBody = document.getElementById('modalBody');

modalBody.innerHTML = `<div style="text-align: center; padding: 20px;"><i class="fa-solid fa-spinner fa-spin" style="color: #009E50;"></i><p style="margin-top: 8px;">加载中...</p></div>`;

// 下面的接口请求逻辑不变...

}

// 关闭弹窗

function closeModal() {

document.getElementById('detailModal').style.display = 'none';

}