diff --git a/index.html b/index.html index debf1f5..69dbd3f 100644 --- a/index.html +++ b/index.html @@ -6,8 +6,8 @@ 妈妈盒子 · 孕育陪伴 - - + + @@ -161,67 +161,19 @@

宝宝的孕育工具

- +

妈妈每记录一次，宝宝就多一段成长记忆

-
-
- - - -
- -
- - - - - -
-
+ +
+ - - -
v26090718
+ + +
v26090719
diff --git a/js/app.js b/js/app.js index 7b9d1f6..be5777d 100644 --- a/js/app.js +++ b/js/app.js @@ -170,6 +170,72 @@ location.href = u; } + /* ================= 首页工具区 = 已上架应用宫格 ================= + 数据：box_app /api/mp/apps（应用管理统一维护图标/名称/链接）。 + 范围：isPublished=1 且有 url；排除授权示例（wx-h5-demo，开发者用的）。 + 交互：默认前 8 个，「所有工具 ›/展开全部工具」展开收起；点击带身份跳转。 */ + function appTileColor(name) { + const PALETTE = ['#F2917A', '#E8A2B8', '#8FB4E3', '#7FC8A9', '#E3B771', '#A99BD1', '#73BFB2', '#DE8F6E']; + let h = 0; + for (let i = 0; i < (name || '').length; i++) h = (h * 31 + name.charCodeAt(i)) >>> 0; + return PALETTE[h % PALETTE.length]; + } + function jumpApp(url) { + haptic(); + const oid = hashParam('openid'); + const uid = hashParam('unionid'); + const q = []; + if (oid) q.push('openid=' + encodeURIComponent(oid)); + if (uid) q.push('unionid=' + encodeURIComponent(uid)); + if (q.length) url += (url.indexOf('?') >= 0 ? '&' : '?') + q.join('&'); + if (oid) url += '#openid=' + encodeURIComponent(oid); + location.href = url; + } + function renderAppGrid(apps) { + const grid = $('#appGrid'), moreBtn = $('#appMore'), dockAll = $('#dockAll'); + if (!grid) return; + grid.innerHTML = apps.map(a => { + const ico = a.logo || a.icon || ''; + const name = a.name || a.identifier || '应用'; + const color = a.colorTheme || appTileColor(name); + const img = ico ? '' : (name.slice(0, 1)); + return ''; + }).join(''); + /* 磁贴点击（事件委托，innerHTML 重建后不用重绑） */ + grid.onclick = function (e) { + const t = e.target.closest('.app-tile'); + if (t && t.dataset.url) jumpApp(decodeURIComponent(t.dataset.url)); + }; + if (apps.length > 8) { + moreBtn.style.display = 'block'; + dockAll.style.display = ''; + } + } + function toggleAppGrid() { + const grid = $('#appGrid'), moreBtn = $('#appMore'), dockAll = $('#dockAll'); + const ex = grid.classList.toggle('expanded'); + moreBtn.style.display = ex ? 'none' : 'block'; + dockAll.textContent = ex ? '收起 ›' : '所有工具 ›'; + haptic(); + } + function loadPublishedApps() { + fetch('/api/mp/apps?isPublished=1&pageSize=200') + .then(r => (r.ok ? r.json() : null)) + .then(d => { + const items = (d && d.result && d.result.items) || []; + const apps = items + .filter(a => a.url && !/wx-h5-demo/i.test(a.url)) /* 排除授权示例 */ + .sort((x, y) => (x.seq || 0) - (y.seq || 0) || (x.no || 0) - (y.no || 0)); + renderAppGrid(apps); + }) + .catch(function () { /* 拉不到就保持空宫格，不影响其余页面 */ }); + } + $('#appMore').addEventListener('click', toggleAppGrid); + $('#dockAll').addEventListener('click', toggleAppGrid); + loadPublishedApps(); + function go(name) { /* 「档案」先跳孕期档案 H5（一期屏蔽内置档案屏，原因见 goArchiveH5 注释） */ if (name === 'archive') { goArchiveH5(); return; } diff --git a/mama-box.css b/mama-box.css index ac9947e..0ed21a7 100644 --- a/mama-box.css +++ b/mama-box.css @@ -2639,3 +2639,15 @@ a.skip:focus{left:16px;top:16px} .bump{animation:bump .35s var(--ease)} @keyframes bump{0%{transform:scale(1)}45%{transform:scale(1.32)}100%{transform:scale(1)}} + +/* ================= 首页工具区 = 已上架应用宫格 ================= + 数据来自 box_app /api/mp/apps（应用管理统一维护图标/名称/链接）。 + 默认显示前 8 个，.expanded 时全量展开；点击磁贴带身份跳转对应 H5。 */ +.app-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px 8px;margin-top:14px} +.app-grid:not(.expanded) .app-tile:nth-child(n+9){display:none} +.app-tile{display:flex;flex-direction:column;align-items:center;gap:7px;background:none;border:none;padding:0;cursor:pointer;min-width:0} +.app-ico{width:52px;height:52px;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 3px 12px rgba(43,35,32,.08);display:grid;place-items:center;font-size:20px;font-weight:800;color:#fff;flex:0 0 auto} +.app-ico img{width:100%;height:100%;object-fit:cover;display:block} +.app-tile-name{font-size:11px;color:#2B2320;text-align:center;line-height:1.3;max-width:78px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} +.app-more{display:block;width:100%;margin-top:16px;padding:11px;border:1px dashed #E4D5CB;border-radius:12px;background:none;color:#A08C80;font-size:13px;font-weight:600;cursor:pointer} +.app-more:active{background:#F3EAE3}