From da995ae540d722f191b6f70aa6fd0ec2021745b7 Mon Sep 17 00:00:00 2001 From: Karlcarlo Date: Thu, 1 Oct 2026 16:12:25 +0000 Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E5=85=9C=E8=B1=86=E6=A8=A1?= =?UTF-8?q?=E5=9D=97=E5=8A=A0=E6=A8=AA=E6=BB=91=E5=8F=AF=E5=85=91=E5=A5=BD?= =?UTF-8?q?=E7=89=A9=EF=BC=9B=E6=88=91=E7=9A=84=E9=A1=B5=E5=AD=95=E6=9C=9F?= =?UTF-8?q?=E5=8D=A1=E4=B8=8E=E5=85=9C=E8=B1=86=E5=8D=A1=E5=AF=B9=E8=B0=83?= =?UTF-8?q?=EF=BC=9B=E8=B5=84=E6=96=99=E5=BC=B9=E7=AA=97=E6=94=B9=E7=89=88?= =?UTF-8?q?=EF=BC=88=E5=AE=9E=E6=97=B6=E7=BB=93=E6=9E=9C=E6=9D=A1=E3=80=81?= =?UTF-8?q?=E9=A2=84=E4=BA=A7=E6=9C=9F=E4=B8=89=E7=A7=8D=E5=A1=AB=E6=B3=95?= =?UTF-8?q?=E3=80=81=E5=AD=95=E5=91=A8=E6=AD=A5=E8=BF=9B=E3=80=81=E5=B0=8F?= =?UTF-8?q?=E5=90=8D=E5=BB=BA=E8=AE=AE=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 5.5 --- index.html | 225 ++++++++++++++++++++++++++++++++------------------- js/app.js | 137 ++++++++++++++++++++++++------- mama-box.css | 81 +++++++++++++++++++ 3 files changed, 331 insertions(+), 112 deletions(-) diff --git a/index.html b/index.html index 831eb6d..5cd6a60 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ 兜爸心选 · 孕育陪伴 - + @@ -355,13 +355,17 @@ - - + 去兑换› + + +
+ - - - -
- -
- -

孕期信息（必填）

+ + + +

兜豆兑换

+ + + + + -
- + + +
+ +
+ +

产检单 / B 超单上写的「预产期」

+
+ +
+
+
+ 孕周 +
+ + + +
+
+
+ 又几天 +
+ + + +
+
+
+

比如「孕 24 周 +3 天」，就选 24 和 3

+
+ +
+ +

按末次月经第一天 + 280 天推算预产期

+
+ + +
+
宝宝
+ +
+ +
+
+ 性别 +
+ + + +
+
+
+ +
+
妈妈
+
+
+ -
点一下换张照片 · 只存在你自己的手机上
-
- - -
- - - -
-
- 宝宝性别 - -
- - - + + +
+
+

点头像换张照片

- - - -
- - - -
-

填完预产期后自动算出，算得不准可以自己微调。

-
+ +
-
diff --git a/js/app.js b/js/app.js index 73f2274..e62a861 100644 --- a/js/app.js +++ b/js/app.js @@ -3,7 +3,7 @@ (function () { 'use strict'; /* 页面版本号（YYMMDD+序号）：显示在「关于兜爸心选」页底部；bump 时同步 head 注释与 ?v= */ - var VER = '26100137'; + var VER = '26100138'; const $ = (s, c) => (c || document).querySelector(s); const $$ = (s, c) => Array.from((c || document).querySelectorAll(s)); @@ -890,14 +890,10 @@ return d.getFullYear() + '-' + p(d.getMonth() + 1) + '-' + p(d.getDate()); } + /* 2026-10-01 资料弹窗改版后：孕周两格不再锁（「按当前孕周」那页本来就是让人从零填的）， + 这里只负责没预产期时把两格清空。函数名留着，调用点不用动。 */ function lockWeekFields(locked) { - pgWeek.disabled = pgDay.disabled = locked; - /* 锁着的时候连数字也不留 —— 没填预产期就没有「当前孕周」这回事， - 留个旧值在灰格子里反而像是已经填好了 */ if (locked) { pgWeek.value = ''; pgDay.value = ''; } - pgHint.textContent = locked - ? '还没填预产期，孕周先锁着 —— 选好上面的预产期就会自动算出来。' - : '已按预产期自动算出，觉得不准可以自己微调。'; } /* 缓存戳重载：只换查询串（?t=…），两处都不能丢： ① URL 已有 query 时必须用 & 拼接 —— 直接拼 '?t=' 会把第二个 ? 吃进已有参数值里 @@ -944,6 +940,8 @@ lockWeekFields(true); } syncDuePh(); + setPgMode('due'); + if (pgLmp) { pgLmp.value = ''; pgLmp.dispatchEvent(new Event('change')); } /* 头像预览跟随卡片（有正式头像才显示；新用户空圆 + ＋号） */ const _me = $('#meAvatar'); if (_me && _me.classList.contains('has-img') && meAvatarImg && meAvatarImg.src) { @@ -955,13 +953,72 @@ } } - /* 预产期占位层：空值显示「- 年 - 月 - 日」，选了值隐藏 */ + /* 预产期按钮上的文字 + 顶部结果条，都从 #pgDue 现算（唯一数据源）。 + 函数名沿用 syncDuePh（原来只管「- 年 - 月 - 日」占位层），调用点不用动。 */ + const WK = '日一二三四五六'; + function fmtDay(d) { return d.getFullYear() + '年' + (d.getMonth() + 1) + '月' + d.getDate() + '日 周' + WK[d.getDay()]; } function syncDuePh() { - const ph = $('#pgDuePh'); - if (ph) ph.style.display = pgDue.value ? 'none' : 'block'; - pgDue.classList.toggle('due-empty', !pgDue.value); + const due = parseDay(pgDue.value); + const t = $('#pgDueTxt'); + if (t) { t.textContent = due ? fmtDay(due) : '点这里选预产期'; t.parentNode.classList.toggle('is-set', !!due); } + const sum = $('#pgSum'); + if (!sum) return; + sum.classList.toggle('is-set', !!due); + if (!due) { + $('#pgSumT').textContent = '还没填预产期'; + $('#pgSumS').textContent = '选一种方式填一下，马上就好'; + return; + } + const left = Math.round((midnight(due) - midnight(new Date())) / DAY_MS); + if (left < 0) { + $('#pgSumT').textContent = '宝宝已经出生啦'; + $('#pgSumS').textContent = '预产期 ' + fmtDay(due); + return; + } + const ga = gaFromDue(due); + $('#pgSumT').textContent = '孕 ' + Math.floor(ga / 7) + ' 周' + (ga % 7 ? ' +' + (ga % 7) + ' 天' : ''); + $('#pgSumS').textContent = (left ? '还有 ' + left + ' 天见面' : '就是今天啦') + ' · 预产期 ' + (due.getMonth() + 1) + '月' + due.getDate() + '日'; } + /* 三种填法切换（只切面板；数据都落在 #pgDue） */ + function setPgMode(m) { + $$('#pgMode .seg-b').forEach(b => b.classList.toggle('is-active', b.dataset.mode === m)); + $$('#modalProfile .pg-pane').forEach(p => p.classList.toggle('is-on', p.dataset.pane === m)); + } + $$('#pgMode .seg-b').forEach(b => b.addEventListener('click', () => { setPgMode(b.dataset.mode); haptic(); })); + + /* 孕周步进：空着时从 12 周起步（一般建档时间），天数 6 再 ＋ 进位到下一周 */ + $$('#modalProfile .stp-b').forEach(b => b.addEventListener('click', () => { + let w = parseInt(pgWeek.value, 10), d = parseInt(pgDay.value, 10); + if (isNaN(w)) w = 12; + if (isNaN(d)) d = 0; + const k = +b.dataset.d; + if (b.dataset.stp === 'w') w += k; + else { + d += k; + if (d > 6) { d = 0; w += 1; } + if (d < 0) { d = w > 0 ? 6 : 0; if (w > 0) w -= 1; } + } + pgWeek.value = Math.min(42, Math.max(0, w)); + pgDay.value = d; + pgWeek.dispatchEvent(new Event('change')); + haptic(); + })); + + /* 末次月经第一天 + 280 天 = 预产期 */ + const pgLmp = $('#pgLmp'); + if (pgLmp) pgLmp.addEventListener('change', () => { + const l = parseDay(pgLmp.value); + const t = $('#pgLmpTxt'); + if (t) { t.textContent = l ? fmtDay(l) : '点这里选末次月经第一天'; t.parentNode.classList.toggle('is-set', !!l); } + if (!l) return; + pgDue.value = toISO(new Date(l.getFullYear(), l.getMonth(), l.getDate() + 280)); + pgDue.dispatchEvent(new Event('change')); + }); + + /* 小名建议：点一下填进去 */ + $$('#pgNameChips .nm-c').forEach(b => b.addEventListener('click', () => { pgName.value = b.textContent; haptic(); })); + /* 预产期一变，孕周 / 额外天数自动算出来 */ pgDue.addEventListener('change', () => { syncDuePh(); @@ -979,6 +1036,7 @@ const d = Math.min(6, Math.max(0, parseInt(pgDay.value, 10) || 0)); pgWeek.value = w; pgDay.value = d; pgDue.value = toISO(dueFromGA(w * 7 + d)); + syncDuePh(); })); /* 性别三选一 */ @@ -1373,7 +1431,8 @@ $('#pfSave').addEventListener('click', () => { /* 预产期是一切的源头：孕周、剩余天数、信里的日期全从它算。没有它没什么可存的。 */ if (!parseDay(pgDue.value)) { - toast('先选一下预产期，孕周会自动算出来'); + toast('先填一下预产期，孕周会自动算出来'); + setPgMode('due'); pgDue.focus(); return; } @@ -4172,27 +4231,49 @@ function setExchSub(t) { $$('#meExchSub, #homeExchSub').forEach(function (el) { el.textContent = t; }); } + function douImg(g) { + return /^https?:/.test(g.img || '') ? g.img : EXCH_URL + String(g.img || '').replace(/^\//, ''); + } + /* 一件商品的小卡（「我的」页 3 件 / 首页横滑 6 件共用），全用 DOM 拼，商品名不进 innerHTML */ + function douItem(g, cls, more) { + const it = document.createElement('span'); it.className = cls; + const pic = document.createElement('span'); pic.className = 'gi-pic'; + const im = document.createElement('img'); im.alt = ''; im.loading = 'lazy'; im.src = douImg(g); + pic.appendChild(im); + if (more && g.badge) { const bd = document.createElement('i'); bd.className = 'gi-badge'; bd.textContent = g.badge; pic.appendChild(bd); } + if (more && g.stock <= 5) { const st = document.createElement('i'); st.className = 'gi-left'; st.textContent = '仅剩 ' + g.stock + ' 件'; pic.appendChild(st); } + const nm = document.createElement('span'); nm.className = 'bd-nm'; nm.textContent = g.name || ''; + const pr = document.createElement('b'); pr.textContent = g.price + ' 兜豆'; + it.append(pic, nm, pr); + return it; + } function renderDrop(d) { - const box = $('#meExchDrop'); if (!box) return; const now = d && d.server_time ? new Date(d.server_time).getTime() : Date.now(); const goods = ((d && d.goods) || []).filter(function (g) { return g.stock > 0 && (!g.opens_at || new Date(g.opens_at).getTime() <= now); - }) - .sort(function (x, y) { return (y.heat_30m || 0) - (x.heat_30m || 0); }).slice(0, 3); - if (!goods.length) { box.classList.add('hide'); return; } - const dr = d.drop || {}; - $('#meExchDropT').textContent = (dr.title || '本场好物') + (dr.open && dr.left != null ? ' · 剩 ' + dr.left + ' 件' : ''); - const wrap = $('#meExchGoods'); wrap.textContent = ''; - goods.forEach(function (g) { - const it = document.createElement('span'); it.className = 'bd-it'; - const im = document.createElement('img'); im.alt = ''; im.loading = 'lazy'; - im.src = /^https?:/.test(g.img || '') ? g.img : EXCH_URL + String(g.img || '').replace(/^\//, ''); - const nm = document.createElement('span'); nm.className = 'bd-nm'; nm.textContent = g.name || ''; - const pr = document.createElement('b'); pr.textContent = g.price + ' 兜豆'; - it.append(im, nm, pr); wrap.appendChild(it); - }); - box.classList.remove('hide'); + }).sort(function (x, y) { return (y.heat_30m || 0) - (x.heat_30m || 0); }); + /* 「我的」页：本场标题 + 热门前 3 */ + const box = $('#meExchDrop'); + if (box) { + if (!goods.length) box.classList.add('hide'); + else { + const dr = d.drop || {}; + $('#meExchDropT').textContent = (dr.title || '本场好物') + (dr.open && dr.left != null ? ' · 剩 ' + dr.left + ' 件' : ''); + const wrap = $('#meExchGoods'); wrap.textContent = ''; + goods.slice(0, 3).forEach(function (g) { wrap.appendChild(douItem(g, 'bd-it')); }); + box.classList.remove('hide'); + } + } + /* 首页：横滑前 6 件，带「热门」角标和「仅剩 N 件」 */ + const row = $('#homeExchGoods'); + if (row) { + row.textContent = ''; + goods.slice(0, 6).forEach(function (g) { row.appendChild(douItem(g, 'ex-it', true)); }); + row.classList.toggle('hide', !goods.length); + } } + const _hxg = $('#homeExchGoods'); + if (_hxg) _hxg.addEventListener('click', function (e) { if (e.target.closest('.ex-it')) openExchange(); }); function loadDou() { const oid = hashParam('openid'), uid = hashParam('unionid'); const dropP = fetch(DOU_API + '/mall/drop').then(function (r) { return r.ok ? r.json() : null; }).catch(function () { return null; }); diff --git a/mama-box.css b/mama-box.css index d0b65ca..460cb43 100644 --- a/mama-box.css +++ b/mama-box.css @@ -2995,3 +2995,84 @@ a.skip:focus{left:16px;top:16px} .es-main span{font-size:12px;font-weight:700;color:#B83F62;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .es-go{flex:0 0 auto;display:flex;align-items:center;padding:7px 12px;border-radius:99px;font-size:13px;font-weight:800;color:#fff; background:linear-gradient(135deg,#E8708F,#D9577A 60%,#B83F62);box-shadow:0 5px 12px rgba(184,63,98,.3)} + +/* ================= 「我的资料」弹窗改版（2026-10-01）================= + 目标：好填。实时结果条在最上面；预产期三种填法；孕周用大号步进按钮，不用敲键盘； + 头像缩进「妈妈」卡和昵称并排；每组一张白卡，读起来是三件事，不是一长串输入框。 */ +.pf-modal{padding-bottom:0} +.pf-lead{font-size:12.5px;color:var(--ink-2);margin-top:4px} +.pf-sum{display:flex;align-items:center;gap:12px;margin-top:14px;padding:14px 16px;border-radius:20px;color:#fff; + background:linear-gradient(135deg,#C9BEB6,#B2A69D);transition:background .3s} +.pf-sum.is-set{background:radial-gradient(140px 90px at 100% 0%, rgba(255,214,150,.45), rgba(255,214,150,0) 70%),linear-gradient(135deg,#FF9A7A,#F2664A); + box-shadow:0 10px 22px rgba(240,100,70,.28)} +.ps-ico{width:40px;height:40px;border-radius:13px;background:rgba(255,255,255,.22);display:grid;place-items:center;flex:0 0 auto} +.ps-main{display:flex;flex-direction:column;gap:2px;min-width:0} +.ps-main b{font-size:19px;font-weight:900;letter-spacing:-.3px} +.ps-main span{font-size:12.5px;opacity:.92} +.pf-card{margin-top:12px;padding:14px 14px 16px;border-radius:20px;background:#fff;box-shadow:0 4px 14px rgba(160,110,90,.08)} +.pf-ct{font-size:15px;font-weight:800;color:var(--ink);display:flex;align-items:center;gap:6px} +.pf-ct em{font-style:normal;font-size:11px;font-weight:800;color:#fff;background:var(--brand);padding:1px 7px;border-radius:99px} +.seg{display:flex;margin-top:12px;padding:4px;border-radius:14px;background:#F5EEE9} +.seg-b{flex:1;padding:9px 2px;border-radius:11px;font-size:13px;font-weight:700;color:var(--ink-2);transition:all .2s} +.seg-b.is-active{background:#fff;color:var(--brand);box-shadow:0 2px 8px rgba(160,90,60,.14)} +.pg-pane{display:none;margin-top:12px} +.pg-pane.is-on{display:block} +.pg-tip{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.5} +.date-btn{position:relative;display:flex;align-items:center;gap:10px;padding:0 14px;min-height:54px;border-radius:16px; + background:#FFF6F2;box-shadow:inset 0 0 0 1.5px #F6D6CA;cursor:pointer} +.date-btn.is-set{background:#FDECE7;box-shadow:inset 0 0 0 1.8px var(--brand)} +.db-ico{color:var(--brand);display:grid;place-items:center} +.db-txt{flex:1;font-size:16px;font-weight:700;color:#B4A79C} +.date-btn.is-set .db-txt{color:var(--ink)} +/* 原生日期控件整块盖在按钮上、透明：点哪儿都能唤起系统日期选择器 */ +.date-btn input{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;padding:0;margin:0;-webkit-appearance:none;appearance:none;cursor:pointer} +.date-btn input::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer} +.stp-row{display:flex;gap:10px} +.stp{flex:1;min-width:0} +.stp-l{display:block;font-size:12.5px;font-weight:700;color:var(--ink-2);margin-bottom:7px} +.stp-ctl{display:flex;align-items:center;height:54px;border-radius:16px;background:#FFF6F2;box-shadow:inset 0 0 0 1.5px #F6D6CA;overflow:hidden} +.stp-b{flex:0 0 44px;height:100%;font-size:22px;font-weight:700;color:var(--brand)} +.stp-b:active{background:#FBE2D9} +.stp-ctl input{flex:1;min-width:0;width:100%;height:100%;border:0;background:none;text-align:center;font-size:22px;font-weight:900;color:var(--ink); + -moz-appearance:textfield;padding:0} +.stp-ctl input::-webkit-outer-spin-button,.stp-ctl input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} +.stp-ctl input:focus{outline:none} +.pf-fld{margin-top:12px} +.nm-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px} +.nm-c{padding:6px 12px;border-radius:99px;font-size:12.5px;font-weight:700;color:#B4573E;background:#FFF1EB} +.nm-c:active{transform:scale(.95)} +.pf-me{display:flex;align-items:flex-end;gap:14px} +.pf-me .av-pick{padding:0;flex:0 0 auto} +.pf-me .av-big{width:64px;height:64px} +.pf-me .av-big>svg{width:36px;height:36px} +.pf-me .fld{flex:1;margin-top:0} +.pf-foot{position:sticky;bottom:0;margin:14px -22px 0;padding:12px 22px calc(14px + env(safe-area-inset-bottom)); + background:linear-gradient(rgba(250,245,241,0),#FAF5F1 30%)} +.pf-foot .dl-btn.ghost{flex:0 0 96px} +.pf-me .av-cam{width:24px;height:24px;right:-4px;bottom:-4px} +.pf-me .av-cam svg{width:12px;height:12px} + +/* 首页 · 兜豆兑好物模块：头部一条 + 横滑商品（2026-10-01 用户：「需要调出几个商品，不能直接是一条信息」） */ +.exch-mod{margin-top:12px;padding:6px 6px 12px;border-radius:24px; + background:radial-gradient(160px 110px at 100% 0%, rgba(255,200,87,.32), rgba(255,200,87,0) 70%),linear-gradient(160deg,#FFF8F1,#FFEAF0 60%,#FFDCE6); + box-shadow:0 10px 24px rgba(184,63,98,.14),inset 0 0 0 1px rgba(255,255,255,.75)} +.exch-mod .exch-strip{margin-top:0;background:none;box-shadow:none;padding:8px 8px 6px} +.ex-goods{display:flex;gap:9px;overflow-x:auto;padding:6px 8px 2px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none} +.ex-goods::-webkit-scrollbar{display:none} +.ex-goods.hide{display:none} +.ex-it{flex:0 0 96px;scroll-snap-align:start;display:flex;flex-direction:column;gap:3px;padding:6px 6px 8px;border-radius:16px;background:#fff; + box-shadow:0 4px 10px rgba(184,63,98,.08);cursor:pointer} +.ex-it:active{transform:scale(.97)} +.gi-pic{position:relative;display:block} +.gi-pic img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;background:#FFF1F4} +.gi-badge{position:absolute;left:4px;top:4px;font-style:normal;font-size:10px;font-weight:800;color:#fff;background:#E8344E;padding:1px 6px;border-radius:99px} +.gi-left{position:absolute;left:4px;right:4px;bottom:4px;text-align:center;font-style:normal;font-size:10px;font-weight:800;color:#fff; + background:rgba(74,53,48,.62);padding:1px 0;border-radius:8px} +.ex-it .bd-nm{font-size:12px;color:#4A3530;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px} +.ex-it b{font-size:12px;font-weight:900;color:#D9577A} + +/* 「我的」页：孕期卡和兜豆卡对调 —— 孕期卡半压在头部底边，阴影加深一点才「浮」得起来 */ +#screen-me .page-body.no-top>.preg-card:first-of-type{box-shadow:0 14px 30px rgba(140,56,34,.18),0 2px 6px rgba(140,56,34,.08)} +.seg-b{text-align:center;white-space:nowrap} +.stp-b{width:48px;min-width:48px;display:grid;place-items:center;padding:0} +.stp-ctl input{width:0}