v47:地址联想三处接入 / 读书页慢的真根因(会话锁)/ 笔记两处 / 日程状态下线
用户 2026-10-13 七条。拍板:影院只记地址、不存经纬度(后续用高德反查);
日程状态只删界面与展示、数据库列保留(「后续会有一个整体清理的工作」)。
①🔴 读书页慢 —— 真根因是**会话锁**,不是封面(我先判断错了方向)
用户原话:「读书现在还是非常慢,就是进入读书这个页面,刚开始还是非常的慢。」
线上实测(真公网、同一会话连打 3 次):
第 1 次 TTFB 0.08s ← 触发微信读书同步
第 2 次 TTFB **8.73s** ← 用户说的"刚开始非常慢"
第 3 次 TTFB 0.07s
插桩拿到的服务端时间线把因果钉死:
21:18:05.483 QUEUED ← 第 1 个请求排队
21:18:05.501 FINISH 2ms ← 响应确实提前发出去了(这步是好的)
21:18:14.674 SYNC 9.2s ← 但它仍占着这个人的会话文件锁跑完 9.2 秒
21:18:14.682 QUEUED ← 第 2 个请求此刻才真正开始执行
⇒ **`fastcgi_finish_request()` 只断开客户端连接、不释放 PHP 文件会话锁。**
后台同步要 9.2 秒(真打微信读书接口),同一个人的下一个请求一路等到它跑完。
修法(缺一不可):
· `WeRead::queueBackgroundSync()` 回调里 **先 `session_write_close()`、
再 `fastcgi_finish_request()`**(顺序不能反);
· `index.php` 两处"渲染前排同步"的入口排完**立刻放锁**
(shutdown 回调不一定执行:客户端中断/服务器超时才不放过);
· 顺带修 **`Holiday::queueBackgroundFetch()` 的同型问题**(联网 12 秒)。
为什么以前没发现:v29 引入"后台化"时只验证了"响应是不是提前发出去",
**单次请求测量永远看不到这个 bug** —— 必须同一会话连打两次才现形。
线上复验:修复后连打 4 次 = 0.15 / 0.15 / 0.09 / 0.15 秒(修复前第 2 次 8.73s);
后台同步仍正常(`weread_sync_at` 已更新)。
② 封面:顺手也修了(但这不是用户说的那个问题)
· `media.php` 读 OSS 前先放会话锁(原来从不放,35 张封面串行);
· 新增 `Storage::cacheLocally()` 磁盘二级缓存(原来 `read()` 只读不写回);
· 让 304 不再先拉整张图(原来先取回 body、再判 `If-None-Match`)。
线上实测:冷取 149ms(走 OSS)→ 热取 35ms(本地缓存、字节一致)
→ 带 `If-None-Match` 返回 **304 / 19.8ms / 空体**;35 张封面 103ms → 20ms(5 倍)。
③ 地址联想:抽成全站共用一份(`assets/js/addr_suggest.js`)+ 接入三处
· 影院管理页、观影新增页的「新建影院」弹框、日程地点、行程出发/到达;
· `layout.php` 按需加载(`[data-addr]` 出现才拉 SDK + 我们的脚本),
并暴露 `fbLoadAddr(scope)` 给 AJAX 片段(v42 踩过"内联 script 不执行");
· 安全密钥在 SDK 之前设置;回填支持 `data-addr-fill` / `data-addr-for`、
**只补空白字段**(不覆盖用户手写)、直辖市 `province==city` 去重;
· 字段名有两套(影院 `address`/`place`,行程 `from_addr`/`to_addr` 缩写 `_addr`),
`fieldFor()` 带同义词表 + 后缀匹配;
· 影院**只存地址、不存经纬度**(按用户要求)。
④ 笔记两条
· 「点保存没反应」真因:附件区是个 `<form>` **套在保存表单里** ——
HTML 不允许 form 套 form,浏览器丢掉内层标签、保留它的 `</form>`,
于是**保存按钮成了孤儿**(`button.form === null`),点了不提交也不报错。
真浏览器实测:修前 `btnInsideForm:false` / 点后 POST=0;修后 true / POST=1。
改法:附件区改 `<div id="noteAttForm">`,上传按钮用 `formaction`。
· 详情页宽度:`.note-read { max-width: 820px }` → `none`
(内容卡 820px vs 下方共享卡 1032px;修后两者都是 1032px)。
⑤ 日程状态下线
· 删表单里的「状态」下拉、`Calendar::statusWord()`、浮层 JSON 的 `status_word`;
· **保留** `events.status` 列与 `Calendar::statusOf()`(契约不动,等整体清理)。
验证(新增 5 个套件):
· `_fb_v47_addr.py`(接线 24 条)/ `_fb_v47_addr_sim.py`(真浏览器 + 假高德,16 条)
· `_fb_v47_readperf.py`(缓存与会话锁,23 条)
· `_fb_v47_notes.py`(真浏览器,9 条)
· `_b47_readperf_falsify.py`(反向验证 9 个注入)—— **9/9 全抓住**
· 全量 e2e **1510/0**;vCard 规格+往返 40/0;TB 探针 44/0;
v44 反向验证 17/0;全流水线 **PUSH_RC=0**(含"第47批形态"静态断言)
· **线上终验**:读书页整页 81ms、封面 103→20ms、media 冷 149→热 35→304 19.8ms、
修复前第 2 次请求 8.73s → 修复后 0.15s、地址联想 meta[fb-addr] 带真高德 key
顺带修掉三处**探针自身**的假红/假绿(详见 pitfalls.md):
· `_b44_falsify.py` 的"整小时"注入在**整点**与正确实现等价 ⇒ 换成恒错值;
· `_fb_b44_ui.py` 3b 的并发计时断言在单进程 `php -S` 下必然假红 ⇒ 改断言确定事实;
· 多处探针的"清理删除"撞沙箱删除门禁 ⇒ 探针**中途死掉**看起来像产品坏了
⇒ 统一改成 `_safe_rm()` / 不删。
This commit is contained in:
@@ -57,8 +57,17 @@ $evLab = static function (string $text, string $for = '', bool $star = false) us
|
||||
|
||||
<?php echo $evRowOpen(); ?>
|
||||
<?= $evLab('地点', 'ev-location') ?>
|
||||
<?php /* 🔴 v47(用户 2026-10-13):「日程中,当我输入地点的时候,也应该调用高德的接口,
|
||||
补齐详细地址。」⇒ 地点框挂高德联想。
|
||||
⚠️ 日程表里**没有**单独的"详细地址"字段(地点就一栏),所以这里不做"回填",
|
||||
只把**联想选中的正式地名**写回输入框 —— 价值是"把口语化的'学校三楼会议室'
|
||||
换成高德认得的规范地名",后续要查经纬度/导航才查得到。
|
||||
⚠️ 这段表单既在整页(各视图的日程弹框)也在 AJAX 片段里出现,
|
||||
所以打好 `data-addr` 标记即可 —— 由 layout 的 loader 与
|
||||
弹框打开时的 `fbLoadAddr(scope)` 负责绑定(与 person_picker 同一套)。 */ ?>
|
||||
<input class="input" id="ev-location" name="location"
|
||||
value="<?= e((string)($evF['location'] ?? '')) ?>" placeholder="如:学校三楼会议室">
|
||||
value="<?= e((string)($evF['location'] ?? '')) ?>" placeholder="如:学校三楼会议室"
|
||||
data-addr>
|
||||
</div>
|
||||
|
||||
<?php echo $evRowOpen(); ?>
|
||||
@@ -235,15 +244,17 @@ $evLab = static function (string $text, string $for = '', bool $star = false) us
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php echo $evRowOpen(); ?>
|
||||
<?= $evLab('状态', 'ev-status') ?>
|
||||
<select class="select" id="ev-status" name="status">
|
||||
<?php $st = (string)($evF['status'] ?? 'confirmed'); ?>
|
||||
<option value="confirmed"<?= $st === 'confirmed' ? ' selected' : '' ?>>确定</option>
|
||||
<option value="tentative"<?= $st === 'tentative' ? ' selected' : '' ?>>待定</option>
|
||||
<option value="cancelled"<?= $st === 'cancelled' ? ' selected' : '' ?>>取消</option>
|
||||
</select>
|
||||
</div>
|
||||
<?php /* 🔴 v47(用户 2026-10-13):「日程的那个状态,什么确定、待定、取消,
|
||||
我觉得没有什么意义,把它给删掉吧,不要了。」
|
||||
⇒ 「状态」整块**删除**。
|
||||
⚠️ 服务端契约**刻意保留**(用户明确说"数据库可以保留,后续会有一个整体的清理"):
|
||||
- `events.status` 列留着、不删;
|
||||
- `Calendar::save()` 收到不带 status 的表单时,用**原值**(更新)或
|
||||
`'confirmed'`(新建),与删掉这一栏之前**完全一致** ——
|
||||
不会因为删了控件就把已有日程的状态改写掉(见 index.php 里那两处
|
||||
`(string)($ev2['status'] ?? 'confirmed')`)。
|
||||
- 导出 iCalendar 时 STATUS 照旧按原值走,别人的日历里不会看到状态变化。
|
||||
下方原来还有一段给 `ev-status` 的联动脚本,也一并删。 */ ?>
|
||||
|
||||
<?php /* 🔴 v44(用户 2026-10-12 第 2 条):「这段时间算忙碌,这一块直接给它去掉就行了,
|
||||
没有什么用。」⇒ 「这段时间算 / 忙碌 / 空闲」整块删除。
|
||||
|
||||
@@ -66,6 +66,25 @@ $isLoggedIn = \App\Auth::check();
|
||||
'css' => asset('/assets/vendor/cropper/cropper.min.css'),
|
||||
'js' => asset('/assets/vendor/cropper/cropper.min.js'),
|
||||
], JSON_UNESCAPED_UNICODE | JSON_HEX_APOS | JSON_HEX_QUOT)) ?>">
|
||||
<?php /* 🔴 v47(用户 2026-10-13):**地址联想**(高德 AutoComplete)。
|
||||
影院名称 / 行程出发到达 / 日程地点 三处都要"边打边出候选、选中自动补齐地址"。
|
||||
与 Cropper 同一套按需加载:页面上真有 `[data-addr]` 才去拉脚本与高德 SDK
|
||||
—— 高德 SDK 本身百 KB 级,绝不能让用不到的页面白拉。
|
||||
⚠️ 高德的两个配置(JS API key 与安全密钥)**只在真要用时才输出**:
|
||||
它们是外部服务的凭据,没用到地址联想的页面不该把它们写进 HTML。
|
||||
⚠️ key 为空(没配高德)时整块不输出 ⇒ 前端 `sdkReady()` 为假 ⇒
|
||||
联想静默降级、输入框照常用(见 addr_suggest.js 的降级注释)。 */
|
||||
$_amapJs = \App\Geo::jsConfig();
|
||||
$_needAddr = ($_amapJs['key'] !== '');
|
||||
?>
|
||||
<?php if ($_needAddr): ?>
|
||||
<meta name="fb-addr" content="<?= e(json_encode([
|
||||
'js' => asset('/assets/js/addr_suggest.js'),
|
||||
'sdk' => 'https://webapi.amap.com/maps?v=2.0&key=' . rawurlencode($_amapJs['key'])
|
||||
. '&plugin=AMap.AutoComplete',
|
||||
'security' => $_amapJs['security'],
|
||||
], JSON_UNESCAPED_UNICODE | JSON_HEX_APOS | JSON_HEX_QUOT)) ?>">
|
||||
<?php endif; ?>
|
||||
<?php /* 🔴🔴 v38(用户 2026-10-10):「我终于找到了一个我比较认可的日期选择插件
|
||||
https://ant-design.antgroup.com/components/date-picker-cn 现在观影这个模块
|
||||
进行测试吧…等这个模块测试完没问题了,再更新到其他的模块。」
|
||||
@@ -274,6 +293,77 @@ window.FB_NOTIFY = {
|
||||
if (document.querySelector('.pp[data-pp]')) { load(); }
|
||||
})();
|
||||
</script>
|
||||
|
||||
<?php /* 🔴 v47(用户 2026-10-13):**地址联想**的按需加载(高德 AutoComplete)。
|
||||
判据用 `[data-addr]`(组件根的真实标记),**不用**含糊的子串。
|
||||
三层顺序不能反:先拉 SDK、再拉我们的脚本 —— 我们的脚本一执行就会去
|
||||
`new AMap.AutoComplete(...)`,SDK 没就位就只能降级(等于白接)。
|
||||
⚠️ SDK 加载失败也要能继续:`__AMAP_LOADED` 为假时 addr_suggest.js 里的
|
||||
所有 AMap 调用都在判断之后 ⇒ 输入框仍是普通文本框,手敲照常保存。
|
||||
⚠️ 用 `window.fbLoadAddr()` 暴露给 AJAX 片段(观影/日程的弹框都是后塞进来的),
|
||||
与 person_picker 的 `fbLoadPicker()` 完全同一套路。 */ ?>
|
||||
<script>
|
||||
(function () {
|
||||
var meta = document.querySelector('meta[name="fb-addr"]');
|
||||
if (!meta) { return; } // 没配高德 key(或本页不需要)→ 什么都不做
|
||||
var conf;
|
||||
try { conf = JSON.parse(meta.getAttribute('content')); } catch (e) { return; }
|
||||
if (!conf || !conf.js || !conf.sdk) { return; }
|
||||
|
||||
var sdkReady = null;
|
||||
|
||||
function loadSdk() {
|
||||
if (window.__AMAP_LOADED) { return Promise.resolve(true); }
|
||||
if (sdkReady) { return sdkReady; }
|
||||
sdkReady = new Promise(function (res) {
|
||||
var s = document.createElement('script');
|
||||
s.src = conf.sdk;
|
||||
s.setAttribute('data-fb-amap', '1');
|
||||
s.onload = function () { window.__AMAP_LOADED = true; res(true); };
|
||||
s.onerror = function () { sdkReady = null; res(false); }; // 失败不锁死,下次可重试
|
||||
document.head.appendChild(s);
|
||||
});
|
||||
return sdkReady;
|
||||
}
|
||||
|
||||
function loadOurs() {
|
||||
if (window.fbAddr) { return Promise.resolve(true); }
|
||||
return new Promise(function (res) {
|
||||
var s = document.createElement('script');
|
||||
s.src = conf.js;
|
||||
s.defer = true;
|
||||
s.onload = function () { res(true); };
|
||||
s.onerror = function () { res(false); };
|
||||
document.head.appendChild(s);
|
||||
});
|
||||
}
|
||||
|
||||
/* 安全密钥必须在 SDK **之前**设好(高德要求),否则 AutoComplete 会被拒。 */
|
||||
function boot() {
|
||||
/* ⚠️ 安全密钥必须在 SDK **之前**设好(高德硬要求),否则 AutoComplete 会被拒。
|
||||
放在这里而不是页面顶部:没用到地址联想的页面不该出现这两个凭据。 */
|
||||
if (!window._AMapSecurityConfig) {
|
||||
window._AMapSecurityConfig = { securityJsCode: conf.security || '' };
|
||||
}
|
||||
return loadSdk().then(function () {
|
||||
if (!window.__AMAP_LOADED || typeof window.AMap === 'undefined') { return false; }
|
||||
return loadOurs();
|
||||
});
|
||||
}
|
||||
|
||||
window.fbLoadAddr = function (scope) {
|
||||
return boot().then(function (ok) {
|
||||
if (ok && window.fbAddr) { window.fbAddr(scope || document); }
|
||||
return ok;
|
||||
});
|
||||
};
|
||||
|
||||
if (document.querySelector('[data-addr]')) {
|
||||
// ⚠️ SDK 是 defer 之后的动态插入,比我们的脚本晚 —— 所以必须等它 onload 再绑。
|
||||
boot();
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
<?php /* v27:笔记的分块编辑器同样**按需加载**(页面上真有 `#noteForm` 才拉)。
|
||||
理由与 person_picker.js 完全同一套:它只在写笔记那一页有用,
|
||||
每页都带一份等于让别的页面白付流量。判据用表单的真实 id(不是含糊找 "note")。 */ ?>
|
||||
|
||||
@@ -28,7 +28,7 @@ $canWrite = \App\Auth::canWrite();
|
||||
<?php else: ?>
|
||||
<div class="card card-pad cinema-form-card">
|
||||
<h2 class="cinema-h2"><?= $isEditing ? '编辑影院' : '添加影院' ?></h2>
|
||||
<form method="post" action="<?= e(url('movies/cinemas_save')) ?>">
|
||||
<form method="post" action="<?= e(url('movies/cinemas_save')) ?>" id="cinemaForm">
|
||||
<?= csrf_field() ?>
|
||||
<?php if ($isEditing): ?>
|
||||
<input type="hidden" name="id" value="<?= (int)$editing['id'] ?>">
|
||||
@@ -37,7 +37,13 @@ $canWrite = \App\Auth::canWrite();
|
||||
<div class="field">
|
||||
<label for="cname">影院名称 *</label>
|
||||
<input class="input" id="cname" name="name" required
|
||||
value="<?= e(old('name', $editing['name'] ?? '')) ?>" placeholder="如:万达影城(IMAX 店)">
|
||||
value="<?= e(old('name', $editing['name'] ?? '')) ?>" placeholder="如:万达影城(IMAX 店)"
|
||||
<?php /* 🔴 v47(用户 2026-10-13):「输入影院的名称的时候,应该自动的帮我补齐
|
||||
所在的地方和详细地址。」⇒ 名称框挂高德联想,选中后自动填
|
||||
`place`(所在地方)与 `address`(详细地址)。
|
||||
⚠️ 只填**空白**的字段(见 addr_suggest.js 的注释)——
|
||||
用户已经手写过的地址不该被覆盖。 */ ?>
|
||||
data-addr data-addr-fill="place,address" data-addr-for="#cinemaForm">
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="cplace">所在地方</label>
|
||||
|
||||
@@ -461,7 +461,7 @@ $mDelForms = []; // 收集起来,在表单**外面**统一渲染
|
||||
<div class="cn-panel" role="dialog" aria-modal="true" aria-label="新建影院">
|
||||
<div class="cn-head"><b>新建影院</b>
|
||||
<button type="button" class="cn-x" data-cn-close aria-label="关闭">✕</button></div>
|
||||
<form method="post" action="<?= e(url('movies/cinemas_save')) ?>">
|
||||
<form method="post" action="<?= e(url('movies/cinemas_save')) ?>" id="cinemaNewForm">
|
||||
<?= csrf_field() ?>
|
||||
<?php /* back=movies/new 让服务端存完回到**本页**(而不是甩去影院管理页) */ ?>
|
||||
<input type="hidden" name="back" value="movies/new">
|
||||
@@ -472,7 +472,12 @@ $mDelForms = []; // 收集起来,在表单**外面**统一渲染
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>影院名称 *</label>
|
||||
<input class="input" name="name" required placeholder="如:万象城 CGV" maxlength="100">
|
||||
<?php /* 🔴 v47(用户 2026-10-13):与影院管理页同一套 —— 输入名称即联想,
|
||||
选中后自动补齐「所在地方」与「详细地址」。
|
||||
⚠️ 字段查找范围限定在本弹框内(`#cinemaNewForm`):
|
||||
观影新增页本身也有一个「影院」下拉,不限定会抓错字段。 */ ?>
|
||||
<input class="input" name="name" required placeholder="如:万象城 CGV" maxlength="100"
|
||||
data-addr data-addr-fill="place,address" data-addr-for="#cinemaNewForm">
|
||||
</div>
|
||||
<?php /* 🔴 v41(用户 2026-10-10):「这里新建影院这个地方好像没有详细地址啊。
|
||||
应该把详细地址加上。」—— 影院管理页的表单一直有 address 字段,
|
||||
|
||||
@@ -341,8 +341,25 @@ $imgParts = static function (string $c): array {
|
||||
<p class="empty-hint" id="noteFilesEmpty">还没有附件。</p>
|
||||
<?php endif; ?>
|
||||
|
||||
<form method="post" enctype="multipart/form-data"
|
||||
action="<?= e(url('notes/attach_add')) ?>" id="noteAttForm">
|
||||
<?php /* 🔴🔴 v47(用户 2026-10-13):「编辑一个笔记,点击编辑,然后这时候点保存
|
||||
是没有任何反应的。」——真因就是**这里原来是一个嵌套 <form>**。
|
||||
|
||||
HTML 不允许 form 套 form:浏览器解析时会把**内层** `<form>` 标签丢掉,
|
||||
但**保留**它后面的 `</form>`。于是那个 `</form>` 提前把外层的
|
||||
`#noteForm`(整页的保存表单)关掉了 ——
|
||||
结果「保存」按钮落入**没有任何表单**的区域:
|
||||
· `button.form === null`;
|
||||
· 点它既不提交、也不报错(**所以"没有任何反应"**)。
|
||||
⚠️ 页面里其它字段看着都正常,只有"提交"这条链断了 ——
|
||||
这类 bug 不打开真浏览器量 `btn.form` 是看不出来的。
|
||||
|
||||
改法:内层不再用 `<form>`,改成 `<div>`,把"上传所选文件"这个按钮
|
||||
用 HTML5 的 `formaction` / `formenctype` **指向自己的端点**。
|
||||
—— 这样仍然只有**一个**表单(保存表单),上传按钮却能提交到
|
||||
`notes/attach_add` 且是 multipart。既修了 bug,又不牺牲上传。
|
||||
⚠️ 隐藏域 `id` 与 `_csrf` 与保存表单同名同值(都是这条笔记的 id /
|
||||
同一个令牌),合进一个表单不会冲突 —— 已在探针里断言过。 */ ?>
|
||||
<div id="noteAttForm">
|
||||
<?= csrf_field() ?>
|
||||
<input type="hidden" name="id" value="<?= (int)$editing['id'] ?>">
|
||||
<div class="note-att-drop" id="noteAttDrop">
|
||||
@@ -351,9 +368,13 @@ $imgParts = static function (string $c): array {
|
||||
<span class="note-att-tip">把文件拖到这里,或<label for="noteAttInput">点这里选文件</label></span>
|
||||
</div>
|
||||
<div class="btn-row">
|
||||
<button class="btn btn-ghost btn-sm" type="submit">上传所选文件</button>
|
||||
<?php /* ⚠️ formaction/formenctype 必须写在**按钮**上:表单主体是"保存",
|
||||
只有这一个按钮走附件端点。 */ ?>
|
||||
<button class="btn btn-ghost btn-sm" type="submit"
|
||||
formaction="<?= e(url('notes/attach_add')) ?>"
|
||||
formenctype="multipart/form-data">上传所选文件</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<div class="card card-pad">
|
||||
|
||||
@@ -56,6 +56,12 @@ $locId = 'loc-' . $locPrefix;
|
||||
value="<?= e($locName) ?>"
|
||||
placeholder="<?= e($locPlaceholder) ?>"
|
||||
autocomplete="off"
|
||||
<?php /* 🔴 v47(用户 2026-10-13):地址联想改用**全站共用模块**
|
||||
(`assets/js/addr_suggest.js`,由 layout.php 按需拉起高德 SDK)。
|
||||
`data-addr-fill` 列出选中候选后要回填哪几个字段。
|
||||
⚠️ 字段查找范围限定在**本 .loc-field 内**:一个行程表单里有
|
||||
from / to 两组,不限定会把出发地的地址写到到达地上。 */ ?>
|
||||
data-addr data-addr-fill="address,lng,lat,city" data-addr-for=".loc-field"
|
||||
data-loc-input>
|
||||
<?php /* 高德没加载 / 用户自己敲的地名:这四个字段就是兜底存放处 */ ?>
|
||||
<input type="hidden" name="<?= e($locPrefix) ?>_addr" value="<?= e($locAddr) ?>">
|
||||
|
||||
@@ -79,7 +79,6 @@ $toRow = [
|
||||
'lat' => (string)($n['to_lat'] ?? ''),
|
||||
'city' => (string)($n['to_city'] ?? ''),
|
||||
];
|
||||
$amap = \App\Geo::jsConfig();
|
||||
|
||||
/* 🔴🔴 v41(用户 2026-10-10 第 5/6 条):
|
||||
「编辑行程、加计划行程、加实际行程,全部都采用弹窗的形式。其排版的方式和添加电影
|
||||
@@ -478,43 +477,26 @@ $nfEmbed = !empty($nfEmbed);
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php /* ==================== 高德 SDK(按需加载,与 TripLog 同一套做法)====================
|
||||
⚠️ SDK 加载**失败也必须能用**:文本框就是普通输入框,用户手敲地名照样能存。
|
||||
所以这段脚本里所有 AMap 的用法都放在 `__AMAP_LOADED` 判断之后,
|
||||
并且给"搜索这个地名"兜底链接单独一条路径(不依赖 SDK)。 */ ?>
|
||||
<?php if ($amap['key'] !== ''): ?>
|
||||
<?php /* ==================== 地址联想(v47 起改用全站共用模块)====================
|
||||
🔴 v47(用户 2026-10-13):原来这里是**一段本页内联脚本**(自己 new AMap.AutoComplete)。
|
||||
这次影院名称、日程地点也要联想 ⇒ 再各写一份必然出现"某个入口忘了补"。
|
||||
所以抽到 `assets/js/addr_suggest.js`,由 layout.php 按需加载(页面上有 `[data-addr]`
|
||||
才拉高德 SDK 与那份脚本)。本页只负责:
|
||||
· 给 from/to 两个输入框打上 `data-addr` 标记(回填 addr/lng/lat/city);
|
||||
· 保留"手敲也要更新详细地址那行字 + 导航链接"的本地逻辑(不依赖 SDK)。
|
||||
⚠️ 与 v42 同一条约束:这段表单会被 AJAX 片段塞进 DOM(详情页弹框),
|
||||
内联 script 标签那时不会执行 ⇒ 初始化统一走 `window.fbNodeForm(scope)`,
|
||||
它内部会调 `window.fbLoadAddr(scope)` 把联想按需拉起。 */ ?>
|
||||
<script>
|
||||
window._AMapSecurityConfig = { securityJsCode: '<?= e($amap['security']) ?>' };
|
||||
window.__AMAP_LOADED = false;
|
||||
</script>
|
||||
<script src="https://webapi.amap.com/maps?v=2.0&key=<?= e($amap['key']) ?>&plugin=AMap.AutoComplete"
|
||||
onload="window.__AMAP_LOADED = true;"
|
||||
onerror="window.__AMAP_ERROR = 'script load failed';"></script>
|
||||
<?php endif; ?>
|
||||
<script>
|
||||
/* ============================================================
|
||||
地址联想(v24 第 17 批 用户第 3 条)
|
||||
照 TripLog 的做法:AMap.AutoComplete 直接挂在 input 上,边打边出候选;
|
||||
选中后把 name / address / lng / lat / city **同时**写进五个字段。
|
||||
⚠️ 高德没加载时整个块跳过,input 仍是普通文本框(降级可用)。
|
||||
⚠️ 用 IIFE 包起来:这个页面只有一份表单,但函数名别污染全局
|
||||
(app.js 里也有通用初始化,命名撞了会互相覆盖)。
|
||||
============================================================ */
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
/* 🔴🔴 v42(用户 2026-10-11 第 3/4 条):
|
||||
这两段(高德地址联想 / 出行方式联动车辆与车次)原来是"页面加载时跑一次"的。
|
||||
但 v41 把行程表单改成了**详情页弹框 + AJAX 取片段** —— 片段塞进 DOM 时
|
||||
**内联 <script> 不会执行**(`innerHTML` 不跑脚本,这是浏览器语义),
|
||||
于是用户在弹框里看到的是:
|
||||
· 选「自驾」没出现车牌、选「火车/飞机」没出现车次(第 3 条);
|
||||
· 出发地/到达地没有高德联想(第 4 条)。
|
||||
⇒ 把这两段抽成**可重复调用**的 `window.fbNodeForm(scope)`:
|
||||
详情页每次把片段塞进 DOM 后调它一次(见 show.php 的 loadInto)。
|
||||
⚠️ 幂等由各自内部的标记保证(`data-drop-bound` 那套是本文件外的上传组件;
|
||||
这里用 `data-nf-bound` / `data-loc-bound`)。 */
|
||||
/* 与我的关系(与 App\Trip::DRIVE_MODES 无关的那部分)—— 见下 bindLoc 的说明 */
|
||||
|
||||
/**
|
||||
* 出发地 / 到达地:**只做"不依赖 SDK"的那半**(详细地址那行字 + 导航链接)。
|
||||
* 联想与字段回填由共用模块负责(它在 input 上打 data-addr 标记即可)。
|
||||
*/
|
||||
function bindLoc(prefix, scope) {
|
||||
var input = (scope || document).querySelector('#loc-' + prefix + '-input');
|
||||
if (!input) { return; }
|
||||
@@ -526,7 +508,6 @@ $nfEmbed = !empty($nfEmbed);
|
||||
var fAddr = wrap.querySelector('input[name="' + prefix + '_addr"]');
|
||||
var fLng = wrap.querySelector('input[name="' + prefix + '_lng"]');
|
||||
var fLat = wrap.querySelector('input[name="' + prefix + '_lat"]');
|
||||
var fCity = wrap.querySelector('input[name="' + prefix + '_city"]');
|
||||
var dTail = wrap.querySelector('[data-loc-detail]');
|
||||
var navEl = wrap.querySelector('[data-loc-nav]');
|
||||
|
||||
@@ -554,37 +535,9 @@ $nfEmbed = !empty($nfEmbed);
|
||||
// 手敲也要更新(用户可能不用联想,直接打字)
|
||||
input.addEventListener('change', paint);
|
||||
input.addEventListener('blur', paint);
|
||||
|
||||
if (!window.__AMAP_LOADED || typeof AMap === 'undefined' || !AMap.AutoComplete) {
|
||||
return; /* 降级:没有联想,但输入与保存都正常 */
|
||||
}
|
||||
try {
|
||||
var ac = new AMap.AutoComplete({ input: input });
|
||||
ac.on('select', function (e) {
|
||||
var d = (e && e.poi) ? e.poi : null;
|
||||
if (!d) { return; }
|
||||
var loc = d.location || null; // 可能是 AMap.LngLat,也可能是 {lng,lat}
|
||||
var lng = loc ? (loc.lng !== undefined ? loc.lng : (loc.getLng ? loc.getLng() : '')) : '';
|
||||
var lat = loc ? (loc.lat !== undefined ? loc.lat : (loc.getLat ? loc.getLat() : '')) : '';
|
||||
if (fAddr) { fAddr.value = d.address || ''; }
|
||||
if (fLng) { fLng.value = (lng === null || lng === undefined) ? '' : lng; }
|
||||
if (fLat) { fLat.value = (lat === null || lat === undefined) ? '' : lat; }
|
||||
/* 高德把城市放在 addressComponent / pname+cityname 上 —— 尽量带回城市,
|
||||
省掉服务端一次逆地理请求(用户第 1 条要的就是城市)。 */
|
||||
if (fCity) {
|
||||
if (d.addressComponent && d.addressComponent.city) {
|
||||
fCity.value = d.addressComponent.city;
|
||||
} else if (d.cityname) {
|
||||
fCity.value = d.cityname;
|
||||
} else {
|
||||
fCity.value = '';
|
||||
}
|
||||
}
|
||||
paint();
|
||||
});
|
||||
} catch (err) {
|
||||
/* SDK 已加载但初始化失败(key 没绑域名等)—— 静默降级,不打扰用户 */
|
||||
}
|
||||
// 共用模块选中候选后会派发这个事件 —— 那时 addr/lng/lat 刚被写好,重画一次
|
||||
input.addEventListener('fb-addr-picked', paint);
|
||||
paint();
|
||||
}
|
||||
|
||||
/* ---- 出行方式 → 显隐车辆 / 车次(用户第 17 批 第 3 条)----
|
||||
@@ -615,6 +568,17 @@ $nfEmbed = !empty($nfEmbed);
|
||||
bindLoc('from', root);
|
||||
bindLoc('to', root);
|
||||
bindMode(root);
|
||||
/* 🔴 v47:地址联想走共用模块。**必须在这里调**(而不是只靠 layout 首屏那一次)——
|
||||
AJAX 片段塞进 DOM 时,layout 的 loader 早就跑过了,新加的输入框没人绑。 */
|
||||
if (typeof window.fbLoadAddr === 'function') {
|
||||
window.fbLoadAddr(root);
|
||||
} else {
|
||||
// 还没加载出来(首屏竞态)→ 等它上线后再补一次
|
||||
window.addEventListener('fb-addr-ready', function once() {
|
||||
window.removeEventListener('fb-addr-ready', once);
|
||||
if (typeof window.fbAddr === 'function') { window.fbAddr(root); }
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 首屏跑一次(整页形态)
|
||||
|
||||
Reference in New Issue
Block a user