// 全局变量定义 let page = 1; // 初始页码为1,代表从第1条数据开始获取 let pageSize = 10; // 初始每次固定获取10条数据 let total = 0; // 数据总量(从接口获取) let loadedItems = 0; // 已加载的数据条目数量 let isLoading = false; // 防止多次加载 const timeoutDuration = 10000; // 超时时间10秒 const preLoadDistance = 300; // 距离底部300px时提前加载 // 假设 Authorization 值存储在 localStorage 中,key 为 "authToken" const authToken = localStorage.getItem("Authorization"); // 获取与 license_info 相关的 HTML 元素 const license_info_container = document.getElementById('restaurant-list'); // 卡片列表容器 const license_info_modal = document.getElementById('license-info-modal'); // 模态框容器 const license_info_modalContent = document.querySelector('.license-info-modal-content'); // 模态框内容区域 const license_info_modalTitle = document.getElementById('license-info-modal-title'); // 模态框标题 const license_info_modalDescription = document.getElementById('license-info-modal-description'); // 模态框描述 const license_info_modalPrice = document.getElementById('license-info-modal-price'); // 模态框产品信息 const license_info_modalRating = document.getElementById('license-info-modal-rating'); // 模态框MAC地址 const license_info_closeModal = document.querySelector('.license-info-close'); // 模态框关闭按钮 const license_info_loadingIndicator = document.getElementById('loading-indicator'); // 加载提示元素 const license_info_mainElement = document.querySelector('main'); // 主内容区域 // 获取数据函数 async function fetchLicenseData(page, pageSize) { try { const response = await fetch(`http://127.0.0.1:8080/api/admin/GetAllLicenseInfo?page=${page}&pageSize=${pageSize}`, { method: 'GET', headers: { 'Authorization': `Bearer ${authToken}`, 'Content-Type': 'application/json' } }); const result = await response.json(); // 设置总量,如果第一次加载,获取total字段 if (total === 0 && result.total) { total = result.total; } return result.data || []; // 返回获取到的数据,或空数组 } catch (error) { console.error("加载数据失败", error); return []; // 返回空数组,防止后续操作出错 } } // 渲染 license_info 卡片数据函数 function renderLicenseCards(data, clearContainer = false) { if (clearContainer) { license_info_container.innerHTML = ''; // 清空容器内容 } data.forEach(group => { const firstItem = group[0]; // 获取该组的第一个数据项 let statusClass = ''; if (firstItem.LicenseFlage === '已生成') { statusClass = 'license-status-green'; } else if (firstItem.LicenseFlage === '未生成') { statusClass = 'license-status-yellow'; } else if (firstItem.LicenseFlage === '已失效') { statusClass = 'license-status-red'; } const card = document.createElement('div'); card.className = 'license-info-card'; // 在卡片的第一行显示申请时间 card.innerHTML = `

${firstItem.GlxmName}

${firstItem.ApplicationDate} ${firstItem.ApplicationTime}

创建者:${firstItem.Creator}

公司:${firstItem.Company}

许可证状态:${firstItem.LicenseFlage}

`; // 将卡片添加到容器中 license_info_container.appendChild(card); }); console.log("卡片渲染完成,准备添加监听器"); // 确保卡片已经渲染 // 确保在渲染完成后调用监听器绑定 addCardClickListeners(); } // 检查页面是否填满,如果没有则继续加载更多数据 function checkContentHeight() { const documentHeight = document.documentElement.scrollHeight; const windowHeight = window.innerHeight; if (documentHeight <= windowHeight) { console.log("页面内容不足,继续加载更多数据"); loadMoreData(); // 当内容高度不足时,继续加载更多数据 } } // 检查是否滚动到底部并触发加载 async function checkAndLoadMore(scrollHeight, scrollTop, clientHeight) { if (isLoading || loadedItems >= total) return; // 如果正在加载或已加载完所有数据则退出 console.log(`Scroll Info - scrollHeight: ${scrollHeight}, scrollTop: ${scrollTop}, clientHeight: ${clientHeight}`); if (scrollTop + clientHeight >= scrollHeight - preLoadDistance) { console.log(`触发加载更多数据:page=${page}, pageSize=${pageSize}`); // 每次触发时打印输出 await loadMoreData(); } } // 加载更多数据函数 async function loadMoreData() { if (isLoading) return; // 防止重复加载 isLoading = true; console.log('开始加载更多数据'); // 显示加载提示 // license_info_loadingIndicator.style.display = 'block'; // 显示提示 // license_info_loadingIndicator.innerText = '正在加载...'; // 重置加载提示 // 设置超时处理 const timeout = setTimeout(() => { license_info_loadingIndicator.innerText = '加载超时,请重试'; // 修改提示语为超时提示 isLoading = false; license_info_loadingIndicator.style.display = 'none'; // 超时后隐藏加载提示 }, timeoutDuration); // 获取数据 const data = await fetchLicenseData(page, pageSize); // 清除超时定时器 clearTimeout(timeout); if (data.length > 0) { // 渲染数据到页面 renderLicenseCards(data); // 更新 page 和 pageSize,下一次请求从新的位置开始 page += 10; // 每次请求后,page 增加10,表示从下一组数据开始 pageSize += 10; // pageSize 每次递增10 // 更新已加载的条目数 loadedItems += data.length; console.log('数据加载完成,更新页面'); } // 隐藏加载提示 //license_info_loadingIndicator.style.display = 'none'; // 加载完成后隐藏提示 isLoading = false; // 请求完成,允许下次请求 // 检查内容高度,必要时继续加载 checkContentHeight(); } // 监听 window 滚动 window.addEventListener('scroll', () => { checkAndLoadMore(document.body.scrollHeight, window.scrollY, window.innerHeight); }); // 监听 main 容器的滚动 license_info_mainElement.addEventListener('scroll', () => { checkAndLoadMore(license_info_mainElement.scrollHeight, license_info_mainElement.scrollTop, license_info_mainElement.clientHeight); }); // 初始化加载第一页 (async function() { const data = await fetchLicenseData(page, pageSize); if (data.length > 0) { renderLicenseCards(data); // 渲染数据到页面 loadedItems += data.length; // 更新已加载的条目数 } //license_info_loadingIndicator.style.display = 'none'; // 初始化后隐藏加载提示 // 检查内容高度 checkContentHeight(); })(); //-----------点击卡片弹出模态框------------------------------------------------------