From 1e33af4fb505317fa80866d1bd0c5a43c1ebfd7c Mon Sep 17 00:00:00 2001
From: liruiqiang <3151805288@qq.com>
Date: Tue, 21 Oct 2025 13:39:57 +0800
Subject: [PATCH] =?UTF-8?q?=E8=90=BD=E5=9C=B0=E9=A1=B5=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 adminConfig.html |   4 +-
 adminDetail.html | 544 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 546 insertions(+), 2 deletions(-)
diff --git a/adminConfig.html b/adminConfig.html
index e28092a..f77e926 100644
--- a/adminConfig.html
+++ b/adminConfig.html
@@ -337,7 +337,7 @@
   </div>
 
   <script type="module">
-    // 导入API函数（假设接口定义）
+    // 导入API函数
     import { getLandingListApi } from './src/api/member.js';
 
     // DOM元素
@@ -440,7 +440,7 @@
             <td>${formatDate(page.updateTime || '')}</td>
             <td>
               <a class="action-btn">编辑</a>
-              <a href="adminDetail.html" class="action-btn">详情</a>
+              <a href="adminDetail.html?id=${page.id}" class="action-btn">详情</a>
             </td>
           </tr>
         `;
diff --git a/adminDetail.html b/adminDetail.html
index e69de29..ff3a120 100644
--- a/adminDetail.html
+++ b/adminDetail.html
@@ -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, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#039;');
+    }
+
+    // 页面加载时初始化
+    window.addEventListener('DOMContentLoaded', initPage);
+  </script>
+</body>
+</html>
\ No newline at end of file
