liruiqiang
3 months ago
2 changed files with 546 additions and 2 deletions
@ -0,0 +1,544 @@ |
|||
<!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> |
|||
/* 基础样式 */ |
|||
* { |
|||
margin: 0; |
|||
padding: 0; |
|||
box-sizing: border-box; |
|||
font-family: "Microsoft YaHei", sans-serif; |
|||
} |
|||
body { |
|||
background-color: #f5f7fa; |
|||
color: #333; |
|||
} |
|||
.container { |
|||
display: flex; |
|||
min-height: 100vh; |
|||
} |
|||
|
|||
/* 侧边栏样式 */ |
|||
.sidebar { |
|||
width: 220px; |
|||
background-color: #2c3e50; |
|||
color: #fff; |
|||
padding: 20px 0; |
|||
} |
|||
.sidebar-logo { |
|||
text-align: center; |
|||
padding: 0 20px 20px; |
|||
border-bottom: 1px solid rgba(255,255,255,0.1); |
|||
margin-bottom: 20px; |
|||
} |
|||
.sidebar-logo h2 { |
|||
font-size: 18px; |
|||
margin-top: 10px; |
|||
} |
|||
.sidebar-menu { |
|||
list-style: none; |
|||
} |
|||
.sidebar-menu li a { |
|||
display: flex; |
|||
align-items: center; |
|||
padding: 12px 20px; |
|||
color: rgba(255,255,255,0.8); |
|||
text-decoration: none; |
|||
transition: all 0.3s; |
|||
} |
|||
.sidebar-menu li a:hover, |
|||
.sidebar-menu li a.active { |
|||
background-color: #34495e; |
|||
color: #fff; |
|||
} |
|||
.sidebar-menu li a i { |
|||
margin-right: 10px; |
|||
font-size: 16px; |
|||
} |
|||
|
|||
/* 主内容区样式 */ |
|||
.main-content { |
|||
flex: 1; |
|||
padding: 20px; |
|||
overflow-y: auto; |
|||
} |
|||
.page-header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-bottom: 20px; |
|||
padding-bottom: 15px; |
|||
border-bottom: 1px solid #eee; |
|||
} |
|||
.page-header h2 { |
|||
font-size: 20px; |
|||
font-weight: 600; |
|||
color: #333; |
|||
} |
|||
.btn { |
|||
padding: 6px 12px; |
|||
border: 1px solid #ddd; |
|||
border-radius: 4px; |
|||
background-color: #fff; |
|||
cursor: pointer; |
|||
color: #333; |
|||
text-decoration: none; |
|||
} |
|||
.btn-primary { |
|||
background-color: #3498db; |
|||
color: #fff; |
|||
border-color: #3498db; |
|||
} |
|||
.btn-danger { |
|||
background-color: #e74c3c; |
|||
color: #fff; |
|||
border-color: #e74c3c; |
|||
} |
|||
|
|||
/* 查询区域样式 */ |
|||
.search-area { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 10px; |
|||
margin-bottom: 20px; |
|||
flex-wrap: wrap; /* 适配小屏幕 */ |
|||
} |
|||
.search-area input, |
|||
.search-area select { |
|||
padding: 6px 10px; |
|||
border: 1px solid #ddd; |
|||
border-radius: 4px; |
|||
outline: none; |
|||
} |
|||
.search-area .date-picker { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 5px; |
|||
} |
|||
|
|||
/* 表格样式 */ |
|||
.table-container { |
|||
background-color: #fff; |
|||
border-radius: 4px; |
|||
box-shadow: 0 2px 12px rgba(0,0,0,0.1); |
|||
overflow: hidden; |
|||
} |
|||
.data-table { |
|||
width: 100%; |
|||
border-collapse: collapse; |
|||
} |
|||
.data-table th, |
|||
.data-table td { |
|||
padding: 12px 15px; |
|||
text-align: left; |
|||
border-bottom: 1px solid #f0f0f0; |
|||
} |
|||
.data-table th { |
|||
background-color: #f9fafb; |
|||
font-weight: 600; |
|||
color: #666; |
|||
} |
|||
.data-table tbody tr:hover { |
|||
background-color: #f5f7fa; |
|||
} |
|||
|
|||
/* 分页样式 */ |
|||
.pagination { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 15px; |
|||
border-top: 1px solid #f0f0f0; |
|||
} |
|||
.pagination-info { |
|||
color: #666; |
|||
font-size: 14px; |
|||
} |
|||
.pagination-list { |
|||
display: flex; |
|||
list-style: none; |
|||
padding: 0; |
|||
margin: 0; |
|||
} |
|||
.pagination-list li { |
|||
margin: 0 2px; |
|||
} |
|||
.pagination-list a, |
|||
.pagination-list span { |
|||
display: inline-block; |
|||
width: 45px; |
|||
height: 45px; |
|||
line-height: 45px; |
|||
text-align: center; |
|||
border: 1px solid #ddd; |
|||
border-radius: 4px; |
|||
text-decoration: none; |
|||
color: #333; |
|||
font-size: 14px; |
|||
box-sizing: border-box; |
|||
} |
|||
.pagination-list a { |
|||
cursor: pointer; |
|||
} |
|||
.pagination-list a:hover, |
|||
.pagination-list a.active { |
|||
background-color: #3498db; |
|||
color: #fff; |
|||
border-color: #3498db; |
|||
} |
|||
.pagination-list span { |
|||
background-color: #f5f5f5; |
|||
color: #999; |
|||
cursor: not-allowed; |
|||
} |
|||
.pagination-jump { |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 14px; |
|||
gap: 5px; |
|||
} |
|||
.pagination-jump input { |
|||
width: 50px; |
|||
height: 32px; |
|||
margin: 0 5px; |
|||
padding: 0 5px; |
|||
border: 1px solid #ddd; |
|||
border-radius: 4px; |
|||
text-align: center; |
|||
box-sizing: border-box; |
|||
} |
|||
.pagination-jump button { |
|||
padding: 6px 12px; |
|||
border: 1px solid #ddd; |
|||
border-radius: 4px; |
|||
background-color: #fff; |
|||
cursor: pointer; |
|||
height: 32px; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
/* 加载中样式 */ |
|||
.loading { |
|||
text-align: center; |
|||
padding: 50px 0; |
|||
color: #666; |
|||
} |
|||
.loading i { |
|||
font-size: 24px; |
|||
margin-bottom: 10px; |
|||
animation: spin 1s linear infinite; |
|||
} |
|||
@keyframes spin { |
|||
from { transform: rotate(0deg); } |
|||
to { transform: rotate(360deg); } |
|||
} |
|||
</style> |
|||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> |
|||
</head> |
|||
<body> |
|||
<div class="container"> |
|||
<div class="sidebar"> |
|||
<div class="sidebar-logo"> |
|||
<i class="fa fa-line-chart" style="font-size: 24px;"></i> |
|||
<h2>后台管理系统</h2> |
|||
</div> |
|||
<ul class="sidebar-menu"> |
|||
<li><a href="#" class="active"><i class="fa fa-file-text-o"></i> 落地页管理</a></li> |
|||
</ul> |
|||
</div> |
|||
|
|||
<!-- 主内容区 --> |
|||
<div class="main-content"> |
|||
<div class="page-header"> |
|||
<div class="page-header h2">详情</div> |
|||
<a href="adminConfig.html" class="btn">返回上一级页面</a> |
|||
</div> |
|||
|
|||
<!-- 查询区域 --> |
|||
<div class="search-area"> |
|||
<label class="date-picker"> |
|||
打开网页时间 |
|||
<input type="date" id="startTime" placeholder="请选择开始时间" /> |
|||
至 |
|||
<input type="date" id="endTime" placeholder="请选择结束时间" /> |
|||
</label> |
|||
<div> |
|||
<label for="statusSelect">收下状态</label> |
|||
<select id="statusSelect"> |
|||
<option value="">请选择状态</option> |
|||
<option value="1">是</option> |
|||
<option value="0">否</option> |
|||
</select> |
|||
</div> |
|||
<button id="searchBtn" class="btn btn-primary">查询</button> |
|||
<button class="btn btn-danger">导出</button> |
|||
</div> |
|||
|
|||
<!-- 数据表格 --> |
|||
<div class="table-container"> |
|||
<table class="data-table"> |
|||
<thead> |
|||
<tr> |
|||
<th>序号</th> |
|||
<th>打开网页时间</th> |
|||
<th>收下状态</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody id="tableBody"> |
|||
<tr> |
|||
<td colspan="3" class="loading"> <!-- 注意：表格列数是3，colspan改为3 --> |
|||
<i class="fa fa-spinner"></i> |
|||
<p>加载中...</p> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
|
|||
<!-- 分页控件 --> |
|||
<div class="pagination" id="paginationContainer"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<script type="module"> |
|||
// 导入API函数（假设接口定义） |
|||
import { getLandingDetailApi } from './src/api/member.js'; |
|||
|
|||
// DOM元素 |
|||
const tableBody = document.getElementById('tableBody'); |
|||
const paginationContainer = document.getElementById('paginationContainer'); |
|||
const searchBtn = document.getElementById('searchBtn'); |
|||
const startTimeInput = document.getElementById('startTime'); |
|||
const endTimeInput = document.getElementById('endTime'); |
|||
const statusSelect = document.getElementById('statusSelect'); |
|||
|
|||
// 分页参数 |
|||
let currentPage = 1; |
|||
const pageSize = 20; |
|||
let totalCount = 0; |
|||
let totalPages = 0; |
|||
|
|||
// 初始化页面：从URL获取页码，请求后端数据 |
|||
async function initPage() { |
|||
// 从URL参数获取当前页码（如 ?page=2） |
|||
const urlParams = new URLSearchParams(window.location.search); |
|||
const pageParam = urlParams.get('page'); |
|||
if (pageParam && !isNaN(pageParam)) { |
|||
currentPage = parseInt(pageParam); |
|||
} |
|||
|
|||
// 从后端请求数据（替换模拟数据） |
|||
await fetchDataFromBackend(); |
|||
} |
|||
|
|||
// 核心：从后端API请求数据 |
|||
async function fetchDataFromBackend() { |
|||
// 显示加载状态 |
|||
tableBody.innerHTML = ` |
|||
<tr> |
|||
<td colspan="3" class="loading"> |
|||
<i class="fa fa-spinner"></i> |
|||
<p>加载中...</p> |
|||
</td> |
|||
</tr> |
|||
`; |
|||
paginationContainer.innerHTML = ''; |
|||
|
|||
try { |
|||
// 1. 构造请求参数（分页+查询条件） |
|||
const requestParams = { |
|||
page: currentPage, // 当前页码 |
|||
size: pageSize, // 每页条数 |
|||
startTime: startTimeInput.value || '', // 开始时间（查询条件） |
|||
endTime: endTimeInput.value || '', // 结束时间（查询条件） |
|||
receiveStatus: statusSelect.value || '' // 收下状态（查询条件） |
|||
}; |
|||
|
|||
// 2. 调用导入的API函数 |
|||
const result = await getLandingDetailApi(requestParams); |
|||
|
|||
// 3. 处理API返回结果 |
|||
if (result.code === 200) { |
|||
const { list, total } = result.data; |
|||
totalCount = total; |
|||
totalPages = Math.ceil(totalCount / pageSize); |
|||
|
|||
renderTable(list); |
|||
renderPagination(); |
|||
} else { |
|||
renderEmptyState('获取数据失败'); |
|||
} |
|||
|
|||
} catch (error) { |
|||
// 捕获异常 |
|||
console.error('请求数据异常:', error); |
|||
renderEmptyState('网络错误，请稍后重试'); |
|||
} |
|||
} |
|||
|
|||
// 渲染表格数据 |
|||
function renderTable(dataList) { |
|||
if (!dataList || dataList.length === 0) { |
|||
renderEmptyState('暂无符合条件的数据'); |
|||
return; |
|||
} |
|||
|
|||
let html = ''; |
|||
dataList.forEach((item, index) => { |
|||
// 计算序号：(当前页-1)*每页条数 + 索引+1 |
|||
const serialNumber = (currentPage - 1) * pageSize + index + 1; |
|||
|
|||
// 注意：item的字段名需与后端返回的字段一致 |
|||
html += ` |
|||
<tr> |
|||
<td>${serialNumber}</td> |
|||
<td>${formatDate(item.openTime || '')}</td> |
|||
<td>${item.receiveStatus === '1' ? '是' : item.receiveStatus === '0' ? '否' : ''}</td> |
|||
</tr> |
|||
`; |
|||
}); |
|||
|
|||
tableBody.innerHTML = html; |
|||
} |
|||
|
|||
// 渲染空状态 |
|||
function renderEmptyState(message) { |
|||
tableBody.innerHTML = ` |
|||
<tr> |
|||
<td colspan="3" style="text-align: center; padding: 30px;"> |
|||
<i class="fa fa-inbox" style="font-size: 24px; color: #ddd; margin-bottom: 10px;"></i> |
|||
<p>${message}</p> |
|||
</td> |
|||
</tr> |
|||
`; |
|||
paginationContainer.innerHTML = ''; |
|||
} |
|||
|
|||
// 渲染分页控件 |
|||
function renderPagination() { |
|||
if (totalCount === 0) return; |
|||
|
|||
// 生成页码列表 |
|||
const pageNumbers = []; |
|||
let startPage = Math.max(1, currentPage - 2); |
|||
let endPage = Math.min(totalPages, currentPage + 2); |
|||
|
|||
if (endPage - startPage < 4 && totalPages >= 5) { |
|||
if (startPage === 1) endPage = 5; |
|||
else if (endPage === totalPages) startPage = totalPages - 4; |
|||
} |
|||
|
|||
for (let i = startPage; i <= endPage; i++) { |
|||
pageNumbers.push(i); |
|||
} |
|||
|
|||
// 分页HTML |
|||
const html = ` |
|||
<div class="pagination-info"> |
|||
共 ${totalCount} 条记录，当前第 ${currentPage} / ${totalPages} 页 |
|||
</div> |
|||
<ul class="pagination-list"> |
|||
<li> |
|||
${currentPage === 1 |
|||
? `<span>首页</span>` |
|||
: `<a href="?page=1">首页</a>` |
|||
} |
|||
</li> |
|||
<li> |
|||
${currentPage > 1 |
|||
? `<a href="?page=${currentPage - 1}">上一页</a>` |
|||
: `<span>上一页</span>` |
|||
} |
|||
</li> |
|||
${pageNumbers.map(num => ` |
|||
<li> |
|||
<a href="?page=${num}" class="${num === currentPage ? 'active' : ''}"> |
|||
${num} |
|||
</a> |
|||
</li> |
|||
`).join('')} |
|||
<li> |
|||
${currentPage < totalPages |
|||
? `<a href="?page=${currentPage + 1}">下一页</a>` |
|||
: `<span>下一页</span>` |
|||
} |
|||
</li> |
|||
<li> |
|||
${currentPage === totalPages |
|||
? `<span>尾页</span>` |
|||
: `<a href="?page=${totalPages}">尾页</a>` |
|||
} |
|||
</li> |
|||
</ul> |
|||
<div class="pagination-jump"> |
|||
<span>跳至</span> |
|||
<input type="number" min="1" max="${totalPages}" value="${currentPage}" id="jumpPageInput"> |
|||
<span>页</span> |
|||
<button id="jumpBtn">确定</button> |
|||
</div> |
|||
`; |
|||
|
|||
paginationContainer.innerHTML = html; |
|||
|
|||
// 绑定跳转事件 |
|||
document.getElementById('jumpBtn').addEventListener('click', handlePageJump); |
|||
document.getElementById('jumpPageInput').addEventListener('keypress', (e) => { |
|||
if (e.key === 'Enter') handlePageJump(); |
|||
}); |
|||
} |
|||
|
|||
// 处理页码跳转 |
|||
function handlePageJump() { |
|||
const pageInput = document.getElementById('jumpPageInput'); |
|||
const page = parseInt(pageInput.value); |
|||
|
|||
if (page && !isNaN(page) && page >= 1 && page <= totalPages && page !== currentPage) { |
|||
window.location.href = `?page=${page}`; |
|||
} else { |
|||
alert('请输入有效的页码'); |
|||
} |
|||
} |
|||
|
|||
// 查询按钮事件：点击后重新请求数据 |
|||
searchBtn.addEventListener('click', async () => { |
|||
currentPage = 1; // 重置为第一页 |
|||
await fetchDataFromBackend(); // 重新请求后端数据 |
|||
}); |
|||
|
|||
// 工具函数：格式化日期（适配后端返回的时间格式） |
|||
function formatDate(dateString) { |
|||
if (!dateString) return ''; |
|||
const date = new Date(dateString); |
|||
// 处理无效日期 |
|||
if (isNaN(date.getTime())) return dateString; |
|||
// 格式化显示：年-月-日 时:分:秒 |
|||
return date.toLocaleString('zh-CN', { |
|||
year: 'numeric', |
|||
month: '2-digit', |
|||
day: '2-digit', |
|||
hour: '2-digit', |
|||
minute: '2-digit', |
|||
second: '2-digit' |
|||
}).replace(/\//g, '-'); |
|||
} |
|||
|
|||
// 工具函数：HTML转义（防止XSS攻击） |
|||
function escapeHtml(str) { |
|||
if (!str) return ''; |
|||
return str |
|||
.replace(/&/g, '&') |
|||
.replace(/</g, '<') |
|||
.replace(/>/g, '>') |
|||
.replace(/"/g, '"') |
|||
.replace(/'/g, '''); |
|||
} |
|||
|
|||
// 页面加载时初始化 |
|||
window.addEventListener('DOMContentLoaded', initPage); |
|||
</script> |
|||
</body> |
|||
</html> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue