v26110250 孕妈广场加底部 Tab：孕妈广场 / 记一下 / 返回兜爸（同数胎动）
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
deploy
@@ -289,7 +289,7 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
|
||||
.nc .tp{display:block;margin-top:4px;font-size:11.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||||
.nc .tp{color:var(--kt)}
|
||||
|
||||
.end{padding:22px 0 calc(26px + var(--safe-b));text-align:center}
|
||||
.end{padding:22px 0 calc(116px + var(--safe-b));text-align:center}
|
||||
.end b{display:block;font-size:12px;font-weight:600;color:#C2ABA4;letter-spacing:2px}
|
||||
.end small{display:block;margin-top:8px;font-size:10.5px;color:#CDBBB5;opacity:.85}
|
||||
|
||||
@@ -500,6 +500,66 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
|
||||
|
||||
.toast{position:fixed;left:50%;top:44%;z-index:80;max-width:280px;padding:10px 16px;border-radius:12px;background:rgba(40,30,28,.86);color:#fff;font-size:13.5px;line-height:1.6;text-align:center;transform:translate(-50%,8px);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
|
||||
.toast.show{opacity:1;transform:translate(-50%,0)}
|
||||
|
||||
/* ---------- 底部胶囊 Tab（11-03 用户：「主页面里加上返回兜爸和记一下那个 tab，就跟数胎动一样」）
|
||||
照数胎动 /taidong/ 的最终样式：悬浮药丸 + 中间「记一下」橙色圆钮（玻璃顶部挖缺口坐进去）+ 右边「返回兜爸」（有真头像就显示头像 + 小房子角标）。
|
||||
z-index 30：详情 / 收藏 / 投稿 / 弹层都在 35 以上，打开时自然盖住它。 ---------- */
|
||||
.tab-fade{position:fixed;left:0;right:0;bottom:0;z-index:29;pointer-events:none;height:calc(96px + var(--safe-b));background:linear-gradient(180deg,rgba(255,246,241,0),rgba(255,246,241,.75))}
|
||||
.tabbar{position:fixed;left:16px;right:16px;bottom:calc(22px + var(--safe-b));height:62px;z-index:30;border-radius:31px;padding:0 6px;display:grid;grid-template-columns:repeat(3,1fr)}
|
||||
.tabbar::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:#FFF9F5;
|
||||
box-shadow:inset 0 0 0 1px rgba(255,255,255,.85),inset 0 1px 0 #fff;
|
||||
-webkit-mask:radial-gradient(circle 31px at 50% 6px,transparent 30.5px,#000 31.5px);mask:radial-gradient(circle 31px at 50% 6px,transparent 30.5px,#000 31.5px)}
|
||||
.tabbar::after{content:"";position:absolute;inset:0;z-index:-2;border-radius:inherit;pointer-events:none;box-shadow:0 14px 34px rgba(200,100,70,.2),0 2px 6px rgba(200,100,70,.06)}
|
||||
.tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0 0 6px;border:0;background:none;font-family:inherit;color:#A3958D;cursor:pointer;transition:color .22s;-webkit-tap-highlight-color:transparent}
|
||||
.tab.on{color:#F4593C}
|
||||
.t-ico{width:25px;height:25px;display:block;position:relative}
|
||||
.t-svg{display:block;width:100%;height:100%;overflow:visible}
|
||||
.t-svg .tf,.t-svg .tl{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
|
||||
.t-svg .td{fill:currentColor;stroke:none}
|
||||
.tab.on .t-svg .tf{fill:currentColor}
|
||||
.tab.on .t-svg .tl{stroke:#fff}
|
||||
.tab.on .t-svg .td{fill:#fff}
|
||||
.tab .t-txt{font-size:12.5px;font-weight:600;line-height:1.1;letter-spacing:.2px;white-space:nowrap}
|
||||
.tab.on .t-txt{font-weight:800}
|
||||
.tab::after{content:"";position:absolute;left:50%;bottom:6px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:#F4593C;opacity:0}
|
||||
.tab.on::after{opacity:1}
|
||||
.tab-fab::after{display:none}
|
||||
.tab-fab .fab{position:absolute;left:50%;top:-20px;width:52px;height:52px;margin-left:-26px;border-radius:50%;display:grid;place-items:center;overflow:visible;
|
||||
background:linear-gradient(150deg,#FF8A6E,#F4593C);box-shadow:0 6px 14px rgba(244,89,60,.32),inset 0 1px 0 rgba(255,255,255,.3);transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
|
||||
.tab-fab .fab::before{content:"";display:block;width:20px;height:20px;opacity:.28;border-radius:2px;
|
||||
background:linear-gradient(#fff,#fff) center/100% 3px no-repeat,linear-gradient(#fff,#fff) center/3px 100% no-repeat}
|
||||
.tab-fab:active .fab{transform:scale(.9)}
|
||||
.fab-w{position:absolute;left:50%;top:50%;transform:translate(calc(-50% - 5px),-54%) rotate(-8deg);display:flex;align-items:center;white-space:nowrap;font-weight:900;font-style:normal;color:#4A1E14;line-height:1;pointer-events:none;
|
||||
text-shadow:1.6px 0 #fff,-1.6px 0 #fff,0 1.6px #fff,0 -1.6px #fff,1.2px 1.2px #fff,-1.2px 1.2px #fff,1.2px -1.2px #fff,-1.2px -1.2px #fff,0 3px 4px rgba(120,30,10,.25)}
|
||||
.fab-w i{font-style:normal;font-size:31px}
|
||||
.fab-w em{font-style:normal;font-size:12.5px;line-height:1;margin:9px 0 0;letter-spacing:-.5px}
|
||||
.fab-w s{text-decoration:none;font-size:20px;display:inline-block;transform:skewX(-8deg)}
|
||||
.tab-fab .t-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
|
||||
#tabHome .t-ico{margin-bottom:6px}
|
||||
#tabHome .t-txt{font-size:11.5px;font-weight:600}
|
||||
.tab-avimg{position:absolute;inset:-3px;width:calc(100% + 6px);height:calc(100% + 6px);border-radius:50%;object-fit:cover;display:none;box-shadow:0 3px 10px rgba(226,105,74,.38)}
|
||||
.tab-hm{position:absolute;right:-8px;bottom:-5px;width:15px;height:15px;z-index:1;border-radius:50%;display:none;background:linear-gradient(150deg,#E2694A,#C24E31);box-shadow:0 0 0 1.5px #FFF6F1}
|
||||
.tab-hm svg{display:block;width:10px;height:10px;margin:2.5px}
|
||||
.t-ico.has-av .tab-avimg,.t-ico.has-av .tab-hm{display:block}
|
||||
.t-ico.has-av .t-svg{visibility:hidden}
|
||||
.t-ico.has-av::before{content:"";position:absolute;inset:-6px;border-radius:50%;z-index:-1;pointer-events:none;
|
||||
background:conic-gradient(from 0deg,rgba(226,105,74,0) 0deg,#F09A72 90deg,#E2694A 200deg,rgba(226,105,74,0) 300deg);
|
||||
-webkit-mask:radial-gradient(circle,transparent 61%,#000 63%,#000 72%,transparent 74%);mask:radial-gradient(circle,transparent 61%,#000 63%,#000 72%,transparent 74%)}
|
||||
/* 「记一下」弹层：标题一行 + 4 列工具宫格（同数胎动 / 首页） */
|
||||
.rec-h{display:flex;align-items:baseline;gap:10px;padding:10px 2px 14px}
|
||||
.rec-h b{font-size:19px;font-weight:800;color:#2A1E1E;flex:none}
|
||||
.rec-h span{font-size:12px;color:#9C8F88;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||||
.rec-x{flex:none;align-self:center;width:30px;height:30px;border:0;border-radius:50%;display:grid;place-items:center;background:rgba(120,70,50,.08);color:#9C8F88;cursor:pointer}
|
||||
.rec-x .ic{width:12px;height:12px}
|
||||
.rec-apps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px 6px;padding:4px 0 8px}
|
||||
.rec-app{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;border:0;background:none;font-family:inherit;color:#2A1E1E;cursor:pointer;transition:transform .16s}
|
||||
.rec-app:active{transform:scale(.92)}
|
||||
.rec-app img,.rec-app .rl{width:48px;height:48px;display:block;object-fit:contain;border-radius:14px}
|
||||
.rec-app .rl{display:grid;place-items:center;background:#F6D9CB;color:#C2553A;font-size:19px;font-weight:800}
|
||||
.rec-app span{display:block;max-width:100%;font-size:11.5px;font-weight:600;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||||
.rec-app.off img,.rec-app.off .rl{opacity:.45;filter:grayscale(.4)}
|
||||
.rec-app.off i{position:absolute;top:-8px;left:calc(50% + 4px);font-style:normal;font-size:9px;font-weight:700;line-height:1;padding:3px 5px;border-radius:99px;background:#B9A9A2;color:#fff;white-space:nowrap}
|
||||
.rec-empty{padding:30px 0;text-align:center;font-size:13px;color:#9C8F88}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -545,6 +605,13 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-fade" aria-hidden="true"></div>
|
||||
<nav class="tabbar" id="tabbar">
|
||||
<button class="tab on" id="tabPlaza" type="button"><span class="t-ico"><svg class="t-svg" viewBox="0 0 24 24" aria-hidden="true"><path class="tf" d="M4 6.6A2.6 2.6 0 0 1 6.6 4h10.8A2.6 2.6 0 0 1 20 6.6v7.8a2.6 2.6 0 0 1-2.6 2.6H11l-4.2 3.2c-.4.3-.9 0-.9-.4V17h0A2.6 2.6 0 0 1 4 14.4z"/><path class="tl" d="M8.5 9.4h7M8.5 12.6h4.4"/></svg></span><span class="t-txt">孕妈广场</span></button>
|
||||
<button class="tab tab-fab" id="tabRec" type="button"><span class="fab"><b class="fab-w" aria-hidden="true"><i>记</i><em>一下</em><s>!</s></b></span><span class="t-txt">记一下</span></button>
|
||||
<button class="tab" id="tabHome" type="button"><span class="t-ico" id="tabAv"><svg class="t-svg" viewBox="0 0 24 24" aria-hidden="true"><path class="tf" d="M4 10.4 12 4l8 6.4V18a2.4 2.4 0 0 1-2.4 2.4H6.4A2.4 2.4 0 0 1 4 18z"/><path class="tl" d="M9.8 20.2v-4.4a2.2 2.2 0 0 1 4.4 0v4.4"/></svg></span><span class="t-txt">返回兜爸</span></button>
|
||||
</nav>
|
||||
|
||||
<div id="fvp" aria-hidden="true">
|
||||
<div class="nav"><button class="bk" id="fvBack" type="button" aria-label="返回"><svg class="ic"><use href="#i-back"/></svg></button><h1><span>我的收藏</span></h1><i class="nsp"></i></div>
|
||||
<div id="fvs"><div class="fvh" id="fvh"></div><div class="wf" id="fvw"><div class="col"></div><div class="col"></div></div></div>
|
||||
@@ -581,10 +648,10 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
|
||||
<div id="sheet" role="dialog" aria-modal="true"><i class="sg"></i><div class="sbd" id="sbd"></div></div>
|
||||
<div class="toast" id="toast"></div>
|
||||
|
||||
<script src="topics.js?v=26110249"></script>
|
||||
<script src="data.js?v=26110249"></script>
|
||||
<script src="feed.js?v=26110249"></script>
|
||||
<script src="ceshi/meta.js?v=26110249"></script>
|
||||
<script src="topics.js?v=26110250"></script>
|
||||
<script src="data.js?v=26110250"></script>
|
||||
<script src="feed.js?v=26110250"></script>
|
||||
<script src="ceshi/meta.js?v=26110250"></script>
|
||||
<script>
|
||||
(function () {
|
||||
'use strict';
|
||||
@@ -650,7 +717,7 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
|
||||
var CMD = null, CMERR = false;
|
||||
/* 头像编码：数字 = av/NNNN.webp（旧代码头像）；'av:c012' = av/c012.webp（卡通/可爱卡通）；'/…' = 站内绝对路径（内置头像库 /_bridge/avatars/）；其余 = assets/img/mom/xxx.jpg */
|
||||
var avP = function (a) { return typeof a === 'number' ? 'av/' + ('000' + a).slice(-4) + '.webp' : a.indexOf('av:') === 0 ? 'av/' + a.slice(3) + '.webp' : a.charAt(0) === '/' ? a : '../assets/img/mom/' + a + '.jpg'; };
|
||||
fetch('cm.json?v=26110249').then(function (r) { return r.json(); }).then(function (j) {
|
||||
fetch('cm.json?v=26110250').then(function (r) { return r.json(); }).then(function (j) {
|
||||
CMD = j; if (openId && NBY[openId]) { renderComments(NBY[openId]); syncBar(NBY[openId]); }
|
||||
}).catch(function () { CMERR = true; if (openId && NBY[openId]) renderComments(NBY[openId]); });
|
||||
function commentsOf(n) {
|
||||
@@ -793,12 +860,15 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
|
||||
'<span class="qf-go">去祈福<svg class="ic"><use href="#i-right"/></svg></span></span></button>';
|
||||
}
|
||||
/* 跳祈福树：同首页 jumpApp(QIFU_URL) —— 相对路径、身份走 query、上报 last_app 与分享位置（AGENTS 硬约定 3/6/7/13） */
|
||||
function goQifu() {
|
||||
var url = '/qifu-shu/', q = [], oid = param('openid'), uid = param('unionid');
|
||||
function goQifu() { goApp('/qifu-shu/'); }
|
||||
/* 跳站内其他 H5（祈福树 / 记一下宫格共用）：只走相对路径（AGENTS 13），后台给的完整地址也剥成 /slug/… */
|
||||
function goApp(url) {
|
||||
try { var u = new URL(url, location.href); if (u.origin === location.origin || /(^|\.)yizhezhe\.com$/.test(u.hostname)) url = u.pathname + u.search; } catch (e) {}
|
||||
var q = [], oid = param('openid'), uid = param('unionid');
|
||||
if (oid) q.push('openid=' + encodeURIComponent(oid));
|
||||
if (uid) q.push('unionid=' + encodeURIComponent(uid));
|
||||
if (!oid && !uid) q.push('__no_identity=1');
|
||||
var target = url + '?' + q.join('&');
|
||||
var target = url + (url.indexOf('?') >= 0 ? '&' : '?') + q.join('&');
|
||||
try {
|
||||
if (oid) {
|
||||
var api = '/api/mp/public/last-app?openid=' + encodeURIComponent(oid) + '&url=' + encodeURIComponent(location.origin + url);
|
||||
@@ -1539,6 +1609,62 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
|
||||
} else location.href = homeURL();
|
||||
});
|
||||
|
||||
/* ---------- 底部 Tab：孕妈广场 / 记一下 / 返回兜爸（11-03 用户：「就跟数胎动一样」） ---------- */
|
||||
$('#tabPlaza').addEventListener('click', function () { /* 再点一次：回到顶部；在话题里就退回「全部」 */
|
||||
haptic();
|
||||
if (cur || catF) { catF = ''; selectTopic(''); }
|
||||
$('#sc').scrollTo({ top: 0, behavior: 'smooth' });
|
||||
});
|
||||
$('#tabHome').addEventListener('click', function () { haptic(); location.href = homeURL(); }); /* 广场就在首页仓里，直接回 ../ 带身份，不走 goHome */
|
||||
/* 记一下：和首页「记一下」同一份数据 —— 后台 App 表已上架、category=孕期工具（首页 loadPublishedApps 同规则）；
|
||||
数胎动 16 / 数宫缩 20 / 胎儿估重 15 周前灰掉、点了提示（同首页 STAGE_GATE，孕周取首页写的 mmbox.gcwk.v1，拿不准不拦） */
|
||||
var REC_GATE = { taidong: [16, '数胎动'], gongsuopinlv: [20, '数宫缩'], taierguzhong: [15, '胎儿估重'] }, recApps = null;
|
||||
var myWeek = (function () { try { var g = JSON.parse(localStorage.getItem('mmbox.gcwk.v1') || 'null'); return g && !g.pp && g.w ? +g.w : 0; } catch (e) { return 0; } })();
|
||||
function recLocked(a) { var g = REC_GATE[a.identifier]; return g && myWeek && myWeek < g[0] ? g : null; }
|
||||
function recHTML() {
|
||||
if (!recApps) return '<div class="rec-empty">加载中…</div>';
|
||||
if (!recApps.length) return '<div class="rec-empty">暂时没取到工具，稍后再试</div>';
|
||||
var ok = recApps.filter(function (a) { return !recLocked(a); }), lk = recApps.filter(recLocked); /* 没开放的排到后面（同首页） */
|
||||
return ok.concat(lk).map(function (a) {
|
||||
var g = recLocked(a), nm = a.name || a.identifier || '工具', ic = a.logo || a.icon;
|
||||
return '<button type="button" class="rec-app' + (g ? ' off' : '') + '" data-rid="' + esc(a.identifier || '') + '">' +
|
||||
(ic ? '<img src="' + esc(ic) + '" alt="">' : '<b class="rl">' + esc(nm.slice(0, 1)) + '</b>') +
|
||||
'<span>' + esc(nm) + '</span>' + (g ? '<i>孕' + g[0] + '周开放</i>' : '') + '</button>';
|
||||
}).join('');
|
||||
}
|
||||
function loadRec() {
|
||||
if (recApps || loadRec.busy) return; loadRec.busy = true;
|
||||
fetch('/api/mp/apps?isPublished=1&pageSize=200').then(function (r) { return r.ok ? r.json() : null; }).then(function (d) {
|
||||
recApps = ((d && d.result && d.result.items) || []).filter(function (a) { return a.url && a.category === '孕期工具'; })
|
||||
.sort(function (x, y) { return (y.seq || 0) - (x.seq || 0) || (y.no || 0) - (x.no || 0); });
|
||||
}).catch(function () { recApps = []; }).then(function () {
|
||||
loadRec.busy = false;
|
||||
var g = $('#recApps'); if (g && sheetOn === 'rec') g.innerHTML = recHTML();
|
||||
});
|
||||
}
|
||||
$('#tabRec').addEventListener('click', function () {
|
||||
haptic(); loadRec();
|
||||
openSheet('rec', '<div class="rec-h"><b>记一下</b><span>兜爸心选的孕期工具</span><button type="button" class="rec-x" data-recx aria-label="关闭"><svg class="ic"><use href="#i-x"/></svg></button></div>' +
|
||||
'<div class="rec-apps" id="recApps">' + recHTML() + '</div>');
|
||||
});
|
||||
$('#sbd').addEventListener('click', function (e) {
|
||||
if (sheetOn !== 'rec') return;
|
||||
if (e.target.closest('[data-recx]')) { closeSheet(); return; }
|
||||
var b = e.target.closest('[data-rid]'); if (!b || !recApps) return;
|
||||
var a = recApps.filter(function (x) { return (x.identifier || '') === b.dataset.rid; })[0]; if (!a) return;
|
||||
var g = recLocked(a);
|
||||
if (g) { haptic(); toast(g[1] + '孕 ' + g[0] + ' 周以后开放，你现在孕 ' + myWeek + ' 周，还用不到哦'); return; }
|
||||
goApp(a.url);
|
||||
});
|
||||
/* 返回兜爸的头像：同数胎动 —— 跨应用 user-center/info 有真头像才换上（商城默认头像 /uploads/system/ 当没有），没有就留小房子 */
|
||||
if (OPENID && window.fetch) fetch('/api/mp/public/user-center/info?openid=' + encodeURIComponent(OPENID)).then(function (r) { return r.ok ? r.json() : null; }).then(function (d) {
|
||||
var av = d && d.result && d.result.data && d.result.data.avatar;
|
||||
if (!av || /\/uploads\/system\//.test(av)) return;
|
||||
var ico = $('#tabAv'), im = new Image(); im.className = 'tab-avimg'; im.alt = '';
|
||||
im.onload = function () { ico.appendChild(im); ico.insertAdjacentHTML('beforeend', '<i class="tab-hm" aria-hidden="true"><svg viewBox="0 0 24 24" fill="#fff"><path d="M12 4 3.5 11H6v8.5h4.5v-5h3v5H18V11h2.5z"/></svg></i>'); ico.classList.add('has-av'); };
|
||||
im.src = av;
|
||||
}).catch(function () {});
|
||||
|
||||
/* ---------- 吸顶阴影 ---------- */
|
||||
var sc = $('#sc');
|
||||
sc.addEventListener('scroll', function () { $('#top').classList.toggle('on', sc.scrollTop > 4); }, { passive: true });
|
||||
|
||||
Reference in New Issue
Block a user