xugu_license/static/license_info/script.js

// 全局变量定义
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 = `
            <div class="license-info-card-header">
                <h3 class="card-title">${firstItem.GlxmName}</h3>
            </div>
            <div class="license-info-card-content">
                <p class="card-text">${firstItem.ApplicationDate} ${firstItem.ApplicationTime}</p> <!-- 显示日期和时间 -->
                <p class="card-text">创建者：${firstItem.Creator}</p>
                <p class="card-text">公司：${firstItem.Company}</p>
                <p class="card-text ${statusClass}">许可证状态：${firstItem.LicenseFlage}</p>
            </div>
        `;
    // 将卡片添加到容器中
    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();
})();

//-----------点击卡片弹出模态框------------------------------------------------------