TripLog/templates/activities/form.php

<?php
$isEdit = $activity !== null;
$cover  = $isEdit ? (string)($activity['cover_image'] ?? '') : '';
// 预览也走媒体代理：页面里不出现 /uploads/... 真实路径
$coverPreview = ($isEdit && $cover !== '') ? media_cover((int)$activity['id']) : '';
?>
<div class="page-header">
    <div>
        <h1><?= $isEdit ? '编辑活动' : '新建活动' ?></h1>
        <?php if ($isEdit): ?>
            <p class="muted">
                创建于 <?= e(date('Y-m-d', strtotime($activity['created_at']))) ?>
                · 最近更新 <?= e(date('Y-m-d H:i', strtotime($activity['updated_at'] ?? $activity['created_at']))) ?>
            </p>
        <?php endif; ?>
    </div>
    <?php if ($isEdit): ?>
        <a href="<?= url('activities/show', ['id' => $activity['id']]) ?>" class="btn">返回活动</a>
    <?php else: ?>
        <a href="<?= url('activities/index') ?>" class="btn">返回列表</a>
    <?php endif; ?>
</div>

<form method="post" action="<?= url($isEdit ? 'activities/update' : 'activities/store') ?>" class="form">
    <input type="hidden" name="_csrf" value="<?= e(csrf_token()) ?>">
    <?php if ($isEdit): ?>
        <input type="hidden" name="id" value="<?= (int)$activity['id'] ?>">
    <?php endif; ?>

    <div class="form-row">
        <label>封面图</label>
        <div class="cover-upload" id="cover-upload-box">
            <div class="cover-preview" id="cover-preview">
                <img id="cover-preview-img" src="<?= e($coverPreview) ?>" alt=""
                     style="<?= $coverPreview === '' ? 'display:none;' : '' ?>">
                <div class="cover-placeholder" id="cover-placeholder"
                     style="<?= $cover === '' ? '' : 'display:none;' ?>">
                    <div style="font-size:32px;">🖼️</div>
                    <div style="font-size:12px; margin-top:6px;">16:9 封面</div>
                </div>
            </div>
            <div class="cover-upload-actions">
                <button type="button" class="btn-sm" id="btn-upload-cover"><?= $cover === '' ? '选择图片' : '更换图片' ?></button>
                <button type="button" class="btn-sm btn-danger" id="btn-remove-cover"
                        style="<?= $cover === '' ? 'display:none;' : '' ?>">移除</button>
                <span class="muted" style="font-size:12px;">支持 JPG/PNG/WebP，可直接拖进来或点选，裁剪为 800×450</span>
            </div>
            <input type="file" id="cover-file-input" accept="image/*" style="display:none;">
            <input type="hidden" name="cover_image" id="cover-url-input" value="<?= e($cover) ?>">
        </div>
    </div>

    <div class="form-row">
        <label>活动标题 *</label>
        <input type="text" name="title" required maxlength="200" placeholder="例如：2026 盛夏去奥森"
               value="<?= e($activity['title'] ?? '') ?>">
    </div>

    <div class="form-row">
        <label>活动简介</label>
        <textarea name="description" rows="4" placeholder="简单描述一下这次活动..."><?= e($activity['description'] ?? '') ?></textarea>
    </div>

    <div class="form-actions">
        <a href="<?= url($isEdit ? 'activities/show' : 'activities/index', $isEdit ? ['id' => $activity['id']] : []) ?>" class="btn">取消</a>
        <button type="submit" class="btn-primary"><?= $isEdit ? '保存' : '创建' ?></button>
    </div>
</form>

<!-- 裁剪模态框 -->
<div class="modal" id="cover-crop-modal" style="display:none;">
    <div class="modal-backdrop" id="cover-crop-backdrop"></div>
    <div class="modal-content modal-content-wide">
        <h2>裁剪封面图</h2>
        <div class="crop-container crop-container-wide">
            <img id="cover-crop-image" src="" alt="">
        </div>
        <div class="modal-actions">
            <button type="button" class="btn" id="btn-cancel-cover-crop">取消</button>
            <button type="button" class="btn-primary" id="btn-confirm-cover-crop">确认裁剪</button>
        </div>
    </div>
</div>

<script>
(function () {
    var fileInput   = document.getElementById('cover-file-input');
    var btnUpload   = document.getElementById('btn-upload-cover');
    var btnRemove   = document.getElementById('btn-remove-cover');
    var previewImg  = document.getElementById('cover-preview-img');
    var placeholder = document.getElementById('cover-placeholder');
    var urlInput    = document.getElementById('cover-url-input');
    var modal       = document.getElementById('cover-crop-modal');
    var cropImage   = document.getElementById('cover-crop-image');
    var backdrop    = document.getElementById('cover-crop-backdrop');
    var btnCancel   = document.getElementById('btn-cancel-cover-crop');
    var btnConfirm  = document.getElementById('btn-confirm-cover-crop');
    var csrfToken   = '<?= e(csrf_token()) ?>';

    if (!btnUpload) return;

    var cropper = null;

    btnUpload.addEventListener('click', function () { fileInput.click(); });

    /* 批 21：直接把图片拖进上传区 —— 走 DataTransfer 塞给原有 file input，
       后面的「校验类型/大小 → 打开裁剪」流程原样复用，不另写一套。
       dragenter/dragover 必须 preventDefault，否则浏览器会直接打开图片文件。 */
    var dropBox = document.getElementById('cover-upload-box');
    ['dragenter', 'dragover'].forEach(function (t) {
        dropBox.addEventListener(t, function (e) {
            e.preventDefault();
            dropBox.classList.add('dragover');
        });
    });
    ['dragleave', 'drop'].forEach(function (t) {
        dropBox.addEventListener(t, function (e) {
            e.preventDefault();
            dropBox.classList.remove('dragover');
        });
    });
    dropBox.addEventListener('drop', function (e) {
        var files = e.dataTransfer && e.dataTransfer.files;
        if (!files || !files.length) return;
        var dt = new DataTransfer();
        dt.items.add(files[0]);   // 封面只有一张：一次拖多张也只取第一张
        fileInput.files = dt.files;
        fileInput.dispatchEvent(new Event('change'));
    });

    fileInput.addEventListener('change', function (e) {
        var file = e.target.files && e.target.files[0];
        if (!file) return;
        if (!/^image\//.test(file.type)) { alert('请选择图片文件'); return; }
        if (file.size > 15 * 1024 * 1024) { alert('原始图片不能超过 15MB'); return; }

        var reader = new FileReader();
        reader.onload = function (ev) {
            cropImage.src = ev.target.result;
            modal.style.display = 'flex';
            if (cropper) cropper.destroy();
            cropper = new Cropper(cropImage, {
                aspectRatio: 16 / 9,
                viewMode: 1,
                autoCropArea: 0.9,
                background: false,
                movable: true,
                zoomable: true,
                rotatable: false,
                scalable: false,
            });
        };
        reader.readAsDataURL(file);
    });

    function closeCrop() {
        modal.style.display = 'none';
        if (cropper) { cropper.destroy(); cropper = null; }
        fileInput.value = '';
    }

    btnCancel.addEventListener('click', closeCrop);
    backdrop.addEventListener('click', closeCrop);

    btnConfirm.addEventListener('click', function () {
        if (!cropper) return;
        btnConfirm.disabled = true;
        btnConfirm.textContent = '上传中...';

        var canvas = cropper.getCroppedCanvas({
            width: 800,
            height: 450,
            imageSmoothingQuality: 'high',
        });
        var dataUrl = canvas.toDataURL('image/jpeg', 0.9);

        fetch('index.php?r=activities/uploadCover', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-Token': csrfToken,
            },
            body: JSON.stringify({ image: dataUrl, old: urlInput.value }),
        })
        .then(function (r) { return r.json().then(function (d) { return { ok: r.ok, data: d }; }); })
        .then(function (res) {
            btnConfirm.disabled = false;
            btnConfirm.textContent = '确认裁剪';
            if (!res.ok || res.data.error) {
                alert(res.data.error || '上传失败');
                return;
            }
            urlInput.value = res.data.url;
            previewImg.src = res.data.url;
            previewImg.style.display = 'block';
            placeholder.style.display = 'none';
            btnRemove.style.display = 'inline-block';
            btnUpload.textContent = '更换图片';
            closeCrop();
        })
        .catch(function (err) {
            btnConfirm.disabled = false;
            btnConfirm.textContent = '确认裁剪';
            alert('网络错误：' + err.message);
        });
    });

    btnRemove.addEventListener('click', function () {
        urlInput.value = '';
        previewImg.src = '';
        previewImg.style.display = 'none';
        placeholder.style.display = 'flex';
        btnRemove.style.display = 'none';
        btnUpload.textContent = '选择图片';
    });
})();
</script>