advertising-system/script.js

// 广告位配置
const AD_POSITIONS = {
    'home-banner-1': {
        id: 'home-banner-1',
        title: '首页顶部Banner广告位1',
        image: 'https://img.apicdo.top/i/3/2025/05/02/f5ed5e0cb518ff37f5ba9a0798c17f1e-3.webp',
        dimensions: '1200×200px',
        prices: {
            monthly: 250,
            yearly: 500
        }
    },
    'home-banner-2': {
        id: 'home-banner-2',
        title: '首页顶部Banner广告位2',
        image: 'https://img.apicdo.top/i/3/2025/05/02/f5ed5e0cb518ff37f5ba9a0798c17f1e-3.webp',
        dimensions: '1200×200px',
        prices: {
            monthly: 250,
            yearly: 500
        }
    },
    'home-sidebar': {
        id: 'home-sidebar',
        title: '首页侧边栏广告位',
        image: 'https://img.apicdo.top/i/3/2025/05/02/988551d49a8dd3ca779c89a133c247bd-3.webp',
        dimensions: '300×600px',
        prices: {
            yearly: 300
        }
    },
    'category-top': {
        id: 'category-top',
        title: '分类页置顶广告位',
        image: 'https://img.apicdo.top/i/3/2025/05/02/2d4c99afe306a9a6392d32d089b6fe5a-3.webp',
        dimensions: '800×150px',
        prices: {
            monthly: 100
        }
    },
    'article-end': {
        id: 'article-end',
        title: '文末广告位',
        image: 'https://img.apicdo.top/i/3/2025/05/02/33c6903b27f7db523fd2ba87e20689ae-3.webp',
        dimensions: '600×300px',
        prices: {
            yearly: 200
        }
    },
    'url-top': {
        id: 'url-top',
        title: '网址置顶推荐',
        image: 'https://img.apicdo.top/i/3/2025/05/02/04a1033cb71dcf2e7566f5503bec91bb-3.webp',
        dimensions: '800×100px',
        prices: {
            monthly: 200,
            yearly: 500
        }
    }
};

// 访问量数据（从API获取）
let visitData = {
    today_uv: 0,
    today_pv: 0,
    yesterday_uv: 0,
    yesterday_pv: 0,
    last_month_pv: 0,
    last_year_pv: 0
};

// 访问量价格系数配置
const VISIT_COEFFICIENTS = {
    'low': { min: 0, max: 30000, coefficient: 0.8 },    // 低访问量，价格打8折
    'medium': { min: 30001, max: 60000, coefficient: 1 }, // 中等访问量，原价
    'high': { min: 60001, max: 100000, coefficient: 1.2 }, // 高访问量，价格上浮20%
    'veryHigh': { min: 100001, max: Infinity, coefficient: 1.5 } // 极高访问量，价格上浮50%
};

// 广告位预订状态（实际项目中应该从数据库获取）
const BOOKED_STATUS = {
    'home-banner-1': {
        isBooked: false,
        endDate: null
    },
    'home-banner-2': {
        isBooked: false,
        endDate: null
    },
    'home-sidebar': {
        isBooked: true,
        endDate: new Date('2026-12-31').toISOString()
    },
    'category-top': {
        isBooked: false,
        endDate: null
    },
    'article-end': {
        isBooked: false,
        endDate: null
    },
    'url-top': {
        isBooked: false,
        endDate: null
    }
};

// 生成广告位HTML
function generateAdCardHtml(adId, adConfig) {
    const status = BOOKED_STATUS[adId];
    const isBooked = status.isBooked;
    const endDate = status.endDate ? new Date(status.endDate) : null;
    
    let statusHtml = '<span class="status-available">可预订</span>';
    if (isBooked && endDate) {
        const formattedDate = endDate.toLocaleDateString('zh-CN', {
            year: 'numeric',
            month: 'long',
            day: 'numeric'
        });
        statusHtml = `
            <span class="status-booked">
                已预订
                <span class="end-date">到期时间：${formattedDate}</span>
            </span>
        `;
    }
    
    let priceHtml = '';
    if (adConfig.prices.monthly) {
        priceHtml += `<p>月付价格：<span id="${adId}-monthly">计算中...</span> 元/月</p>`;
    }
    if (adConfig.prices.yearly) {
        priceHtml += `<p>年付价格：<span id="${adId}-yearly">计算中...</span> 元/年</p>`;
    }
    
    let bookingButtons = '';
    if (!isBooked) {
        if (adConfig.prices.monthly && adConfig.prices.yearly) {
            bookingButtons = `
                <div class="booking-options">
                    <button class="book-btn" onclick="bookAd('${adId}', 'monthly')">月付预订</button>
                    <button class="book-btn" onclick="bookAd('${adId}', 'yearly')">年付预订</button>
                </div>
            `;
        } else if (adConfig.prices.monthly) {
            bookingButtons = `<button class="book-btn" onclick="bookAd('${adId}', 'monthly')">月付预订</button>`;
        } else if (adConfig.prices.yearly) {
            bookingButtons = `<button class="book-btn" onclick="bookAd('${adId}', 'yearly')">年付预订</button>`;
        }
    }
    
    return `
        <div class="ad-card" id="${adId}">
            <h2>${adConfig.title}</h2>
            <div class="ad-preview">
                <a href="${adConfig.image}" target="_blank">
                    <img src="${adConfig.image}" alt="${adConfig.title}预览" class="preview-img">
                    <div class="preview-overlay">
                        <span class="preview-hint">点击查看大图</span>
                        <div class="ad-dimensions">尺寸：${adConfig.dimensions}</div>
                    </div>
                </a>
            </div>
            <div class="ad-stats">
                ${priceHtml}
            </div>
            <div class="ad-status" id="${adId}-status">
                ${statusHtml}
            </div>
            ${bookingButtons}
        </div>
    `;
}

// 初始化广告位
function initAdPositions() {
    const adPositionsContainer = document.querySelector('.ad-positions');
    if (!adPositionsContainer) return;
    
    let html = '';
    Object.entries(AD_POSITIONS).forEach(([adId, adConfig]) => {
        html += generateAdCardHtml(adId, adConfig);
    });
    
    adPositionsContainer.innerHTML = html;
}

// 获取访问量数据
async function fetchVisitData() {
    try {
        const response = await fetch('info.php');
        if (!response.ok) {
            throw new Error('获取访问量数据失败');
        }
        visitData = await response.json();
        console.log('访问量数据已更新:', visitData);
    } catch (error) {
        console.error('获取访问量数据时出错:', error);
    }
}

// 根据访问量获取价格系数
function getPriceCoefficient(monthlyPV) {
    for (const [key, range] of Object.entries(VISIT_COEFFICIENTS)) {
        if (monthlyPV >= range.min && monthlyPV <= range.max) {
            return range.coefficient;
        }
    }
    return 1; // 默认系数
}

// 计算实际价格
function calculateActualPrice(basePrice, monthlyPV) {
    const coefficient = getPriceCoefficient(monthlyPV);
    return Math.round(basePrice * coefficient);
}

// 更新所有广告位的价格显示
function updateAllAdPrices() {
    console.log('开始更新价格...');
    try {
        Object.entries(AD_POSITIONS).forEach(([adId, adConfig]) => {
            const prices = adConfig.prices;
            
            // 更新月付价格显示
            if (prices.monthly) {
                const monthlyElement = document.getElementById(`${adId}-monthly`);
                if (monthlyElement) {
                    const actualPrice = calculateActualPrice(prices.monthly, visitData.last_month_pv);
                    monthlyElement.textContent = actualPrice.toLocaleString();
                }
            }
            
            // 更新年付价格显示
            if (prices.yearly) {
                const yearlyElement = document.getElementById(`${adId}-yearly`);
                if (yearlyElement) {
                    const actualPrice = calculateActualPrice(prices.yearly, visitData.last_month_pv);
                    yearlyElement.textContent = actualPrice.toLocaleString();
                }
            }
        });
    } catch (error) {
        console.error('更新价格时出错:', error);
    }
}

// 处理广告预订
function bookAd(adPosition, paymentType) {
    const status = BOOKED_STATUS[adPosition];
    if (status.isBooked) {
        alert('该广告位已被预订，请选择其他广告位或等待到期后再预订。');
        return;
    }
    
    const adConfig = AD_POSITIONS[adPosition];
    const basePrice = adConfig.prices[paymentType];
    
    if (!basePrice) {
        alert('该广告位不支持此支付方式');
        return;
    }
    
    const actualPrice = calculateActualPrice(basePrice, visitData.last_month_pv);
    const duration = paymentType === 'yearly' ? 365 : 30;
    const confirmMessage = `您选择的广告位：${adConfig.title}\n支付方式：${paymentType === 'yearly' ? '年付' : '月付'}\n总价格：${actualPrice}元\n\n是否确认预订？`;
    
    if (confirm(confirmMessage)) {
        // 计算到期时间
        const endDate = new Date();
        endDate.setDate(endDate.getDate() + duration);
        
        // 更新预订状态
        BOOKED_STATUS[adPosition] = {
            isBooked: true,
            endDate: endDate.toISOString()
        };
        
        // 重新生成广告位卡片
        const adCard = document.getElementById(adPosition);
        if (adCard) {
            adCard.outerHTML = generateAdCardHtml(adPosition, adConfig);
        }
        
        alert('预订成功！我们的客服人员将尽快与您联系。');
    }
}

// 图片预览功能
function initImagePreview() {
    const modal = document.getElementById('previewModal');
    const modalImg = modal.querySelector('.preview-modal-img');
    const modalTitle = modal.querySelector('.preview-modal-title');
    const modalDimensions = modal.querySelector('.preview-modal-dimensions');
    const closeBtn = modal.querySelector('.preview-close');
    
    // 确保模态框初始状态正确
    modal.style.display = 'none';
    
    // 点击预览图打开模态框
    document.querySelectorAll('.preview-img').forEach(img => {
        img.addEventListener('click', function() {
            const card = this.closest('.ad-card');
            const title = card.querySelector('h2').textContent;
            const dimensions = card.querySelector('.ad-dimensions').textContent;
            
            modalImg.src = this.src;
            modalTitle.textContent = title;
            modalDimensions.textContent = dimensions;
            
            // 显示模态框
            modal.style.display = 'flex';
            setTimeout(() => {
                modal.classList.add('show');
            }, 10);
            
            // 禁用滚动
            document.body.style.overflow = 'hidden';
        });
    });
    
    // 点击关闭按钮
    closeBtn.addEventListener('click', function() {
        modal.classList.remove('show');
        setTimeout(() => {
            modal.style.display = 'none';
            document.body.style.overflow = '';
        }, 300);
    });
    
    // 点击模态框背景关闭
    modal.addEventListener('click', function(e) {
        if (e.target === modal) {
            modal.classList.remove('show');
            setTimeout(() => {
                modal.style.display = 'none';
                document.body.style.overflow = '';
            }, 300);
        }
    });
    
    // 按ESC键关闭
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape' && modal.classList.contains('show')) {
            modal.classList.remove('show');
            setTimeout(() => {
                modal.style.display = 'none';
                document.body.style.overflow = '';
            }, 300);
        }
    });
}

// 处理联系表单提交
document.querySelector('.contact-form').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    const data = Object.fromEntries(formData.entries());
    
    // 这里可以添加表单验证逻辑
    
    // 模拟表单提交
    alert('感谢您的咨询！我们的客服人员将尽快与您联系。');
    this.reset();
});

// 确保页面完全加载后再执行
window.onload = async function() {
    console.log('页面加载完成，开始初始化...');
    initAdPositions();
    await fetchVisitData();
    updateAllAdPrices();
    
    // 每5分钟更新一次访问量数据
    setInterval(async () => {
        await fetchVisitData();
        updateAllAdPrices();
    }, 5 * 60 * 1000);
};