|
|
@@ -0,0 +1,79 @@
|
|
|
+<!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>
|
D8D AI