jone/mama-box
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(首页): 新增「孕期每日小打卡」——按钮带状态小标签 (v26093012)

Browse Source 
- 首页正文最上面加一块「孕期每日小打卡」：数胎动 / 称体重 / 产检三行，
  每行右侧一枚状态标签，点整行进对应应用（复用 data-mini + MINI_APP_MAP + jumpApp）。
- 标签来自工具卡同一个接口（applyRemoteCards → renderDaily），不另打请求：
  今日已记 N 次 / 今天还没记；今日已称 / 今天还没称（按接口 day 判今天）；
  距 NT 还有 7 天 / 今天糖耐检查 / 待补记 / 看产检安排。
  抬头右端「今日已完成 x/2」（只数胎动、体重两件每日事）。
- 接口没回、访客态保留中性提示，不写数字；产后态整块收起。
- 首块间距规则改为 .home-body>:first-child，工具托盘并入块间 16px。

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Karlcarlo
2026-09-30 13:10:04 +00:00
parent 62b23af323
commit 9ea9f3c50f
3 changed files with 112 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
index.html
View File

@@ -7,7 +7,7 @@
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>兜爸心选 · 孕育陪伴</title>
<!-- V:26093011 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
<!-- V:26093012 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
<link rel="stylesheet" href="mama-box.css">
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<!-- 共享助手：授权/跳商城/位置上报（分享卡片同步，见 docs/h5-auth-standard.md 第四节） -->
@@ -177,6 +177,35 @@
页面也因此有了两种宽度节奏：文字型内容仍在 26px 栏内，
托盘和卡带出血到屏幕边缘。 -->
<div class="home-body no-letter" id="homeBody">
<!-- 孕期每日小打卡（2026-09-30）。用户原话：「给按钮加个小标签，同步最新状态……
一眼就能拿到关键信息，点进去再看完整详情就行」「叫孕期每日小打卡，直白好懂」。
三行都不是新功能，是把已有应用的「今天的状态」提到最上面一眼可见：
数胎动 / 孕期体重 / 孕检日历，点整行 = 进对应应用（data-mini 复用工具卡那套 MINI_APP_MAP + jumpApp）。
标签数据全部来自工具卡同一个接口（applyRemoteCards → renderDaily），**不另打请求**。
⚠️ 默认标签是中性的动作提示（去记录 / 去称重 / 看产检安排），不写数字：
接口没回来、访客态时它们就这样留着，不造假数据（AGENTS §4.2）。
⚠️ 产后态整块收起（syncPregnancy 里 toggle .hide），孕期打卡对已生产的用户没意义。 -->
<section class="daily-check" id="dailyCheck">
<div class="dc-head">
<h2 class="dc-title">孕期每日小打卡</h2>
<span class="dc-done hide" id="dcDone"></span>
</div>
<button class="dc-row" data-mini="kick" data-dc="kick">
<img class="dc-ico" src="assets/img/7980160b80b0.png" alt="" aria-hidden="true">
<span class="dc-name">数胎动</span>
<span class="dc-tag" id="dcKick">去记录</span><i class="chev" aria-hidden="true">›</i>
</button>
<button class="dc-row" data-mini="weight" data-dc="weight">
<img class="dc-ico" src="assets/img/b2066fd752bf.png" alt="" aria-hidden="true">
<span class="dc-name">称体重</span>
<span class="dc-tag" id="dcWeight">去称重</span><i class="chev" aria-hidden="true">›</i>
</button>
<button class="dc-row" data-mini="cal" data-dc="cal">
<img class="dc-ico" src="assets/img/2d23b079caca.png" alt="" aria-hidden="true">
<span class="dc-name">产检</span>
<span class="dc-tag" id="dcCal">看产检安排</span><i class="chev" aria-hidden="true">›</i>
</button>
</section>
<!-- 模块一 · 工具托盘。
抬头进了托盘里面：标题独占一行，右端「所有工具」做成白底细边胶囊；
说明单独做成一枚浅色 chip，不再是标题底下一行贴边的灰字。

51
js/app.js
View File

@@ -3,7 +3,7 @@
(function () {
'use strict';
/* 页面版本号（YYMMDD+序号）：显示在「关于兜爸心选」页底部；bump 时同步 head 注释与 ?v= */
var VER = '26093011';
var VER = '26093012';
const $ = (s, c) => (c || document).querySelector(s);
const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));
@@ -1048,6 +1048,8 @@
if (p) p.classList.toggle('is-empty', !!on);
}
function syncPregnancy() {
/* 孕期每日小打卡：产后整块收起；其它状态都显示（标签默认是中性提示，不依赖孕周） */
const _dc = $('#dailyCheck'); if (_dc) _dc.classList.toggle('hide', !!state.postpartum);
/* ---- 产后态：宝宝已出生 → 一律不显示孕周数字（2026-09-22） ----
⚠️ 必须放在 pregEmpty 之前：产后返回体的 week 也是 null，
落到空态分支会给**已经生产**的用户弹「完善孕期信息」引导。
@@ -3056,6 +3058,53 @@
}
mark('curve', cv);
}
renderDaily(r.day, k, w, cal);
}
/* 孕期每日小打卡（2026-09-30）：把 kick / weight / cal 三槽翻成一句话的状态标签。
数据就是上面这份卡片接口，不另打请求；槽缺失就保留 HTML 里的中性提示（不造数）。
「今天」以接口顶层 day（上游 YYYY-MM-DD，北京时间）为准，别拿本机时钟比 ——
容器/手机时区不一定是东八区，差一天就会把「今日已称」判成「还没称」。
⚠️ 上游字符串一律 textContent。 */
function renderDaily(day, k, w, cal) {
const tag = (id, text, kind) => {
const el = $(id); if (!el) return;
el.textContent = text;
el.classList.toggle('is-done', kind === 'done');
el.classList.toggle('is-warn', kind === 'warn');
};
const d10 = v => (v ? String(v).slice(0, 10) : '');
let done = 0, total = 0;
if (k) {
total++;
const n = parseInt(k.value, 10) || 0;
if (n > 0) { done++; tag('#dcKick', '今日已记 ' + n + ' 次', 'done'); }
else tag('#dcKick', '今天还没记', '');
}
if (w) {
total++;
if (day && d10(w.at) === day) { done++; tag('#dcWeight', '今日已称', 'done'); }
else tag('#dcWeight', '今天还没称', '');
}
if (cal) {
/* sub 形如「糖耐 · 孕25周」，取「·」前那段当检查名；拿不到就叫「产检」。
NT 这类字母名前后补空格：「距 NT 还有 7 天」。 */
let nm = String(cal.sub || '').split('·')[0].trim() || '产检';
if (/^[A-Za-z]/.test(nm)) nm = ' ' + nm + ' ';
const at = d10(cal.at);
const diff = (at && day) ? Math.round((Date.parse(at) - Date.parse(day)) / 864e5) : NaN;
if (cal.warn) tag('#dcCal', cal.label && cal.label !== '下次产检' ? cal.label : '待补记', 'warn');
else if (cal.empty || isNaN(diff) || diff < 0) tag('#dcCal', '看产检安排', '');
else if (diff === 0) tag('#dcCal', '今天' + nm.trim() + (nm.trim() === '产检' ? '' : '检查'), 'warn');
else tag('#dcCal', '距' + nm + '还有 ' + diff + ' 天', '');
}
/* 抬头右端「今日已完成 1/2」：只数每天要做的两件（胎动、体重），产检不是每天的事 */
const dd = $('#dcDone');
if (dd && total) {
dd.textContent = '今日已完成 ' + done + '/' + total;
dd.classList.toggle('is-all', done === total);
dd.classList.remove('hide');
}
}
/* 拉卡片数据（与其它远程数据一起打；失败静默，卡上保留现有值） */

36
mama-box.css
View File

@@ -406,11 +406,13 @@ a.skip:focus{left:16px;top:16px}
/* ⚠️ 这两条原来挂在 .sec-title 上。首页不再有 .sec-title 了，选择器必须跟着换到
新的第一块 .tool-dock —— 忘了换不会报错，只会静默失效（来信卡收起来时
头图底下那 64px 的洞补不回来），所以 smoke 里专门钉了一条。 */
.home-body>.tool-dock:first-child{margin-top:21px}
/* 2026-09-30：第一块换成了 .daily-check（孕期每日小打卡），这两条改成「谁是第一块就给谁」，
.tool-dock 退成第二块，间距并进下面 .today-line,.shelf 那条 16px。 */
.home-body>:first-child{margin-top:21px}
/* 来信卡收起来时，它原本占的 64px 流高（margin-top:-16 + height:80）没了，
只剩这 21px 顶着一大片橙色头图，太挤。补到 30px。
走类名而不是 :has()，老一点的移动端浏览器上 :has() 不一定有。 */
.home-body.no-letter>.tool-dock:first-child{margin-top:30px}
.home-body.no-letter>:first-child{margin-top:30px}
.page-body{padding:0 18px;margin-top:-46px;position:relative;z-index:5}
.page-body.no-top{margin-top:8px}
@@ -427,7 +429,7 @@ a.skip:focus{left:16px;top:16px}
对齐的是内容，出血的是底色，这两件事要分开。
⚠️ 三块的圆角、底色、左右内边距改成在这里一处定义。以后要调，改这一条，
别再回到各自的规则里单独写，那正是上一稿乱掉的原因。 */
.tool-dock,.today-line,.shelf{
.daily-check,.tool-dock,.today-line,.shelf{
margin:0 -26px;padding:16px 26px 18px;border-radius:26px;
background-color:#fff;
/* ⚠️ 这两条是一对，缺一不可，而且必须一起看：
@@ -441,7 +443,7 @@ a.skip:focus{left:16px;top:16px}
/* 块间距。给后两块，第一块的上间距另有规则（来信卡收放要用）。
⚠️ 这是**块与块之间**的缝。某一块自己内部觉得挤，要调的是那块的 padding，
不是这里 —— 改这里会把三块的关系一起改掉。 */
.today-line,.shelf{margin-top:16px}
.tool-dock,.today-line,.shelf{margin-top:16px}
/* ===== 后两块的暖色渐变底（本批新增）=====
用户原话：「在那个宝宝的今日脚印那块，稍微给背景它加一点渐变」
@@ -538,6 +540,32 @@ a.skip:focus{left:16px;top:16px}
底一变白，chip 的白底就没意义了，统一回灰字最干净。 */
.dock-note,.sh-note,.tl-h-note{font-size:12px;color:var(--muted);line-height:1.5}
/* ============ 模块零 · 孕期每日小打卡（2026-09-30）============
外壳走上面那条公共白色通栏（.daily-check 已并进去）。内部是三行「图标 · 名称 · 状态标签 · ›」，
整行是按钮。标签三种状态：默认（浅橙，动作提示/未完成）、.is-done（绿，已打卡带 ✓）、
.is-warn（红，待补记 / 今天就是产检日）。
⚠️ 行高按手指靶子给到 46px；最窄 320 屏下标签最长是「距糖耐还有 12 天」≈ 100px，
名称列固定不收缩、标签可省略，挤不爆。 */
.daily-check{padding-top:14px;padding-bottom:8px}
.dc-head{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.dc-title{font-size:16.5px;font-weight:800;letter-spacing:-.2px}
.dc-done{margin-left:auto;flex:0 0 auto;font-size:12px;font-weight:600;color:var(--muted)}
.dc-done.is-all{color:var(--green)}
.dc-done.hide{display:none}
.dc-row{display:flex;align-items:center;gap:10px;width:100%;height:46px;padding:0;
background:none;border:0;text-align:left;color:inherit;font:inherit}
.dc-row+.dc-row{border-top:1px solid var(--line)}
.dc-row:active{opacity:.6}
.dc-ico{flex:0 0 auto;width:30px;height:30px;object-fit:contain}
.dc-name{flex:0 0 auto;font-size:14.5px;font-weight:700}
.dc-tag{margin-left:auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600;
color:var(--brand-dk);background:#FFF0EA}
.dc-tag.is-done{color:var(--green);background:#EEF5EA}
.dc-tag.is-done::before{content:"✓ "}
.dc-tag.is-warn{color:var(--alert);background:#FDECE8}
.dc-row .chev{flex:0 0 auto;font-size:16px;margin-left:-4px}
/* ============ 模块一 · 工具 ============ */
.dock-head{display:flex;align-items:center;gap:8px;margin-bottom:7px}
/* 说明行仍是 inline-flex：前面那枚小图标要和文字同行居中，