diff --git a/index.html b/index.html index f8731c8..a355722 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ 兜爸心选 · 孕育陪伴 - + @@ -355,6 +355,13 @@ + + + +
+

已连续记录 42 天

@@ -905,8 +918,32 @@
+ + + -
+
-

甄选好物

- -

设置与服务

-
- - - - - - - - +

常用服务

+ +
+ + + +
+ + +

兜爸心选 · v3.2.1

diff --git a/js/app.js b/js/app.js index 96a2a43..8aa9f64 100644 --- a/js/app.js +++ b/js/app.js @@ -3,7 +3,7 @@ (function () { 'use strict'; /* 页面版本号（YYMMDD+序号）：显示在「关于兜爸心选」页底部；bump 时同步 head 注释与 ?v= */ - var VER = '26100135'; + var VER = '26100136'; const $ = (s, c) => (c || document).querySelector(s); const $$ = (s, c) => Array.from((c || document).querySelectorAll(s)); @@ -1063,6 +1063,12 @@ const p = $('.seg-panel[data-panel="data"]'); if (p) p.classList.toggle('is-empty', !!on); } + /* 「我的」页头部名字下面那枚小标签：孕周 / 宝宝月龄；未完善时隐藏 */ + function setMeTag(t) { + const el = $('#meTag'); if (!el) return; + el.textContent = t || ''; + el.classList.toggle('hide', !t); + } function syncPregnancy() { /* 孕期小知识：只认真实孕周（自己判显隐，见 renderTips） */ renderTips(); @@ -1083,6 +1089,7 @@ /* ① 我的 · 孕期卡 */ const pcT = $('#pcTitle'), pcS = $('#pcSub'), pcB = $('#pcBar'), pcR = $('#pcRing'); if (pcT) pcT.textContent = ageTxt; + setMeTag(ageTxt); if (pcS) pcS.textContent = '记录宝宝的成长时光'; if (pcB) pcB.style.setProperty('--p', '100%'); if (pcR) { @@ -1135,6 +1142,7 @@ fpRender(); /* ① 我的 · 孕期卡 → 引导 */ $('#pcTitle').textContent = '待完善孕期信息'; + setMeTag(''); $('#pcSub').textContent = '填好预产期，开启孕期陪伴'; $('#pcBar').style.setProperty('--p', '0%'); const rg = $('#pcRing'); @@ -1206,6 +1214,7 @@ /* ① 我的 · 孕期卡 */ $('#pcTitle').textContent = weekTxt; + setMeTag(weekTxt); $('#pcSub').textContent = (dueTxt ? dueTxt + ' · ' : '') + '还有 ' + left + ' 天'; $('#pcBar').style.setProperty('--p', pct + '%'); /* 卡片左上角那个图标是一圈进度环，和这条进度条同源（同一个 pct）， @@ -4134,6 +4143,25 @@ toast('请在微信小程序中打开商城'); } } + /* ---------- 兜豆兑换商城入口（2026-10-01） ---------- + 两个入口：「我的」页金色主卡 #meExchCard、首页婴儿房下面那条 #homeExch。 + 链接优先取应用后台（APP_BY_ID，identifier 按候选名逐个找），走 jumpApp() + —— 与其它 H5 应用同一条路（带 openid/unionid）。后台还没配、兜底地址也空时提示， + 不静默。⚠️ EXCH_FALLBACK_URL 待兑换商城侧给出正式地址后填上。 */ + const EXCH_IDS = ['duihuan', 'exchange', 'doudou', 'duihuanshangcheng']; + const EXCH_FALLBACK_URL = ''; + function openExchange() { + haptic(); + let app = null; + for (const id of EXCH_IDS) { if (APP_BY_ID[id]) { app = APP_BY_ID[id]; break; } } + const url = (app && app.url) || EXCH_FALLBACK_URL; + if (!url) { toast('兜豆兑换商城即将开放，先攒着兜豆吧'); return; } + jumpApp(url, (app && app.identifier) || 'duihuan'); + } + $$('#meExchCard, #homeExch').forEach(function (b) { + b.addEventListener('click', openExchange); + }); + /* 商城入口：「我的」页服务卡与首页商城主卡。 ⚠️ 2026-09-19：底 tab #tabMall 已经改回「宝宝来信」（见下面的 #tabLetter 绑定）， 不再走 goMall —— 所以这里只留两颗真正的商城入口。 */ diff --git a/mama-box.css b/mama-box.css index 5365440..4caa0f1 100644 --- a/mama-box.css +++ b/mama-box.css @@ -2879,3 +2879,110 @@ a.skip:focus{left:16px;top:16px} .bx-gl:not(.all) .bx-gl-h{flex-direction:column;align-items:flex-start;gap:2px} .bx-gl:not(.all) .bx-gl-l,.bx-gl:not(.all) .bx-gl-s,.bx-gl:not(.all) .bx-gl-b{margin-left:0} .bx-gl:not(.all){padding:9px 10px} + +/* ================= 「我的」页改版（2026-10-01）================= + 配色：头部蜜桃 → 珊瑚柔光渐变（和首页 hero 同一家族）；兜豆兑换卡用奶油金， + 是全页唯一的「金色」，一眼就是主角；孕期卡回到白底 + 珊瑚进度（上一版深绿和全站暖色打架）； + 心选商城 / 常用服务都是白卡，退到背景里。 + ⚠️ 本段写在文件末尾，靠层叠覆盖上面的旧规则（.me-top / .me-card / .preg-card …）， + 旧规则的注释讲的是旧版的取舍，看这里为准。 */ +.me-top.me-v2{ + padding:calc(env(safe-area-inset-top) + 14px) 20px 58px;border-radius:0 0 34px 34px; + background: + radial-gradient(180px 140px at 8% 0%, rgba(255,170,190,.55), rgba(255,170,190,0) 70%), + radial-gradient(200px 160px at 100% 85%, rgba(255,206,130,.55), rgba(255,206,130,0) 70%), + linear-gradient(160deg,#FF9F7E 0%,#F8775A 52%,#EE6248 100%)} +.me-top.me-v2::after{display:none} +.mt-glow{position:absolute;border-radius:50%;pointer-events:none} +.mt-glow.g1{width:210px;height:210px;right:-70px;top:-90px;background:rgba(255,255,255,.12)} +.mt-glow.g2{width:120px;height:120px;left:-40px;bottom:-60px;background:rgba(255,255,255,.08)} +.mt-stars{position:absolute;left:96px;top:calc(env(safe-area-inset-top) + 12px);width:150px;height:75px;pointer-events:none} +.me-top.me-v2 .hero-top{margin-bottom:6px;position:relative;z-index:2} +.me-v2 .me-card{background:none;box-shadow:none;padding:0 2px;border-radius:0;gap:15px;overflow:visible} +.me-v2 .me-avatar{width:70px;height:70px;box-shadow:0 0 0 3px rgba(255,255,255,.9),0 8px 18px rgba(150,50,30,.28)} +.me-v2 .av-edit{background:#fff;color:var(--brand);box-shadow:0 2px 8px rgba(150,50,30,.3)} +.me-v2 .me-name{color:#fff;font-size:23px;text-shadow:0 1px 6px rgba(150,50,30,.2)} +.me-tag{display:inline-block;margin-top:6px;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:700; + color:#fff;background:rgba(255,255,255,.22);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)} +.me-tag.hide{display:none} +.me-v2 .me-info p{color:rgba(255,255,255,.92);margin-top:6px;font-size:12.5px} +.me-v2 .me-info p b{color:#FFF3B0;font-size:15px} +.me-v2 .me-chev{color:rgba(255,255,255,.8)} + +/* 兜豆兑换商城主卡：半压在头部底边上 */ +#screen-me .page-body.no-top{margin-top:-40px} +.bean-card{position:relative;overflow:hidden;width:100%;display:flex;align-items:center;gap:12px;text-align:left; + padding:16px 16px 16px 12px;border-radius:24px;color:#6B3E12; + background: + radial-gradient(140px 100px at 100% 0%, rgba(255,255,255,.7), rgba(255,255,255,0) 70%), + linear-gradient(118deg,#FFF7E2 0%,#FFE7B0 55%,#FFD27E 100%); + box-shadow:0 14px 30px rgba(196,120,40,.24),inset 0 0 0 1px rgba(255,255,255,.7);transition:transform .18s var(--ease)} +.bean-card:active{transform:scale(.985)} +.bc-pattern{position:absolute;inset:0;pointer-events:none;opacity:.5; + background-image:radial-gradient(circle at 1px 1px, rgba(214,150,60,.35) 1px, transparent 1.4px);background-size:12px 12px; + -webkit-mask-image:linear-gradient(100deg,transparent 35%,#000 100%);mask-image:linear-gradient(100deg,transparent 35%,#000 100%)} +.bc-coin{flex:0 0 64px;position:relative;filter:drop-shadow(0 4px 6px rgba(200,120,20,.25))} +.bc-coin svg{display:block} +.bc-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;position:relative} +.bc-kick{font-size:11.5px;font-weight:800;color:#B8641A;letter-spacing:.5px} +.bc-title{font-size:19px;font-weight:900;letter-spacing:-.3px;color:#5A300C} +.bc-sub{font-size:12px;color:#8C6034} +.bc-beans{margin-top:3px;font-size:12px;color:#8C6034} +.bc-beans b{font-size:15px;color:#D2691E;font-weight:900} +.bc-beans.hide{display:none} +.bc-cta{flex:0 0 auto;position:relative;display:flex;align-items:center;gap:2px;padding:9px 13px;border-radius:99px; + font-size:13.5px;font-weight:800;color:#fff;background:linear-gradient(135deg,#F7845E,#E85A3C); + box-shadow:0 6px 14px rgba(232,90,60,.35)} +.bc-cta i,.ms-go i,.es-go i{font-style:normal;font-size:16px;line-height:1;margin-left:1px} + +/* 孕期信息卡：白底 + 珊瑚进度 */ +#screen-me .preg-card{color:var(--ink); + background:radial-gradient(200px 120px at 100% 0%, #FFEDE4, rgba(255,237,228,0) 70%),#fff; + box-shadow:var(--sh)} +#screen-me .pc-ico{background:#FFF0EA} +#screen-me .pc-title{color:var(--ink)} +#screen-me .pc-sub{color:var(--ink-2)} +#screen-me .preg-card .chev{color:#C9BFB8} +#screen-me .preg-card .rp{background:rgba(244,89,60,.1)} +#screen-me .pc-bar{background:#FBE7DE} +#screen-me .pc-bar i{background:linear-gradient(90deg,#FFB08F,#F4593C)} +#screen-me .pc-stage{color:#A0928A} +#screen-me .pc-stage .cur{color:#fff;background:linear-gradient(135deg,#F7845E,#E85A3C)} + +/* 心选商城横幅 */ +.mall-strip{width:100%;display:flex;align-items:center;gap:12px;margin-top:14px;padding:14px 16px;border-radius:20px;text-align:left; + background:#fff;box-shadow:var(--sh)} +.ms-ico{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex:0 0 auto;color:#E8603F; + background:linear-gradient(140deg,#FFEDE5,#FFD9CA)} +.ms-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} +.ms-main b{font-size:15.5px;font-weight:800;color:var(--ink)} +.ms-main span{font-size:12px;color:var(--ink-2)} +.ms-go{display:flex;align-items:center;font-size:13px;font-weight:700;color:var(--brand)} + +/* 常用服务四宫格 */ +.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);padding:16px 6px;border-radius:22px;background:#fff;box-shadow:var(--sh)} +.svc{position:relative;overflow:visible!important;display:flex;flex-direction:column;align-items:center;gap:8px;padding:4px 0} +.svc.hide{display:none} +.sv-ico{width:46px;height:46px;border-radius:15px;display:grid;place-items:center} +.sv-ico.o{background:#FFEFE6;color:#E8703F} +.sv-ico.p{background:#F1EBFB;color:#7B5FD4} +.sv-ico.b{background:#E7F0FA;color:#4478BC} +.sv-t{font-size:12.5px;font-weight:700;color:var(--ink)} +.sv-badge{position:absolute;top:-6px;left:50%;margin-left:10px;padding:1px 6px;white-space:nowrap;border-radius:99px;font-size:10px;font-weight:800; + color:#fff;background:var(--brand);box-shadow:0 0 0 2px #fff} +.sv-badge:empty{display:none} +.me-logout{display:block;width:100%;margin-top:14px;padding:14px;border-radius:18px;background:#fff; + font-size:14.5px;font-weight:700;color:#C33A2E;text-align:center;box-shadow:var(--sh)} +.me-ver{text-align:center;font-size:11.5px;color:#B5A9A1;margin:18px 0 6px} + +/* 首页 · 兜豆兑换商城入口条（婴儿房下面） */ +.exch-strip{width:100%;display:flex;align-items:center;gap:11px;margin-top:12px;padding:12px 14px;border-radius:20px;text-align:left; + background:radial-gradient(120px 80px at 100% 0%, rgba(255,255,255,.7), rgba(255,255,255,0) 70%),linear-gradient(118deg,#FFF7E2,#FFE3A6 70%,#FFD48A); + box-shadow:0 10px 22px rgba(196,120,40,.18),inset 0 0 0 1px rgba(255,255,255,.7)} +.es-coin{flex:0 0 auto;filter:drop-shadow(0 3px 4px rgba(200,120,20,.25))} +.es-coin svg{display:block} +.es-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} +.es-main b{font-size:15px;font-weight:900;color:#5A300C} +.es-main span{font-size:12px;color:#8C6034;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,#F7845E,#E85A3C);box-shadow:0 5px 12px rgba(232,90,60,.3)}