153 lines
8.7 KiB
JavaScript
153 lines
8.7 KiB
JavaScript
/* ================= 首页操作引导（2026-10-12） =================
|
||
用户：「给首页加上引导操作步骤」。第一次进首页时，一步一步高亮讲 5 个地方：
|
||
① 头图孕周 ② 孕育工具 ③ 此刻 ④「记一下」圆钮 ⑤「我的」
|
||
· 只走一次：看完或点「跳过」都记 localStorage 'mmbox.coach.v1'，以后不再出（同 onboarding-once-rule）。
|
||
· 调试 / 给人看：URL 带 ?coach=1 每次都出。
|
||
· 不抢别的弹层：授权、欢迎礼、孕期档案、记一下面板、详情页等开着时不计时，
|
||
全部关掉、首页安静 1.5 秒后才开始；引导进行中别的弹层冒出来 → 暂时收起，等它关了从当前步接着讲。
|
||
· 某一步的目标不在页面上（如「此刻」接口没数据整块隐藏）→ 自动跳过这一步，不留空框。
|
||
· 遮罩挂在 #phone 里（跟页面同一个坐标系），z-index 高于所有弹层；滚动交给首页 .screen，引导时锁住。 */
|
||
(function () {
|
||
'use strict';
|
||
const KEY = 'mmbox.coach.v1';
|
||
const FORCE = /[?&]coach=1\b/.test(location.search);
|
||
try { if (!FORCE && localStorage.getItem(KEY)) return; } catch (e) { return; }
|
||
|
||
const phone = document.getElementById('phone');
|
||
const scr = document.getElementById('screen-home');
|
||
if (!phone || !scr) return;
|
||
|
||
/* 样式随脚本走（不动 mama-box.css）。z-index 140：高于 modal(125) / pk-sheet(131)。 */
|
||
const st = document.createElement('style');
|
||
st.textContent =
|
||
'.mb-coach{position:absolute;inset:0;z-index:140;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;-webkit-tap-highlight-color:transparent}' +
|
||
'.mb-coach.show{opacity:1;visibility:visible}' +
|
||
'.mbc-hole{position:absolute;border-radius:18px;box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 0 9999px rgba(40,22,16,.62);transition:left .3s,top .3s,width .3s,height .3s;pointer-events:none}' +
|
||
'.mb-coach.is-moving .mbc-hole,.mb-coach.is-moving .mbc-card{transition:none}' +
|
||
'.mbc-card{position:absolute;left:20px;right:20px;background:#fff;border-radius:18px;padding:16px 18px 12px;box-shadow:0 12px 32px rgba(0,0,0,.18);transition:top .3s}' +
|
||
'.mbc-n{display:block;font-size:12px;color:#B08A7C;margin-bottom:4px}' +
|
||
'.mbc-t{display:block;font-size:17px;color:var(--ink,#2B2320);margin-bottom:6px}' +
|
||
'.mbc-d{margin:0;font-size:14px;line-height:1.6;color:#6B5A53}' +
|
||
'.mbc-act{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}' +
|
||
'.mbc-act button{min-height:40px;min-width:64px;padding:0 16px;border:0;border-radius:20px;font-size:14px;font-weight:600}' +
|
||
'.mbc-skip{background:none;color:#9C8A83}' +
|
||
'.mbc-next{background:var(--brand,#F4593C);color:#fff}' +
|
||
'.screen.mbc-lock{overflow:hidden!important}' +
|
||
'@media (prefers-reduced-motion:reduce){.mbc-hole,.mbc-card,.mb-coach{transition:none}}';
|
||
document.head.appendChild(st);
|
||
|
||
const STEPS = [
|
||
{ sel: '.hero-pane', t: '这是你的孕周', d: '孕几周、离见面还有几天、宝宝现在有多大，每天打开都会更新。' },
|
||
{ sel: '.tool-dock', t: '常用孕育工具', d: '数胎动、孕检日历、体重这些常用工具都在这里，点卡片直接进。' },
|
||
/* 11-03「此刻」换成测一测 · 科普 · 计算器（js/kit.js）；?kit=0 时 #kit 不显示，自动跳过 */
|
||
{ sel: '#kit', t: '测一测 · 科普 · 计算器', d: '按你的孕周，每天推荐一个小测试、一篇科普和实用计算器。' },
|
||
{ sel: '.tab-fab', t: '记一下', d: '想记点什么、找更多工具，点中间这颗按钮。' },
|
||
{ sel: '.tabbar [data-tab="me"]', t: '我的', d: '孕期档案、头像、兜豆和兑换记录都在这里。' }
|
||
];
|
||
|
||
const visible = el => {
|
||
if (!el) return false;
|
||
const r = el.getBoundingClientRect();
|
||
if (!r.width || !r.height) return false;
|
||
const cs = getComputedStyle(el);
|
||
return cs.display !== 'none' && cs.visibility !== 'hidden' && !el.classList.contains('hide');
|
||
};
|
||
// 有别的弹层 / 不在首页 / 页面在后台 → 先别讲
|
||
function busy() {
|
||
if (document.hidden || !scr.classList.contains('is-active')) return true;
|
||
if (document.querySelector('.modal.show,.sheet.show,.detail.show,.pk-sheet.show,.search-layer.show,.bx-reveal.show')) return true;
|
||
const wh = document.getElementById('whPage');
|
||
if (wh && wh.getAttribute('aria-hidden') === 'false') return true;
|
||
return false;
|
||
}
|
||
|
||
let root, hole, card, idx = -1, on = false, timer = 0;
|
||
function build() {
|
||
root = document.createElement('div');
|
||
root.className = 'mb-coach';
|
||
root.setAttribute('role', 'dialog');
|
||
root.setAttribute('aria-modal', 'true');
|
||
root.setAttribute('aria-label', '首页使用引导');
|
||
root.innerHTML = '<i class="mbc-hole" aria-hidden="true"></i>' +
|
||
'<div class="mbc-card"><span class="mbc-n"></span><b class="mbc-t"></b><p class="mbc-d"></p>' +
|
||
'<div class="mbc-act"><button type="button" class="mbc-skip">跳过</button><button type="button" class="mbc-next">下一步</button></div></div>';
|
||
phone.appendChild(root);
|
||
hole = root.querySelector('.mbc-hole');
|
||
card = root.querySelector('.mbc-card');
|
||
root.querySelector('.mbc-skip').addEventListener('click', e => { e.stopPropagation(); done(); });
|
||
root.querySelector('.mbc-next').addEventListener('click', e => { e.stopPropagation(); go(idx + 1); });
|
||
// 点遮罩任意处也算下一步（大靶子）；引导时不让页面跟着滑
|
||
root.addEventListener('click', () => go(idx + 1));
|
||
root.addEventListener('touchmove', e => { if (e.cancelable) e.preventDefault(); }, { passive: false });
|
||
root.addEventListener('wheel', e => e.preventDefault(), { passive: false });
|
||
}
|
||
|
||
function place() {
|
||
const s = STEPS[idx], el = s && document.querySelector(s.sel);
|
||
if (!el || !visible(el)) return false;
|
||
const p = phone.getBoundingClientRect(), r = el.getBoundingClientRect(), pad = 6;
|
||
const x = r.left - p.left - pad, y = r.top - p.top - pad, w = r.width + pad * 2, h = r.height + pad * 2;
|
||
Object.assign(hole.style, { left: x + 'px', top: y + 'px', width: w + 'px', height: h + 'px' });
|
||
hole.style.borderRadius = getComputedStyle(el).borderRadius === '0px' ? '16px' : 'calc(' + getComputedStyle(el).borderRadius + ' + 6px)';
|
||
const live = STEPS.filter(t => visible(document.querySelector(t.sel)));
|
||
root.querySelector('.mbc-n').textContent = (live.indexOf(s) + 1) + ' / ' + live.length;
|
||
root.querySelector('.mbc-t').textContent = s.t;
|
||
root.querySelector('.mbc-d').textContent = s.d;
|
||
root.querySelector('.mbc-next').textContent = live.indexOf(s) === live.length - 1 ? '知道了' : '下一步';
|
||
// 卡片放在目标下方，放不下就放上方
|
||
const ch = card.offsetHeight || 140, below = y + h + 12, ph = p.height;
|
||
card.style.top = (below + ch < ph - 16 ? below : Math.max(16, y - ch - 12)) + 'px';
|
||
return true;
|
||
}
|
||
|
||
function go(i) {
|
||
while (i < STEPS.length) {
|
||
const el = document.querySelector(STEPS[i].sel);
|
||
if (visible(el)) break;
|
||
i++;
|
||
}
|
||
if (i >= STEPS.length) return done();
|
||
idx = i;
|
||
const el = document.querySelector(STEPS[i].sel);
|
||
// 首页里的目标先滚到视口中间（底栏不在 .screen 里，不用滚）
|
||
if (scr.contains(el)) {
|
||
const sr = scr.getBoundingClientRect(), r = el.getBoundingClientRect();
|
||
const want = scr.scrollTop + (r.top - sr.top) - Math.max(80, (sr.height - r.height) / 2 - 60);
|
||
scr.scrollTop = Math.max(0, want);
|
||
}
|
||
root.classList.add('is-moving');
|
||
requestAnimationFrame(() => requestAnimationFrame(() => { place(); root.classList.remove('is-moving'); }));
|
||
}
|
||
|
||
function show() {
|
||
if (!root) build();
|
||
on = true;
|
||
root.classList.add('show');
|
||
scr.classList.add('mbc-lock');
|
||
go(idx < 0 ? 0 : idx);
|
||
}
|
||
function hideTmp() { if (root) root.classList.remove('show'); scr.classList.remove('mbc-lock'); on = false; }
|
||
function done() {
|
||
try { localStorage.setItem(KEY, String(Date.now())); } catch (e) { /* 存不了就只是下次还会出 */ }
|
||
clearInterval(timer);
|
||
if (root) { root.classList.remove('show'); setTimeout(() => root.remove(), 300); }
|
||
scr.classList.remove('mbc-lock');
|
||
idx = STEPS.length;
|
||
}
|
||
|
||
// 每 0.5 秒看一眼：首页安静满 1.5 秒才开讲；讲到一半有弹层冒出来就先收起
|
||
let quiet = 0;
|
||
function tick() {
|
||
if (idx >= STEPS.length) return;
|
||
if (busy()) { quiet = 0; if (on) hideTmp(); return; }
|
||
if (on) return;
|
||
if ((quiet += 500) >= 1500) show();
|
||
}
|
||
// 等孕周数据回来（头图有真实数字）再开始；最多等 4 秒
|
||
let started = false;
|
||
const start = () => { if (started) return; started = true; timer = setInterval(tick, 500); };
|
||
addEventListener('mb-preg', () => setTimeout(start, 600));
|
||
setTimeout(start, 4000);
|
||
addEventListener('resize', () => { if (on) place(); });
|
||
})();
|