guke
0db5a798cd
Co-authored-by: guke <guke@autohome.com.cn> Co-authored-by: zhuzihao <zhuzihao@wonderable.ai> Co-authored-by: wuqi <wuqi@wonderable.ai> Co-authored-by: chenshuobo <chenshuobo@wonderable.ai> Co-authored-by: liujiahui <liujiahui@wonderable.ai> Reviewed-on: #106
297 lines
14 KiB
HTML
297 lines
14 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||
<meta name="format-detection" content="telephone=no">
|
||
<title>傻瓜比价 · 下载</title>
|
||
<style>
|
||
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
|
||
html,body { height:100%; }
|
||
button { border:0; background:none; color:inherit; font:inherit; cursor:pointer; }
|
||
body {
|
||
min-height:100vh;
|
||
display:flex; align-items:center; justify-content:center;
|
||
background:#000;
|
||
font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue",sans-serif;
|
||
}
|
||
/* 设备框：桌面预览成 375×667 卡片；真机（≤430）铺满全屏 */
|
||
.device {
|
||
position:relative; flex:0 0 auto;
|
||
width:375px; height:667px;
|
||
overflow:hidden; border-radius:32px;
|
||
background:#FFF4CD;
|
||
box-shadow:0 20px 60px rgba(0,0,0,.5);
|
||
color:#fff;
|
||
}
|
||
.download-landing {
|
||
position:absolute; inset:0; z-index:0; overflow:hidden;
|
||
background:
|
||
url('coupon-page-bg.png') center center / cover no-repeat,
|
||
#FFF4CD;
|
||
color:#1A1A1A; text-align:center;
|
||
}
|
||
.download-content {
|
||
position:relative; z-index:1; height:100%;
|
||
padding:82px 20px 0;
|
||
display:flex; flex-direction:column; align-items:center; overflow:hidden;
|
||
}
|
||
.brand-lockup {
|
||
display:flex; align-items:center; justify-content:center; gap:16px;
|
||
}
|
||
.ad-logo {
|
||
width:53px; height:53px; border-radius:13px; display:block;
|
||
box-shadow:0 10px 24px rgba(255,179,0,.24);
|
||
}
|
||
.ad-title {
|
||
color:#1A1A1A; font-size:32px; font-weight:800; line-height:1.15;
|
||
letter-spacing:0; white-space:nowrap;
|
||
}
|
||
.ad-subtitle {
|
||
margin-top:22px; max-width:100%;
|
||
color:#000; font-size:18px; font-weight:400; line-height:1.25;
|
||
display:flex; align-items:center; justify-content:center; gap:10px; white-space:nowrap;
|
||
}
|
||
.ad-subtitle::before, .ad-subtitle::after {
|
||
content:""; width:5px; height:5px; border-radius:50%; background:#000; flex:0 0 auto;
|
||
}
|
||
.bottom-area {
|
||
position:relative; z-index:2; width:100%; max-width:266px;
|
||
margin-top:11px;
|
||
display:grid; grid-template-columns:1fr; justify-items:stretch; align-content:center; gap:10px;
|
||
}
|
||
.download-btn {
|
||
width:100%; height:39px; border-radius:22px; color:#1A1A1A;
|
||
font-family:inherit; font-size:14px; line-height:1; font-weight:700; letter-spacing:0;
|
||
display:flex; align-items:center; justify-content:center;
|
||
}
|
||
.download-btn.primary {
|
||
background:linear-gradient(180deg,#FFE066 0%,#FFC400 100%);
|
||
box-shadow:inset 0 1px 0 rgba(255,255,255,.82), 0 7px 18px rgba(255,179,0,.24);
|
||
}
|
||
.download-btn.secondary {
|
||
background:#fff; border:1px solid #DDD; color:#1A1A1A; font-size:13px;
|
||
box-shadow:0 2px 8px rgba(122,79,0,.08);
|
||
}
|
||
.download-btn:active { transform:translateY(1px); }
|
||
/* 底部两条卖点文案，压在背景插画两张卡片下方 */
|
||
/* 卖点卡：CSS 实体卡片（白底+图标），不再靠底图死框，字自适应（对齐 WeChat.html PR siyi 改版）*/
|
||
.download-feature-card {
|
||
position:absolute; z-index:2; pointer-events:none;
|
||
height:62px; padding:0 10px; border-radius:22px;
|
||
background:#FFFAEE;
|
||
box-shadow:inset 0 1px 0 rgba(255,255,255,.86), 0 6px 14px rgba(122,79,0,.08);
|
||
display:flex; align-items:center; gap:8px; color:#1A1A1A;
|
||
}
|
||
.download-feature-card.left { left:24px; top:576px; width:146px; }
|
||
.download-feature-card.right { left:199px; top:576px; width:156px; }
|
||
.download-feature-icon {
|
||
width:27px; height:27px; flex:0 0 auto; display:block; color:#FFAE00;
|
||
}
|
||
.download-feature-icon svg {
|
||
display:block; width:100%; height:100%; filter:drop-shadow(0 1px 0 rgba(255,255,255,.7));
|
||
}
|
||
.download-feature-copy {
|
||
min-width:0; flex:1 1 auto; text-align:left; white-space:nowrap; letter-spacing:0;
|
||
}
|
||
.download-feature-title {
|
||
display:block; font-size:13px; font-weight:800; line-height:1.12; letter-spacing:0;
|
||
}
|
||
.download-feature-desc {
|
||
display:block; margin-top:5px; color:#5A3A00; font-size:10px; font-weight:400; line-height:1.1;
|
||
}
|
||
/* 微信内"去浏览器打开"引导蒙层 */
|
||
.download-guide-layer {
|
||
position:absolute; inset:0; z-index:30; display:none;
|
||
background:rgba(0,0,0,.85); color:#fff; /* 半透明黑：透出底层（新版）下载页，隐约可见 */
|
||
}
|
||
.download-guide-layer.show { display:block; }
|
||
.download-guide-arrow {
|
||
position:absolute; top:17px; right:9px; width:80px; height:60px;
|
||
}
|
||
.download-guide-arrow-svg {
|
||
display:block; width:100%; height:100%; overflow:hidden; shape-rendering:geometricPrecision;
|
||
}
|
||
.download-guide-title {
|
||
position:absolute; top:129px; right:16px; width:218px; margin:0;
|
||
color:#fff; font-size:17px; font-weight:800; line-height:1.32; letter-spacing:0;
|
||
text-align:right; text-shadow:0 2px 8px rgba(0,0,0,.36);
|
||
}
|
||
.download-guide-title .guide-dots { color:#FFD95A; letter-spacing:4px; }
|
||
.download-guide-title .guide-highlight { color:#FFD95A; white-space:nowrap; }
|
||
.download-guide-title .guide-final {
|
||
display:block; margin-top:10px; color:rgba(255,255,255,.94);
|
||
font-size:13px; font-weight:700; line-height:1.38;
|
||
}
|
||
.download-guide-title .guide-target { color:#FFD95A; white-space:nowrap; }
|
||
.guide-dismiss {
|
||
position:absolute; bottom:30px; left:0; right:0; text-align:center;
|
||
font-size:14px; color:#fff; opacity:.75;
|
||
}
|
||
.toast {
|
||
position:absolute; left:50%; bottom:118px; z-index:20;
|
||
transform:translateX(-50%) translateY(12px);
|
||
padding:9px 14px; border-radius:12px; background:rgba(0,0,0,.78);
|
||
color:#fff; font-size:14px; opacity:0; pointer-events:none;
|
||
transition:opacity .2s ease, transform .2s ease;
|
||
}
|
||
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
|
||
@media (max-width:430px) {
|
||
/* 真机:宽满屏、高按 375:667 锁比例(不拉伸变形),顶对齐、底部留白用底色填。
|
||
这样底图(含价格卡)与卖点卡片同处 667 坐标基准,卡片用回 top:576,不再相互错位/遮挡。 */
|
||
body { align-items:flex-start; background:#FFF4CD; }
|
||
.device { width:100vw; height:calc(100vw * 667 / 375); border-radius:0; box-shadow:none; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<main class="device" aria-label="傻瓜比价下载页">
|
||
<section class="download-landing" aria-label="傻瓜比价下载页">
|
||
<div class="download-content">
|
||
<div class="brand-lockup">
|
||
<img class="ad-logo" src="sb-brand.png" alt="傻瓜比价">
|
||
<h1 class="ad-title">傻瓜比价</h1>
|
||
</div>
|
||
<p class="ad-subtitle">跨平台比价，用傻瓜</p>
|
||
<div class="bottom-area" aria-label="下载入口">
|
||
<button class="download-btn primary" id="dlbtn" type="button">应用商店下载</button>
|
||
<button class="download-btn secondary" id="dlbtn2" type="button">官网下载</button>
|
||
</div>
|
||
</div>
|
||
<div class="download-feature-card left" aria-label="优惠券轻松领，羊毛全都不错过">
|
||
<span class="download-feature-icon" aria-hidden="true">
|
||
<svg viewBox="0 0 40 32" focusable="false">
|
||
<path d="M5 5h30a3 3 0 0 1 3 3v5.2a4.8 4.8 0 0 0 0 9.6V24a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3v-1.2a4.8 4.8 0 0 0 0-9.6V8a3 3 0 0 1 3-3Z" fill="currentColor"/>
|
||
<path d="M20 10v12" fill="none" stroke="#FFF7CF" stroke-width="3" stroke-linecap="round"/>
|
||
</svg>
|
||
</span>
|
||
<span class="download-feature-copy">
|
||
<span class="download-feature-title">优惠券轻松领</span>
|
||
<span class="download-feature-desc">羊毛全都不错过</span>
|
||
</span>
|
||
</div>
|
||
<div class="download-feature-card right" aria-label="一键全网找底价，再也不用费力切屏">
|
||
<span class="download-feature-icon" aria-hidden="true">
|
||
<svg viewBox="0 0 40 32" focusable="false">
|
||
<rect x="5" y="16" width="8" height="11" rx="2" fill="currentColor"/>
|
||
<rect x="16" y="9" width="8" height="18" rx="2" fill="currentColor"/>
|
||
<rect x="27" y="3" width="8" height="24" rx="2" fill="currentColor"/>
|
||
</svg>
|
||
</span>
|
||
<span class="download-feature-copy">
|
||
<span class="download-feature-title">一键全网找底价</span>
|
||
<span class="download-feature-desc">再也不用费力切屏</span>
|
||
</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 微信内引导：跳出微信去浏览器 -->
|
||
<div class="download-guide-layer" id="wxGuide" role="dialog" aria-modal="true" aria-labelledby="wxGuideTitle">
|
||
<div class="download-guide-arrow" aria-hidden="true">
|
||
<svg class="download-guide-arrow-svg" viewBox="0 0 80 60" focusable="false">
|
||
<path d="M0 60 C16 32 39 15 66 15" fill="none" stroke="#FFD95A" stroke-width="5.5" stroke-linecap="round"/>
|
||
<path d="M59 5 L77 14 L63 31" fill="none" stroke="#FFD95A" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</svg>
|
||
</div>
|
||
<h2 class="download-guide-title" id="wxGuideTitle">
|
||
点击右上角 <span class="guide-dots">···</span><br>
|
||
选择「<span class="guide-highlight">在浏览器打开</span>」
|
||
<span class="guide-final">在浏览器里按提示<span class="guide-target">去应用商店下载</span></span>
|
||
</h2>
|
||
<!-- <div class="guide-dismiss" id="wxGuideDismiss">我知道了 ✕</div> -->
|
||
</div>
|
||
|
||
<div class="toast" id="toast" role="status" aria-live="polite"></div>
|
||
</main>
|
||
|
||
<script>
|
||
// ===== 应用商店跳转：用包名（App 唯一标识）定位到傻瓜比价的商店下载页 =====
|
||
// 主：market:// 唤起手机自带应用市场（华为/小米/OV）；兜底：应用宝网页（任何浏览器都能开）。
|
||
var PKG = "com.jishisongfu.shaguabijia";
|
||
var MARKET_URL = "market://details?id=" + PKG;
|
||
var YYB_URL = "https://a.app.qq.com/o/simple.jsp?pkgname=" + PKG;
|
||
var ua = navigator.userAgent || "";
|
||
var isWeChat = /MicroMessenger/i.test(ua);
|
||
var isIOS = /iPhone|iPad|iPod/i.test(ua);
|
||
var ref = new URLSearchParams(location.search).get("ref"); // 邀请码（来自二维码 URL ?ref=）
|
||
|
||
// ===== 指纹归因兜底：页面加载即上报访问者指纹，后端存 invite_fingerprint 表 =====
|
||
// 当 APK 首启读剪贴板失败（被覆盖）时，客户端用 (IP+屏幕+UA 机型) 反查 7 天内最近一条 → 撞出原邀请人。
|
||
// 任何失败都 silent，不影响下载主流程。
|
||
if (ref) {
|
||
// screen 报【物理像素】= CSS 像素 × devicePixelRatio，跟 Android dm.widthPixels 对齐，否则撞不上库。
|
||
var _dpr = window.devicePixelRatio || 1;
|
||
var _sw = Math.round(screen.width * _dpr);
|
||
var _sh = Math.round(screen.height * _dpr);
|
||
fetch("/api/v1/invite/landing-track", {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({ ref: ref, screen: _sw + "x" + _sh }),
|
||
}).catch(function () {}); // silent，绝不阻断下载
|
||
}
|
||
|
||
// ===== 把邀请码写进剪贴板，APK 首启读出完成归因（deferred deeplink）=====
|
||
// 浏览器要求：必须在用户点击手势里调用 + HTTPS 下才允许写。
|
||
function legacyCopy(payload) { // 老 webview / 无 clipboard API 兜底
|
||
try {
|
||
var ta = document.createElement("textarea");
|
||
ta.value = payload; ta.style.position = "fixed"; ta.style.top = "-1000px"; ta.style.opacity = "0";
|
||
document.body.appendChild(ta); ta.focus(); ta.select();
|
||
document.execCommand("copy"); document.body.removeChild(ta);
|
||
} catch (e) {}
|
||
}
|
||
function copyInviteCode() { // 返回 Promise，完成后才下载，避免异步写入被打断
|
||
if (!ref) return Promise.resolve();
|
||
var payload = "SGBJ_INVITE:" + ref;
|
||
legacyCopy(payload); // 同步兜底：在用户手势内立刻 execCommand 写一次（最可靠）
|
||
if (navigator.clipboard && navigator.clipboard.writeText) {
|
||
return navigator.clipboard.writeText(payload).catch(function () {});
|
||
}
|
||
return Promise.resolve();
|
||
}
|
||
// 跳应用商店：先 market:// 唤起自带商店；2.5s 内页面没切后台 → 兜底跳应用宝网页，不让用户卡死。
|
||
function openStore() {
|
||
var jumped = false;
|
||
document.addEventListener("visibilitychange", function () { if (document.hidden) jumped = true; });
|
||
window.addEventListener("pagehide", function () { jumped = true; });
|
||
window.addEventListener("blur", function () { jumped = true; });
|
||
window.location.href = MARKET_URL;
|
||
setTimeout(function () { if (!jumped) window.location.href = YYB_URL; }, 2500);
|
||
}
|
||
|
||
// ===== 微信内引导蒙层 =====
|
||
var wxGuide = document.getElementById("wxGuide");
|
||
function showWxGuide() { wxGuide.classList.add("show"); }
|
||
function hideWxGuide() { wxGuide.classList.remove("show"); }
|
||
// document.getElementById("wxGuideDismiss").addEventListener("click", hideWxGuide); // 「我知道了 ✕」已注释隐藏
|
||
if (isWeChat) showWxGuide(); // 微信里一进页面就提示去浏览器（微信内下载必被拦）
|
||
|
||
function showToast(text) {
|
||
var toast = document.getElementById("toast");
|
||
toast.textContent = text; toast.classList.add("show");
|
||
clearTimeout(showToast.timer);
|
||
showToast.timer = setTimeout(function () { toast.classList.remove("show"); }, 1400);
|
||
}
|
||
|
||
// ===== 应用商店下载：微信内引导去浏览器；iOS 提示；安卓写邀请码 + 跳应用商店 =====
|
||
function handleDownload() {
|
||
if (isWeChat) { showWxGuide(); return; }
|
||
if (isIOS) { alert("iOS 版即将上线，请前往 App Store 搜索「傻瓜比价」"); return; }
|
||
copyInviteCode(); // 先把邀请码写进剪贴板（供 App 首启归因），链路丢了还有 landing-track 指纹兜底
|
||
openStore();
|
||
}
|
||
// ===== 官网下载：微信/iOS 同上引导；安卓直接跳 APK 直链 → 弹系统下载弹窗 =====
|
||
// APK_URL 跟随页面 host：本地走 LAN、生产走 app-api.shaguabijia.com（见邀请功能文档约定）。
|
||
var APK_URL = location.origin + "/media/shaguabijia.apk";
|
||
function handleWebsiteDownload() {
|
||
if (isWeChat) { showWxGuide(); return; }
|
||
if (isIOS) { alert("iOS 版即将上线，请前往 App Store 搜索「傻瓜比价」"); return; }
|
||
copyInviteCode(); // 同样先写邀请码进剪贴板（供 App 首启归因）
|
||
window.location.href = APK_URL;
|
||
}
|
||
document.getElementById("dlbtn").addEventListener("click", handleDownload);
|
||
document.getElementById("dlbtn2").addEventListener("click", handleWebsiteDownload);
|
||
</script>
|
||
</body>
|
||
</html>
|