Browse Source

暂存和弹窗规则添加

milestone-20251020-双11活动
liruiqiang 3 months ago
parent
commit
5615d494a7
  1. 64
      index.html

64
index.html

@ -85,6 +85,9 @@
// 防抖多次点击
let isClickable = true;
// 记录页面打开时间
const pageOpenTime = getBeijingTime();
// 获取北京时间(东八区)的函数
function getBeijingTime() {
const date = new Date();
@ -92,8 +95,21 @@
return beijingTime.toISOString();
}
// 记录页面打开时间
const pageOpenTime = getBeijingTime();
// 缓存键名
const CACHE_KEY = 'landing_image';
// 从缓存获取落地图
function getLandingImageFromCache() {
const cached = localStorage.getItem(CACHE_KEY);
return cached ? JSON.parse(cached) : null;
}
// 将落地图存入缓存
function saveLandingImageToCache(imageUrl) {
localStorage.setItem(CACHE_KEY, JSON.stringify({
url: imageUrl,
}));
}
// 获取图片方法
async function getImage() {
@ -106,25 +122,51 @@
};
} else {
console.warn('网络错误,请稍后重试');
return null;
}
} catch (error) {
console.error('网络错误,请稍后重试');
return {
landingImageUrl: './assent/8折页面.png',
popupImageUrl: './assent/弹窗样式2.png'
};
}
}
// 加载
window.onload = async function () {
try {
// 缓存
const cachedImage = getLandingImageFromCache();
// 接口
const imagePaths = await getImage();
// landingImage.src = imagePaths.landingImageUrl;
// popupImage.src = imagePaths.popupImageUrl;
landingImage.src = './assent/8折页面.png';
popupImage.src = './assent/弹窗样式2.png';
// 弹窗展示
setTimeout(() => {
popup.classList.add("show");
}, 500);
// 确定最终落地图和是否展示弹窗
let finalLandingUrl;
let shouldShowPopup = false;
if (imagePaths?.landingImageUrl) {
finalLandingUrl = imagePaths.landingImageUrl;
if (!cachedImage || cachedImage.url !== finalLandingUrl) {
shouldShowPopup = true;
saveLandingImageToCache(finalLandingUrl);
popupImage.src = imagePaths.popupImageUrl;
}
} else {
// 接口失败时使用缓存(如果有)
finalLandingUrl = cachedImage?.url;
}
// 4. 设置落地图
landingImage.src = finalLandingUrl;
// 5. 新增:根据对比结果决定是否展示弹窗
if (shouldShowPopup) {
setTimeout(() => {
popup.classList.add("show");
}, 500);
}
} catch (err) {
console.error('页面初始化失败');
}

Loading…
Cancel
Save