laoyang
00cd99d07d
地图四项调整（用户反馈）： - 位置移到封面之下、时间轴之前 —— 行程一长不用拉到底才看到地图； - 圆形标记放在该段行程线的中点（起终点都有才取中点，缺一头放 有的一头），不再是起点位置；anchor 改 center 居中骑在线上； - 只有地名、没坐标的地点（偏僻地方下拉选不到点位）：浏览器端调 AMap.Geocoder 按地名查坐标，查到补进路线全量重画（drawRoute 幂等）， 查不到保持缺省不硬造位置；data-route 新增 sname/ename 地名； - 提示文案同步更新。 裁剪交互（用户反馈）： - 选图后不再自动弹出裁剪框；每张能裁的缩略图旁放「✂ 裁剪」按钮 （左上角，与右上角 × 对称），点了才弹框，只处理这一张； - 「逐张裁剪」批量入口保留：确定后仍自动弹下一张（cropChain 标志 区分两种流程）；删除 addedCroppable 自动触发逻辑。 已验证：本地全链 11 步全绿（渲染检查 339 项、真实浏览器交互更新为 按钮触发流程 75 项）；远端 e2e 340 项 0 失败（新增 9 项断言）； 部署静态断言/双 PHP 渲染/内容断言全过后提交。
222 lines
10 KiB
PHP
222 lines
10 KiB
PHP
<div class="page-header">
|
|
<div>
|
|
<h1><?= e($activity['title']) ?></h1>
|
|
<p class="muted"><?= e($activity['description'] ?: '暂无简介') ?></p>
|
|
</div>
|
|
<div class="actions" style="display:flex; gap:8px; flex-wrap:wrap;">
|
|
<a href="<?= url('nodes/create', ['activity_id' => $activity['id'], 'category' => 'plan']) ?>" class="btn">+ 计划节点</a>
|
|
<a href="<?= url('nodes/create', ['activity_id' => $activity['id'], 'category' => 'reality']) ?>" class="btn-primary">+ 执行节点</a>
|
|
<a href="<?= url('activities/edit', ['id' => $activity['id']]) ?>" class="btn">编辑活动</a>
|
|
<form method="post" action="<?= url('activities/destroy') ?>" style="display:inline;"
|
|
onsubmit="return confirm('确定删除活动「<?= e($activity['title']) ?>」？\n该活动下的所有节点、附件、评论都会一并删除，且不可恢复。');">
|
|
<input type="hidden" name="_csrf" value="<?= e(csrf_token()) ?>">
|
|
<input type="hidden" name="id" value="<?= (int)$activity['id'] ?>">
|
|
<button type="submit" class="btn btn-danger">删除活动</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<?php if (!empty($activity['cover_image'])): ?>
|
|
<div class="activity-cover">
|
|
<img src="<?= e(media_cover((int)$activity['id'])) ?>" alt="">
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<?php $expenseSummary = $expenseSummary ?? ['total' => 0.0, 'count' => 0]; ?>
|
|
<?php if ((int)$expenseSummary['count'] > 0): ?>
|
|
<div class="activity-stats">
|
|
<span class="activity-stat">💰 共 <?= (int)$expenseSummary['count'] ?> 笔</span>
|
|
<span class="activity-stat">总计 ¥<?= number_format((float)$expenseSummary['total'], 2) ?></span>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<?php
|
|
/* ── 路线地图（批 10 引入，批 11 调整位置与标记逻辑）──────────────
|
|
位置放在封面之下、时间轴之前：行程一长，拉到底才看到地图的体验很差。
|
|
按时间顺序把执行节点的起终点连成路线：节点内实线、节点之间虚线；
|
|
圆形标记放在**这段行程线的中点**（缺一头就放有的一头）——
|
|
有图片附件显示图片，没有显示节点类型 emoji，左上角带序号，
|
|
点一下打开该节点详情。
|
|
只有地名、没坐标的地点（偏僻地方下拉选不到点位）：浏览器端调
|
|
高德地理编码（AMap.Geocoder）按地名查坐标，查到就补进路线重画；
|
|
查不到就保持缺省，不硬造位置。AMap 2.0 已由 layout.php 全局加载。 */
|
|
$routeNodes = [];
|
|
$nodeFirstImage = $nodeFirstImage ?? [];
|
|
foreach (($realityNodes ?? []) as $rn) {
|
|
$s = json_decode_field($rn['start_location'] ?? null);
|
|
$e = json_decode_field($rn['end_location'] ?? null);
|
|
$hasS = !empty($s['lng']) && !empty($s['lat']);
|
|
$hasE = !empty($e['lng']) && !empty($e['lat']);
|
|
$sname = trim((string)($s['name'] ?? ''));
|
|
$ename = trim((string)($e['name'] ?? ''));
|
|
if (!$hasS && !$hasE && $sname === '' && $ename === '') {
|
|
continue; // 坐标和地名一个都没有的节点不上地图
|
|
}
|
|
$imgId = (int)($nodeFirstImage[(int)$rn['id']] ?? 0);
|
|
$routeNodes[] = [
|
|
'id' => (int)$rn['id'],
|
|
'title' => (string)($rn['title'] ?: '（无标题节点）'),
|
|
'icon' => (string)($rn['node_type_icon'] ?: '📍'),
|
|
'img' => $imgId > 0 ? media_att($imgId) : '',
|
|
'url' => url('nodes/show', ['id' => (int)$rn['id']]),
|
|
'sname' => $sname, // 出发地名：没有坐标时交给高德地理编码兜底
|
|
'ename' => $ename, // 到达地名：同上
|
|
'start' => $hasS ? ['lng' => (float)$s['lng'], 'lat' => (float)$s['lat']] : null,
|
|
'end' => $hasE ? ['lng' => (float)$e['lng'], 'lat' => (float)$e['lat']] : null,
|
|
];
|
|
}
|
|
?>
|
|
<?php if ($routeNodes !== []): ?>
|
|
<section class="route-map-section">
|
|
<h2 class="section-title" id="route-map">🗺️ 行程路线</h2>
|
|
<div class="route-map" id="route-map-canvas"
|
|
data-route="<?= e(json_encode($routeNodes, JSON_UNESCAPED_UNICODE)) ?>"></div>
|
|
<p class="muted route-map-hint">
|
|
按时间顺序连出的执行节点路线（节点间虚线衔接），圆标在每段行程的中间，点它可打开对应节点。
|
|
<span class="route-legend-end">红点</span> = 到达地。只有地名没坐标的地点会自动向高德查询定位，太偏僻的地名可能查不到。
|
|
</p>
|
|
</section>
|
|
<script>
|
|
(function () {
|
|
'use strict';
|
|
var el = document.getElementById('route-map-canvas');
|
|
if (!el) return;
|
|
|
|
/* AMap 脚本加载失败（罕见）时给一句人话，不白屏 */
|
|
if (typeof AMap === 'undefined' || window.__AMAP_ERROR) {
|
|
el.innerHTML = '<p class="route-map-fallback">地图脚本没有加载成功，暂时无法显示路线。</p>';
|
|
return;
|
|
}
|
|
var route;
|
|
try {
|
|
route = JSON.parse(el.getAttribute('data-route') || '[]');
|
|
} catch (e) {
|
|
return;
|
|
}
|
|
if (!route.length) return;
|
|
|
|
var map = new AMap.Map(el, { viewMode: '2D', zoom: 5 });
|
|
var overlays = []; // 当前画上去的所有覆盖物；地理编码补点后整体重画
|
|
|
|
/* 全量重画：先清掉旧覆盖物再按当前 route 数据画。
|
|
地理编码是异步的，一个点查回来就重画一次，数据是幂等的。 */
|
|
function drawRoute() {
|
|
overlays.forEach(function (o) { map.remove(o); });
|
|
overlays = [];
|
|
var inPath = []; // 节点内：出发地 → 到达地（实线）
|
|
var hopPath = []; // 节点之间：上一站到达地 → 下一站出发地（虚线）
|
|
var prevEnd = null;
|
|
|
|
route.forEach(function (n, i) {
|
|
var s = n.start, en = n.end;
|
|
|
|
if (s && en) inPath.push([s.lng, s.lat], [en.lng, en.lat]);
|
|
if (s && prevEnd) hopPath.push([prevEnd.lng, prevEnd.lat], [s.lng, s.lat]);
|
|
|
|
/* 圆形标记放这段行程线的中点（起终点都有才取中点），缺一头就放有的一头 */
|
|
var pos = (s && en)
|
|
? [(s.lng + en.lng) / 2, (s.lat + en.lat) / 2]
|
|
: (s || en);
|
|
if (pos) {
|
|
var html = '<div class="route-marker" title="' + n.title.replace(/"/g, '"') + '">'
|
|
+ (n.img
|
|
? '<img src="' + n.img + '" alt="">'
|
|
: '<span class="route-marker-emoji">' + n.icon + '</span>')
|
|
+ '<span class="route-marker-num">' + (i + 1) + '</span>'
|
|
+ '</div>';
|
|
var marker = new AMap.Marker({
|
|
position: pos,
|
|
content: html,
|
|
anchor: 'center',
|
|
map: map,
|
|
});
|
|
marker.on('click', function () { window.location.href = n.url; });
|
|
overlays.push(marker);
|
|
}
|
|
|
|
/* 到达地小圆点（和出发地不是同一点时才画） */
|
|
if (en && (!s || en.lng !== s.lng || en.lat !== s.lat)) {
|
|
var dot = new AMap.Marker({
|
|
position: [en.lng, en.lat],
|
|
content: '<div class="route-end-dot"></div>',
|
|
anchor: 'center',
|
|
map: map,
|
|
});
|
|
dot.on('click', function () { window.location.href = n.url; });
|
|
overlays.push(dot);
|
|
}
|
|
|
|
prevEnd = en || s;
|
|
});
|
|
|
|
if (inPath.length > 1) {
|
|
overlays.push(new AMap.Polyline({
|
|
path: inPath, strokeColor: '#3B82F6', strokeWeight: 5,
|
|
strokeOpacity: 0.9, lineJoin: 'round', showDir: true, map: map,
|
|
}));
|
|
}
|
|
if (hopPath.length) {
|
|
overlays.push(new AMap.Polyline({
|
|
path: hopPath, strokeColor: '#94A3B8', strokeWeight: 3,
|
|
strokeStyle: 'dashed', strokeOpacity: 0.8, map: map,
|
|
}));
|
|
}
|
|
if (overlays.length) map.setFitView(null, false, [50, 50, 50, 50]);
|
|
}
|
|
drawRoute();
|
|
|
|
/* 只有地名、没有坐标的地点：向高德地理编码查坐标（插件按需加载）。
|
|
查到就补进数据并重画；查不到（地名太偏/写错）保持缺省，不硬造位置。 */
|
|
function geocode(name, cb) {
|
|
if (!name) return;
|
|
AMap.plugin('AMap.Geocoder', function () {
|
|
try {
|
|
new AMap.Geocoder({}).getLocation(name, function (status, result) {
|
|
if (status === 'complete' && result && result.geocodes && result.geocodes.length
|
|
&& result.geocodes[0].location) {
|
|
var loc = result.geocodes[0].location;
|
|
cb({ lng: Number(loc.getLng()), lat: Number(loc.getLat()) });
|
|
}
|
|
});
|
|
} catch (e) { /* 地理编码服务不可用时保持原状 */ }
|
|
});
|
|
}
|
|
route.forEach(function (n) {
|
|
if (!n.start && n.sname) geocode(n.sname, function (p) { n.start = p; drawRoute(); });
|
|
if (!n.end && n.ename) geocode(n.ename, function (p) { n.end = p; drawRoute(); });
|
|
});
|
|
})();
|
|
</script>
|
|
<?php endif; ?>
|
|
|
|
<div class="timeline-grid">
|
|
<section class="timeline-col">
|
|
<h2>📋 计划 (<?= count($planNodes) ?>)</h2>
|
|
<?php if (empty($planNodes)): ?>
|
|
<p class="muted">暂无计划节点</p>
|
|
<?php else: ?>
|
|
<?php foreach ($planNodes as $n): ?>
|
|
<?php $cardCategory = 'plan'; require __DIR__ . '/_node_card.php'; ?>
|
|
<?php endforeach; ?>
|
|
<?php endif; ?>
|
|
</section>
|
|
|
|
<section class="timeline-col">
|
|
<h2>🎬 实际 (<?= count($realityNodes) ?>)</h2>
|
|
<?php if (empty($realityNodes)): ?>
|
|
<p class="muted">暂无执行节点</p>
|
|
<?php else: ?>
|
|
<?php foreach ($realityNodes as $n): ?>
|
|
<?php $cardCategory = 'reality'; require __DIR__ . '/_node_card.php'; ?>
|
|
<?php endforeach; ?>
|
|
<?php endif; ?>
|
|
</section>
|
|
</div>
|
|
|
|
|
|
<?php
|
|
$commentTargetType = \App\Comments::TARGET_ACTIVITY;
|
|
$commentTargetId = (int)$activity['id'];
|
|
require dirname(__DIR__) . '/comments/_block.php';
|
|
?>
|