dm-design/merchant/js/main.js

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;