feat(记一下/顾问码): 隐藏未实现的「今天已使用」快捷区 + 顾问二维码换真图 (v26092207)

记一下弹层:
- 日期/「今天已记 N 条」那行 + 「今天已使用」快捷区(数胎动/孕期体重/胎心记录)
  功能尚未实现、数据是写死的演示值,按要求先整体隐藏。
- 只挂 .tbd-hide,**不删 DOM**:js 里 $('#quickKick') 没有判空,且
  #kickCount / #todayCount / #noteWhen 会被回填,删掉会直接抛错。
- dedupeApps 在快捷区隐藏时跳过:否则首个可见小标题会变成没有指代对象的
  「其他孕期工具」;renderAppGrid 补写 data-toast,避免点「共 N 个」时退回
  index.html 里写死的「共 16 个」。

企业微信顾问二维码:
- 占位 svg(is-stub)换成真图 assets/img/4834fe8d686a.png。
  文件名 = 文件内容 md5 前 12 位,与该目录另外 34 张图一致(内容寻址,换码即换 URL)。
- .wx-qr 挂在元素本身、svg/img 通吃,CSS 未改;14px 圆角只裁到四角白色静默区,
  切不到码点。
This commit is contained in:
2026-09-22 20:25:58 +08:00
parent 849cf7a521
commit 307f6182e4
4 changed files with 48 additions and 40 deletions

BIN
assets/img/4834fe8d686a.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

View File

@@ -7,7 +7,7 @@
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>兜爸心选 · 孕育陪伴</title>
<!-- V:26092205 缓存版本标记:改 css/js 时同步 bump 该值(与 js/app.js 的 VER 同源),静态资源按 mtime 走 ETag 自动刷新 -->
<!-- V:26092207 缓存版本标记:改 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 第四节) -->
@@ -1263,13 +1263,19 @@
<div class="sheet-head">
<div>
<h2>记一下</h2>
<p><span id="noteWhen">—</span> · 今天已记 <b id="todayCount">4</b> 条</p>
<!-- ⚠️ 临时隐藏(2026-09-22):「今天已记 N 条」依赖记录/统计功能,尚未实现 -->
<p class="tbd-hide"><span id="noteWhen">—</span> · 今天已记 <b id="todayCount">4</b> 条</p>
</div>
<button class="sheet-close" data-sheet="close">✕</button>
</div>
<div class="sheet-scroll">
<div class="apps-head first">今天已使用 <button class="sec-more" data-toast="点一下可直接补记">点一下直接记录 ›</button></div>
<div class="quick-row">
<!-- ⚠️ 临时隐藏整块(2026-09-22):「今天已使用」快捷区 + 下方 .quick-row 的功能还没实现
(数据是写死的演示值 58.2kg / 待记录)。
**只挂 .tbd-hide,不要删 DOM**:JS 里 $('#quickKick') 没有判空,
还有 #kickCount / #todayCount / #noteWhen 会被回填,删掉会直接抛错。
恢复:去掉这三处 .tbd-hide 即可(含 <p> 那处),dedupeApps 会自动重新生效。 -->
<div class="apps-head first tbd-hide">今天已使用 <button class="sec-more" data-toast="点一下可直接补记">点一下直接记录 ›</button></div>
<div class="quick-row tbd-hide">
<button class="quick q1 ripple" id="quickKick"><img class="q-ico" src="assets/img/df905dcf3a1c.png" alt="" aria-hidden="true"><span class="q-t">数胎动</span><span class="q-v">+<b id="kickCount">1</b> 次</span></button>
<button class="quick q2 ripple" data-toast="已记录体重 58.2kg"><img class="q-ico" src="assets/img/a9e3b27a4a23.png" alt="" aria-hidden="true"><span class="q-t">孕期体重</span><span class="q-v">58.2kg</span></button>
<button class="quick q3 ripple" data-toast="开始测量胎心……"><img class="q-ico" src="assets/img/30de43bbc9aa.png" alt="" aria-hidden="true"><span class="q-t">胎心记录</span><span class="q-v">待记录</span></button>
@@ -1398,39 +1404,21 @@
这一处不一致是需求方明确保留的(见改动清单 D3),别顺手「统一」。 -->
<p class="modal-lead" id="wxLead">扫码添加顾问,说一句「领资料」,她会把资料直接发给你。</p>
<div class="wx-qr-box">
<!-- ⚠️ 这是**占位**二维码,扫不出任何东西。
<!-- 真实企业微信顾问二维码(2026-09-22 换上,替换掉原来的占位 svg)。
文件 assets/img/4834fe8d686a.png ,396×396 PNG,
md5 = 4834fe8d686a6ca129c8e51e87fe62f8(**前 12 位就是文件名**)。
换真码的步骤:把真图存成 assets 目录下的 qr-wecom.png,
再把下面整个 <svg> 换成一个 <img class="wx-qr" alt="企业微信顾问二维码">
并让它的 src 指向那张图。CSS 一个字都不用动 —— .wx-qr 同时管 svg 和 img。
(这里为什么不直接把那行标记抄给你:build.js 会扫全文里所有
"assets/文件名" 形式的引用并要求文件真实存在,写在 HTML 注释里
也照样算数。图还没放进去就先把示范代码写在这儿,构建会当场失败,
报「缺少资源文件:qr-wecom.png」。这个检查是对的,别为了少打几个字去动它。)
「示例二维码 · 待替换」那行字是写在 svg **内部**的,跟着一起被换掉。
写在外面的话,换上真码之后页面上会剩一句「待替换」挂在真二维码底下,
而那时候链接已经发出去了。 -->
<svg class="wx-qr is-stub" viewBox="0 0 100 100" role="img" aria-label="示例二维码,待替换为真实企业微信二维码">
<rect width="100" height="100" rx="8" fill="#F3ECE6"/>
<g fill="#C9BCB2">
<rect x="12" y="12" width="22" height="22" rx="4"/><rect x="66" y="12" width="22" height="22" rx="4"/>
<rect x="12" y="66" width="22" height="22" rx="4"/>
<rect x="42" y="14" width="6" height="6"/><rect x="52" y="14" width="6" height="6"/>
<rect x="42" y="24" width="6" height="6"/><rect x="14" y="42" width="6" height="6"/>
<rect x="24" y="42" width="6" height="6"/><rect x="42" y="42" width="6" height="6"/>
<rect x="52" y="52" width="6" height="6"/><rect x="66" y="42" width="6" height="6"/>
<rect x="76" y="52" width="6" height="6"/><rect x="42" y="66" width="6" height="6"/>
<rect x="52" y="76" width="6" height="6"/><rect x="66" y="66" width="6" height="6"/>
<rect x="76" y="76" width="6" height="6"/>
</g>
<rect x="17" y="17" width="12" height="12" rx="2" fill="#F3ECE6"/>
<rect x="71" y="17" width="12" height="12" rx="2" fill="#F3ECE6"/>
<rect x="17" y="71" width="12" height="12" rx="2" fill="#F3ECE6"/>
<rect x="14" y="45" width="72" height="14" rx="4" fill="rgba(243,236,230,.94)"/>
<text x="50" y="54.6" text-anchor="middle" font-size="8.4" font-weight="700" fill="#9A8B80">示例二维码 · 待替换</text>
</svg>
⚠️ 换码时的几条规矩:
① 文件名取**文件内容 md5 的前 12 位**(md5sum 新图 | cut -c1-12)。
该目录下 35 张图全按这个规则,别起描述性名字 —— 内容一变 URL 就变,
天然不会被上一版二维码的缓存顶住。
② 只动下面这一行。.wx-qr 挂在元素本身、svg 与 img 通吃(见 mama-box.css),
CSS 一个字都不用改:168×168、14px 圆角都是现成的。
14px 圆角只吃掉四角极角的**白色静默区**(本图静默区 13/396 → 显示约 5.5px,
对角裁切 4.1px < 到黑色模块的 7.8px),切不到码点,不影响扫码。
③ 注释里除了上面那条**真实存在**的路径,别再写别的图片路径字面量 ——
构建脚本连 HTML 注释一起扫,写了不存在的就报「缺少资源文件」。 -->
<img class="wx-qr" src="assets/img/4834fe8d686a.png" alt="企业微信顾问二维码">
<!-- 需求 1.1 指定的文案,逐字照抄(直角引号沿用站内习惯) -->
<p class="wx-qr-cap">请添加资料小助手,回复「领资料」</p>
</div>

View File

@@ -3,7 +3,7 @@
(function () {
'use strict';
/* 页面版本号(YYMMDD+序号):显示在「关于兜爸心选」页底部;bump 时同步 head 注释与 ?v= */
var VER = '26092205';
var VER = '26092207';
const $ = (s, c) => (c || document).querySelector(s);
const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));
@@ -336,9 +336,15 @@
const t = e.target.closest('.app');
if (t && t.dataset.url) jumpApp(decodeURIComponent(t.dataset.url), decodeURIComponent(t.dataset.id || ''));
};
/* 角标「共 N 个」同步真实数量 */
/* 角标「共 N 个」同步真实数量。
⚠️ 顺带写 data-toast:点它弹的那句原来由 dedupeApps 拼「已使用的 N 个已置顶」,
而快捷区现在被临时隐藏(dedupeApps 直接 return,见那里的注释),
若这里不写,就会退化成 index.html 里写死的「共 16 个」—— 数字比实际多。 */
const cnt = $('.apps-head.for-all .sec-more');
if (cnt) cnt.textContent = '共 ' + apps.length + ' 个 ›';
if (cnt) {
cnt.textContent = '共 ' + apps.length + ' 个 ›';
cnt.dataset.toast = '共 ' + apps.length + ' 个孕期工具';
}
}
function loadPublishedApps() {
fetch('/api/mp/apps?isPublished=1&pageSize=200')
@@ -579,6 +585,14 @@
/* 工具列表去重:顶部「今天已使用」的快捷入口若在下方列表里重复出现,
用户会觉得同一个工具出现了两次,这里按名称把它们从全部列表中摘掉 */
(function dedupeApps() {
/* ⚠️ 快捷区「今天已使用」功能未实现、已临时隐藏(index.html 里挂 .tbd-hide)。
没有置顶区就不存在「同一个工具出现两次」,所以两件事都要跳过:
① 按 .q-t 摘除同名磁贴;② 把小标题改成「其他孕期工具」——藏了上面那块之后,
第一眼看到的就是它,「其他」俩字会变成没有指代对象的错文案,
保持 index.html 里的默认「全部孕期工具」才对。
判据直接读 DOM(.tbd-hide 在不在),单一事实来源在 index.html:
把那里三处 .tbd-hide 去掉,本段会自动重新生效,不用改这里。 */
if ($('.quick-row.tbd-hide')) return;
const used = new Set($$('.quick-row .q-t').map(e => e.textContent.trim()));
$$('#appsGrid .app').forEach(b => { if (used.has(b.textContent.trim())) b.remove(); });
const rest = $$('#appsGrid .app').length;

View File

@@ -1837,7 +1837,7 @@ a.skip:focus{left:16px;top:16px}
紧挨着上面的网盘弹窗放:这两个弹窗是同一条领取动线的前后两步
(先扫码换码,再拿链接)。隔开几百行的话,改动线文案时几乎必然只改到一头。 */
.wx-qr-box{margin-top:16px;text-align:center}
/* 同时管占位的 <svg> 和以后换上的 <img>:换真图时这段 CSS 一个字都不用动。
/* 这条挂在元素本身(原占位的 <svg>、现在这张真图 <img> 都吃):换图时一个字都不用动。
⚠️ 别改成 .wx-qr img 或 svg.wx-qr —— 那样一换成 <img> 尺寸就全丢。 */
.wx-qr{display:block;width:168px;height:168px;margin:0 auto;border-radius:14px;background:#fff}
.wx-qr-cap{font-size:12px;color:var(--muted);margin-top:10px}
@@ -1870,6 +1870,12 @@ a.skip:focus{left:16px;top:16px}
.sheet-close:active{transform:scale(.9)}
.sheet-scroll{flex:1;overflow-y:auto;padding:0 18px 8px}
.sheet-scroll::-webkit-scrollbar{display:none}
/* ⚠️ 临时隐藏开关(2026-09-22):「记一下」弹层里的「今天已使用」快捷区 + 日期/今天已记 那行
**功能尚未实现**(数据是写死的演示值),产品要求先整体隐藏、代码保留。
用法:在 index.html 对应元素上挂 .tbd-hide。
恢复:去掉 index.html 里那三处 .tbd-hide 即可(js/app.js 的 dedupeApps 会自动重新生效)。 */
.tbd-hide{display:none!important}
/* 「今日心情」已删除,只剩 3 个工具,所以是 3 列 */
.quick-row{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.quick{border-radius:17px;padding:13px 8px;text-align:center;transition:transform .16s}