我的页兜豆余额改实心橘色胶囊；孕期档案点头像弹统一头像面板（预设 / 相册 / 微信头像） v26101027

Co-Authored-By: AI 助手

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:26101026 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
+<!-- V:26101027 缓存版本标记：改 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） -->
@@ -2038,6 +2038,8 @@
      加载失败/离线时 window.wx 为 undefined，goMall() 会降级为 toast 提示，
      不影响应用其余功能。 -->
 
+<!-- 统一头像面板（预设妈妈/宝宝头像 + 从相册上传 + 用微信头像），孕期档案点头像用 -->
+<script src="/_bridge/avatar-picker.js?v=26101104"></script>
 <script src="js/zodiac-art.js"></script>
 <script src="js/app.js"></script>
 <!-- 2026-10-03 首页彩蛋：宝宝在肚皮底下动（独立文件，删掉这一行即整体下线；开关在「隐私权限」） -->

js/app.js

@@ -3,7 +3,7 @@
 (function () {
   'use strict';
   /* 页面版本号（YYMMDD+序号）：显示在「关于兜爸心选」页底部；bump 时同步 head 注释与 ?v= */
-  var VER = '26101026';
+  var VER = '26101027';
   const $ = (s, c) => (c || document).querySelector(s);
   const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));
 
@@ -1214,6 +1214,7 @@
     };
   }
 
+  let pickedAvatar = '';   /* 孕期档案里从头像面板选中的正式 URL，见 openAvatarPanel */
   const pgName = $('#pgName'), pgDue = $('#pgDue'),
         pgWeek = $('#pgWeek'), pgDay = $('#pgDay'), pgHint = $('#pgHint');
 
@@ -1255,6 +1256,7 @@
   /* 打开资料弹窗时的表单回填：全部以服务端档案为准（最后写入者胜）。
      新用户（未完善资料）：昵称/小名/预产期/孕周全空 + 孕周锁定，只留 placeholder。 */
   function fillProfileForm() {
+    pickedAvatar = '';
     $('#pfName').value = state.userName || '';
     /* 方案A（2026-10-10）：未授权 → 妈妈栏换成授权提示，旧昵称/头像不露出 */
     var _ua = state.authorized === false;
@@ -1870,12 +1872,29 @@
   /* 点大圆 → 转交给隐藏的 file input。openModal 里会 focus 第一个输入框，
      这里 avFile 排在 pfName 前面，所以 openModal 用的选择器只取 .modal-ta/input
      可能命中 file input——用 :not([type=file]) 排除掉，见 openModal */
-  avBig.addEventListener('click', e => { e.stopPropagation(); avFile.click(); });
+  /* 2026-10-11 用户：点头像弹预设选项，也能从相册上传、用微信头像 → 走统一头像面板 avatarPicker
+     （/_bridge/avatar-picker.js：选完自己上传、写回共享资料、派发 mmbox:avatar）。
+     选中的是正式 URL，记在 pickedAvatar，保存时一起 PUT 进首页档案；面板没加载上才退回系统选图。 */
+  function openAvatarPanel() {
+    if (window.avatarPicker && window.avatarPicker.open) {
+      window.avatarPicker.open({
+        current: avBig.classList.contains('has-img') ? avPreview.src : '',
+        accent: '#F4593C', accentSoft: '#FDECE7',
+        onPick: function (url) {
+          pickedAvatar = url;
+          avFile.value = '';
+          avPreview.src = url; avBig.classList.add('has-img');
+          haptic();
+        }
+      });
+    } else avFile.click();
+  }
+  avBig.addEventListener('click', e => { e.stopPropagation(); openAvatarPanel(); });
   /* 孕期档案里头像是一整行，点行上任何地方都换头像 */
   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(); } });
+    pfMeRow.addEventListener('click', e => { if (e.target !== avFile) openAvatarPanel(); });
+    pfMeRow.addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openAvatarPanel(); } });
   }
 
   avFile.addEventListener('change', () => {
@@ -1885,6 +1904,7 @@
     if (f.size > 8 * 1024 * 1024) { toast('图片太大了，换一张小于 8MB 的'); return; }
     const r = new FileReader();
     /* 读成 data URI 就地预览：产物是单文件、没有后端，不做真正的上传 */
+    pickedAvatar = '';
     r.onload = () => { avPreview.src = r.result; avBig.classList.add('has-img'); haptic(); };
     r.onerror = () => toast('这张图读不出来，换一张试试');
     r.readAsDataURL(f);
@@ -1967,7 +1987,12 @@
       });
     }
     var newAvatarFile = (avFile.files && avFile.files[0]) || null;
-    if (newAvatarFile && avBig.classList.contains('has-img')) {
+    if (pickedAvatar && !_unauth) {
+      /* 头像面板选的已经是正式 URL（预设图 / 面板自己上传过），直接写 */
+      $('#meAvatar').classList.add('has-img');
+      _putProfile(pickedAvatar);
+      pickedAvatar = '';
+    } else if (newAvatarFile && avBig.classList.contains('has-img')) {
       var fd = new FormData();
       fd.append('file', newAvatarFile, newAvatarFile.name || 'avatar.png');
       fetch('/api/upload', { method: 'POST', body: fd })

mama-box.css

@@ -4838,9 +4838,12 @@ a.skip:focus{left:16px;top:16px}
 .pk-alt{margin-top:12px;font-size:12.5px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
 
 /* 「我的」页兜豆兑换条：余额右侧大号显示（2026-10-11），数字用品牌橘、单位淡色小字，后面跟箭头 */
-.ms-bal{flex:none;display:flex;align-items:baseline;gap:3px;color:var(--brand)}
-.ms-bal b{font-size:24px;font-weight:900;letter-spacing:-.5px;line-height:1;font-variant-numeric:tabular-nums}
-.ms-bal small{font-size:12px;font-weight:700;color:var(--ink-2)}
-.ms-bal::after{content:"›";margin-left:4px;font-size:19px;line-height:1;color:#C9BFB8;align-self:center}
+/* 兜豆条是半透明磨砂卡，压在「我的」页暖粉渐变上，橘色数字直接写会和底色糊在一起 →
+   放进一颗实心品牌橘胶囊、白字，和背景拉开（2026-10-11 用户：「跟后面的背景色靠色了」） */
+.ms-bal{flex:none;display:flex;align-items:center;gap:4px;padding:6px 8px 6px 12px;border-radius:99px;
+  background:linear-gradient(135deg,#FF7A55,var(--brand));color:#fff;box-shadow:0 6px 14px rgba(244,89,60,.28)}
+.ms-bal b{font-size:19px;font-weight:900;letter-spacing:-.3px;line-height:1;font-variant-numeric:tabular-nums}
+.ms-bal small{font-size:11.5px;font-weight:700;color:rgba(255,255,255,.88)}
+.ms-bal::after{content:"›";margin-left:2px;font-size:17px;line-height:1;color:rgba(255,255,255,.9)}
 .ms-bal.hide,.ms-go.hide{display:none}