381 lines
12 KiB
JavaScript
381 lines
12 KiB
JavaScript
// 广告位配置
|
||
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);
|
||
};
|