n8n_Demo/web_frontend/web_result/js/order-class-handler.js

// 处理订单班参数和动态内容加载
(function() {
    // 订单班配置
    const orderClassConfig = {
        'tourism': {
            name: '文旅',
            title: '2024长三角国际新能源汽车与智能交通产业博览会',
            subtitle: '新能源汽车产业博览会',
            icon: 'fa-charging-station',
            color: 'emerald'
        },
        'food': {
            name: '食品',
            title: '2024国际健康食品与轻食产业博览会',
            subtitle: '健康食品轻食博览会',
            icon: 'fa-utensils',
            color: 'orange'
        },
        'finance': {
            name: '财经商贸',
            title: '2024国际美妆产业与电商创新博览会',
            subtitle: '美妆电商博览会',
            icon: 'fa-chart-line',
            color: 'blue'
        },
        'dev': {
            name: '智能开发',
            title: '2024国际教育科技与智慧学习博览会',
            subtitle: '教育科技博览会',
            icon: 'fa-code',
            color: 'purple'
        },
        'manufacturing': {
            name: '智能制造',
            title: '2024国际智能制造与工业自动化博览会',
            subtitle: '智能制造博览会',
            icon: 'fa-industry',
            color: 'gray'
        },
        'design': {
            name: '视觉设计',
            title: '2024国际文创设计与视觉艺术博览会',
            subtitle: '文创设计博览会',
            icon: 'fa-palette',
            color: 'pink'
        },
        'logistics': {
            name: '交通物流',
            title: '2024国际智慧物流与供应链博览会',
            subtitle: '智慧物流博览会',
            icon: 'fa-truck',
            color: 'indigo'
        },
        'civil': {
            name: '土木',
            title: '2024国际建筑科技与绿色建造博览会',
            subtitle: '绿色建筑博览会',
            icon: 'fa-building',
            color: 'yellow'
        },
        'health': {
            name: '大健康',
            title: '2024国际大健康产业与医疗创新博览会',
            subtitle: '大健康博览会',
            icon: 'fa-heartbeat',
            color: 'red'
        },
        'energy': {
            name: '能源',
            title: '2024国际新能源与光伏产业博览会',
            subtitle: '新能源博览会',
            icon: 'fa-solar-panel',
            color: 'green'
        },
        'chemical': {
            name: '化工',
            title: '2024国际新材料与精细化工博览会',
            subtitle: '新材料博览会',
            icon: 'fa-flask',
            color: 'teal'
        },
        'environment': {
            name: '环保',
            title: '2024国际环保科技与生态治理博览会',
            subtitle: '环保科技博览会',
            icon: 'fa-leaf',
            color: 'lime'
        }
    };

    // 获取URL参数
    function getUrlParam(name) {
        const params = new URLSearchParams(window.location.search);
        return params.get(name);
    }

    // 获取当前订单班
    function getCurrentOrderClass() {
        const orderClass = getUrlParam('orderClass');
        return orderClass && orderClassConfig[orderClass] ? orderClass : 'tourism';
    }

    // 更新页面标题
    function updatePageTitle(config) {
        const titleElement = document.querySelector('title');
        if (titleElement) {
            titleElement.textContent = config.title;
        }

        // 更新页面中的标题
        const pageTitleElements = document.querySelectorAll('[data-order-title]');
        pageTitleElements.forEach(el => {
            el.textContent = config.title;
        });

        // 更新副标题
        const subtitleElements = document.querySelectorAll('[data-order-subtitle]');
        subtitleElements.forEach(el => {
            el.textContent = config.subtitle;
        });
    }

    // 更新导航栏
    function updateNavigation(config) {
        const navbar = document.getElementById('navbar');
        if (!navbar) return;

        // 更新导航栏logo和标题
        const logoIcon = navbar.querySelector('.logo-icon i');
        const logoTitle = navbar.querySelector('.nav-logo h1');
        const logoSubtitle = navbar.querySelector('.nav-logo p');

        if (logoIcon) {
            logoIcon.className = `fas ${config.icon} text-white`;
        }

        if (logoTitle) {
            logoTitle.textContent = config.name + ' 2024';
        }

        if (logoSubtitle) {
            logoSubtitle.textContent = config.subtitle;
        }

        // 更新颜色主题
        updateColorTheme(config.color);
    }

    // 更新颜色主题
    function updateColorTheme(color) {
        // 移除所有可能的颜色类
        const colors = ['emerald', 'orange', 'blue', 'purple', 'gray', 'pink', 'indigo', 'yellow', 'red', 'green', 'teal', 'lime'];
        colors.forEach(c => {
            document.documentElement.classList.remove(`theme-${c}`);
        });

        // 添加新的颜色类
        document.documentElement.classList.add(`theme-${color}`);

        // 动态创建CSS变量
        const style = document.createElement('style');
        style.id = 'theme-colors';

        // 移除旧的样式
        const oldStyle = document.getElementById('theme-colors');
        if (oldStyle) {
            oldStyle.remove();
        }

        // 定义颜色映射
        const colorMap = {
            emerald: { primary: '#10b981', secondary: '#34d399', accent: '#6ee7b7' },
            orange: { primary: '#f97316', secondary: '#fb923c', accent: '#fdba74' },
            blue: { primary: '#3b82f6', secondary: '#60a5fa', accent: '#93bbfc' },
            purple: { primary: '#8b5cf6', secondary: '#a78bfa', accent: '#c4b5fd' },
            gray: { primary: '#6b7280', secondary: '#9ca3af', accent: '#d1d5db' },
            pink: { primary: '#ec4899', secondary: '#f472b6', accent: '#f9a8d4' },
            indigo: { primary: '#6366f1', secondary: '#818cf8', accent: '#a5b4fc' },
            yellow: { primary: '#eab308', secondary: '#facc15', accent: '#fde047' },
            red: { primary: '#ef4444', secondary: '#f87171', accent: '#fca5a5' },
            green: { primary: '#22c55e', secondary: '#4ade80', accent: '#86efac' },
            teal: { primary: '#14b8a6', secondary: '#2dd4bf', accent: '#5eead4' },
            lime: { primary: '#84cc16', secondary: '#a3e635', accent: '#bef264' }
        };

        const colors = colorMap[color] || colorMap.emerald;

        style.textContent = `
            :root {
                --color-primary: ${colors.primary};
                --color-secondary: ${colors.secondary};
                --color-accent: ${colors.accent};
            }

            .bg-gradient-primary {
                background: linear-gradient(135deg, ${colors.primary} 0%, ${colors.secondary} 100%);
            }

            .text-primary { color: ${colors.primary}; }
            .bg-primary { background-color: ${colors.primary}; }
            .border-primary { border-color: ${colors.primary}; }

            .nav-link.active { color: ${colors.primary}; }
            .nav-link.active span { background-color: ${colors.primary}; }
            .nav-link:hover { color: ${colors.primary}; }
            .nav-link span { background-color: ${colors.primary}; }

            .logo-icon {
                background: linear-gradient(to bottom right, ${colors.secondary}, ${colors.primary});
            }
        `;

        document.head.appendChild(style);
    }

    // 加载订单班特定内容
    function loadOrderClassContent(orderClass) {
        // 这里可以根据订单班加载不同的内容
        // 例如，加载不同的图片、文本等
        console.log(`Loading content for order class: ${orderClass}`);

        // 触发自定义事件，让其他组件知道订单班已改变
        window.dispatchEvent(new CustomEvent('orderClassChanged', {
            detail: { orderClass, config: orderClassConfig[orderClass] }
        }));
    }

    // 初始化
    function init() {
        const orderClass = getCurrentOrderClass();
        const config = orderClassConfig[orderClass];

        if (config) {
            updatePageTitle(config);
            updateNavigation(config);
            loadOrderClassContent(orderClass);
        }
    }

    // DOM加载完成后初始化
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }

    // 暴露全局函数供其他模块使用
    window.OrderClassHandler = {
        getCurrentOrderClass,
        getConfig: () => orderClassConfig[getCurrentOrderClass()],
        getAllConfigs: () => orderClassConfig
    };
})();