192 lines
5.2 KiB
JavaScript
192 lines
5.2 KiB
JavaScript
|
|
// 主页面的JavaScript逻辑 - 简化版
|
||
|
|
|
||
|
|
// 全局状态管理
|
||
|
|
let currentExpandedMenus = [];
|
||
|
|
|
||
|
|
// DOM 加载完成后初始化
|
||
|
|
document.addEventListener('DOMContentLoaded', function() {
|
||
|
|
console.log('大数集市商户端主页面初始化完成');
|
||
|
|
|
||
|
|
// 初始化菜单状态
|
||
|
|
initializeMenus();
|
||
|
|
|
||
|
|
// 初始化开关状态
|
||
|
|
initializeSwitches();
|
||
|
|
|
||
|
|
// 添加搜索功能
|
||
|
|
initializeSearch();
|
||
|
|
});
|
||
|
|
|
||
|
|
// 菜单展开/收起功能
|
||
|
|
function toggleMenu(menuId) {
|
||
|
|
const arrow = document.getElementById(menuId + '-arrow');
|
||
|
|
const submenu = document.getElementById(menuId + '-submenu');
|
||
|
|
|
||
|
|
if (currentExpandedMenus.includes(menuId)) {
|
||
|
|
// 收起菜单
|
||
|
|
currentExpandedMenus = currentExpandedMenus.filter(id => id !== menuId);
|
||
|
|
|
||
|
|
if (arrow) {
|
||
|
|
arrow.classList.remove('rotate-180');
|
||
|
|
}
|
||
|
|
|
||
|
|
if (submenu) {
|
||
|
|
submenu.classList.add('hidden');
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
// 展开菜单
|
||
|
|
currentExpandedMenus.push(menuId);
|
||
|
|
|
||
|
|
if (arrow) {
|
||
|
|
arrow.classList.add('rotate-180');
|
||
|
|
}
|
||
|
|
|
||
|
|
if (submenu) {
|
||
|
|
submenu.classList.remove('hidden');
|
||
|
|
submenu.classList.add('fade-in');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
console.log('菜单状态更新:', menuId, currentExpandedMenus);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 开关切换功能
|
||
|
|
function toggleSwitch(switchElement) {
|
||
|
|
const isChecked = switchElement.checked;
|
||
|
|
console.log('开关状态:', isChecked);
|
||
|
|
|
||
|
|
// 添加视觉反馈
|
||
|
|
const slider = switchElement.nextElementSibling;
|
||
|
|
if (slider) {
|
||
|
|
if (isChecked) {
|
||
|
|
slider.style.backgroundColor = '#16a34a';
|
||
|
|
} else {
|
||
|
|
slider.style.backgroundColor = '#e5e7eb';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 初始化菜单状态
|
||
|
|
function initializeMenus() {
|
||
|
|
// 会员管理菜单默认展开
|
||
|
|
toggleMenu('member');
|
||
|
|
|
||
|
|
console.log('菜单初始化完成');
|
||
|
|
}
|
||
|
|
|
||
|
|
// 初始化开关状态
|
||
|
|
function initializeSwitches() {
|
||
|
|
const switches = document.querySelectorAll('input[type="checkbox"]');
|
||
|
|
switches.forEach(switchElement => {
|
||
|
|
// 为已选中的开关设置正确的样式
|
||
|
|
if (switchElement.checked) {
|
||
|
|
const slider = switchElement.nextElementSibling;
|
||
|
|
if (slider) {
|
||
|
|
slider.style.backgroundColor = '#16a34a';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
console.log('开关初始化完成,共', switches.length, '个开关');
|
||
|
|
}
|
||
|
|
|
||
|
|
// 搜索功能
|
||
|
|
function initializeSearch() {
|
||
|
|
const searchInput = document.querySelector('input[placeholder*="搜索"]');
|
||
|
|
if (searchInput) {
|
||
|
|
searchInput.addEventListener('input', function(e) {
|
||
|
|
const searchTerm = e.target.value.toLowerCase();
|
||
|
|
filterMenuItems(searchTerm);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 过滤菜单项
|
||
|
|
function filterMenuItems(searchTerm) {
|
||
|
|
const menuItems = document.querySelectorAll('nav div');
|
||
|
|
|
||
|
|
menuItems.forEach(item => {
|
||
|
|
const text = item.textContent.toLowerCase();
|
||
|
|
if (text.includes(searchTerm) || searchTerm === '') {
|
||
|
|
item.style.display = '';
|
||
|
|
} else {
|
||
|
|
item.style.display = 'none';
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
console.log('搜索筛选:', searchTerm);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 显示通知
|
||
|
|
function showNotification(message, type = 'info') {
|
||
|
|
console.log('通知:', message, '类型:', type);
|
||
|
|
|
||
|
|
// 创建通知元素
|
||
|
|
const notification = document.createElement('div');
|
||
|
|
notification.className = `notification ${type}`;
|
||
|
|
notification.textContent = message;
|
||
|
|
notification.style.cssText = `
|
||
|
|
position: fixed;
|
||
|
|
top: 20px;
|
||
|
|
right: 20px;
|
||
|
|
padding: 12px 20px;
|
||
|
|
border-radius: 6px;
|
||
|
|
color: white;
|
||
|
|
font-size: 14px;
|
||
|
|
z-index: 1000;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
`;
|
||
|
|
|
||
|
|
// 根据类型设置颜色
|
||
|
|
switch(type) {
|
||
|
|
case 'success':
|
||
|
|
notification.style.backgroundColor = '#16a34a';
|
||
|
|
break;
|
||
|
|
case 'error':
|
||
|
|
notification.style.backgroundColor = '#dc2626';
|
||
|
|
break;
|
||
|
|
case 'warning':
|
||
|
|
notification.style.backgroundColor = '#d97706';
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
notification.style.backgroundColor = '#3b82f6';
|
||
|
|
}
|
||
|
|
|
||
|
|
document.body.appendChild(notification);
|
||
|
|
|
||
|
|
// 3秒后自动消失
|
||
|
|
setTimeout(() => {
|
||
|
|
notification.style.opacity = '0';
|
||
|
|
setTimeout(() => {
|
||
|
|
if (notification.parentNode) {
|
||
|
|
document.body.removeChild(notification);
|
||
|
|
}
|
||
|
|
}, 300);
|
||
|
|
}, 3000);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 键盘快捷键支持
|
||
|
|
document.addEventListener('keydown', function(e) {
|
||
|
|
// Ctrl+F 聚焦搜索框
|
||
|
|
if (e.ctrlKey && e.key === 'f') {
|
||
|
|
e.preventDefault();
|
||
|
|
const searchInput = document.querySelector('input[placeholder*="搜索"]');
|
||
|
|
if (searchInput) {
|
||
|
|
searchInput.focus();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// 窗口大小变化时的响应式处理
|
||
|
|
window.addEventListener('resize', function() {
|
||
|
|
const sidebar = document.querySelector('aside');
|
||
|
|
if (window.innerWidth < 768 && sidebar) {
|
||
|
|
console.log('切换到移动端布局');
|
||
|
|
// 可以在这里添加移动端特定的逻辑
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// 导出全局函数
|
||
|
|
window.toggleMenu = toggleMenu;
|
||
|
|
window.toggleSwitch = toggleSwitch;
|
||
|
|
window.showNotification = showNotification;
|