TripLog/templates/users/form.php

<?php
$isEdit = $user !== null;
$roleLabels = ['admin' => '管理员', 'user' => '普通用户', 'guest' => '待激活'];
$isAdmin = \App\Auth::isAdmin();
?>
<div class="page-header">
    <div>
        <h1><?= $isEdit ? '编辑用户' : '新增用户' ?></h1>
        <?php if ($isEdit): ?>
            <p class="muted">用户 ID：<?= (int)$user['id'] ?></p>
        <?php endif; ?>
    </div>
    <a href="<?= url('users/index') ?>" class="btn">返回列表</a>
</div>

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

    <div class="form-row">
        <label>头像</label>
        <div class="avatar-upload">
            <div class="avatar-preview" id="avatar-preview">
                <img id="avatar-preview-img" src="<?= e($user['avatar'] ?? '') ?>" alt=""
                     style="<?= empty($user['avatar']) ? 'display:none;' : '' ?>">
                <div class="avatar-placeholder" id="avatar-placeholder"
                     style="<?= !empty($user['avatar']) ? 'display:none;' : '' ?>">+</div>
            </div>
            <div class="avatar-upload-actions">
                <button type="button" class="btn-sm" id="btn-upload-avatar">选择图片</button>
                <button type="button" class="btn-sm btn-danger" id="btn-remove-avatar"
                        style="<?= empty($user['avatar']) ? 'display:none;' : '' ?>">移除</button>
                <span class="muted" style="font-size:12px;">支持 JPG/PNG/WebP，裁剪为 400×400</span>
            </div>
            <input type="file" id="avatar-file-input" accept="image/*" style="display:none;">
            <input type="hidden" name="avatar" id="avatar-url-input" value="<?= e($user['avatar'] ?? '') ?>">
        </div>
    </div>

    <div class="form-row">
        <label>姓名 *</label>
        <input type="text" name="name" required maxlength="50"
               value="<?= e($user['name'] ?? '') ?>" placeholder="例如：张明">
    </div>

    <?php if ($isAdmin): ?>
    <div class="form-row">
        <label>角色 *</label>
        <select name="role" id="role-select" required>
            <?php foreach ($roleLabels as $key => $label): ?>
                <option value="<?= e($key) ?>" <?= ($user['role'] ?? 'guest') === $key ? 'selected' : '' ?>>
                    <?= e($label) ?>
                </option>
            <?php endforeach; ?>
        </select>
        <p class="muted" style="font-size:12px; margin-top:6px;">
            待激活用户无需手机号/密码，仅供活动记录中标记，不能登录系统。
        </p>
    </div>
    <?php endif; ?>

    <div class="form-row" id="phone-field">
        <label>手机号 <span id="phone-required">*</span></label>
        <input type="text" name="phone" maxlength="11"
               placeholder="<?= $isEdit ? '留空表示不修改手机号' : '请输入 11 位手机号' ?>">
    </div>

    <div class="form-row" id="password-field">
        <label>密码 <?= $isEdit ? '' : '*' ?></label>
        <input type="password" name="password"
               placeholder="<?= $isEdit ? '留空表示不修改密码' : '请输入密码' ?>">
    </div>

    <div class="form-row">
        <label>身份证号</label>
        <input type="text" name="id_card" maxlength="18"
               placeholder="<?= $isEdit ? '留空表示不修改' : '选填' ?>">
        <p class="muted" style="font-size:12px; margin-top:6px;">
            身份证号将被加密存储，用于未来关联车票/机票。
        </p>
    </div>

    <?php if ($isAdmin && $isEdit): ?>
    <div class="form-row">
        <label>状态</label>
        <select name="status">
            <option value="active" <?= ($user['status'] ?? '') === 'active' ? 'selected' : '' ?>>正常</option>
            <option value="inactive" <?= ($user['status'] ?? '') === 'inactive' ? 'selected' : '' ?>>停用</option>
        </select>
    </div>
    <?php endif; ?>

    <div class="form-actions">
        <a href="<?= url('users/index') ?>" class="btn">取消</a>
        <button type="submit" class="btn-primary">保存</button>
    </div>
</form>

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

<script>
(function () {
    // ===== 角色切换逻辑 =====
    var roleSelect = document.getElementById('role-select');
    if (roleSelect) {
        var phoneField = document.getElementById('phone-field');
        var pwField = document.getElementById('password-field');
        var phoneRequired = document.getElementById('phone-required');
        var refresh = function () {
            var role = roleSelect.value;
            var needs = (role === 'admin' || role === 'user');
            phoneRequired.style.display = needs ? 'inline' : 'none';
            phoneField.style.opacity = needs ? '1' : '0.5';
            pwField.style.opacity = needs ? '1' : '0.5';
        };
        roleSelect.addEventListener('change', refresh);
        refresh();
    }

    // ===== 头像上传与裁剪 =====
    var fileInput   = document.getElementById('avatar-file-input');
    var btnUpload   = document.getElementById('btn-upload-avatar');
    var btnRemove   = document.getElementById('btn-remove-avatar');
    var previewImg  = document.getElementById('avatar-preview-img');
    var placeholder = document.getElementById('avatar-placeholder');
    var urlInput    = document.getElementById('avatar-url-input');
    var modal       = document.getElementById('crop-modal');
    var cropImage   = document.getElementById('crop-image');
    var backdrop    = document.getElementById('crop-backdrop');
    var btnCancel   = document.getElementById('btn-cancel-crop');
    var btnConfirm  = document.getElementById('btn-confirm-crop');
    var csrfToken   = '<?= e(csrf_token()) ?>';

    if (!btnUpload) return;

    var cropper = null;

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

    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 > 10 * 1024 * 1024) { alert('原始图片不能超过 10MB'); 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: 1,
                viewMode: 1,
                autoCropArea: 0.85,
                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: 400, height: 400, imageSmoothingQuality: 'high',
        });
        var dataUrl = canvas.toDataURL('image/jpeg', 0.9);

        fetch('index.php?r=users/uploadAvatar', {
            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';
            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';
    });
})();
</script>