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.
222 lines
5.6 KiB
222 lines
5.6 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>
|
|
<script type="module" crossorigin src="./management.js"></script>
|
|
<link rel="modulepreload" crossorigin href="./member.js">
|
|
</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>
|
|
|
|
</body>
</html>
|