main.js

// 模拟登录成功后存储的用户数据
const userData = {
    name: localStorage.getItem('user_name'),
    accessToken: localStorage.getItem('access_token')
};

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 设置用户信息
    document.getElementById('username').textContent = userData.name;
    document.getElementById('avatar').textContent = userData.name.charAt(0);
    
    // 获取课程数据
    fetchCourseData();
    
    // 退出登录按钮事件
    document.getElementById('logout-btn').addEventListener('click', function() {
        localStorage.removeItem('access_token');
        window.location.href = 'index.html';
    });
});

// 获取课程数据
function fetchCourseData() {
    const container = document.getElementById('coursesContainer');
    
    // 模拟加载延迟
    setTimeout(() => {
        // 实际API请求代码（使用您提供的代码）
        const payload = {
            dateFrom: Date.now() - 1000 * 24 * 60 * 60 * 1000,
            dateTo: Date.now(),
            indexStart: 0,
            pageSize: 100
        };
        
        // 实际API请求
        fetch('https://www.aiwenyun.cn/liveclassgo/api/v1/history/listRecord', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'access-token': userData.accessToken
            },
            body: JSON.stringify(payload)
        })
        .then(res => {
            if (!res.ok) {
                throw new Error('网络响应异常');
            }
            return res.json();
        })
        .then(data => {
            if (data.code !== 0) {
                throw new Error(data.msg || '请求失败');
            }
            
            const courses = data.obj.list;
            renderCourses(courses);
        })
        .catch(err => {
            container.innerHTML = `
                <div class="error-message">
                    <h3><i class="fas fa-exclamation-triangle"></i> 加载失败</h3>
                    <p>${err.message || '获取课程数据时发生错误'}</p>
                    <button class="enter-btn" style="margin-top: 15px; max-width: 200px;" onclick="location.reload()">
                        <i class="fas fa-sync-alt"></i> 重新加载
                    </button>
                </div>
            `;
        });
        
        // // 模拟数据（实际使用时请删除）
        // const mockCourses = generateMockCourses(8);
        // renderCourses(mockCourses);
    }, 1500);
}

// 渲染课程列表
function renderCourses(courses) {
    const container = document.getElementById('coursesContainer');
    
    if (!courses || courses.length === 0) {
        container.innerHTML = `
            <div class="empty-state">
                <i class="fas fa-book"></i>
                <h3>暂无课程记录</h3>
                <p>您最近没有课程记录，请参与更多课程学习</p>
            </div>
        `;
        return;
    }
    
    // 计算统计数据
    let totalDuration = 0;
    
    // 生成课程卡片
    container.innerHTML = '';
    courses.forEach(course => {
        totalDuration += course.duration;
        
        const minutes = Math.floor(course.duration / 60);
        const hours = Math.floor(minutes / 60);
        const mins = minutes % 60;
        const durationText = hours > 0 ? `${hours} 小时 ${mins} 分钟` : `${mins}分钟`;
        
        const courseCard = document.createElement('div');
        courseCard.className = 'course-card';
        courseCard.innerHTML = `
            <div class="course-header">
                <h3 class="course-title">${course.shortDesc}</h3>
                <div class="course-duration">${durationText}</div>
            </div>
            <div class="course-body">
                <div class="course-info">
                    <div class="info-item">
                        <i class="far fa-calendar"></i>
                        <span>${formatDate(course.createTime)}</span>
                    </div>
                    <div class="info-item">
                        <i class="fas fa-users"></i>
                        <span>${course.listenerCount || 25} 人参与</span>
                    </div>
                </div>
                <div class="teacher">
                    <div class="teacher-avatar">${course.teacherName.charAt(0)}</div>
                    <div class="teacher-name">${course.teacherName}</div>
                </div>
            </div>
            <div class="course-footer">
                <button class="enter-btn" data-fileid="${course.fileId}">
                    <i class="fas fa-play-circle"></i>
                    进入课程
                </button>
            </div>
        `;
        
        // 添加点击事件
        const enterBtn = courseCard.querySelector('.enter-btn');
        enterBtn.addEventListener('click', function() {
            const fileId = this.getAttribute('data-fileid');
            const url = `https://wwwr.plaso.cn/static/yxt/?appType=player&noUser=1&fileId=${fileId}`;
            window.open(url, '_blank');
        });
        
        container.appendChild(courseCard);
    });
    
    // 更新统计数据
    document.getElementById('total-courses').textContent = courses.length;
    document.getElementById('total-duration').textContent = (totalDuration / 3600).toFixed(1);
}

// 格式化日期
function formatDate(dateString) {
    const date = new Date(dateString);
    return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
}