You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
481 lines
14 KiB
481 lines
14 KiB
<!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>
|