207 lines
		
	
	
		
			6.2 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
			
		
		
	
	
			207 lines
		
	
	
		
			6.2 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
| /**
 | |
|  * 会员查看页面功能
 | |
|  * 会员列表的查看、筛选和分页功能
 | |
|  */
 | |
| 
 | |
| // 页面初始化函数(必需)
 | |
| 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);
 | |
|     }
 | |
| } |