You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <link rel="icon" href="/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>新时代、新龙头、新节奏</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "Microsoft Yahei", sans-serif; } /* 落地页 */ .landing-page { width: 375px; height: auto; margin: 0 auto; overflow-y: auto; overflow-x: hidden; } .landing-page img { width: 100%; height: auto; display: block; } /* 弹窗 */ .popup { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); justify-content: center; align-items: center; z-index: 999; } .popup.show { display: flex; } .popup-content { width: 320px; text-align: center; } .popup-content img { width: 100%; height: auto; margin-bottom: 15px; } .popup-content img#closeBtn { width: 60%; margin-bottom: 5px; } </style> </head> <body> <!-- 落地页 --> <div class="landing-page"> <img id="landingImage" /> </div>
<!-- 弹窗样式 --> <div class="popup" id="popup"> <div class="popup-content"> <img id="popupImage" /> <img src="./assent/开心收下.png" id="closeBtn"/> </div> </div>
<script type="module"> // 导入API函数 import { getImageApi, acceptCardApi } from './src/api/member.js';
// 获取弹窗元素 const landingImage = document.getElementById('landingImage'); const popupImage = document.getElementById('popupImage'); const popup = document.getElementById("popup"); const closeBtn = document.getElementById("closeBtn");
// 防抖多次点击 let isClickable = true;
// 记录页面打开时间 const pageOpenTime = getBeijingTime();
// 获取北京时间（东八区）的函数 function getBeijingTime() { const date = new Date(); const beijingTime = new Date(date.getTime() + 8 * 60 * 60 * 1000); return beijingTime.toISOString(); }
// 缓存键名 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() { try { const res = await getImageApi(); if (res.code == 200 && res.data) { return { landingImageUrl: res.data.landingImage, popupImageUrl: res.data.popupImage }; } 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();
// 确定最终落地图和是否展示弹窗 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('页面初始化失败'); } };
// 点击"开心收下"，关闭弹窗 closeBtn.addEventListener('click', closePopupAndSendData);
// 点击弹窗空白处，关闭弹窗 popup.addEventListener('click', function(e) { if (e.target === popup) { closePopupAndSendData(); } });
// 关闭弹窗并发送数据 async function closePopupAndSendData() { if (!isClickable) { return; }
// 关闭弹窗 popup.classList.remove("show"); // 发送页面打开时间到后端 try { await acceptCardApi({ openTime: pageOpenTime, }); console.log('发送成功', pageOpenTime); } catch (error) { console.error('发送失败', pageOpenTime); } // 设置点击冷却 isClickable = false; setTimeout(() => { isClickable = true; }, 10000); } </script> </body></html>
|
