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:
BIN
assets/img/4834fe8d686a.png
Normal file
BIN
assets/img/4834fe8d686a.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
60
index.html
60
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: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>
|
||||
|
||||
20
js/app.js
20
js/app.js
@@ -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;
|
||||
|
||||
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user