d8dfun
/
member-attendance-system-njWOfO-I


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会友信息考勤打卡系统</title>
    <style>
        body { font-family: Arial, sans-serif; line-height: 1.6; margin: 0; padding: 20px; }
        h1 { color: #333; }
        form { margin-bottom: 20px; }
        input, button { margin: 5px 0; padding: 5px; }
        ul { list-style-type: none; padding: 0; }
        li { background: #f4f4f4; margin-bottom: 5px; padding: 10px; }
    </style>
</head>
<body>
    <h1>会友信息考勤打卡系统</h1>
    
    <form id="addMemberForm">
        <input type="text" id="memberName" placeholder="输入会员姓名" required>
        <button type="submit">添加会员</button>
    </form>

    <h2>会员列表</h2>
    <ul id="memberList"></ul>

    <script>
        const API_URL = 'http://localhost:3000/api';

        // 获取并显示所有会员
        async function fetchMembers() {
            const response = await fetch(`${API_URL}/members`);
            const members = await response.json();
            const memberList = document.getElementById('memberList');
            memberList.innerHTML = members.map(member => `
                <li>
                    ${member.name} 
                    <button onclick="recordAttendance(${member.id})">记录考勤</button>
                    <button onclick="viewAttendance(${member.id})">查看考勤</button>
                </li>
            `).join('');
        }

        // 添加新会员
        document.getElementById('addMemberForm').addEventListener('submit', async (e) => {
            e.preventDefault();
            const name = document.getElementById('memberName').value;
            await fetch(`${API_URL}/members`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ name })
            });
            document.getElementById('memberName').value = '';
            fetchMembers();
        });

        // 记录考勤
        async function recordAttendance(memberId) {
            const date = new Date().toISOString().split('T')[0];
            await fetch(`${API_URL}/attendance`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ memberId, date })
            });
            alert('考勤已记录');
        }

        // 查看考勤记录
        async function viewAttendance(memberId) {
            const response = await fetch(`${API_URL}/attendance/${memberId}`);
            const attendance = await response.json();
            alert(`考勤记录：\n${attendance.join('\n')}`);
        }

        // 初始加载会员列表
        fetchMembers();
    </script>
</body>
</html>