「我的资料」改「孕期档案」：照数胎动改成一行一项白卡，头像放第一行；孕周 / 预产期点开滚轮选择 v26101025
Co-Authored-By: AI 助手
This commit is contained in:
karlcarlo
172
index.html
172
index.html
@@ -7,7 +7,7 @@
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<title>兜爸心选 · 孕育陪伴</title>
|
||||
<!-- V:26101024 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
|
||||
<!-- V:26101025 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
|
||||
<link rel="stylesheet" href="mama-box.css">
|
||||
<link rel="stylesheet" href="night.css">
|
||||
<!-- 夜晚模式：首屏绘制前就按上次的选择加 class，避免先白后黑闪一下（开关在首页右上角 #nightBtn，逻辑见 app.js） -->
|
||||
@@ -1957,134 +1957,76 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 2026-10-11 用户：「我的资料」改名「孕期档案」，样式照数胎动的孕期档案弹层：一张白卡、一行一项，头像放第一行；
|
||||
点「当前孕周」「预产期」从底部再弹一层滚轮（#pkSheet）。表单 id 全部沿用（#pgDue/#pgWeek/#pgDay/#pgName/#pgSex/#pfName/#avPick），
|
||||
#pfSave 的校验与落库逻辑一行没改；三种填法切换 / 步进器 / 末次月经 / 小名建议已随改版去掉。 -->
|
||||
<section class="modal pf-modal" id="modalProfile" data-autofocus="off" role="dialog" aria-modal="true" aria-labelledby="modalProfileTitle">
|
||||
<div class="modal-head">
|
||||
<h3 id="modalProfileTitle">我的资料</h3>
|
||||
<button class="modal-x" data-modal="close" aria-label="关闭">
|
||||
<svg viewBox="0 0 24 24" width="15" height="15" aria-hidden="true">
|
||||
<path d="M6 6l12 12M18 6L6 18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 2026-10-01 资料弹窗改版（用户：「现在填写比较困难，让用户很轻松地就能填写完」）：
|
||||
① 顶部一条实时结果「孕 N 周 +D 天 · 还有 X 天见面」—— 填的每一步都立刻看到算出了什么；
|
||||
② 预产期三种填法（分段切换）：知道预产期 / 按当前孕周（大号 −/＋ 步进，不用敲键盘）/ 按末次月经；
|
||||
三种最后都落到 #pgDue（唯一的数据源），保存逻辑一行没改；
|
||||
③ 头像缩到昵称左边，和昵称同一行；宝宝小名下面给几个一点即填的小名；
|
||||
④ 弹窗不再自动聚焦昵称（data-autofocus="off"）—— 一打开就弹键盘，正好盖住要填的预产期。 -->
|
||||
<div class="pf-grip" aria-hidden="true"></div>
|
||||
<h3 class="pf-title" id="modalProfileTitle">孕期档案</h3>
|
||||
<p class="pf-lead">填好预产期，孕周和倒计时都会自动算好</p>
|
||||
|
||||
<div class="pf-sum" id="pgSum">
|
||||
<span class="ps-ico" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24" width="22" height="22"><path d="M12 20.5s-7.5-4.4-7.5-10A4.3 4.3 0 0 1 12 8a4.3 4.3 0 0 1 7.5 2.5c0 5.6-7.5 10-7.5 10z" fill="currentColor"/></svg>
|
||||
</span>
|
||||
<span class="ps-main"><b id="pgSumT">还没填预产期</b><span id="pgSumS">选一种方式填一下，马上就好</span></span>
|
||||
</div>
|
||||
<!-- 未授权（含退出登录后）不显示旧昵称/头像，换成授权提示；宝宝那几行不受影响 -->
|
||||
<button type="button" class="pf-unauth ripple" id="pfUnauth" style="display:none">授权登录后显示你的昵称和头像<b>去授权 ›</b></button>
|
||||
|
||||
<div class="pf-card">
|
||||
<div class="pf-ct">孕期信息<em>必填</em></div>
|
||||
<div class="seg" id="pgMode" role="tablist">
|
||||
<button type="button" class="seg-b is-active" data-mode="due">知道预产期</button>
|
||||
<button type="button" class="seg-b" data-mode="week">按当前孕周</button>
|
||||
<button type="button" class="seg-b" data-mode="lmp">按末次月经</button>
|
||||
<div class="pf-list">
|
||||
<div class="pf-row pf-row-av" id="pfMe" role="button" tabindex="0">
|
||||
<span class="pr-l"><b>头像</b><em>点一下换张照片</em></span>
|
||||
<button type="button" class="av-big" id="avPick" aria-label="更换头像">
|
||||
<svg viewBox="0 0 40 40" aria-hidden="true">
|
||||
<circle cx="20" cy="14.5" r="7" fill="#fff"/>
|
||||
<path d="M6.5 35c0-7.2 6-11.5 13.5-11.5S33.5 27.8 33.5 35z" fill="#fff"/>
|
||||
</svg>
|
||||
<img id="avPreview" alt="">
|
||||
</button>
|
||||
<i class="chev" aria-hidden="true">›</i>
|
||||
<!-- file input 藏起来但不能 display:none，否则部分安卓 WebView 点不动（0 尺寸 + opacity） -->
|
||||
<input type="file" id="avFile" accept="image/*" class="av-file">
|
||||
</div>
|
||||
|
||||
<div class="pg-pane is-on" data-pane="due">
|
||||
<label class="date-btn">
|
||||
<span class="db-ico" aria-hidden="true"><svg viewBox="0 0 24 24" width="20" height="20"><rect x="4" y="5.5" width="16" height="14.5" rx="3" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="M4 10h16M8.5 3.5v4M15.5 3.5v4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg></span>
|
||||
<span class="db-txt" id="pgDueTxt">点这里选预产期</span>
|
||||
<i class="chev">›</i>
|
||||
<input id="pgDue" type="date" aria-label="预产期">
|
||||
</label>
|
||||
<p class="pg-tip">产检单 / B 超单上写的「预产期」</p>
|
||||
</div>
|
||||
|
||||
<div class="pg-pane" data-pane="week">
|
||||
<div class="stp-row">
|
||||
<div class="stp">
|
||||
<span class="stp-l">孕周</span>
|
||||
<div class="stp-ctl">
|
||||
<button type="button" class="stp-b" data-stp="w" data-d="-1" aria-label="孕周减一">−</button>
|
||||
<input id="pgWeek" type="number" inputmode="numeric" min="0" max="42" placeholder="—">
|
||||
<button type="button" class="stp-b" data-stp="w" data-d="1" aria-label="孕周加一">＋</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stp">
|
||||
<span class="stp-l">又几天</span>
|
||||
<div class="stp-ctl">
|
||||
<button type="button" class="stp-b" data-stp="d" data-d="-1" aria-label="天数减一">−</button>
|
||||
<input id="pgDay" type="number" inputmode="numeric" min="0" max="6" placeholder="—">
|
||||
<button type="button" class="stp-b" data-stp="d" data-d="1" aria-label="天数加一">＋</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="pg-tip" id="pgHint">比如「孕 24 周 +3 天」，就选 24 和 3</p>
|
||||
</div>
|
||||
|
||||
<div class="pg-pane" data-pane="lmp">
|
||||
<label class="date-btn">
|
||||
<span class="db-ico" aria-hidden="true"><svg viewBox="0 0 24 24" width="20" height="20"><rect x="4" y="5.5" width="16" height="14.5" rx="3" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="M4 10h16M8.5 3.5v4M15.5 3.5v4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg></span>
|
||||
<span class="db-txt" id="pgLmpTxt">点这里选末次月经第一天</span>
|
||||
<i class="chev">›</i>
|
||||
<input id="pgLmp" type="date" aria-label="末次月经第一天">
|
||||
</label>
|
||||
<p class="pg-tip">按末次月经第一天 + 280 天推算预产期</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pf-card">
|
||||
<!-- 2026-10-05 用户：「小名」这行字挪到「宝宝」后面、放进括号 → 标题写成「宝宝（小名）」，输入框上方不再单独一行「小名」（读屏仍念「宝宝小名」） -->
|
||||
<div class="pf-ct">宝宝（小名）</div>
|
||||
<label class="fld pf-fld"><span class="sr-only">宝宝小名</span><input id="pgName" type="text" maxlength="12" placeholder="给宝宝起个小名"></label>
|
||||
<div class="nm-chips" id="pgNameChips">
|
||||
<button type="button" class="nm-c">小汤圆</button><button type="button" class="nm-c">豆豆</button><button type="button" class="nm-c">糖糖</button><button type="button" class="nm-c">小米粒</button><button type="button" class="nm-c">乐乐</button>
|
||||
</div>
|
||||
<div class="fld pf-fld">
|
||||
<span>性别</span>
|
||||
<div class="pick-row" id="pgSex">
|
||||
<button type="button" class="pick is-active" data-sex="unknown">还不知道</button>
|
||||
<button type="button" class="pf-row" id="pfWeekRow">
|
||||
<span class="pr-l"><b>当前孕周</b><em>改孕周会同步更新预产期</em></span>
|
||||
<span class="pr-v hot" id="pgWeekTxt">去填写</span><i class="chev" aria-hidden="true">›</i>
|
||||
</button>
|
||||
<button type="button" class="pf-row" id="pfDueRow">
|
||||
<span class="pr-l"><b>预产期</b><em>以产检单 / B 超单为准</em></span>
|
||||
<span class="pr-v hot" id="pgDueTxt">去填写</span><i class="chev" aria-hidden="true">›</i>
|
||||
</button>
|
||||
<div class="pf-row">
|
||||
<span class="pr-l"><b>宝宝性别</b></span>
|
||||
<div class="pf-seg" id="pgSex" role="group" aria-label="宝宝性别">
|
||||
<button type="button" class="pick" data-sex="boy">男孩</button>
|
||||
<button type="button" class="pick" data-sex="girl">女孩</button>
|
||||
</div>
|
||||
</div>
|
||||
<label class="pf-row" id="pfMeTip">
|
||||
<span class="pr-l"><b>妈妈昵称</b><em>选填</em></span>
|
||||
<input class="pr-in" id="pfName" type="text" maxlength="16" placeholder="妈妈">
|
||||
</label>
|
||||
<label class="pf-row">
|
||||
<span class="pr-l"><b>宝宝小名</b><em>选填</em></span>
|
||||
<input class="pr-in" id="pgName" type="text" maxlength="12" placeholder="给宝宝起个小名">
|
||||
</label>
|
||||
</div>
|
||||
<!-- 预产期 / 孕周的唯一数据源，滚轮确定后写这里，再 dispatch change 走原来的换算 -->
|
||||
<input type="hidden" id="pgDue"><input type="hidden" id="pgWeek"><input type="hidden" id="pgDay">
|
||||
|
||||
<div class="pf-card">
|
||||
<div class="pf-ct">妈妈</div>
|
||||
<!-- 2026-10-10 方案A：未授权（含退出登录后）不显示旧昵称/头像，换成授权提示；点它去授权。宝宝那栏不受影响 -->
|
||||
<button type="button" class="pf-unauth ripple" id="pfUnauth" style="display:none">授权登录后显示你的昵称和头像<b>去授权 ›</b></button>
|
||||
<div class="pf-me" id="pfMe">
|
||||
<div class="av-pick">
|
||||
<button class="av-big" id="avPick" aria-label="更换头像">
|
||||
<svg viewBox="0 0 40 40" aria-hidden="true">
|
||||
<circle cx="20" cy="14.5" r="7" fill="#fff"/>
|
||||
<path d="M6.5 35c0-7.2 6-11.5 13.5-11.5S33.5 27.8 33.5 35z" fill="#fff"/>
|
||||
</svg>
|
||||
<img id="avPreview" alt="">
|
||||
<span class="av-cam">
|
||||
<svg viewBox="0 0 24 24" width="15" height="15" aria-hidden="true">
|
||||
<path d="M3 8.6A2.6 2.6 0 0 1 5.6 6h1.9l1.3-2h6.4L16.5 6h1.9A2.6 2.6 0 0 1 21 8.6v8.8a2.6 2.6 0 0 1-2.6 2.6H5.6A2.6 2.6 0 0 1 3 17.4z" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linejoin="round"/>
|
||||
<circle cx="12" cy="13" r="3.6" fill="none" stroke="currentColor" stroke-width="1.9"/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
<input type="file" id="avFile" accept="image/*" class="av-file">
|
||||
<!-- file input 藏起来但不能 display:none，否则部分安卓 WebView 点不动（0 尺寸 + opacity） -->
|
||||
<input type="file" id="avFile" accept="image/*" class="av-file">
|
||||
</div>
|
||||
<label class="fld pf-fld"><span>怎么称呼你</span><input id="pfName" type="text" maxlength="16" placeholder="妈妈"></label>
|
||||
</div>
|
||||
<p class="pg-tip" id="pfMeTip">点头像换张照片</p>
|
||||
</div>
|
||||
|
||||
<!-- 2026-10-10 用户：「我的资料」里也要有「退出登录」。显示规则同「我的」页 #meLogoutCard（已授权才显示），共用 doLogout -->
|
||||
<button type="button" class="pf-logout ripple" id="pfLogout" style="display:none">退出登录</button>
|
||||
|
||||
<p class="pf-note">孕周和预产期会同步到各个孕期工具</p>
|
||||
<div class="modal-foot pf-foot">
|
||||
<button class="dl-btn ghost" data-modal="close">取消</button>
|
||||
<button class="dl-btn main" id="pfSave">保存</button>
|
||||
<button class="dl-btn main" id="pfSave">保存资料</button>
|
||||
</div>
|
||||
<!-- 显示规则同「我的」页 #meLogoutCard（已授权才显示），共用 doLogout -->
|
||||
<button type="button" class="pf-logout" id="pfLogout" style="display:none">退出登录</button>
|
||||
</section>
|
||||
|
||||
<!-- 孕期档案里的滚轮（2026-10-11）：week = 孕周 + 天，due = 年 / 月 / 日；底下一行文字可互相切换 -->
|
||||
<div class="pk-scrim" id="pkScrim"></div>
|
||||
<section class="pk-sheet" id="pkSheet" role="dialog" aria-modal="true" aria-labelledby="pkT">
|
||||
<h3 id="pkT">你现在怀孕多久了？</h3>
|
||||
<p class="pk-sub" id="pkSub">按孕周推算预产期</p>
|
||||
<div class="pk-wheels" id="pkWheels"></div>
|
||||
<div class="pk-res"><span id="pkResL">预产期</span><b id="pkResV">—</b></div>
|
||||
<button type="button" class="dl-btn main pk-ok" id="pkOk">确定</button>
|
||||
<button type="button" class="pk-alt" id="pkAlt">知道预产期？直接选日期</button>
|
||||
</section>
|
||||
|
||||
<div class="toast" id="toast"></div>
|
||||
|
||||
Reference in New Issue
Block a user