TripLog/templates/activities/show.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; ?>

<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
/* ── 路线地图（批 10）──────────────────────────────
   按时间顺序把执行节点的起终点连成路线：节点内实线、节点之间虚线；
   每个节点在起点（没有起点就放终点）放一个圆形标记 ——
   有图片附件显示图片，没有显示节点类型 emoji，左上角带序号，
   点一下打开该节点详情。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']);
    if (!$hasS && !$hasE) {
        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']]),
        '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 inNodePath = [];    // 节点内：出发地 → 到达地（实线）
    var hopPath = [];       // 节点之间：上一站到达地 → 下一站出发地（虚线）
    var prevEnd = null;

    route.forEach(function (n, i) {
        var s = n.start, en = n.end;

        /* 节点内实线 */
        if (s && en) {
            inNodePath.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;
        if (pos) {
            var html = '<div class="route-marker" title="' + n.title.replace(/"/g, '&quot;') + '">'
                + (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.lng, pos.lat],
                content: html,
                anchor: 'bottom-center',
                map: map,
            });
            marker.on('click', function () { window.location.href = n.url; });
        }

        /* 到达地小圆点（和出发地不是同一点时才画） */
        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; });
        }

        prevEnd = en || s;
    });

    if (inNodePath.length > 1) {
        map.add(new AMap.Polyline({
            path: inNodePath, strokeColor: '#3B82F6', strokeWeight: 5,
            strokeOpacity: 0.9, lineJoin: 'round', showDir: true,
        }));
    }
    if (hopPath.length) {
        map.add(new AMap.Polyline({
            path: hopPath, strokeColor: '#94A3B8', strokeWeight: 3,
            strokeStyle: 'dashed', strokeOpacity: 0.8,
        }));
    }
    map.setFitView(null, false, [50, 50, 50, 50]);
})();
</script>
<?php endif; ?>

<?php
$commentTargetType = \App\Comments::TARGET_ACTIVITY;
$commentTargetId   = (int)$activity['id'];
require dirname(__DIR__) . '/comments/_block.php';
?>