first commit
This commit is contained in:
381
script.js
Normal file
381
script.js
Normal file
@@ -0,0 +1,381 @@
|
||||
// 广告位配置
|
||||
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);
|
||||
};
|
||||
Reference in New Issue
Block a user