专题页 v3:加设计感+每页推荐工具(共用 _shared/tools.js);生娃计算器扩到15项+快速/详细估算;测一测改成妈妈类型卡+按类型推荐工具

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
deploy
2026-10-31 14:29:47 +00:00
parent a956f738af
commit 5f419b840d
7 changed files with 2332 additions and 1001 deletions

47
topic/_shared/tools.js Normal file
View File

@@ -0,0 +1,47 @@
/* 孕期专题页共用:推荐工具卡(2026-10-31)
* 工具清单与 /api/mp/apps?isPublished=1 的「孕期工具」一致;跳转一律同源相对路径,带上 search + hash(openid)。
* 用法:TopicTools.render(el, [{id:'taidong', why:'一句推荐理由'}...], {title:'用得上的工具', color:'#18A058', wk:当前孕周})
*/
(function () {
var T = {
taidong: { n: '数胎动', u: '/taidong/', l: '/taidong/logo/logo-foot.svg', gate: 16 },
gongsuopinlv: { n: '数宫缩', u: '/gongsuo-pinlv/', l: '/upload/picture/1c02d720e4d23b09c996e859703b8b5e.svg', gate: 20 },
taierguzhong: { n: '胎儿估重', u: '/taier-guzhong/', l: '/upload/picture/715333a69fb67d8812ab093f342fa00f.png', gate: 15 },
chanjianrili: { n: '孕检日历', u: '/chanjian-rili/', l: '/chanjian-rili/logo/logo-7-dots.svg' },
yunqitizhong: { n: '孕期体重管理', u: '/yunqi-tizhong/', l: '/upload/picture/a6d7e61edee2ff0395cf00587a7c4036.svg' },
yunqixuetang: { n: '孕期血糖记录', u: '/yunqi-xuetang/', l: '/upload/picture/fde3c920fae453f2642731e4135b88f5.png' },
yunqinengbuchi: { n: '孕期能不能吃', u: '/yunqi-nengbuchi/', l: '/upload/picture/cf8750e19250caacd703b9d074211488.png' },
daichanqingdan: { n: '待产清单', u: '/daichan-qingdan/', l: '/upload/picture/f2da62ce728d3a7e85b4440ece6f26e5.svg' },
bushui: { n: '孕期补水补剂', u: '/yunqi-bushui/yindao/', l: '/upload/picture/ca30770e30bc2270c4aea0d382b872b0.svg' },
yun: { n: '孕期血压记录', u: '/yunqi-xueya/intro/', l: '/upload/picture/816227e3933211145bb8fc774ee32e82.svg' },
yundujinian: { n: '宝宝相册', u: '/yundu-jinian/', l: '/yundu-jinian/logo.svg' }
};
var css = '.tt-wrap{margin:28px 0 8px}.tt-h{display:flex;align-items:baseline;justify-content:space-between;margin:0 2px 12px}' +
'.tt-h b{font-size:18px;font-weight:800;color:#1F2329}.tt-h span{font-size:12.5px;color:#86909C}' +
'.tt-list{display:flex;flex-direction:column;gap:10px}' +
'.tt-it{display:flex;align-items:center;gap:12px;padding:12px 14px;background:#fff;border:1px solid #EEF0F3;border-radius:18px;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:transform .15s}' +
'.tt-it:active{transform:scale(.98)}.tt-ic{flex:0 0 44px;width:44px;height:44px;border-radius:13px;background:var(--tt-bg,#F7F8FA);display:flex;align-items:center;justify-content:center}' +
'.tt-ic img{width:34px;height:34px;object-fit:contain}.tt-tx{flex:1;min-width:0}.tt-n{font-size:15px;font-weight:700;color:#1F2329;display:flex;align-items:center;gap:6px}' +
'.tt-tag{font-size:11px;font-weight:600;padding:1px 7px;border-radius:99px;background:#F2F3F5;color:#86909C}' +
'.tt-w{font-size:12.5px;color:#4E5969;margin-top:2px;line-height:1.5}.tt-go{flex:0 0 auto;font-size:13px;font-weight:700;color:var(--tt-c,#18A058);padding:6px 12px;border-radius:99px;background:var(--tt-bg,#F7F8FA)}';
function href(u) { return u + (location.search || '') + (location.hash || ''); }
function esc(s) { return String(s == null ? '' : s).replace(/[&<>"]/g, function (c) { return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]; }); }
function render(el, list, opt) {
if (!el) return;
opt = opt || {};
if (!document.getElementById('tt-css')) { var s = document.createElement('style'); s.id = 'tt-css'; s.textContent = css; document.head.appendChild(s); }
var wk = +opt.wk || 0, html = '';
list.forEach(function (x) {
var t = T[x.id]; if (!t) return;
var lock = t.gate && wk && wk < t.gate;
html += '<a class="tt-it" href="' + esc(href(t.u)) + '"><span class="tt-ic"><img src="' + esc(t.l) + '" alt=""></span>' +
'<span class="tt-tx"><span class="tt-n">' + esc(t.n) + (lock ? '<span class="tt-tag">孕' + t.gate + '周开放</span>' : (x.tag ? '<span class="tt-tag">' + esc(x.tag) + '</span>' : '')) + '</span>' +
'<span class="tt-w">' + esc(x.why) + '</span></span><span class="tt-go">' + esc(x.btn || '去用') + '</span></a>';
});
el.classList.add('tt-wrap');
if (opt.color) el.style.setProperty('--tt-c', opt.color);
if (opt.bg) el.style.setProperty('--tt-bg', opt.bg);
el.innerHTML = '<div class="tt-h"><b>' + esc(opt.title || '用得上的工具') + '</b><span>' + esc(opt.sub || '都在兜爸心选,免费用') + '</span></div><div class="tt-list">' + html + '</div>';
}
window.TopicTools = { render: render, list: T, href: href };
})();