首页兜豆模块加横滑可兑好物；我的页孕期卡与兜豆卡对调；资料弹窗改版（实时结果条、预产期三种填法、孕周步进、小名建议）

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

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:26100137 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
+<!-- V:26100138 缓存版本标记：改 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 第四节） -->
@@ -355,13 +355,17 @@
             <button class="nyp-btn" id="nyBtn" type="button">进去布置 <svg viewBox="0 0 24 24" width="11" height="11" aria-hidden="true"><path d="M8 5l8 7-8 7z" fill="currentColor"/></svg></button>
           </div>
         </section>
-        <!-- 首页 · 兜豆兑换商城入口（2026-10-01）：紧跟婴儿房（那张卡写着「攒兜豆把它布置好」），
-             顺着「兜豆」这条线往下接。点击同「我的」页 #meExchCard → openExchange()。 -->
-        <button class="exch-strip ripple" id="homeExch">
-          <span class="es-coin" aria-hidden="true"><svg viewBox="0 0 24 24" width="36" height="36"><ellipse cx="12" cy="12.5" rx="7.4" ry="8.6" fill="#FFB5C4" transform="rotate(-18 12 12.5)"/><path d="M13.8 6.6c-2.6 1.6-3.4 5.8-1.2 9.4" stroke="#fff" stroke-width="1.6" fill="none" stroke-linecap="round" opacity=".85"/><path d="M12 15.6c-1.9-1.1-2.9-2.2-2.9-3.2a1.4 1.4 0 0 1 2.9-.5 1.4 1.4 0 0 1 2.9.5c0 1-1 2.1-2.9 3.2z" fill="#F0607E"/></svg></span>
+        <!-- 首页 · 兜豆兑换商城模块（2026-10-01）：紧跟婴儿房（那张卡写着「攒兜豆把它布置好」），
+             顺着「兜豆」这条线往下接。头部一条 + 下面一排可兑好物；点哪儿都 openExchange()。 -->
+        <section class="exch-mod" id="homeExchMod">
+          <button class="exch-strip ripple" id="homeExch">
+            <span class="es-coin" aria-hidden="true"><svg viewBox="0 0 24 24" width="36" height="36"><ellipse cx="12" cy="12.5" rx="7.4" ry="8.6" fill="#FFB5C4" transform="rotate(-18 12 12.5)"/><path d="M13.8 6.6c-2.6 1.6-3.4 5.8-1.2 9.4" stroke="#fff" stroke-width="1.6" fill="none" stroke-linecap="round" opacity=".85"/><path d="M12 15.6c-1.9-1.1-2.9-2.2-2.9-3.2a1.4 1.4 0 0 1 2.9-.5 1.4 1.4 0 0 1 2.9.5c0 1-1 2.1-2.9 3.2z" fill="#F0607E"/></svg></span>
           <span class="es-main"><b>兜豆兑好物</b><span id="homeExchSub">攒兜豆，好物免费兑</span></span>
-          <span class="es-go">去兑换<i>›</i></span>
-        </button>
+            <span class="es-go">去兑换<i>›</i></span>
+          </button>
+          <!-- 本场可兑好物（/mall/drop：有库存且已开售，按 heat_30m 降序取前 6），横向滑动；拉不到数据整行隐藏 -->
+          <div class="ex-goods hide" id="homeExchGoods"></div>
+        </section>
 
         <!-- 模块二 · 今天的动线。
              上一版这里是两个各自独立的模块：「AI今日小结」一张渐变卡，
@@ -918,34 +922,6 @@
       </div>
 
       <div class="page-body no-top">
-        <!-- 兜豆兑换商城主卡（2026-10-01）：半压在头部渐变边缘，是「我的」页最跳的一张。
-             点击走 openExchange()（app.js）—— 链接优先取应用后台，取不到再用写死的兜底地址。
-             #meExchSub 未登录写「攒兜豆，好物免费兑」，拿到余额后改成「兜豆 N · 可兑 M 件」（loadDou()）。 -->
-        <button class="bean-card ripple" id="meExchCard">
-          <span class="bc-pattern" aria-hidden="true"></span>
-          <span class="bc-top">
-            <span class="bc-coin" aria-hidden="true"><svg viewBox="0 0 24 24" width="58" height="58"><ellipse cx="12" cy="12.5" rx="7.4" ry="8.6" fill="#FFB5C4" transform="rotate(-18 12 12.5)"/><path d="M13.8 6.6c-2.6 1.6-3.4 5.8-1.2 9.4" stroke="#fff" stroke-width="1.6" fill="none" stroke-linecap="round" opacity=".85"/><path d="M12 15.6c-1.9-1.1-2.9-2.2-2.9-3.2a1.4 1.4 0 0 1 2.9-.5 1.4 1.4 0 0 1 2.9.5c0 1-1 2.1-2.9 3.2z" fill="#F0607E"/></svg></span>
-            <span class="bc-main">
-              <span class="bc-kick">兜豆兑换</span>
-              <span class="bc-title">兜豆兑好物</span>
-              <span class="bc-sub" id="meExchSub">攒兜豆，好物免费兑</span>
-            </span>
-            <span class="bc-cta">去兑换<i>›</i></span>
-          </span>
-          <!-- 本场热门好物（/mall/drop，按 heat_30m 取前 3）；拉不到数据就整行隐藏 -->
-          <span class="bc-drop hide" id="meExchDrop"><span class="bd-head" id="meExchDropT"></span><span class="bd-goods" id="meExchGoods"></span></span>
-        </button>
-
-        <!-- 授权完善资料：H5 → navigateTo → 小程序授权页(头像/昵称/手机号) → box_app /auth/profile 落库 -->
-        <div class="list-card" style="margin-top:14px" id="meAuthBox">
-          <button class="li ripple" id="meAuthCard">
-            <span class="li-ico o"><svg viewBox="0 0 24 24" width="19" height="19" aria-hidden="true"><rect x="5" y="10.5" width="14" height="9.5" rx="2.5" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="M8.5 10.5V8a3.5 3.5 0 0 1 7 0v2.5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><path d="M12 15v2" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg></span>
-            <span class="li-t">授权完善资料</span>
-            <span class="li-v">获取手机号 / 昵称 / 头像</span>
-            <i class="chev">›</i>
-          </button>
-        </div>
-
         <!-- 退出登录已移到个人资料卡右上角的图标按钮（#meLogoutBtn） -->
         <!-- ⚠️ 这两处的 data-modal 从 modalPreg 改成了 modalProfile：
              「编辑孕期信息」那张弹窗已整个并进「我的资料」（见文件末尾那段说明）。
@@ -958,7 +934,9 @@
              宽度账（.page-body 左右各 18 → 可用 284，.sec-title 是 flex、gap 8）：
              竖条 4 + 8 + 「孕期信息」4×17.5=70 + 8 + 「（必填）」4×12=48 + 8 + 「编辑 ›」≈34
              = 180 ≤ 284 ✓，余 104px，宽裕。 -->
-        <h2 class="sec-title dark">孕期信息<span class="sec-req">（必填）</span> <button class="sec-more" data-modal="modalProfile">编辑 ›</button></h2>
+        <!-- 2026-10-01：按用户要求孕期卡和兜豆卡对调 —— 孕期卡现在半压在头部底边上，所以去掉了上方的
+             「孕期信息（必填）· 编辑 ›」标题行（标题压在渐变上很乱）；整卡本身就点开资料弹窗，
+             「必填」挪进弹窗里那张「孕期信息」卡的角标。 -->
         <button class="preg-card ripple" data-modal="modalProfile">
           <div class="pc-row">
             <!-- 孕周进度环 + 蜷着的宝宝。
@@ -1002,6 +980,38 @@
           <div class="pc-stage"><span>孕早期</span><span class="cur" id="pcStage">孕中期 · 当前</span><span>孕晚期</span></div>
         </button>
 
+        <!-- 兜豆兑换商城主卡（2026-10-01）：半压在头部渐变边缘，是「我的」页最跳的一张。
+             点击走 openExchange()（app.js）—— 链接优先取应用后台，取不到再用写死的兜底地址。
+             #meExchSub 未登录写「攒兜豆，好物免费兑」，拿到余额后改成「兜豆 N · 可兑 M 件」（loadDou()）。 -->
+        <!-- 授权完善资料：H5 → navigateTo → 小程序授权页(头像/昵称/手机号) → box_app /auth/profile 落库 -->
+        <div class="list-card" style="margin-top:14px" id="meAuthBox">
+          <button class="li ripple" id="meAuthCard">
+            <span class="li-ico o"><svg viewBox="0 0 24 24" width="19" height="19" aria-hidden="true"><rect x="5" y="10.5" width="14" height="9.5" rx="2.5" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="M8.5 10.5V8a3.5 3.5 0 0 1 7 0v2.5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><path d="M12 15v2" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg></span>
+            <span class="li-t">授权完善资料</span>
+            <span class="li-v">获取手机号 / 昵称 / 头像</span>
+            <i class="chev">›</i>
+          </button>
+        </div>
+
+        <h2 class="sec-title dark">兜豆兑换</h2>
+        <button class="bean-card ripple" id="meExchCard">
+          <span class="bc-pattern" aria-hidden="true"></span>
+          <span class="bc-top">
+            <span class="bc-coin" aria-hidden="true"><svg viewBox="0 0 24 24" width="58" height="58"><ellipse cx="12" cy="12.5" rx="7.4" ry="8.6" fill="#FFB5C4" transform="rotate(-18 12 12.5)"/><path d="M13.8 6.6c-2.6 1.6-3.4 5.8-1.2 9.4" stroke="#fff" stroke-width="1.6" fill="none" stroke-linecap="round" opacity=".85"/><path d="M12 15.6c-1.9-1.1-2.9-2.2-2.9-3.2a1.4 1.4 0 0 1 2.9-.5 1.4 1.4 0 0 1 2.9.5c0 1-1 2.1-2.9 3.2z" fill="#F0607E"/></svg></span>
+            <span class="bc-main">
+              <span class="bc-kick">兜豆兑换</span>
+              <span class="bc-title">兜豆兑好物</span>
+              <span class="bc-sub" id="meExchSub">攒兜豆，好物免费兑</span>
+            </span>
+            <span class="bc-cta">去兑换<i>›</i></span>
+          </span>
+          <!-- 本场热门好物（/mall/drop，按 heat_30m 取前 3）；拉不到数据就整行隐藏 -->
+          <span class="bc-drop hide" id="meExchDrop"><span class="bd-head" id="meExchDropT"></span><span class="bd-goods" id="meExchGoods"></span></span>
+        </button>
+
+
+
+
         <!-- ================= 孕育顾问（企业微信入口） =================
              常驻在孕期卡下面：上面那张卡讲「你走到哪儿了」，这张接着说
              「路上有人陪你」，是同一段话的下一句；而「设置与服务」那组是
@@ -1757,7 +1767,7 @@
     <div class="modal-foot"><button class="dl-btn main" id="bxPrizeOk">太好了</button></div>
   </section>
 
-  <section class="modal" id="modalProfile" role="dialog" aria-modal="true" aria-labelledby="modalProfileTitle">
+  <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="关闭">
@@ -1767,10 +1777,93 @@
       </button>
     </div>
 
-    <!-- 头像：点圆形区域直接唤起系统相册；file input 藏起来但不能 display:none，
-         否则部分安卓 WebView 点不动，所以用 0 尺寸 + opacity 的写法 -->
-    <div class="av-pick">
-      <button class="av-big" id="avPick" aria-label="更换头像">
+    <!-- 2026-10-01 资料弹窗改版（用户：「现在填写比较困难，让用户很轻松地就能填写完」）：
+         ① 顶部一条实时结果「孕 N 周 +D 天 · 还有 X 天见面」—— 填的每一步都立刻看到算出了什么；
+         ② 预产期三种填法（分段切换）：知道预产期 / 按当前孕周（大号 −/＋ 步进，不用敲键盘）/ 按末次月经；
+            三种最后都落到 #pgDue（唯一的数据源），保存逻辑一行没改；
+         ③ 头像缩到昵称左边，和昵称同一行；宝宝小名下面给几个一点即填的小名；
+         ④ 弹窗不再自动聚焦昵称（data-autofocus="off"）—— 一打开就弹键盘，正好盖住要填的预产期。 -->
+    <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>
+
+    <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>
+
+      <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">
+      <div class="pf-ct">宝宝</div>
+      <label class="fld pf-fld"><span>小名</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="pick" data-sex="boy">男孩</button>
+          <button type="button" class="pick" data-sex="girl">女孩</button>
+        </div>
+      </div>
+    </div>
+
+    <div class="pf-card">
+      <div class="pf-ct">妈妈</div>
+      <div class="pf-me">
+        <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"/>
@@ -1784,52 +1877,16 @@
         </span>
       </button>
       <input type="file" id="avFile" accept="image/*" class="av-file">
-      <div class="av-tip">点一下换张照片 · 只存在你自己的手机上</div>
-    </div>
-
-    <!-- ⚠️ 这里原来第二格是「一句话签名」#pfBio，本批按用户要求**删掉了**，别加回来。
-         连带删的还有「我的」页头像旁那行 #meBio 和 js 里的 syncBio() ——
-         必须一起走：只删输入框、留着展示行，那行就变成一句谁也改不动的死文案，
-         比没有更糟（用户会在资料页里翻来翻去找哪儿能改它）。
-
-         ⚠️ 昵称（妈妈）和宝宝小名并成一行，是上面高度预算里省下的那 78px。
-            两格都是短文本，半行宽装得下：.fld input 左右内边 15×2 = 30，
-            半行宽 = (弹窗内容宽 - gap 12) / 2 ≈ (386-12)/2 = 187，
-            可写 157px ÷ 14px 字 ≈ 11 个汉字，而 maxlength 分别是 16 / 12 ——
-            填满会在框内横向滚动，不会破版。这是可接受的，别为此把它拆回两行。 -->
-    <div class="fld-row">
-      <!-- ⚠️ 不写死演示默认值（原 value="小满妈妈"/"小汤圆"已删）：打开弹窗时由
-           fillProfileForm() 按服务端档案回填，新用户全空 + placeholder 提示 -->
-      <label class="fld"><span>昵称</span><input id="pfName" type="text" maxlength="16" placeholder="妈妈"></label>
-      <label class="fld"><span>宝宝小名</span><input id="pgName" type="text" maxlength="12" placeholder="宝宝"></label>
-    </div>
-    <div class="fld">
-      <span>宝宝性别</span>
-      <!-- 性别会随档案一起保存（PUT /profile 的 babySex 字段）。 -->
-      <div class="pick-row" id="pgSex">
-        <button type="button" class="pick is-active" data-sex="unknown">还不知道</button>
-        <button type="button" class="pick" data-sex="boy">男孩</button>
-        <button type="button" class="pick" data-sex="girl">女孩</button>
+          <!-- 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">点头像换张照片</p>
     </div>
-    <!-- 预产期排在孕周前面：它是「源」，填了才解锁下面两格。
-         默认值不写死在标记里 —— 由 JS 按「打开这一刻 + 3 个月」现算 -->
-    <!-- 原生 date 空值时是一片空白（不支持 placeholder），叠一层文字占位：
-         有值由 JS 隐藏（fillProfileForm / pgDue change 都会调 syncDuePh） -->
-    <label class="fld fld-date"><span>预产期</span>
-      <span class="due-box"><input id="pgDue" type="date"><span class="date-ph" id="pgDuePh">- 年 - 月 - 日</span></span>
-    </label>
-    <div class="fld-row">
-      <!-- 孕周/天数由预产期自动算出，打开时按档案回填；新用户留空并锁定 -->
-      <label class="fld"><span>当前孕周</span><input id="pgWeek" type="number" min="0" max="42" placeholder="—" disabled></label>
-      <label class="fld"><span>额外天数</span><input id="pgDay" type="number" min="0" max="6" placeholder="—" disabled></label>
-    </div>
-    <p class="fld-hint" id="pgHint">填完预产期后自动算出，算得不准可以自己微调。</p>
-    <div class="modal-foot">
+
+    <div class="modal-foot pf-foot">
       <button class="dl-btn ghost" data-modal="close">取消</button>
-      <!-- ⚠️ 只剩这一个保存按钮。原 #pgSave 已随 modalPreg 一起删除，
-           它那套逻辑（校验预产期、夹取孕周天数、写 state、调 syncPregnancy()）
-           整段并进了 js 里的 #pfSave 处理器。 -->
       <button class="dl-btn main" id="pfSave">保存</button>
     </div>
   </section>