v24 第 17 批:城市聚合 / 高德地址 / 表单精简(用户 10 条)
用户 10 条原话要点与落地:
- ①「统计出来的不是目的地,也不是车站,而是城市…城市要聚合,有多段行程,
都有青岛作为出发地或者目的地,那么就只记一次」
→ trip_nodes 补 from_city/to_city(Schema v22),Trip::cities() 改成
「出发地 ∪ 到达地」去重、按最早时间 + 出发地优先排。
详情页信息区显示的就是这个聚合结果(第 4 条:「图片右侧显示的是聚合的城市,
而不是终点地址」)。
- ②「类型不够丰富,你看看 triplog 里面都有哪些,都拿过来」
→ NodeType::TRIPLOG_TYPES(休息/突发/购物/拜访亲友),在 all() 里读时自愈补齐。
- ③「出行方式,只有选择自驾,才让选车辆;车辆下拉框不需要出现什么财务里登记的车,
只把车辆列出来就行了」→ DRIVE_MODES 收窄成 ['drive'];
Vehicle::pickable() 只回车辆库;车辆页删掉「财务里已登记的车」那块。
- ③「飞机、铁路,只记录车次、航班号就可以…座位什么的不记录了」
→ seat_info / gate 从表单与列表**彻底移除**(列保留,老数据不丢;
saveNode 的 UPDATE 也不再写这两列,否则会抹掉迁来的数据)。
- ③「出发地和到达地,都用高德地图的接口,记录详细地址」+「参与人弹框选择」
+「给参与人标注角色这个功能去掉」
→ 新增 templates/trips/_loc_field.php(高德联想 + 详细地址 + 坐标 + 城市 +
导航链接,没配 key 也能手输);参与人改用全局弹框选人组件;
角色输入框删除,saveNodeMembers 改成差集增删(否则老 role_tag 被静默抹掉)。
- ④「triplog 中的行程花销数据,没有同步过来,需要迁移过来」
→ 新增 _tooling/_fb_b17_backfill.php:迁地址(20 条)、花销(4 笔 ¥8584)、
车辆(3 台)。线上已执行并核对(笔数与金额一分不差)。
- ④「行程中,时间明明具体到了时分秒,怎么不显示?」
→ Trip::nodeSpan():行程时间精确到时分(同一天只写一次日期、跨天写月日、
两头都没时分就不写 00:00)。
其他:
- App\Geo 扩展 cityFromPoint / cityFromText / navUrl / jsConfig。
中文地址提城市修掉四种错法(白名单→黑名单、取最后→取第一个、直辖市最先认、
离线表只能兜底),并加了「五大连池 ≠ 大连」的位置守卫。
- config.example.php 加 amap 段(key / security_js / nav_src)。
验证:
- e2e 920/0(+29 条本批断言)· 升级 149/0(+15 条 v22 断言)·
城市解析 32/32(新套件,样例全是 TripLog 线上真实地址)·
桌面几何 428/0 · 移动端 688/0 · 交互 92/0 · 窄屏溢出 24/0。
- 反向验证 5/5:城市退回读 place / 只算到达地 / 时间退回只到日期 /
打车也要车 / 类型不补 —— 五种坏法全部被断言抓住。
- 部署:服务器自检 19/19;线上 schema v22;补迁后花销 4 笔 ¥8584 与源库对齐。
This commit is contained in:
+218
-104
@@ -1,31 +1,38 @@
|
||||
<?php
|
||||
/**
|
||||
* 一段行程的新增 / 编辑 —— **独立页面**(v24 第 16 批 用户第 5 / 6 / 7 条)。
|
||||
* 一段行程的新增 / 编辑 —— **独立页面**(v24 第 16 批 用户第 5 / 6 / 7 条;
|
||||
* 第 17 批按用户第 3 条再改一轮)。
|
||||
*
|
||||
* 用户原话:
|
||||
* · 第 5 条:「行程的编辑功能,点击后会把页面撑破。编辑行程,打开新的页面进行编辑。」
|
||||
* · 第 6 条:「添加计划行程和实际行程的按钮,都放在右上角。点击后打开新的页面进行添加。」
|
||||
* · 第 7 条:「添加和编辑行程的内容,你去找 triplog 里面的添加节点功能,跟那个一样。」
|
||||
* · 第 17 批 第 3 条(本次):
|
||||
* ① 「出行方式,**只有选择自驾**,才让选车辆」;
|
||||
* ② 「飞机、铁路,只记录**车次、航班号**就可以…**座位什么的不记录了**」;
|
||||
* ③ 「出发地和到达地,都用**高德地图的接口,记录详细地址**」;
|
||||
* ④ 「参与人那里,和记录电影人一样,**弹框选择**,不要全列出来,太多了」;
|
||||
* ⑤ 「给参与人标注角色这个功能**去掉**,不要了」。
|
||||
*
|
||||
* ⚠️ 为什么必须独立成页(而不是继续用 `<details>` 内联):
|
||||
* TripLog 的节点表单有十几组字段(类型/时间/出行方式/交通细节/起终点/内容/
|
||||
* 参与人/照片/状态),内联在主页面里会把整个详情页撑得极长;
|
||||
* 更要命的是**编辑**时每个行程内联一份表单 → 页面上 N 份表单互相干扰
|
||||
* (元素 id 撞车、密码管理器逐个扫描变卡)。这正是用户说的"把页面撑破"。
|
||||
* TripLog 的节点表单有十几组字段(类型/时间/出行方式/交通细节/起终点/内容/
|
||||
* 参与人/照片/状态),内联在主页面里会把整个详情页撑得极长;
|
||||
* 更要命的是**编辑**时每个行程内联一份表单 → 页面上 N 份表单互相干扰
|
||||
* (元素 id 撞车、密码管理器逐个扫描变卡)。这正是用户说的"把页面撑破"。
|
||||
*
|
||||
* 字段顺序照 TripLog 的 nodes/form.php:
|
||||
* 类型 → 起止时间 → 标题 → 出行方式(+车辆+交通细节)→ 起点 → 终点
|
||||
* → 内容 → 参与人 → 照片 →(编辑时)状态与花销。
|
||||
* 字段顺序照 TripLog 的 nodes/form.php(第 17 批又砍掉了两处冗余):
|
||||
* 类型 → 标题 → 起止时间 → 出行方式(自驾才有车辆)→ 线路/车次/承运方
|
||||
* → 出发地 → 到达地 → 内容 → 参与人 → 照片 →(编辑时)状态与花销。
|
||||
*
|
||||
* 变量(require 前设好):
|
||||
* $ev 所属旅程(events 行,带 title)
|
||||
* $n 被编辑的行程;null = 新增
|
||||
* $stage 'plan'|'actual'(新增时由按钮决定;编辑时取行程自己的)
|
||||
* $people 名册
|
||||
* $types 节点类型(NodeType::all)
|
||||
* $vehicles 可挑的车(Vehicle::pickable,含"来自财务"的只读候选)
|
||||
* $ev 所属旅程(events 行,带 title)
|
||||
* $n 被编辑的行程;null = 新增
|
||||
* $stage 'plan'|'actual'(新增时由按钮决定;编辑时取行程自己的)
|
||||
* $people 名册(**只用于弹框组件**,不再平铺成一长串勾选框)
|
||||
* $types 节点类型(NodeType::all)
|
||||
* $vehicles 可挑的车(Vehicle::pickable —— 第 17 批起**只有自家车辆库**)
|
||||
* $expenses 已有花销(编辑时)
|
||||
* $errors 校验错误
|
||||
* $errors 校验错误
|
||||
*/
|
||||
$isEdit = !empty($n);
|
||||
$canWrite = \App\Auth::canWrite();
|
||||
@@ -41,15 +48,30 @@ if (!isset(\App\Trip::NODE_STAGES[$stage])) { $stage = 'plan'; }
|
||||
$curType = (string)($n['node_type'] ?? '');
|
||||
$curMode = (string)($n['travel_mode'] ?? '');
|
||||
$picked = array_map('intval', array_column((array)($n['members'] ?? []), 'id'));
|
||||
|
||||
// 参与人角色:person_id => role
|
||||
$roles = [];
|
||||
foreach ((array)($n['members'] ?? []) as $m) {
|
||||
if (!empty($m['role_tag'])) {
|
||||
$roles[(int)$m['id']] = (string)$m['role_tag'];
|
||||
}
|
||||
}
|
||||
$back = url('trips/show', ['id' => (int)$ev['id']]);
|
||||
|
||||
// 车辆下拉:只有**自驾**才显示(用户第 3 条)。服务端先按已存值决定初始显隐,
|
||||
// 之后由 app.js 里的 data-mode-select 跟着下拉变。
|
||||
$needsVehicle = \App\Trip::modeNeedsVehicle($curMode);
|
||||
// 车次/航班号:只有火车与飞机才显示(用户第 3 条)
|
||||
$needsTicket = in_array($curMode, \App\Trip::TICKET_MODES, true);
|
||||
|
||||
// 起终点(编辑时从库里回填;老数据列是 varchar,坐标是 decimal)
|
||||
$fromRow = [
|
||||
'name' => (string)($n['from_place'] ?? ''),
|
||||
'address' => (string)($n['from_addr'] ?? ''),
|
||||
'lng' => (string)($n['from_lng'] ?? ''),
|
||||
'lat' => (string)($n['from_lat'] ?? ''),
|
||||
'city' => (string)($n['from_city'] ?? ''),
|
||||
];
|
||||
$toRow = [
|
||||
'name' => (string)($n['to_place'] ?? ''),
|
||||
'address' => (string)($n['to_addr'] ?? ''),
|
||||
'lng' => (string)($n['to_lng'] ?? ''),
|
||||
'lat' => (string)($n['to_lat'] ?? ''),
|
||||
'city' => (string)($n['to_city'] ?? ''),
|
||||
];
|
||||
$amap = \App\Geo::jsConfig();
|
||||
?>
|
||||
<div class="page-head">
|
||||
<h1>
|
||||
@@ -76,7 +98,7 @@ $back = url('trips/show', ['id' => (int)$ev['id']]);
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="form-grid">
|
||||
<?php /* ---- 类型(TripLog 的第一个字段)---- */ ?>
|
||||
<?php /* ---- 类型(TripLog 的第一个字段;第 17 批 第 2 条已补齐到 8 种)---- */ ?>
|
||||
<div class="field">
|
||||
<label for="nf-type">类型 *</label>
|
||||
<select class="select" id="nf-type" name="node_type">
|
||||
@@ -109,7 +131,7 @@ $back = url('trips/show', ['id' => (int)$ev['id']]);
|
||||
<?php if (!empty($errors['title'])): ?><span class="err"><?= e($errors['title']) ?></span><?php endif; ?>
|
||||
</div>
|
||||
|
||||
<?php /* ---- 起止时间:一个范围控件 ---- */ ?>
|
||||
<?php /* ---- 起止时间:一个范围控件(精确到秒,用户第 17 批问"怎么不显示时分秒")---- */ ?>
|
||||
<div class="field dt-range full">
|
||||
<label>开始 / 结束</label>
|
||||
<?php $dtName = 'starts_at'; $dtValue = $n['starts_at'] ?? '';
|
||||
@@ -118,11 +140,10 @@ $back = url('trips/show', ['id' => (int)$ev['id']]);
|
||||
<?php $dtName = 'ends_at'; $dtValue = $n['ends_at'] ?? '';
|
||||
$dtId = 'nf-e'; $dtSeconds = true; $dtRange = 'end';
|
||||
require __DIR__ . '/../_datetime.php'; ?>
|
||||
<span class="tip">结束时间可不填。</span>
|
||||
<span class="tip">结束时间可不填;填到几点几分,详情页就显示到几点几分。</span>
|
||||
</div>
|
||||
|
||||
<?php /* ---- 出行方式 + 车辆(TripLog 的 travel_modes)----
|
||||
用户第 8 条:车辆从财务里**读**,也可以加自己的(租的 / 借的)。 */ ?>
|
||||
<?php /* ---- 出行方式(TripLog 的 travel_modes)---- */ ?>
|
||||
<div class="field">
|
||||
<label for="nf-mode">出行方式</label>
|
||||
<select class="select" id="nf-mode" name="travel_mode" data-mode-select>
|
||||
@@ -135,77 +156,65 @@ $back = url('trips/show', ['id' => (int)$ev['id']]);
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="field" data-mode-vehicle hidden>
|
||||
<?php /* ---- 车辆:**只有自驾**才出现(用户第 17 批 第 3 条)----
|
||||
用户原话:「出行方式,只有选择自驾,才让选车辆,车辆下拉框,
|
||||
不需要出现什么财务里登记的车,只把车辆列出来就行了。」 */ ?>
|
||||
<div class="field" data-mode-vehicle<?= $needsVehicle ? '' : ' hidden' ?>>
|
||||
<label for="nf-veh">车辆</label>
|
||||
<select class="select" id="nf-veh" name="vehicle_id">
|
||||
<option value="">— 不指定 —</option>
|
||||
<?php
|
||||
$curVeh = (int)($n['vehicle_id'] ?? 0);
|
||||
$ledgerShown = false;
|
||||
foreach ($vehicles as $v):
|
||||
$isLedger = (($v['from'] ?? '') === 'ledger');
|
||||
if ($isLedger && !$ledgerShown) {
|
||||
echo '<optgroup label="财务里已登记的车">';
|
||||
$ledgerShown = true;
|
||||
}
|
||||
?>
|
||||
<option value="<?= $isLedger ? (int)$v['id'] : (int)$v['id'] ?>"
|
||||
<?= $curVeh === (int)$v['id'] ? ' selected' : '' ?>>
|
||||
<?= e(\App\Vehicle::label($v) . ($isLedger ? '(来自财务)' : '')) ?>
|
||||
<?php $curVeh = (int)($n['vehicle_id'] ?? 0); ?>
|
||||
<?php foreach ($vehicles as $v): ?>
|
||||
<option value="<?= (int)$v['id'] ?>"<?= $curVeh === (int)$v['id'] ? ' selected' : '' ?>>
|
||||
<?= e(\App\Vehicle::label($v)) ?>
|
||||
</option>
|
||||
<?php endforeach; ?>
|
||||
<?php if ($ledgerShown): ?></optgroup><?php endif; ?>
|
||||
</select>
|
||||
<span class="tip">
|
||||
财务里登记过的车子会直接列在这里;租的车、借别人的车到
|
||||
「设置 → 车辆管理」加一台。
|
||||
<?php if (!$vehicles): ?>
|
||||
车辆库还是空的 —— 到「设置 → 车辆管理」加一台(自家 / 租的 / 借的都能加)。
|
||||
<?php else: ?>
|
||||
租的车、借别人的车也到「设置 → 车辆管理」里加一台。
|
||||
<?php endif; ?>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<?php /* ---- 交通细节(照 TripLog:线路名 / 车次 / 承运方 / 座位 / 登机口)---- */ ?>
|
||||
<?php /* ---- 交通细节:**只有火车/飞机**才需要车次航班号(用户第 17 批 第 3 条)----
|
||||
用户原话:「飞机、铁路,只记录车次、航班号就可以,其他的没法记录,
|
||||
因为可能是多个人同行,座位什么的不记录了。」
|
||||
⚠️ 所以这里**没有**「座位 / 车厢」与「登机口 / 站台」两个输入框
|
||||
—— 它们对"一家人出行"没有意义(五六张票座位不在一起,
|
||||
登机口出发当天才知道)。数据库那两列保留(老数据不丢),界面不再出现。 */ ?>
|
||||
<div class="field" data-mode-ticket<?= $needsTicket ? '' : ' hidden' ?>>
|
||||
<label for="nf-tripno">车次 / 航班号</label>
|
||||
<input class="input" id="nf-tripno" name="trip_no"
|
||||
value="<?= e(old('trip_no', $n['trip_no'] ?? '')) ?>" placeholder="如:G1234、CA1234">
|
||||
<span class="tip">座位这类同团不同座的信息就不记了。</span>
|
||||
</div>
|
||||
<?php /* 线路名与承运方:火车/飞机时最有意义(「京沪高铁」「中国铁路」),
|
||||
也允许其他方式填(比如「轮渡 5 号线」)—— 所以不按方式隐藏。 */ ?>
|
||||
<div class="field">
|
||||
<label for="nf-line">线路名</label>
|
||||
<input class="input" id="nf-line" name="line_name"
|
||||
value="<?= e(old('line_name', $n['line_name'] ?? '')) ?>" placeholder="如:京沪高铁、地铁 3 号线">
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="nf-tripno">车次 / 航班号</label>
|
||||
<input class="input" id="nf-tripno" name="trip_no"
|
||||
value="<?= e(old('trip_no', $n['trip_no'] ?? '')) ?>" placeholder="如:G1234、CA1234">
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="nf-carrier">承运方</label>
|
||||
<input class="input" id="nf-carrier" name="carrier"
|
||||
value="<?= e(old('carrier', $n['carrier'] ?? '')) ?>" placeholder="如:中国铁路、滴滴">
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="nf-seat">座位 / 车厢</label>
|
||||
<input class="input" id="nf-seat" name="seat_info"
|
||||
value="<?= e(old('seat_info', $n['seat_info'] ?? '')) ?>" placeholder="如:7 车 12F">
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="nf-gate">登机口 / 站台</label>
|
||||
<input class="input" id="nf-gate" name="gate"
|
||||
value="<?= e(old('gate', $n['gate'] ?? '')) ?>" placeholder="如:T3 登机口 B12">
|
||||
value="<?= e(old('carrier', $n['carrier'] ?? '')) ?>" placeholder="如:中国铁路、国航">
|
||||
</div>
|
||||
|
||||
<?php /* ---- 起点 / 终点(TripLog 的 start/end_location)---- */ ?>
|
||||
<?php /* ---- 出发地 / 到达地:高德联想 + 详细地址(用户第 17 批 第 3 条)----
|
||||
用户原话:「出发地和到达地,都用高德地图的接口,记录详细地址」。 */ ?>
|
||||
<div class="field">
|
||||
<label for="nf-from">出发地</label>
|
||||
<input class="input" id="nf-from" name="from_place"
|
||||
value="<?= e(old('from_place', $n['from_place'] ?? '')) ?>" placeholder="如:家里">
|
||||
<?php $locPrefix = 'from'; $locLabel = '出发地'; $locIcon = '🚩';
|
||||
$locPlaceholder = '输入地址,如「家里」「青岛北站」'; $locRow = $fromRow;
|
||||
require __DIR__ . '/_loc_field.php'; ?>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="nf-to">到达地</label>
|
||||
<input class="input" id="nf-to" name="to_place"
|
||||
value="<?= e(old('to_place', $n['to_place'] ?? '')) ?>" placeholder="如:青岛北站">
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="nf-place">地点</label>
|
||||
<input class="input" id="nf-place" name="place"
|
||||
value="<?= e(old('place', $n['place'] ?? '')) ?>" placeholder="这一段主要在哪(用于统计城市)">
|
||||
<span class="tip">旅程页上的"去了几个城市"就是按这里统计的。</span>
|
||||
<?php $locPrefix = 'to'; $locLabel = '到达地'; $locIcon = '🏁';
|
||||
$locPlaceholder = '输入地址,如「青岛北站」「栈桥」'; $locRow = $toRow;
|
||||
require __DIR__ . '/_loc_field.php'; ?>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
@@ -225,40 +234,30 @@ $back = url('trips/show', ['id' => (int)$ev['id']]);
|
||||
placeholder="这一段发生了什么"><?= e(old('detail', $n['detail'] ?? '')) ?></textarea>
|
||||
</div>
|
||||
|
||||
<?php /* ---- 参与人(+角色,TripLog 的 role_tag)---- */ ?>
|
||||
<?php /* ---- 参与人:**弹框选人**(用户第 17 批 第 3 条)----
|
||||
用户原话:「参与人那里,和记录电影人一样,弹框选择,不要全列出来,太多了。
|
||||
给参与人标注角色这个功能去掉,不要了。」
|
||||
⚠️ 所以:① 用全站统一的选人组件(_person_picker.php,与观影同一个);
|
||||
② **没有**角色输入框了(上一批那个 <details> 折叠区删掉了)。 */ ?>
|
||||
<div class="field full">
|
||||
<label>参与的人</label>
|
||||
<?php if (!$people): ?>
|
||||
<p class="empty-hint">名册里还没有人。</p>
|
||||
<?php else: ?>
|
||||
<div class="nf-members">
|
||||
<?php foreach ($people as $p): ?>
|
||||
<?php $pid = (int)$p['id']; ?>
|
||||
<label class="check-item">
|
||||
<input type="checkbox" name="members[]" value="<?= $pid ?>"
|
||||
<?= in_array($pid, $picked, true) ? 'checked' : '' ?>>
|
||||
<span><?= e(person_name($p)) ?></span>
|
||||
</label>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<details class="role-set">
|
||||
<summary class="link-quiet">给参与的人标个角色(可选)</summary>
|
||||
<div class="role-grid">
|
||||
<?php foreach ($people as $p): ?>
|
||||
<?php $pid = (int)$p['id']; ?>
|
||||
<div class="role-row">
|
||||
<span class="role-who"><?= e(person_name($p)) ?></span>
|
||||
<input class="input" name="roles[<?= $pid ?>]" maxlength="30"
|
||||
value="<?= e($roles[$pid] ?? '') ?>" placeholder="如:司机 / 摄影">
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<span class="tip">不填也没关系;填了会显示在那个人名字旁边。</span>
|
||||
</details>
|
||||
<?php
|
||||
$ppName = 'members[]';
|
||||
$ppPeople = $people;
|
||||
$ppSelected = $picked;
|
||||
$ppMode = 'multi';
|
||||
$ppOpenBtn = '+ 添加参与的人';
|
||||
$ppTitle = '这一段里有谁';
|
||||
$ppTip = '不勾 = 这段没单独记参与人(旅程页仍会按各段汇总)。';
|
||||
require __DIR__ . '/../_person_picker.php';
|
||||
?>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<?php /* ---- 照片(用户第 3 条:图片视频都针对一次具体行程)---- */ ?>
|
||||
<?php /* ---- 照片(用户第 16 批 第 3 条:图片视频都针对一次具体行程)---- */ ?>
|
||||
<div class="field full">
|
||||
<label for="nf-photo">这一段行程的照片</label>
|
||||
<?php if ($isEdit && !empty($n['attachs'])): ?>
|
||||
@@ -295,7 +294,7 @@ $back = url('trips/show', ['id' => (int)$ev['id']]);
|
||||
</div>
|
||||
|
||||
<?php /* ==================== 花销(只在编辑时出现)====================
|
||||
用户第 2 条要"一共花了多少钱"、本次确认「行程级花销记录」。
|
||||
用户第 2 条要"一共花了多少钱"、第 16 批确认「行程级花销记录」。
|
||||
⚠️ 新增时不给花销面板:那时行程 id 还不存在,花销挂不上(先存行程再加花销,
|
||||
少一种"提交了但没存上"的状态)。 */ ?>
|
||||
<?php if ($isEdit): ?>
|
||||
@@ -361,4 +360,119 @@ $back = url('trips/show', ['id' => (int)$ev['id']]);
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php /* ==================== 高德 SDK(按需加载,与 TripLog 同一套做法)====================
|
||||
⚠️ SDK 加载**失败也必须能用**:文本框就是普通输入框,用户手敲地名照样能存。
|
||||
所以这段脚本里所有 AMap 的用法都放在 `__AMAP_LOADED` 判断之后,
|
||||
并且给"搜索这个地名"兜底链接单独一条路径(不依赖 SDK)。 */ ?>
|
||||
<?php if ($amap['key'] !== ''): ?>
|
||||
<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';
|
||||
|
||||
function bindLoc(prefix) {
|
||||
var input = document.getElementById('loc-' + prefix + '-input');
|
||||
if (!input) { return; }
|
||||
var wrap = input.closest('.loc-field');
|
||||
if (!wrap) { return; }
|
||||
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]');
|
||||
|
||||
/* 人选完之后(或手敲完)更新"详细地址"那行字与导航链接。
|
||||
导航链接用高德 URI API —— **没有 SDK 也能用**,所以不放在 __AMAP_LOADED 里。 */
|
||||
function paint() {
|
||||
var name = input.value.trim();
|
||||
var addr = fAddr ? fAddr.value : '';
|
||||
var lng = fLng ? fLng.value : '';
|
||||
var lat = fLat ? fLat.value : '';
|
||||
if (dTail) { dTail.textContent = (addr && addr !== name) ? addr : ''; }
|
||||
if (navEl) {
|
||||
if (lng !== '' && lat !== '') {
|
||||
navEl.href = 'https://uri.amap.com/navigation?to=' + encodeURIComponent(lng + ',' + lat + (name ? ',' + name : ''))
|
||||
+ '&mode=car&policy=1&coordinate=gaode&callnative=1';
|
||||
navEl.hidden = false;
|
||||
} else if (name !== '') {
|
||||
navEl.href = 'https://uri.amap.com/search?keyword=' + encodeURIComponent(name);
|
||||
navEl.hidden = false;
|
||||
} else {
|
||||
navEl.hidden = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 手敲也要更新(用户可能不用联想,直接打字)
|
||||
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 没绑域名等)—— 静默降级,不打扰用户 */
|
||||
}
|
||||
}
|
||||
|
||||
bindLoc('from');
|
||||
bindLoc('to');
|
||||
|
||||
/* 出行方式 → 显隐车辆 / 车次(用户第 17 批 第 3 条) */
|
||||
var modeSel = document.querySelector('[data-mode-select]');
|
||||
if (modeSel) {
|
||||
var vehBox = document.querySelector('[data-mode-vehicle]');
|
||||
var tikBox = document.querySelector('[data-mode-ticket]');
|
||||
var DRIVE = ['drive']; // 与 Trip::DRIVE_MODES 一致
|
||||
var TICKET = ['train', 'plane']; // 与 Trip::TICKET_MODES 一致
|
||||
var sync = function () {
|
||||
var v = modeSel.value;
|
||||
if (vehBox) { vehBox.hidden = DRIVE.indexOf(v) === -1; }
|
||||
if (tikBox) { tikBox.hidden = TICKET.indexOf(v) === -1; }
|
||||
};
|
||||
modeSel.addEventListener('change', sync);
|
||||
sync();
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
Reference in New Issue
Block a user