diff --git a/new_web/merchant/css/member-detail.css b/new_web/merchant/css/member-detail.css
new file mode 100644
index 0000000..39c2967
--- /dev/null
+++ b/new_web/merchant/css/member-detail.css
@@ -0,0 +1,339 @@
+/* 会员详情页面样式 */
+
+.detail-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 24px;
+    padding-bottom: 16px;
+    border-bottom: 1px solid #e5e7eb;
+}
+
+.close-btn {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 16px;
+    background: #f3f4f6;
+    border: 1px solid #d1d5db;
+    border-radius: 6px;
+    color: #374151;
+    text-decoration: none;
+    font-size: 14px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.close-btn:hover {
+    background: #e5e7eb;
+    border-color: #9ca3af;
+}
+
+.detail-header h2 {
+    margin: 0;
+    color: #1f2937;
+    font-size: 20px;
+    font-weight: 600;
+}
+
+/* 会员信息卡片 */
+.member-info-card {
+    background: white;
+    border: 1px solid #e5e7eb;
+    border-radius: 8px;
+    margin-bottom: 24px;
+    overflow: hidden;
+}
+
+.member-info-header {
+    padding: 16px 20px;
+    background: #f9fafb;
+    border-bottom: 1px solid #e5e7eb;
+}
+
+.member-info-header h3 {
+    margin: 0;
+    color: #1f2937;
+    font-size: 16px;
+    font-weight: 600;
+}
+
+.member-info-content {
+    padding: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 40px;
+}
+
+.member-basic {
+    flex: 1;
+}
+
+.member-avatar-section {
+    display: flex;
+    align-items: flex-start;
+    gap: 16px;
+}
+
+.large-avatar {
+    width: 80px;
+    height: 80px;
+    font-size: 32px;
+    font-weight: 600;
+}
+
+.member-basic-info {
+    flex: 1;
+}
+
+.member-name {
+    font-size: 18px;
+    font-weight: 600;
+    color: #1f2937;
+    margin-bottom: 8px;
+}
+
+.member-id,
+.member-phone,
+.member-birth {
+    font-size: 14px;
+    color: #6b7280;
+    margin-bottom: 6px;
+}
+
+.member-assets {
+    display: flex;
+    gap: 24px;
+}
+
+.asset-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 16px;
+    background: #f8fafc;
+    border-radius: 8px;
+    min-width: 140px;
+}
+
+.asset-icon {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+}
+
+.growth-icon {
+    background: #dbeafe;
+}
+
+.growth-icon::before {
+    content: '📈';
+    font-size: 16px;
+}
+
+.points-icon {
+    background: #dcfce7;
+}
+
+.points-icon::before {
+    content: '💰';
+    font-size: 16px;
+}
+
+.coupon-icon {
+    background: #fef3c7;
+}
+
+.coupon-icon::before {
+    content: '🎫';
+    font-size: 16px;
+}
+
+.asset-info {
+    flex: 1;
+}
+
+.asset-label {
+    font-size: 12px;
+    color: #6b7280;
+    margin-bottom: 4px;
+}
+
+.asset-value {
+    font-size: 18px;
+    font-weight: 600;
+    color: #1f2937;
+}
+
+/* 详情标签页 */
+.detail-tabs {
+    background: white;
+    border: 1px solid #e5e7eb;
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+.tab-headers {
+    display: flex;
+    background: #f9fafb;
+    border-bottom: 1px solid #e5e7eb;
+}
+
+.tab-header {
+    flex: 1;
+    padding: 16px 20px;
+    background: none;
+    border: none;
+    color: #6b7280;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    position: relative;
+}
+
+.tab-header.active {
+    color: #2563eb;
+    background: white;
+}
+
+.tab-header.active::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: #2563eb;
+}
+
+.tab-header:hover:not(.active) {
+    color: #374151;
+    background: #f3f4f6;
+}
+
+.tab-content {
+    display: none;
+    padding: 20px;
+}
+
+.tab-content.active {
+    display: block;
+}
+
+/* 详情表格 */
+.detail-table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-bottom: 16px;
+}
+
+.detail-table th {
+    background: #f9fafb;
+    padding: 12px 16px;
+    text-align: left;
+    font-size: 14px;
+    font-weight: 600;
+    color: #374151;
+    border-bottom: 1px solid #e5e7eb;
+}
+
+.detail-table td {
+    padding: 12px 16px;
+    font-size: 14px;
+    color: #6b7280;
+    border-bottom: 1px solid #f3f4f6;
+}
+
+.detail-table tr:hover {
+    background: #f9fafb;
+}
+
+.positive {
+    color: #059669;
+    font-weight: 600;
+}
+
+.negative {
+    color: #dc2626;
+    font-weight: 600;
+}
+
+.detail-link {
+    color: #2563eb;
+    text-decoration: none;
+    font-size: 13px;
+}
+
+.detail-link:hover {
+    text-decoration: underline;
+}
+
+/* 表格底部 */
+.table-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px 0;
+    font-size: 14px;
+    color: #6b7280;
+    border-top: 1px solid #f3f4f6;
+}
+
+.table-pagination {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+
+.table-pagination span {
+    cursor: pointer;
+    padding: 4px 8px;
+    border-radius: 4px;
+    transition: background 0.2s ease;
+}
+
+.table-pagination span:hover {
+    background: #f3f4f6;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+    .member-info-content {
+        flex-direction: column;
+        gap: 20px;
+    }
+    
+    .member-assets {
+        flex-direction: column;
+        gap: 12px;
+    }
+    
+    .asset-item {
+        min-width: auto;
+    }
+    
+    .tab-headers {
+        flex-direction: column;
+    }
+    
+    .detail-table {
+        font-size: 12px;
+    }
+    
+    .detail-table th,
+    .detail-table td {
+        padding: 8px 12px;
+    }
+    
+    .table-footer {
+        flex-direction: column;
+        gap: 12px;
+        align-items: flex-start;
+    }
+}
\ No newline at end of file
diff --git a/new_web/merchant/css/member-view.css b/new_web/merchant/css/member-view.css
new file mode 100644
index 0000000..aa9fa46
--- /dev/null
+++ b/new_web/merchant/css/member-view.css
@@ -0,0 +1,380 @@
+/* 会员查看页面专用样式 */
+
+/* 筛选区域样式 */
+.filter-section {
+    background: #fff;
+    padding: 20px;
+    margin-bottom: 20px;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.filter-row {
+    display: flex;
+    gap: 20px;
+    flex-wrap: wrap;
+    align-items: end;
+}
+
+.filter-item {
+    display: flex;
+    flex-direction: column;
+    min-width: 150px;
+}
+
+.filter-item label {
+    color: #666;
+    font-size: 14px;
+    margin-bottom: 5px;
+    font-weight: normal;
+}
+
+.filter-item select,
+.filter-item input {
+    padding: 8px 12px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 14px;
+    min-height: 36px;
+}
+
+.filter-item input::placeholder {
+    color: #999;
+}
+
+.filter-actions {
+    margin-top: 15px;
+}
+
+.filter-actions .btn {
+    background: #10b981;
+    color: white;
+    border: none;
+    padding: 8px 20px;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 14px;
+}
+
+.filter-actions .btn:hover {
+    background: #059669;
+}
+
+/* 统计信息样式 */
+.stats-section {
+    display: flex;
+    gap: 20px;
+    margin-bottom: 20px;
+}
+
+.stats-item {
+    background: #fff;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    min-width: 200px;
+}
+
+.stats-icon {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+}
+
+.member-icon {
+    background: rgba(59, 130, 246, 0.1);
+}
+
+.member-icon::before {
+    content: "👥";
+    font-size: 20px;
+}
+
+.new-member-icon {
+    background: rgba(16, 185, 129, 0.1);
+}
+
+.new-member-icon::before {
+    content: "✨";
+    font-size: 18px;
+}
+
+.stats-content {
+    flex: 1;
+}
+
+.stats-label {
+    color: #666;
+    font-size: 14px;
+    margin-bottom: 4px;
+}
+
+.stats-value {
+    color: #333;
+    font-size: 24px;
+    font-weight: bold;
+}
+
+/* 表格容器样式 */
+.table-container {
+    background: #fff;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    overflow: hidden;
+    margin-bottom: 20px;
+}
+
+/* 会员表格样式 */
+.member-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 14px;
+}
+
+.member-table thead {
+    background: #f8fafc;
+}
+
+.member-table th {
+    padding: 12px 16px;
+    text-align: left;
+    font-weight: 500;
+    color: #374151;
+    border-bottom: 1px solid #e5e7eb;
+    position: relative;
+}
+
+.member-table th:first-child {
+    width: 40px;
+    text-align: center;
+}
+
+.member-table td {
+    padding: 12px 16px;
+    border-bottom: 1px solid #f3f4f6;
+    vertical-align: middle;
+}
+
+.member-table td:first-child {
+    text-align: center;
+}
+
+.member-table tbody tr:hover {
+    background-color: #f9fafb;
+}
+
+/* 排序图标样式 */
+.sort-icon {
+    color: #9ca3af;
+    margin-left: 4px;
+    cursor: pointer;
+    user-select: none;
+}
+
+.sort-icon:hover {
+    color: #374151;
+}
+
+/* 头像样式 */
+.avatar {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-weight: 500;
+    font-size: 14px;
+}
+
+.green-avatar {
+    background: #10b981;
+}
+
+.orange-avatar {
+    background: #f59e0b;
+}
+
+.red-avatar {
+    background: #ef4444;
+}
+
+.purple-avatar {
+    background: #8b5cf6;
+}
+
+.pink-avatar {
+    background: #ec4899;
+}
+
+.blue-avatar {
+    background: #3b82f6;
+}
+
+/* 等级徽章样式 */
+.level-badge {
+    padding: 4px 8px;
+    border-radius: 12px;
+    font-size: 12px;
+    font-weight: 500;
+    text-align: center;
+    min-width: 36px;
+    display: inline-block;
+}
+
+.level-badge.lv1 {
+    background: #fef3c7;
+    color: #92400e;
+}
+
+.level-badge.lv2 {
+    background: #ddd6fe;
+    color: #6b21a8;
+}
+
+.level-badge.lv3 {
+    background: #fecaca;
+    color: #991b1b;
+}
+
+.level-badge.lv4 {
+    background: #a7f3d0;
+    color: #065f46;
+}
+
+/* 详情链接样式 */
+.detail-link {
+    color: #10b981;
+    text-decoration: none;
+    font-size: 14px;
+}
+
+.detail-link:hover {
+    color: #059669;
+    text-decoration: underline;
+}
+
+/* 分页样式 */
+.pagination-section {
+    background: #fff;
+    padding: 15px 20px;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 15px;
+}
+
+.pagination-info {
+    color: #666;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.pagination-info select {
+    padding: 4px 8px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 14px;
+}
+
+.pagination-controls {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    color: #666;
+    font-size: 14px;
+}
+
+.pagination-controls span {
+    cursor: pointer;
+    padding: 4px 8px;
+    border-radius: 4px;
+    transition: background-color 0.2s;
+}
+
+.pagination-controls span:hover {
+    background: #f3f4f6;
+    color: #374151;
+}
+
+.pagination-controls input {
+    width: 50px;
+    padding: 4px 8px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    text-align: center;
+    font-size: 14px;
+}
+
+/* 复选框样式优化 */
+input[type="checkbox"] {
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+}
+
+/* 响应式设计 */
+@media (max-width: 1200px) {
+    .filter-row {
+        gap: 15px;
+    }
+    
+    .filter-item {
+        min-width: 120px;
+    }
+    
+    .stats-section {
+        flex-wrap: wrap;
+    }
+    
+    .stats-item {
+        min-width: 180px;
+    }
+}
+
+@media (max-width: 768px) {
+    .filter-row {
+        flex-direction: column;
+        gap: 15px;
+    }
+    
+    .filter-item {
+        min-width: auto;
+        width: 100%;
+    }
+    
+    .stats-section {
+        flex-direction: column;
+    }
+    
+    .stats-item {
+        min-width: auto;
+    }
+    
+    .member-table {
+        font-size: 12px;
+    }
+    
+    .member-table th,
+    .member-table td {
+        padding: 8px 12px;
+    }
+    
+    .pagination-section {
+        flex-direction: column;
+        text-align: center;
+    }
+}
\ No newline at end of file
diff --git a/new_web/merchant/js/member-detail.js b/new_web/merchant/js/member-detail.js
new file mode 100644
index 0000000..f9deb98
--- /dev/null
+++ b/new_web/merchant/js/member-detail.js
@@ -0,0 +1,324 @@
+/**
+ * 会员详情页面功能
+ * 包含会员信息展示、成长值明细、积分明细等功能
+ */
+
+// 当前会员数据
+let currentMemberData = null;
+
+/**
+ * 初始化会员详情页面
+ */
+function initMemberDetail() {
+    console.log('会员详情页面已初始化');
+    loadMemberDetailCSS();
+}
+
+/**
+ * 加载会员详情页面专用CSS
+ */
+function loadMemberDetailCSS() {
+    if (!document.getElementById('memberDetailCSS')) {
+        const link = document.createElement('link');
+        link.id = 'memberDetailCSS';
+        link.rel = 'stylesheet';
+        link.href = 'css/member-detail.css';
+        document.head.appendChild(link);
+    }
+}
+
+/**
+ * 查看会员详情 - 从会员列表页面调用
+ * @param {string} memberId - 会员ID  
+ */
+function viewMemberDetail_Detail(memberId) {
+    console.log('打开会员详情页面:', memberId);
+    
+    // 获取会员数据
+    const memberData = getMemberData(memberId);
+    if (!memberData) {
+        alert('会员信息不存在');
+        return;
+    }
+    
+    currentMemberData = memberData;
+    
+    // 使用系统的openTab功能打开新标签页
+    const tabTitle = `会员详情-${memberData.nickname}`;
+    
+    // 检查是否已经打开了该会员的详情页
+    const existingTab = Array.from(document.querySelectorAll('.tab')).find(tab => 
+        tab.querySelector('span').textContent === tabTitle
+    );
+    
+    if (existingTab) {
+        // 如果已存在，直接激活该标签页
+        window.switchTab(existingTab.id);
+        return;
+    }
+    
+    // 创建自定义的会员详情标签页
+    createMemberDetailTab(tabTitle, memberData);
+}
+
+/**
+ * 创建会员详情标签页
+ * @param {string} tabTitle - 标签页标题
+ * @param {Object} memberData - 会员数据
+ */
+async function createMemberDetailTab(tabTitle, memberData) {
+    try {
+        // 使用全局的tab计数器
+        window.tabCounter++;
+        const tabId = `tab-${window.tabCounter}`;
+        const contentId = `content-${window.tabCounter}`;
+        
+        // 创建新的tab
+        const tabBar = document.querySelector('.tab-bar');
+        const newTab = document.createElement('div');
+        newTab.className = 'tab';
+        newTab.id = tabId;
+        newTab.innerHTML = `
+            <span>${tabTitle}</span>
+            <button class="close-btn" onclick="closeTab('${tabId}')" aria-label="关闭">×</button>
+        `;
+        
+        // 添加点击事件
+        newTab.addEventListener('click', function(e) {
+            if (!e.target.classList.contains('close-btn')) {
+                window.switchTab(tabId);
+            }
+        });
+        
+        tabBar.appendChild(newTab);
+        
+        // 创建对应的内容区域
+        const contentArea = document.querySelector('.content-area');
+        const newContent = document.createElement('div');
+        newContent.className = 'tab-content';
+        newContent.id = contentId;
+        
+        // 先加载CSS样式
+        loadMemberDetailCSS();
+        
+        // 加载HTML内容
+        const response = await fetch('pages/member-detail.html');
+        const htmlContent = await response.text();
+        newContent.innerHTML = htmlContent;
+        
+        contentArea.appendChild(newContent);
+        
+        // 更新页面内容为具体会员数据
+        updateMemberDetailContent(newContent, memberData);
+        
+        // 初始化标签页功能
+        initDetailTabs(newContent);
+        
+        // 激活新创建的tab
+        window.switchTab(tabId);
+        
+    } catch (error) {
+        console.error('创建会员详情标签页失败:', error);
+        alert('打开会员详情失败，请重试');
+    }
+}
+
+/**
+ * 更新会员详情页面内容
+ * @param {HTMLElement} container - 页面容器
+ * @param {Object} memberData - 会员数据
+ */
+function updateMemberDetailContent(container, memberData) {
+    // 更新标题
+    const title = container.querySelector('.detail-header h2');
+    if (title) {
+        title.textContent = `会员详情-${memberData.nickname}`;
+    }
+    
+    // 更新头像
+    const avatar = container.querySelector('.avatar');
+    if (avatar) {
+        avatar.textContent = memberData.nickname.charAt(0);
+        avatar.className = `avatar large-avatar ${memberData.avatarClass}`;
+    }
+    
+    // 更新基本信息
+    const nameEl = container.querySelector('.member-name');
+    if (nameEl) nameEl.textContent = memberData.nickname;
+    
+    const idEl = container.querySelector('.member-id');
+    if (idEl) idEl.textContent = `会员系统编号：${memberData.systemId}`;
+    
+    const phoneEl = container.querySelector('.member-phone');
+    if (phoneEl) phoneEl.textContent = `会员手机号：${memberData.phone}`;
+    
+    const birthEl = container.querySelector('.member-birth');
+    if (birthEl) birthEl.textContent = `会员生日：${memberData.birthday}`;
+    
+    // 更新资产信息
+    const growthValue = container.querySelector('.asset-item:nth-child(1) .asset-value');
+    if (growthValue) growthValue.textContent = memberData.growthValue;
+    
+    const pointsValue = container.querySelector('.asset-item:nth-child(2) .asset-value');
+    if (pointsValue) pointsValue.textContent = memberData.points;
+    
+    const couponsValue = container.querySelector('.asset-item:nth-child(3) .asset-value');
+    if (couponsValue) couponsValue.textContent = memberData.coupons;
+}
+
+/**
+ * 初始化详情标签页功能
+ * @param {HTMLElement} container - 页面容器
+ */
+function initDetailTabs(container) {
+    // 确保成长值明细标签页默认激活
+    const growthTab = container.querySelector('#growthTab');
+    const pointsTab = container.querySelector('#pointsTab');
+    const growthHeader = container.querySelector('.tab-header:first-child');
+    const pointsHeader = container.querySelector('.tab-header:last-child');
+    
+    if (growthTab && pointsTab && growthHeader && pointsHeader) {
+        growthTab.classList.add('active');
+        pointsTab.classList.remove('active');
+        growthHeader.classList.add('active');
+        pointsHeader.classList.remove('active');
+    }
+}
+
+/**
+ * 切换详情标签页
+ * @param {Event} event - 点击事件
+ * @param {string} tabName - 标签页名称
+ */
+function switchDetailTab(event, tabName) {
+    const container = event.target.closest('.page-content');
+    if (!container) return;
+    
+    // 移除所有激活状态
+    const allHeaders = container.querySelectorAll('.tab-header');
+    const allContents = container.querySelectorAll('.tab-content');
+    
+    allHeaders.forEach(header => header.classList.remove('active'));
+    allContents.forEach(content => content.classList.remove('active'));
+    
+    // 激活当前标签页
+    event.target.classList.add('active');
+    
+    const targetTab = container.querySelector(`#${tabName}Tab`);
+    if (targetTab) {
+        targetTab.classList.add('active');
+    }
+}
+
+/**
+ * 关闭会员详情标签页
+ */
+function closeMemberDetailTab() {
+    // 获取当前活动的标签页
+    const activeTab = document.querySelector('.tab-item.active');
+    if (activeTab) {
+        const tabId = activeTab.getAttribute('data-tab');
+        closeTab(tabId);
+    }
+}
+
+/**
+ * 获取会员数据 - 模拟数据
+ * @param {string} memberId - 会员ID
+ * @returns {Object|null} 会员数据
+ */
+function getMemberData(memberId) {
+    const mockMembers = {
+        'M001': {
+            id: 'M001',
+            nickname: '张三',
+            systemId: '二',
+            phone: '138****1234',
+            birthday: '1990-05-15',
+            avatarClass: 'green-avatar',
+            growthValue: 1250,
+            points: 890,
+            coupons: 5,
+            level: 'LV2',
+            store: '时尚服装店',
+            registerTime: '2024-01-15 14:30:25'
+        },
+        'M002': {
+            id: 'M002',
+            nickname: '李四',
+            systemId: '三',
+            phone: '139****5678',
+            birthday: '1985-08-20',
+            avatarClass: 'orange-avatar',
+            growthValue: 800,
+            points: 650,
+            coupons: 3,
+            level: 'LV1',
+            store: '数码电子城',
+            registerTime: '2024-02-20 09:15:30'
+        },
+        'M003': {
+            id: 'M003',
+            nickname: '王五',
+            systemId: '四',
+            phone: '136****9012',
+            birthday: '1992-12-08',
+            avatarClass: 'red-avatar',
+            growthValue: 1850,
+            points: 1200,
+            coupons: 8,
+            level: 'LV3',
+            store: '美食餐厅',
+            registerTime: '2024-03-10 16:45:12'
+        },
+        'M004': {
+            id: 'M004',
+            nickname: '赵六',
+            systemId: '五',
+            phone: '137****3456',
+            birthday: '1988-03-25',
+            avatarClass: 'purple-avatar',
+            growthValue: 600,
+            points: 420,
+            coupons: 2,
+            level: 'LV1',
+            store: '家居生活馆',
+            registerTime: '2024-04-05 11:20:45'
+        },
+        'M005': {
+            id: 'M005',
+            nickname: '孙七',
+            systemId: '六',
+            phone: '135****7890',
+            birthday: '1995-07-12',
+            avatarClass: 'pink-avatar',
+            growthValue: 2500,
+            points: 1800,
+            coupons: 12,
+            level: 'LV4',
+            store: '运动健身店',
+            registerTime: '2024-05-22 13:55:18'
+        },
+        'M006': {
+            id: 'M006',
+            nickname: '周八',
+            systemId: '七',
+            phone: '134****2468',
+            birthday: '1991-11-30',
+            avatarClass: 'blue-avatar',
+            growthValue: 1100,
+            points: 750,
+            coupons: 4,
+            level: 'LV2',
+            store: '时尚服装店',
+            registerTime: '2024-06-18 08:35:22'
+        }
+    };
+    
+    return mockMembers[memberId] || null;
+}
+
+// 暴露全局函数
+window.viewMemberDetail_Detail = viewMemberDetail_Detail;
+window.switchDetailTab = switchDetailTab;
+window.closeMemberDetailTab = closeMemberDetailTab;
\ No newline at end of file
diff --git a/new_web/merchant/js/member-view.js b/new_web/merchant/js/member-view.js
new file mode 100644
index 0000000..f25581a
--- /dev/null
+++ b/new_web/merchant/js/member-view.js
@@ -0,0 +1,207 @@
+/**
+ * 会员查看页面功能
+ * 会员列表的查看、筛选和分页功能
+ */
+
+// 页面初始化函数（必需）
+function initMemberView() {
+    console.log('会员查看页面已初始化');
+    loadMemberViewCSS();
+    initMemberTable();
+    bindMemberEvents();
+}
+
+// 加载专用CSS
+function loadMemberViewCSS() {
+    if (!document.getElementById('memberViewCSS')) {
+        const link = document.createElement('link');
+        link.id = 'memberViewCSS';
+        link.rel = 'stylesheet';
+        link.href = 'css/member-view.css';
+        document.head.appendChild(link);
+    }
+}
+
+// 初始化会员表格
+function initMemberTable() {
+    const selectAllCheckbox = document.getElementById('selectAll');
+    if (selectAllCheckbox) {
+        selectAllCheckbox.addEventListener('change', toggleSelectAll);
+    }
+}
+
+// 绑定事件
+function bindMemberEvents() {
+    // 筛选查询按钮事件已在HTML中绑定onclick
+    
+    // 分页大小改变事件
+    const pageSizeSelect = document.getElementById('pageSize');
+    if (pageSizeSelect) {
+        pageSizeSelect.addEventListener('change', handlePageSizeChange);
+    }
+}
+
+// 全选切换
+function toggleSelectAll() {
+    const selectAllCheckbox = document.getElementById('selectAll');
+    const memberCheckboxes = document.querySelectorAll('#memberTableBody input[type="checkbox"]');
+    
+    memberCheckboxes.forEach(checkbox => {
+        checkbox.checked = selectAllCheckbox.checked;
+    });
+}
+
+// 筛选查询功能
+function searchMembers() {
+    const storeFilter = document.getElementById('storeFilter').value;
+    const nicknameFilter = document.getElementById('nicknameFilter').value;
+    const levelFilter = document.getElementById('levelFilter').value;
+    const registrationDate = document.getElementById('registrationDate').value;
+    
+    console.log('筛选条件:', {
+        store: storeFilter,
+        nickname: nicknameFilter,
+        level: levelFilter,
+        date: registrationDate
+    });
+    
+    // 这里实现筛选逻辑
+    filterMemberTable(storeFilter, nicknameFilter, levelFilter, registrationDate);
+}
+
+// 筛选表格数据
+function filterMemberTable(store, nickname, level, date) {
+    const tableBody = document.getElementById('memberTableBody');
+    const rows = tableBody.querySelectorAll('tr');
+    
+    rows.forEach(row => {
+        let showRow = true;
+        
+        // 店铺筛选
+        if (store && row.cells[1].textContent !== store) {
+            showRow = false;
+        }
+        
+        // 昵称筛选
+        if (nickname && !row.cells[4].textContent.toLowerCase().includes(nickname.toLowerCase())) {
+            showRow = false;
+        }
+        
+        // 等级筛选
+        if (level && !row.cells[6].textContent.includes(level)) {
+            showRow = false;
+        }
+        
+        // 日期筛选（简单日期匹配）
+        if (date && !row.cells[8].textContent.includes(date)) {
+            showRow = false;
+        }
+        
+        row.style.display = showRow ? '' : 'none';
+    });
+}
+
+// 查看会员详情
+function viewMemberDetail(memberId) {
+    console.log('查看会员详情:', memberId);
+    
+    // 先加载会员详情模块
+    loadMemberDetailModule().then(() => {
+        // 调用会员详情模块的函数
+        if (window.viewMemberDetail_Detail) {
+            window.viewMemberDetail_Detail(memberId);
+        } else {
+            console.error('会员详情模块未正确加载');
+            alert('页面加载失败，请重试');
+        }
+    }).catch(error => {
+        console.error('加载会员详情模块失败:', error);
+        alert('页面加载失败，请重试');
+    });
+}
+
+// 动态加载会员详情模块
+async function loadMemberDetailModule() {
+    // 检查是否已经加载
+    if (window.memberDetailModuleLoaded) {
+        return Promise.resolve();
+    }
+    
+    return new Promise((resolve, reject) => {
+        const script = document.createElement('script');
+        script.src = 'js/member-detail.js';
+        script.onload = () => {
+            window.memberDetailModuleLoaded = true;
+            resolve();
+        };
+        script.onerror = () => {
+            reject(new Error('Failed to load member-detail.js'));
+        };
+        document.head.appendChild(script);
+    });
+}
+
+// 处理分页大小改变
+function handlePageSizeChange() {
+    const pageSize = document.getElementById('pageSize').value;
+    console.log('分页大小改为:', pageSize);
+    
+    // 这里实现分页逻辑
+    // 实际项目中会重新请求数据或重新分页显示
+}
+
+// 排序功能
+function sortTable(columnIndex, sortType = 'asc') {
+    const table = document.querySelector('.member-table');
+    const tbody = table.querySelector('tbody');
+    const rows = Array.from(tbody.querySelectorAll('tr'));
+    
+    rows.sort((a, b) => {
+        const aValue = a.cells[columnIndex].textContent.trim();
+        const bValue = b.cells[columnIndex].textContent.trim();
+        
+        if (sortType === 'asc') {
+            return aValue.localeCompare(bValue, 'zh-CN');
+        } else {
+            return bValue.localeCompare(aValue, 'zh-CN');
+        }
+    });
+    
+    // 重新插入排序后的行
+    rows.forEach(row => tbody.appendChild(row));
+}
+
+// 重置筛选条件
+function resetFilters() {
+    document.getElementById('storeFilter').value = '';
+    document.getElementById('nicknameFilter').value = '';
+    document.getElementById('levelFilter').value = '';
+    document.getElementById('registrationDate').value = '';
+    
+    // 显示所有行
+    const tableBody = document.getElementById('memberTableBody');
+    const rows = tableBody.querySelectorAll('tr');
+    rows.forEach(row => {
+        row.style.display = '';
+    });
+}
+
+// 暴露到全局作用域供HTML调用
+window.searchMembers = searchMembers;
+window.viewMemberDetail = viewMemberDetail;
+window.resetFilters = resetFilters;
+window.sortTable = sortTable;
+
+// 页面清理函数（可选）
+function cleanupMemberView() {
+    // 清理事件监听器等
+    const selectAllCheckbox = document.getElementById('selectAll');
+    if (selectAllCheckbox) {
+        selectAllCheckbox.removeEventListener('change', toggleSelectAll);
+    }
+    
+    const pageSizeSelect = document.getElementById('pageSize');
+    if (pageSizeSelect) {
+        pageSizeSelect.removeEventListener('change', handlePageSizeChange);
+    }
+}
\ No newline at end of file
diff --git a/new_web/merchant/pages/member-detail.html b/new_web/merchant/pages/member-detail.html
new file mode 100644
index 0000000..05edac9
--- /dev/null
+++ b/new_web/merchant/pages/member-detail.html
@@ -0,0 +1,338 @@
+<div class="page-content">
+    <div class="detail-header">
+        <h2>会员详情-张三</h2>
+        <button class="btn btn-secondary close-btn" onclick="closeMemberDetailTab()">关闭</button>
+    </div>
+    
+    <!-- 会员基本信息 -->
+    <div class="member-info-card">
+        <div class="member-info-header">
+            <h3>会员信息</h3>
+        </div>
+        <div class="member-info-content">
+            <div class="member-basic">
+                <div class="member-avatar-section">
+                    <div class="avatar large-avatar green-avatar">张</div>
+                    <div class="member-basic-info">
+                        <div class="member-name">张三</div>
+                        <div class="member-id">会员系统编号：二</div>
+                        <div class="member-phone">会员手机号：138****1234</div>
+                        <div class="member-birth">会员生日：1990-05-15</div>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="member-assets">
+                <div class="asset-item">
+                    <div class="asset-icon growth-icon"></div>
+                    <div class="asset-info">
+                        <div class="asset-label">会员成长值</div>
+                        <div class="asset-value">1250</div>
+                    </div>
+                </div>
+                <div class="asset-item">
+                    <div class="asset-icon points-icon"></div>
+                    <div class="asset-info">
+                        <div class="asset-label">会员积分</div>
+                        <div class="asset-value">890</div>
+                    </div>
+                </div>
+                <div class="asset-item">
+                    <div class="asset-icon coupon-icon"></div>
+                    <div class="asset-info">
+                        <div class="asset-label">会员优惠券</div>
+                        <div class="asset-value">5</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 详情标签页 -->
+    <div class="detail-tabs">
+        <div class="tab-headers">
+            <button class="tab-header active" onclick="switchDetailTab(event, 'growth')">会员成长值明细</button>
+            <button class="tab-header" onclick="switchDetailTab(event, 'points')">会员积分明细</button>
+        </div>
+        
+        <!-- 会员成长值明细 -->
+        <div id="growthTab" class="tab-content active">
+            <div class="table-container">
+                <table class="detail-table">
+                    <thead>
+                        <tr>
+                            <th>变化时间</th>
+                            <th>成长值变动</th>
+                            <th>关联订单</th>
+                            <th>详情</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>2025-07-24 17:20</td>
+                            <td class="positive">+35</td>
+                            <td>ORD9296</td>
+                            <td><a href="#" class="detail-link">详情</a></td>
+                        </tr>
+                        <tr>
+                            <td>2025-07-12 17:20</td>
+                            <td class="positive">+100</td>
+                            <td>无</td>
+                            <td><a href="#" class="detail-link">详情</a></td>
+                        </tr>
+                        <tr>
+                            <td>2025-07-10 17:20</td>
+                            <td class="positive">+100</td>
+                            <td>无</td>
+                            <td><a href="#" class="detail-link">详情</a></td>
+                        </tr>
+                        <tr>
+                            <td>2025-06-29 17:20</td>
+                            <td class="positive">+20</td>
+                            <td>无</td>
+                            <td><a href="#" class="detail-link">详情</a></td>
+                        </tr>
+                        <tr>
+                            <td>2025-06-17 17:20</td>
+                            <td class="positive">+55</td>
+                            <td>ORD2063</td>
+                            <td><a href="#" class="detail-link">详情</a></td>
+                        </tr>
+                        <tr>
+                            <td>2025-06-02 17:20</td>
+                            <td class="positive">+20</td>
+                            <td>无</td>
+                            <td><a href="#" class="detail-link">详情</a></td>
+                        </tr>
+                        <tr>
+                            <td>2025-05-20 17:20</td>
+                            <td class="positive">+81</td>
+                            <td>ORD5387</td>
+                            <td><a href="#" class="detail-link">详情</a></td>
+                        </tr>
+                        <tr>
+                            <td>2025-05-16 17:20</td>
+                            <td class="positive">+100</td>
+                            <td>无</td>
+                            <td><a href="#" class="detail-link">详情</a></td>
+                        </tr>
+                        <tr>
+                            <td>2025-05-10 17:20</td>
+                            <td class="positive">+50</td>
+                            <td>无</td>
+                            <td><a href="#" class="detail-link">详情</a></td>
+                        </tr>
+                        <tr>
+                            <td>2025-05-04 17:20</td>
+                            <td class="positive">+100</td>
+                            <td>无</td>
+                            <td><a href="#" class="detail-link">详情</a></td>
+                        </tr>
+                        <tr>
+                            <td>2025-04-25 17:20</td>
+                            <td class="positive">+100</td>
+                            <td>无</td>
+                            <td><a href="#" class="detail-link">详情</a></td>
+                        </tr>
+                        <tr>
+                            <td>2025-04-18 17:20</td>
+                            <td class="positive">+50</td>
+                            <td>无</td>
+                            <td><a href="#" class="detail-link">详情</a></td>
+                        </tr>
+                        <tr>
+                            <td>2025-04-16 17:20</td>
+                            <td class="positive">+20</td>
+                            <td>无</td>
+                            <td><a href="#" class="detail-link">详情</a></td>
+                        </tr>
+                        <tr>
+                            <td>2025-04-04 17:20</td>
+                            <td class="positive">+20</td>
+                            <td>无</td>
+                            <td><a href="#" class="detail-link">详情</a></td>
+                        </tr>
+                        <tr>
+                            <td>2025-04-01 17:20</td>
+                            <td class="positive">+10</td>
+                            <td>ORD3911</td>
+                            <td><a href="#" class="detail-link">详情</a></td>
+                        </tr>
+                        <tr>
+                            <td>2025-03-24 17:20</td>
+                            <td class="positive">+20</td>
+                            <td>无</td>
+                            <td><a href="#" class="detail-link">详情</a></td>
+                        </tr>
+                        <tr>
+                            <td>2025-03-10 17:20</td>
+                            <td class="positive">+95</td>
+                            <td>ORD8321</td>
+                            <td><a href="#" class="detail-link">详情</a></td>
+                        </tr>
+                        <tr>
+                            <td>2025-02-28 17:20</td>
+                            <td class="positive">+100</td>
+                            <td>无</td>
+                            <td><a href="#" class="detail-link">详情</a></td>
+                        </tr>
+                        <tr>
+                            <td>2025-02-18 17:20</td>
+                            <td class="positive">+100</td>
+                            <td>无</td>
+                            <td><a href="#" class="detail-link">详情</a></td>
+                        </tr>
+                        <tr>
+                            <td>2025-02-04 17:20</td>
+                            <td class="positive">+20</td>
+                            <td>无</td>
+                            <td><a href="#" class="detail-link">详情</a></td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+            <div class="table-footer">
+                <span>共 20 条记录</span>
+                <div class="table-pagination">
+                    <span>上一页</span>
+                    <span>第 1 页，共 1 页</span>
+                    <span>下一页</span>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 会员积分明细 -->
+        <div id="pointsTab" class="tab-content">
+            <div class="table-container">
+                <table class="detail-table">
+                    <thead>
+                        <tr>
+                            <th>变化时间</th>
+                            <th>积分变动</th>
+                            <th>关联订单</th>
+                            <th>详情</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>2025-07-24 17:20</td>
+                            <td class="positive">+25</td>
+                            <td>ORD9296</td>
+                            <td><a href="#" class="detail-link">详情</a></td>
+                        </tr>
+                        <tr>
+                            <td>2025-07-20 15:30</td>
+                            <td class="negative">-50</td>
+                            <td>兑换商品</td>
+                            <td><a href="#" class="detail-link">详情</a></td>
+                        </tr>
+                        <tr>
+                            <td>2025-07-12 17:20</td>
+                            <td class="positive">+80</td>
+                            <td>无</td>
+                            <td><a href="#" class="detail-link">详情</a></td>
+                        </tr>
+                        <tr>
+                            <td>2025-07-10 17:20</td>
+                            <td class="positive">+60</td>
+                            <td>无</td>
+                            <td><a href="#" class="detail-link">详情</a></td>
+                        </tr>
+                        <tr>
+                            <td>2025-06-29 17:20</td>
+                            <td class="positive">+15</td>
+                            <td>无</td>
+                            <td><a href="#" class="detail-link">详情</a></td>
+                        </tr>
+                        <tr>
+                            <td>2025-06-25 14:20</td>
+                            <td class="negative">-100</td>
+                            <td>兑换优惠券</td>
+                            <td><a href="#" class="detail-link">详情</a></td>
+                        </tr>
+                        <tr>
+                            <td>2025-06-17 17:20</td>
+                            <td class="positive">+45</td>
+                            <td>ORD2063</td>
+                            <td><a href="#" class="detail-link">详情</a></td>
+                        </tr>
+                        <tr>
+                            <td>2025-06-02 17:20</td>
+                            <td class="positive">+15</td>
+                            <td>无</td>
+                            <td><a href="#" class="detail-link">详情</a></td>
+                        </tr>
+                        <tr>
+                            <td>2025-05-20 17:20</td>
+                            <td class="positive">+65</td>
+                            <td>ORD5387</td>
+                            <td><a href="#" class="detail-link">详情</a></td>
+                        </tr>
+                        <tr>
+                            <td>2025-05-16 17:20</td>
+                            <td class="positive">+80</td>
+                            <td>无</td>
+                            <td><a href="#" class="detail-link">详情</a></td>
+                        </tr>
+                        <tr>
+                            <td>2025-05-12 10:30</td>
+                            <td class="negative">-30</td>
+                            <td>兑换商品</td>
+                            <td><a href="#" class="detail-link">详情</a></td>
+                        </tr>
+                        <tr>
+                            <td>2025-05-10 17:20</td>
+                            <td class="positive">+40</td>
+                            <td>无</td>
+                            <td><a href="#" class="detail-link">详情</a></td>
+                        </tr>
+                        <tr>
+                            <td>2025-05-04 17:20</td>
+                            <td class="positive">+80</td>
+                            <td>无</td>
+                            <td><a href="#" class="detail-link">详情</a></td>
+                        </tr>
+                        <tr>
+                            <td>2025-04-25 17:20</td>
+                            <td class="positive">+70</td>
+                            <td>无</td>
+                            <td><a href="#" class="detail-link">详情</a></td>
+                        </tr>
+                        <tr>
+                            <td>2025-04-18 17:20</td>
+                            <td class="positive">+35</td>
+                            <td>无</td>
+                            <td><a href="#" class="detail-link">详情</a></td>
+                        </tr>
+                        <tr>
+                            <td>2025-04-16 17:20</td>
+                            <td class="positive">+15</td>
+                            <td>无</td>
+                            <td><a href="#" class="detail-link">详情</a></td>
+                        </tr>
+                        <tr>
+                            <td>2025-04-04 17:20</td>
+                            <td class="positive">+15</td>
+                            <td>无</td>
+                            <td><a href="#" class="detail-link">详情</a></td>
+                        </tr>
+                        <tr>
+                            <td>2025-04-01 17:20</td>
+                            <td class="positive">+8</td>
+                            <td>ORD3911</td>
+                            <td><a href="#" class="detail-link">详情</a></td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+            <div class="table-footer">
+                <span>共 18 条记录</span>
+                <div class="table-pagination">
+                    <span>上一页</span>
+                    <span>第 1 页，共 1 页</span>
+                    <span>下一页</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/new_web/merchant/pages/member-view.html b/new_web/merchant/pages/member-view.html
index ed18fde..cb6e4b6 100644
--- a/new_web/merchant/pages/member-view.html
+++ b/new_web/merchant/pages/member-view.html
@@ -1,70 +1,173 @@
 <div class="page-content">
-    <h2>会员查看</h2>
-    <div class="form-group">
-        <label>搜索会员:</label>
-        <input type="text" placeholder="请输入会员姓名或手机号">
-    </div>
-    <div class="form-group">
-        <label>会员等级:</label>
-        <select>
-            <option value="">全部等级</option>
-            <option value="normal">普通会员</option>
-            <option value="silver">银牌会员</option>
-            <option value="gold">金牌会员</option>
-        </select>
-    </div>
-    <button class="btn btn-primary">搜索</button>
-    <button class="btn">重置</button>
+    <h2>会员列表</h2>
     
-    <table class="table">
-        <thead>
-            <tr>
-                <th>会员ID</th>
-                <th>姓名</th>
-                <th>手机号</th>
-                <th>等级</th>
-                <th>积分</th>
-                <th>注册时间</th>
-                <th>操作</th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr>
-                <td>M001</td>
-                <td>张小明</td>
-                <td>138****1234</td>
-                <td>金牌会员</td>
-                <td>8,500</td>
-                <td>2024-01-15</td>
-                <td>
-                    <button class="btn">查看详情</button>
-                    <button class="btn">编辑</button>
-                </td>
-            </tr>
-            <tr>
-                <td>M002</td>
-                <td>李小红</td>
-                <td>139****5678</td>
-                <td>银牌会员</td>
-                <td>2,300</td>
-                <td>2024-02-20</td>
-                <td>
-                    <button class="btn">查看详情</button>
-                    <button class="btn">编辑</button>
-                </td>
-            </tr>
-            <tr>
-                <td>M003</td>
-                <td>王小刚</td>
-                <td>137****9012</td>
-                <td>普通会员</td>
-                <td>450</td>
-                <td>2024-03-10</td>
-                <td>
-                    <button class="btn">查看详情</button>
-                    <button class="btn">编辑</button>
-                </td>
-            </tr>
-        </tbody>
-    </table>
+    <!-- 筛选区域 -->
+    <div class="filter-section">
+        <div class="filter-row">
+            <div class="filter-item">
+                <label>店铺</label>
+                <select id="storeFilter">
+                    <option value="">全部店铺</option>
+                    <option value="时尚服装店">时尚服装店</option>
+                    <option value="数码电子城">数码电子城</option>
+                    <option value="美食餐厅">美食餐厅</option>
+                    <option value="家居生活馆">家居生活馆</option>
+                    <option value="运动健身店">运动健身店</option>
+                </select>
+            </div>
+            <div class="filter-item">
+                <label>用户昵称</label>
+                <input type="text" id="nicknameFilter" placeholder="请输入用户昵称">
+            </div>
+            <div class="filter-item">
+                <label>会员等级</label>
+                <select id="levelFilter">
+                    <option value="">全部等级</option>
+                    <option value="LV1">LV1</option>
+                    <option value="LV2">LV2</option>
+                    <option value="LV3">LV3</option>
+                    <option value="LV4">LV4</option>
+                </select>
+            </div>
+            <div class="filter-item">
+                <label>注册时间</label>
+                <input type="date" id="registrationDate">
+            </div>
+        </div>
+        <div class="filter-actions">
+            <button class="btn btn-primary" onclick="searchMembers()">筛选查询</button>
+        </div>
+    </div>
+
+    <!-- 统计信息 -->
+    <div class="stats-section">
+        <div class="stats-item">
+            <div class="stats-icon member-icon"></div>
+            <div class="stats-content">
+                <div class="stats-label">会员总数</div>
+                <div class="stats-value">1,247</div>
+            </div>
+        </div>
+        <div class="stats-item">
+            <div class="stats-icon new-member-icon"></div>
+            <div class="stats-content">
+                <div class="stats-label">今日新增</div>
+                <div class="stats-value">23</div>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 会员列表表格 -->
+    <div class="table-container">
+        <table class="member-table">
+            <thead>
+                <tr>
+                    <th><input type="checkbox" id="selectAll"></th>
+                    <th>所属摊位 <span class="sort-icon">↕</span></th>
+                    <th>用户ID <span class="sort-icon">↕</span></th>
+                    <th>用户头像</th>
+                    <th>用户昵称 <span class="sort-icon">↕</span></th>
+                    <th>手机号</th>
+                    <th>会员等级 <span class="sort-icon">↕</span></th>
+                    <th>生日</th>
+                    <th>注册时间 <span class="sort-icon">↕</span></th>
+                    <th>操作</th>
+                </tr>
+            </thead>
+            <tbody id="memberTableBody">
+                <tr>
+                    <td><input type="checkbox"></td>
+                    <td>时尚服装店</td>
+                    <td>M001</td>
+                    <td><div class="avatar green-avatar">张</div></td>
+                    <td>张三</td>
+                    <td>138****1234</td>
+                    <td><span class="level-badge lv2">LV2</span></td>
+                    <td>1990-05-15</td>
+                    <td>2024-01-15 14:30:25</td>
+                    <td><a href="#" class="detail-link" onclick="viewMemberDetail('M001')">详情</a></td>
+                </tr>
+                <tr>
+                    <td><input type="checkbox"></td>
+                    <td>数码电子城</td>
+                    <td>M002</td>
+                    <td><div class="avatar orange-avatar">李</div></td>
+                    <td>李四</td>
+                    <td>139****5678</td>
+                    <td><span class="level-badge lv1">LV1</span></td>
+                    <td>1985-08-20</td>
+                    <td>2024-02-20 09:15:30</td>
+                    <td><a href="#" class="detail-link" onclick="viewMemberDetail('M002')">详情</a></td>
+                </tr>
+                <tr>
+                    <td><input type="checkbox"></td>
+                    <td>美食餐厅</td>
+                    <td>M003</td>
+                    <td><div class="avatar red-avatar">王</div></td>
+                    <td>王五</td>
+                    <td>136****9012</td>
+                    <td><span class="level-badge lv3">LV3</span></td>
+                    <td>1992-12-08</td>
+                    <td>2024-03-10 16:45:12</td>
+                    <td><a href="#" class="detail-link" onclick="viewMemberDetail('M003')">详情</a></td>
+                </tr>
+                <tr>
+                    <td><input type="checkbox"></td>
+                    <td>家居生活馆</td>
+                    <td>M004</td>
+                    <td><div class="avatar purple-avatar">赵</div></td>
+                    <td>赵六</td>
+                    <td>137****3456</td>
+                    <td><span class="level-badge lv1">LV1</span></td>
+                    <td>1988-03-25</td>
+                    <td>2024-04-05 11:20:45</td>
+                    <td><a href="#" class="detail-link" onclick="viewMemberDetail('M004')">详情</a></td>
+                </tr>
+                <tr>
+                    <td><input type="checkbox"></td>
+                    <td>运动健身店</td>
+                    <td>M005</td>
+                    <td><div class="avatar pink-avatar">孙</div></td>
+                    <td>孙七</td>
+                    <td>135****7890</td>
+                    <td><span class="level-badge lv4">LV4</span></td>
+                    <td>1995-07-12</td>
+                    <td>2024-05-22 13:55:18</td>
+                    <td><a href="#" class="detail-link" onclick="viewMemberDetail('M005')">详情</a></td>
+                </tr>
+                <tr>
+                    <td><input type="checkbox"></td>
+                    <td>时尚服装店</td>
+                    <td>M006</td>
+                    <td><div class="avatar blue-avatar">周</div></td>
+                    <td>周八</td>
+                    <td>134****2468</td>
+                    <td><span class="level-badge lv2">LV2</span></td>
+                    <td>1991-11-30</td>
+                    <td>2024-06-18 08:35:22</td>
+                    <td><a href="#" class="detail-link" onclick="viewMemberDetail('M006')">详情</a></td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+
+    <!-- 分页 -->
+    <div class="pagination-section">
+        <div class="pagination-info">
+            显示 
+            <select id="pageSize">
+                <option value="20" selected>20</option>
+                <option value="50">50</option>
+                <option value="100">100</option>
+            </select>
+            条记录，共 1,247 条
+        </div>
+        <div class="pagination-controls">
+            <span>首页</span>
+            <span>上一页</span>
+            <span>第 <input type="number" value="1" min="1" max="63"> 页，共 63 页</span>
+            <span>下一页</span>
+            <span>尾页</span>
+        </div>
+    </div>
 </div>
\ No newline at end of file