|
|
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> <title>管理后台</title> <style> body { font-family: Arial, sans-serif; padding: 24px; background: #f7f8fb; color: #222; } .card { background: #fff; padding: 16px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); margin: auto; } table { width: 100%; border-collapse: collapse; margin-top: 12px; } th, td { padding: 10px 12px; border-bottom: 1px solid #eee; text-align: left; font-size: 14px; } th { background: #fafafa; font-weight: 600; } .controls { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .pagination { display: flex; gap: 6px; align-items: center; margin-left: auto; flex-wrap: wrap; } .btn { padding: 6px 10px; border-radius: 6px; border: 1px solid #ddd; background: #fff; cursor: pointer; user-select: none; } .btn:disabled { opacity: 0.5; cursor: default; } .btn.primary { background: #007bff; color: #fff; border-color: #007bff; } .status-btn { padding: 4px 8px; border-radius: 6px; border: 1px solid #ccc; cursor: pointer; } .status-0 { background: red; color: #fff; } .status-1 { background: #2f9e44; color: #fff; border-color: #2f9e44; } .btn.active { background: #007bff; color: #fff; border-color: #007bff; } select, input[type="number"] { padding: 6px; border-radius: 6px; border: 1px solid #ddd; } .small { font-size: 13px; color: #666; } @media (max-width: 640px) { .controls { flex-direction: column; align-items: flex-start; } .pagination { margin-left: 0; } } #noteModal { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); align-items: center; justify-content: center; z-index: 9999; } #noteModal .dialog { background: #fff; padding: 16px; border-radius: 8px; width: 90%; max-width: 520px; box-sizing: border-box; } #noteModal textarea { width: 100%; min-width: 60%; max-width: 100%; min-height: 150px; box-sizing: border-box; padding: 8px; border-radius: 6px; border: 1px solid #ddd; font-size: 14px; } .toast { position: fixed; top: -20px; left: 50%; transform: translateX(-50%); background: #4caf50; color: #fff; padding: 10px 16px; border-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); font-size: 16px; opacity: 0; transition: all 0.3s ease; z-index: 10000; pointer-events: none; } .toast.show { opacity: 1; top: 20px; } table th, table td { text-align: center; } </style> </head> <body> <div class="card"> <table aria-describedby="tableDesc"> <thead> <tr> <th style="width: 40px">#</th> <th style="width: 100px">姓名</th> <th style="width: 90px">国家/地区代码</th> <th style="width: 120px">电话号码</th> <th style="width: 120px">微信ID</th> <th style="width: 150px">邮箱</th> <th style="width: 160px">添加时间</th> <th style="width: 100px">是否联系</th> <th style="width: 160px">备注</th> <th style="width: 100px">操作</th> </tr> </thead> <tbody id="tableBody"></tbody> </table> <div class="controls" style="margin-bottom: 8px; margin-top: 12px"> <div class="small"> 每页显示 <select id="pageSizeSelect"> <option value="20" selected>20</option> <option value="50">50</option> <option value="100">100</option> <option value="200">200</option> </select> 条 </div>
<div class="small">共 <span id="totalCount">0</span> 条</div>
<div class="pagination" id="pagination"></div> </div> <!-- 备注编辑模态 --> <div id="noteModal"> <div class="dialog"> <h3 style="margin: 0 0 8px">编辑备注</h3> <textarea id="noteTextarea" rows="6" placeholder="输入备注..." ></textarea> <div style=" margin-top: 10px; display: flex; justify-content: flex-end; gap: 8px; " > <button class="btn" id="noteCancelBtn">取消</button> <button class="btn primary" id="noteSaveBtn">保存</button> </div> </div> </div> </div> <div id="toast" class="toast"></div> <script type="module"> import { getMemberListApi,updateMemberStateApi,editMemberNoteApi }from './src/api/member.js' let state = { pageSize: 20, currentPage: 1, total: 0, items:[] };
// DOM const tableBody = document.getElementById("tableBody"); const paginationEl = document.getElementById("pagination"); const totalCountEl = document.getElementById("totalCount"); const currentPageEl = document.getElementById("currentPage"); const showingRangeEl = document.getElementById("showingRange"); const pageSizeSelect = document.getElementById("pageSizeSelect"); const gotoInput = document.getElementById("gotoInput");
const noteModal = document.getElementById("noteModal"); const noteTextarea = document.getElementById("noteTextarea"); const noteCancelBtn = document.getElementById("noteCancelBtn"); const noteSaveBtn = document.getElementById("noteSaveBtn");
const toastEl = document.getElementById("toast"); let editingRowId = null; function showToast(msg) { toastEl.textContent = msg; toastEl.classList.add("show"); setTimeout(() => toastEl.classList.remove("show"), 1000); } async function fetchPage(page, pageSize) { try { const res = await getMemberListApi({ page: page, page_size: pageSize, }) if (typeof res.code !== "undefined" && res.code !== 200) { throw new Error(res.msg || "接口返回错误"); } console.log(res) const payload = res.data || {}; state.items = payload.list; state.total = payload.total; } catch (err) { alert("获取数据失败"); state.total = 0; } } // 渲染表格行 function renderTable() { const startIndex = (state.currentPage - 1) * state.pageSize; const items = state.items || [];
tableBody.innerHTML = items .map((item, idx) => { const serial = startIndex + idx + 1; const statusClass = item.isRelated ? "status-1" : "status-0"; const statusText = item.isRelated ? "已联系" : "未联系"; return ` <tr> <td>${serial}</td> <td>${escapeHtml(item.name || "")}</td> <td>${escapeHtml(item.code || "")}</td> <td>${escapeHtml(item.telephone || "")}</td> <td>${escapeHtml(item.wechat || "")}</td> <td>${escapeHtml(item.email || "")}</td> <td>${escapeHtml(item.createdAt || "")}</td> <td> <button class="status-btn ${statusClass}" data-action="toggle" data-id="${ item.id }">${statusText}</button> </td> <td>${escapeHtml(item.note || "")}</td> <td> <button class="btn" data-action="editNote" data-id="${ item.id }">编辑备注</button> </td> </tr> `; }) .join(""); totalCountEl.textContent = state.total; }
tableBody.addEventListener("click", async (e) => { // 切换状态 const toggler = e.target.closest('[data-action="toggle"]'); if (toggler) { const id = toggler.getAttribute("data-id"); await handleToggle(id, toggler); return; } // 编辑备注 const editBtn = e.target.closest('[data-action="editNote"]'); if (editBtn) { const id = editBtn.getAttribute("data-id"); openNoteModal(id); return; } }); // ---------- 切换联系状态 ---------- async function handleToggle(id, btnEl) { const item = state.items.find((it) => String(it.id) === String(id)); if (!item) return; const prev = item.isRelated; const newVal = prev ? 0 : 1; item.isRelated = newVal; btnEl.textContent = newVal ? "已联系" : "未联系"; btnEl.classList.toggle("status-1", !!newVal); btnEl.classList.toggle("status-0", !newVal); try { const res = await updateMemberStateApi({ id: item.id, state: newVal }) if (typeof res.code !== "undefined" && res.code !== 200) { throw new Error(res.msg || "更新失败"); } showToast("状态修改成功"); } catch (err) { item.isRelated = prev; btnEl.textContent = prev ? "已联系" : "未联系"; btnEl.classList.toggle("status-1", !!prev); btnEl.classList.toggle("status-0", !prev); alert("更新失败"); } }
// ---------- 备注模态相关 ---------- function openNoteModal(id) { const item = state.items.find((it) => String(it.id) === String(id)); if (!item) return; editingRowId = id; noteTextarea.value = item.note || ""; noteModal.style.display = "flex"; noteTextarea.focus(); } function closeNoteModal() { editingRowId = null; noteTextarea.value = ""; noteModal.style.display = "none"; }
noteCancelBtn.addEventListener("click", closeNoteModal);
noteSaveBtn.addEventListener("click", async () => { if (!editingRowId) return closeNoteModal(); const newNote = noteTextarea.value.trim(); const item = state.items.find((it) => String(it.id) === String(editingRowId)); if (!item) return closeNoteModal();
try { const res = await editMemberNoteApi({ id: item.id, note: newNote }) if (typeof res.code !== "undefined" && res.code !== 200) { throw new Error(res.msg || "保存失败"); } const prevNote = item.note; item.note = newNote; renderTable(); showToast("备注保存成功"); } catch (err) { alert("保存备注失败"); } finally { closeNoteModal(); } }); // 渲染分页控件（页码、上一页、下一页） function renderPagination() { const totalPages = Math.max(1, Math.ceil(state.total / state.pageSize)); const current = Math.min(Math.max(1, state.currentPage), totalPages); state.currentPage = current;
const pages = buildPageList(current, totalPages, 2);
let html = ""; html += `<button class="btn" data-action="prev" ${ current === 1 ? "disabled" : "" }>上一页</button>`; pages.forEach((p) => { if (p === "...") { html += `<span class="small" style="padding:6px 8px">...</span>`; } else { html += `<button class="btn ${ p === current ? "active" : "" }" data-page="${p}">${p}</button>`; } }); html += `<button class="btn" data-action="next" ${ current === totalPages ? "disabled" : "" }>下一页</button>`;
paginationEl.innerHTML = html; }
function buildPageList(current, total, delta) { const pages = []; const left = Math.max(1, current - delta); const right = Math.min(total, current + delta);
if (left > 1) { pages.push(1); if (left > 2) pages.push("..."); }
for (let i = left; i <= right; i++) pages.push(i);
if (right < total) { if (right < total - 1) pages.push("..."); pages.push(total); }
return pages; }
paginationEl.addEventListener("click", (e) => { const btn = e.target.closest("button"); if (!btn) return; const action = btn.getAttribute("data-action"); if (action === "prev") { if (state.currentPage > 1) state.currentPage--; } else if (action === "next") { const totalPages = Math.max( 1, Math.ceil(state.total / state.pageSize) ); if (state.currentPage < totalPages) state.currentPage++; } else { const p = Number(btn.getAttribute("data-page")); if (!isNaN(p)) state.currentPage = p; } update(); });
// 每页条数变更 pageSizeSelect.addEventListener("change", () => { const newSize = parseInt(pageSizeSelect.value, 10); state.pageSize = newSize; state.currentPage = 1; update(); gotoInput.value = ""; });
async function update() { const p = Math.max(1, state.currentPage); state.currentPage = p; await fetchPage(state.currentPage, state.pageSize); renderTable(); renderPagination(); }
// 简单安全的文本转义（防 XSS） function escapeHtml(s) { return String(s) .replace(/&/g, "&") .replace(/</g, "<") .replace(/>/g, ">") .replace(/"/g, """) .replace(/'/g, "'"); }
// 首次渲染 update(); </script> </body></html>
|
