-
性别
-
-
+
+
+
+
+
+
+
-
-
妈妈
-
-
-
-
点头像换张照片
-
-
-
-
-
+
孕周和预产期会同步到各个孕期工具
+
+
+
+
+
+
+
+ 你现在怀孕多久了？
+ 按孕周推算预产期
+
+ 预产期—
+
+
diff --git a/js/app.js b/js/app.js
index c91108f..bba55ae 100644
--- a/js/app.js
+++ b/js/app.js
@@ -3,7 +3,7 @@
(function () {
'use strict';
/* 页面版本号（YYMMDD+序号）：显示在「关于兜爸心选」页底部；bump 时同步 head 注释与 ?v= */
- var VER = '26101024';
+ var VER = '26101025';
const $ = (s, c) => (c || document).querySelector(s);
const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));
@@ -1302,7 +1302,15 @@
function syncDuePh() {
const due = parseDay(pgDue.value);
const t = $('#pgDueTxt');
- if (t) { t.textContent = due ? fmtDay(due) : '点这里选预产期'; t.parentNode.classList.toggle('is-set', !!due); }
+ /* 孕期档案两行（2026-10-11 改版）：右侧值都从 #pgDue 现算 */
+ if (t) { t.textContent = due ? due.getFullYear() + ' 年 ' + (due.getMonth() + 1) + ' 月 ' + due.getDate() + ' 日' : '去填写'; t.classList.toggle('is-empty', !due); }
+ const wt = $('#pgWeekTxt');
+ if (wt) {
+ const lf = due ? Math.round((midnight(due) - midnight(new Date())) / DAY_MS) : null;
+ const g = due ? gaFromDue(due) : 0;
+ wt.textContent = !due ? '去填写' : lf < 0 ? '宝宝已出生' : '孕 ' + Math.floor(g / 7) + ' 周' + (g % 7 ? ' +' + (g % 7) + ' 天' : '');
+ wt.classList.toggle('is-empty', !due);
+ }
const sum = $('#pgSum');
if (!sum) return;
sum.classList.toggle('is-set', !!due);
@@ -1382,11 +1390,112 @@
}));
/* 性别三选一 */
+ /* 性别：男孩 / 女孩二选一，再点一下已选的就取消（= 还不知道，保存成 unknown） */
$$('#pgSex .pick').forEach(b => b.addEventListener('click', () => {
- $$('#pgSex .pick').forEach(x => x.classList.toggle('is-active', x === b));
+ const on = !b.classList.contains('is-active');
+ $$('#pgSex .pick').forEach(x => x.classList.toggle('is-active', on && x === b));
haptic();
}));
+ /* ---------- 孕期档案 · 滚轮选择（2026-10-11，照数胎动的孕期档案） ----------
+ week：孕 0–42 周 × 0–6 天，下面实时显示对应预产期；due：年 / 月 / 日，下面显示对应孕周。
+ 确定后写 #pgWeek/#pgDay 或 #pgDue 并 dispatch change —— 换算、行内文字都走原来那两个监听，不另算一套。 */
+ const PK_H = 40; /* 每行高度，CSS .pk-col i 同值 */
+ const pkSheet = $('#pkSheet'), pkScrim = $('#pkScrim'), pkWheels = $('#pkWheels');
+ let pkMode = 'week';
+ function pkCol(key, items, sel) {
+ return '
' + items.map((t, i) => '' + t + '').join('') + '
';
+ }
+ function pkIdx(col) { return Math.max(0, Math.min(col.children.length - 1, Math.round(col.scrollTop / PK_H))); }
+ function pkSet(col, i) {
+ col.scrollTop = i * PK_H;
+ $$('i', col).forEach((x, k) => x.classList.toggle('on', k === i));
+ }
+ function pkGet(k) { const c = $('.pk-col[data-k="' + k + '"]', pkWheels); return c ? pkIdx(c) : 0; }
+ const pkYears = () => { const y = new Date().getFullYear(); return [y - 1, y, y + 1]; };
+ function pkDayCol(keep) {
+ const ys = pkYears(), y = ys[pkGet('y')], m = pkGet('m');
+ const n = new Date(y, m + 1, 0).getDate();
+ const old = $('.pk-col[data-k="d"]', pkWheels);
+ const tmp = document.createElement('div');
+ tmp.innerHTML = pkCol('d', Array.from({ length: n }, (_, i) => (i + 1) + ' 日'));
+ const col = tmp.firstChild;
+ old.replaceWith(col);
+ pkBind(col);
+ pkSet(col, Math.min(keep, n - 1));
+ }
+ function pkResult() {
+ if (pkMode === 'week') {
+ const due = dueFromGA(pkGet('w') * 7 + pkGet('dd'));
+ $('#pkResL').textContent = '预产期';
+ $('#pkResV').textContent = toISO(due);
+ } else {
+ const ys = pkYears(), due = new Date(ys[pkGet('y')], pkGet('m'), pkGet('d') + 1);
+ const left = Math.round((midnight(due) - midnight(new Date())) / DAY_MS), g = gaFromDue(due);
+ $('#pkResL').textContent = '对应孕周';
+ $('#pkResV').textContent = left < 0 ? '已过预产期' : left > TERM ? '还没怀上哦' : '孕 ' + Math.floor(g / 7) + ' 周' + (g % 7 ? ' +' + (g % 7) + ' 天' : '');
+ }
+ }
+ function pkBind(col) {
+ let tm = 0;
+ col.addEventListener('scroll', () => {
+ clearTimeout(tm);
+ tm = setTimeout(() => {
+ const i = pkIdx(col);
+ $$('i', col).forEach((x, k) => x.classList.toggle('on', k === i));
+ if (col.dataset.k === 'y' || col.dataset.k === 'm') pkDayCol(pkGet('d'));
+ pkResult();
+ }, 90);
+ }, { passive: true });
+ col.addEventListener('click', e => { const it = e.target.closest('i'); if (it) col.scrollTo({ top: +it.dataset.i * PK_H, behavior: 'smooth' }); });
+ }
+ function openPicker(mode) {
+ pkMode = mode;
+ const cur = parseDay(pgDue.value);
+ if (mode === 'week') {
+ $('#pkT').textContent = '你现在怀孕多久了？';
+ $('#pkSub').textContent = '按孕周推算预产期';
+ $('#pkAlt').textContent = '知道预产期？直接选日期';
+ pkWheels.innerHTML = pkCol('w', Array.from({ length: 43 }, (_, i) => '孕 ' + i + ' 周')) + pkCol('dd', Array.from({ length: 7 }, (_, i) => i + ' 天'));
+ const g = cur ? gaFromDue(cur) : 12 * 7;
+ $$('.pk-col', pkWheels).forEach(pkBind);
+ pkSet($('.pk-col[data-k="w"]', pkWheels), Math.floor(g / 7));
+ pkSet($('.pk-col[data-k="dd"]', pkWheels), g % 7);
+ } else {
+ $('#pkT').textContent = '预产期是哪一天？';
+ $('#pkSub').textContent = '以产检单 / B 超单上写的为准';
+ $('#pkAlt').textContent = '不知道预产期？按孕周填';
+ const d = cur || dueFromGA(12 * 7), ys = pkYears();
+ pkWheels.innerHTML = pkCol('y', ys.map(y => y + ' 年')) + pkCol('m', Array.from({ length: 12 }, (_, i) => (i + 1) + ' 月')) + pkCol('d', ['1 日']);
+ $$('.pk-col', pkWheels).forEach(pkBind);
+ pkSet($('.pk-col[data-k="y"]', pkWheels), Math.max(0, ys.indexOf(d.getFullYear())));
+ pkSet($('.pk-col[data-k="m"]', pkWheels), d.getMonth());
+ pkDayCol(d.getDate() - 1);
+ }
+ pkWheels.className = 'pk-wheels n' + $$('.pk-col', pkWheels).length;
+ pkResult();
+ pkScrim.classList.add('show');
+ pkSheet.classList.add('show');
+ haptic();
+ }
+ function closePicker() { pkScrim.classList.remove('show'); pkSheet.classList.remove('show'); }
+ $('#pfWeekRow').addEventListener('click', () => openPicker('week'));
+ $('#pfDueRow').addEventListener('click', () => openPicker('due'));
+ $('#pkAlt').addEventListener('click', () => openPicker(pkMode === 'week' ? 'due' : 'week'));
+ pkScrim.addEventListener('click', closePicker);
+ $('#pkOk').addEventListener('click', () => {
+ if (pkMode === 'week') {
+ pgWeek.value = pkGet('w'); pgDay.value = pkGet('dd');
+ pgWeek.dispatchEvent(new Event('change'));
+ } else {
+ const ys = pkYears();
+ pgDue.value = toISO(new Date(ys[pkGet('y')], pkGet('m'), pkGet('d') + 1));
+ pgDue.dispatchEvent(new Event('change'));
+ }
+ closePicker();
+ haptic();
+ });
+
/* 环的目标值改了要顺手清掉上一轮动画的终值，否则 animateRings 不会重跑 */
function setRing(el, p) {
if (!el) return;
@@ -1575,7 +1684,7 @@
$('#arTitleName').textContent = nm;
$('#arLine1').textContent = '完善孕期信息后开启';
$('#arDays').textContent = '--';
- $('#arLine2').textContent = '先去「我的资料」填预产期';
+ $('#arLine2').textContent = '先去「孕期档案」填预产期';
$('#arPct').textContent = '0%';
setArBar(0);
$('#genWeekTag').textContent = '--';
@@ -1761,7 +1870,13 @@
/* 点大圆 → 转交给隐藏的 file input。openModal 里会 focus 第一个输入框，
这里 avFile 排在 pfName 前面，所以 openModal 用的选择器只取 .modal-ta/input
可能命中 file input——用 :not([type=file]) 排除掉，见 openModal */
- avBig.addEventListener('click', () => avFile.click());
+ avBig.addEventListener('click', e => { e.stopPropagation(); avFile.click(); });
+ /* 孕期档案里头像是一整行，点行上任何地方都换头像 */
+ const pfMeRow = $('#pfMe');
+ if (pfMeRow) {
+ pfMeRow.addEventListener('click', e => { if (e.target !== avFile) avFile.click(); });
+ pfMeRow.addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); avFile.click(); } });
+ }
avFile.addEventListener('change', () => {
const f = avFile.files && avFile.files[0];
@@ -1786,8 +1901,7 @@
/* 预产期是一切的源头：孕周、剩余天数、信里的日期全从它算。没有它没什么可存的。 */
if (!parseDay(pgDue.value)) {
toast('先填一下预产期，孕周会自动算出来');
- setPgMode('due');
- pgDue.focus();
+ openPicker('week');
return;
}
const name = $('#pfName').value.trim() || '妈妈';
diff --git a/mama-box.css b/mama-box.css
index adf50f1..f1dd8fb 100644
--- a/mama-box.css
+++ b/mama-box.css
@@ -4785,3 +4785,55 @@ a.skip:focus{left:16px;top:16px}
/* 首页工具卡自动换成替补（swapHomeCards）：尺寸、底色沿用坑位原样，只换内容；插画是白色线稿 svg */
.mini-card .sw-art{height:auto;aspect-ratio:1;opacity:.95}
+/* ================= 孕期档案弹窗（2026-10-11 改版，原「我的资料」）=================
+ 照数胎动的孕期档案：居中标题 + 一张白卡一行一项，右侧值橘色；点孕周 / 预产期再弹滚轮 #pkSheet。 */
+.pf-modal{padding-top:10px}
+.pf-grip{width:38px;height:4px;border-radius:2px;background:#E2D6CE;margin:0 auto 12px}
+.pf-title{text-align:center;font-size:18px;font-weight:900;letter-spacing:-.2px}
+.pf-modal .pf-lead{text-align:center;font-size:12px;color:var(--muted);margin-top:4px}
+.pf-list{margin-top:14px;border-radius:20px;background:#fff;box-shadow:0 4px 14px rgba(160,110,90,.08);overflow:hidden}
+.pf-row{display:flex;align-items:center;gap:10px;width:100%;min-height:62px;padding:12px 14px 12px 16px;text-align:left;position:relative;cursor:pointer}
+.pf-row+.pf-row::before{content:"";position:absolute;left:16px;right:0;top:0;height:1px;background:#F2EAE4}
+.pf-row:active{background:#FBF6F2}
+.pf-row .pr-l{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
+.pf-row .pr-l b{font-size:15px;font-weight:800;color:var(--ink)}
+.pf-row .pr-l em{font-style:normal;font-size:11.5px;color:var(--muted)}
+.pf-row .pr-v{flex:none;font-size:15px;font-weight:800;color:var(--ink)}
+.pf-row .pr-v.hot{color:var(--brand)}
+.pf-row .pr-v.is-empty{color:#B9ABA2;font-weight:700}
+.pf-row .chev{flex:none;margin-left:-4px}
+.pf-row .pr-in{flex:0 1 52%;min-width:0;border:0;background:none;text-align:right;font:inherit;font-size:15px;font-weight:800;color:var(--ink);padding:6px 0}
+.pf-row .pr-in::placeholder{color:#B9ABA2;font-weight:700}
+.pf-row .pr-in:focus{outline:none}
+.pf-row-av .av-big{width:46px;height:46px;margin:0;flex:none}
+.pf-row-av .av-big>svg{width:26px;height:26px}
+.pf-seg{flex:none;display:flex;gap:4px;padding:3px;border-radius:12px;background:#F3ECE6}
+.pf-seg .pick{flex:none;padding:6px 16px;border-radius:9px;background:none;font-size:13.5px;font-weight:700;color:var(--ink-2);box-shadow:none}
+.pf-seg .pick.is-active{background:#fff;color:var(--brand);box-shadow:0 2px 6px rgba(160,110,90,.14)}
+.pf-modal .pf-unauth{margin-top:14px}
+.pf-note{margin-top:12px;text-align:center;font-size:11.5px;color:var(--muted)}
+.pf-modal .pf-foot{margin-top:12px}
+.pf-modal .pf-logout{background:none;color:var(--muted);font-size:13px;font-weight:600;margin:0 auto;padding:4px 12px calc(10px + env(safe-area-inset-bottom));width:auto}
+
+.pk-scrim{position:absolute;inset:0;z-index:130;background:rgba(50,30,22,.32);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
+.pk-scrim.show{opacity:1;visibility:visible}
+.pk-sheet{position:absolute;left:0;right:0;bottom:0;z-index:131;background:#FAF5F1;border-radius:28px 28px 0 0;
+ padding:24px 22px calc(14px + env(safe-area-inset-bottom));text-align:center;
+ transform:translateY(102%);transition:transform .36s var(--ease)}
+.pk-sheet.show{transform:none;box-shadow:0 -10px 40px rgba(90,50,35,.22)}
+.pk-sheet h3{font-size:18px;font-weight:900}
+.pk-sub{margin-top:4px;font-size:12px;color:var(--muted)}
+.pk-wheels{position:relative;display:flex;height:200px;margin:16px 0 0}
+.pk-wheels::before{content:"";position:absolute;left:0;right:0;top:80px;height:40px;border-radius:12px;background:#fff;box-shadow:0 2px 10px rgba(160,110,90,.08);z-index:0}
+.pk-wheels::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
+ background:linear-gradient(#FAF5F1,rgba(250,245,241,0) 34%,rgba(250,245,241,0) 66%,#FAF5F1)}
+.pk-col{position:relative;z-index:1;flex:1;height:200px;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;
+ padding:80px 0;scrollbar-width:none;-webkit-overflow-scrolling:touch}
+.pk-col::-webkit-scrollbar{display:none}
+.pk-col i{display:block;height:40px;line-height:40px;font-style:normal;font-size:15px;color:var(--ink-2);scroll-snap-align:center;transition:color .15s,font-size .15s}
+.pk-col i.on{font-size:17px;font-weight:800;color:var(--brand)}
+.pk-res{margin-top:14px;font-size:13px;color:var(--muted)}
+.pk-res b{margin-left:8px;font-size:16px;font-weight:900;color:var(--brand)}
+.pk-ok{display:block;width:100%;margin-top:16px}
+.pk-alt{margin-top:12px;font-size:12.5px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
+