Files
FamilyBook/templates/movies/form.php
T
laoyang 8f80f3e835 v24 第 2 轮:19 条清单收尾(附件预览/CalDAV/任务分类看板/全局选人/家谱/纪念日/财务)
用户 2026-10-02 提的 19 条需求,本轮完成剩下的 8 条 + CalDAV 服务端:

- ③ 附件:图片/视频给缩略图,PDF/Word/Excel 给**同尺寸**图标;可预览的在本页
     弹层里看(不再新开标签页),渲染不了的点了直接下载;预览层右上角恒有下载按钮。
- ⑦b CalDAV:把「我的日历本」按 RFC 4791 只读子集分享出去(OPTIONS/PROPFIND/
     REPORT/GET,写方法一律 403)。用**专用口令**(库里只存 sha256),不是登录口令。
- ⑨⑩ 任务:分类与看板都由用户自建;已完成的任务从看板消失,改在「已完成」页
     按分类查看/搜索;设置入口在「新建任务」旁的 ☰。
- ⑪ 全局人员选择器:一个片段铺到观影/旅程/资源/日历共享/任务共享/财务共享;
     修掉了老组件「名字和拼音都搜不动」的 bug —— .att-item 自己声明了 display:flex,
     压过了浏览器 [hidden]{display:none},过滤根本没生效。
- ⑫ 家谱:头像改方形不再裁切;姻亲不在图上的卡片给「⇄ 姻亲」入口,
     以 TA 为中心重画 + 「返回我的家谱」。
- ⑬ 纪念日:阴历/阳历都能设且按对应历法重复;名册里每个人的生日默认可见
     (实时派生,不复制一份);全部作为全天日程进日历。
- ⑮ 财务:账本可共享,双方都能记账、都能看全部账目,资产−负债=净资产;
     金额一律以「分」存,不用浮点。

验证:端到端 724 项通过 / 0 失败;几何 368、交互 97、移动端 516、家谱 24、
升级 123 全绿;SQL 列名静态校验 0 处可疑;部署 11 条线上探针全过。
2026-10-03 08:18:05 +08:00

309 lines
13 KiB
PHP
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<?php
/**
* 观影表单(新增 / 编辑,一张表单两用 —— 与 people/form 同一思路)。
*
* v9 变化:观影时间改为「开始 / 结束」两个秒级时刻(_datetime.php 控件,
* 服务端 read_dt_input 取值);评分与观后感**移出表单** —— 搬到详情页的
* 「评价与评论」区(MovieLog 同款:每账号一条评价,谁都能评);影院改为
* 下拉选择已有影院 + 可选「新建影院」行内三段。
*
* 海报与票根是 free 槽位(v8):不进裁剪器、整图等比缩进框内,普通文件控件即可。
* 现场照片只在**新增**时提供多选;编辑时在详情页里逐张补/删。
*/
$isEdit = !empty($m['id']);
// 时间回填:校验失败重画时优先用 old() 里的分字段重组(否则用户刚选的时刻会丢);
// 正常进编辑页时用库里的值。
$dtFromOld = static function (string $name, ?string $dbValue): ?string {
$date = trim((string)old($name . '_date', ''));
if ($date !== '') {
return sprintf('%s %02d:%02d:%02d', $date,
(int)old($name . '_hour', 0), (int)old($name . '_minute', 0), (int)old($name . '_second', 0));
}
return ($dbValue !== null && $dbValue !== '') ? $dbValue : null;
};
$dtStart = $dtFromOld('starts_at', $m['starts_at'] ?? null);
$dtEnd = $dtFromOld('ends_at', $m['ends_at'] ?? null);
$selCinema = (int)old('cinema_id', $m['cinema_id'] ?? 0);
$curAttendees = array_map('intval', array_column($m['attendees'] ?? [], 'id'));
$selAttendees = array_map('intval', (array)old('attendees', $curAttendees));
?>
<div class="page-head">
<h1><?= $isEdit ? '编辑观影记录' : '记一场电影' ?></h1>
<span class="sub"><?= $isEdit ? e($m['title']) : '片名必填,其他都可以以后再补' ?></span>
<div class="actions">
<?php /* 文案一律「返回观影」(用户 2026-10-01 要求:观影模块里不再出现
「返回观影记录」「返回列表」「返回详情」三种叫法)。
落地页仍按来路走:从详情页点「编辑」进来的,回去还是那条记录的详情页。 */ ?>
<a class="btn btn-ghost"
href="<?= e($isEdit ? url('movies/show', ['id' => (int)$m['id']]) : url('movies')) ?>">
返回观影
</a>
<?php $setCurrent = 'form'; $setCanWrite = \App\Auth::canWrite(); require __DIR__ . '/_settings_menu.php'; ?>
</div>
</div>
<form method="post" enctype="multipart/form-data"
action="<?= e(url($isEdit ? 'movies/update' : 'movies/create')) ?>">
<?= csrf_field() ?>
<?php if ($isEdit): ?>
<input type="hidden" name="id" value="<?= (int)$m['id'] ?>">
<?php endif; ?>
<div class="card card-pad">
<div class="form-grid">
<div class="field full">
<label for="title">片名 *</label>
<div class="db-title-row">
<input class="input" id="title" name="title" value="<?= e(old('title', $m['title'] ?? '')) ?>"
required autocomplete="off">
<button type="button" class="btn btn-ghost btn-sm" id="dbFetch"
title="按片名从豆瓣抓取片名、简介、海报等">📡 自动获取</button>
</div>
<?php /* v10 豆瓣自动补充:输入片名出下拉候选,点「自动获取」直接抓。
抓到的元数据整体进隐藏 douban_meta(JSON),海报走服务端落盘的 poster_key。 */ ?>
<div class="db-suggest" id="dbSuggest" hidden></div>
<input type="hidden" name="douban_meta" id="dbMeta" value="">
<input type="hidden" name="poster_key" id="dbPosterKey" value="">
<div class="db-poster-preview" id="dbPosterWrap" hidden>
<img id="dbPosterImg" alt="海报预览">
<span class="tip">海报已从豆瓣取回,保存后生效。</span>
</div>
<span class="tip">片名可从豆瓣自动补充:输入后从下拉里选,或点「自动获取」。</span>
<?php if (!empty($errors['title'])): ?><span class="err"><?= e($errors['title']) ?></span><?php endif; ?>
</div>
<div class="field full">
<label <?= $isEdit ? '' : 'for="starts_at_date"' ?>>开始时间(精确到秒)</label>
<?php $dtName = 'starts_at'; $dtValue = $dtStart; $dtId = 'starts_at_date';
require __DIR__ . '/../_datetime.php'; ?>
<?php if (!empty($errors['starts_at'])): ?><span class="err"><?= e($errors['starts_at']) ?></span><?php endif; ?>
</div>
<div class="field full">
<label>结束时间(散场,可不填)</label>
<?php $dtName = 'ends_at'; $dtValue = $dtEnd; $dtId = '';
require __DIR__ . '/../_datetime.php'; ?>
<?php if (!empty($errors['ends_at'])): ?><span class="err"><?= e($errors['ends_at']) ?></span><?php endif; ?>
</div>
<div class="field full">
<label for="cinema_id">影院</label>
<div class="cinema-select-row">
<select class="select" id="cinema_id" name="cinema_id">
<option value="0">不记录影院</option>
<?php foreach ($cinemas as $c): ?>
<option value="<?= (int)$c['id'] ?>" <?= $selCinema === (int)$c['id'] ? 'selected' : '' ?>>
<?= e(trim(((string)($c['place'] ?? '') !== '' ? $c['place'] . ' · ' : '') . $c['name'])) ?>
</option>
<?php endforeach; ?>
</select>
<a class="btn btn-ghost btn-sm" href="<?= e(url('movies/cinemas')) ?>">管理影院</a>
</div>
<span class="tip">想记一家还没录过的影院?先去「管理影院」里添加,回来这里就能选。</span>
</div>
<div class="field full">
<label>同行的人</label>
<?php /* v24 第 11 条:换成全局人员选择器(templates/_person_picker.php)。
原来这套是观影页私有的 .att-*,它的「过滤」其实一直是坏的 ——
.att-item 自己写了 display:flex,压过了浏览器的 [hidden]{display:none},
JS 里 el.hidden = true 根本没生效,搜什么都还是一整列。 */ ?>
<?php if ($people): ?>
<?php
$ppName = 'attendees[]';
$ppPeople = $people;
$ppSelected = $selAttendees;
$ppMode = 'multi';
$ppOpenBtn = '+ 添加观影人';
$ppTitle = '选择观影人';
$ppTip = '';
require __DIR__ . '/../_person_picker.php';
?>
<?php else: ?>
<span class="tip">名册里还没有人,先把家人加进名册再来记。</span>
<?php endif; ?>
</div>
<div class="field full">
<label for="info">简介</label>
<textarea class="input" id="info" name="info" rows="3"
placeholder="剧情简介(可选)"><?= e(old('info', $m['info'] ?? '')) ?></textarea>
</div>
<div class="field full">
<label for="note">备注</label>
<textarea class="input" id="note" name="note" rows="2"><?= e(old('note', $m['note'] ?? '')) ?></textarea>
</div>
<div class="field">
<label for="poster">海报</label>
<input class="input" id="poster" name="poster" type="file" accept="image/*">
<?php if ($isEdit && !empty($m['poster_key'])): ?>
<span class="tip">已有海报,不选新图就保留原图。</span>
<?php endif; ?>
</div>
<div class="field">
<label for="ticket">票根</label>
<input class="input" id="ticket" name="ticket" type="file" accept="image/*">
<?php if ($isEdit && !empty($m['ticket_key'])): ?>
<span class="tip">已有票根,不选新图就保留原图。</span>
<?php endif; ?>
</div>
<?php if (!$isEdit): ?>
<div class="field full">
<label for="photo">现场照片(可多选)</label>
<input class="input" id="photo" name="photo[]" type="file" accept="image/*" multiple>
<span class="tip">之后也可以在详情页里逐张补传。</span>
</div>
<?php endif; ?>
</div>
<div class="btn-row">
<button type="submit" class="btn"><?= $isEdit ? '保存' : '记下这场电影' ?></button>
<a class="btn btn-ghost"
href="<?= e($isEdit ? url('movies/show', ['id' => (int)$m['id']]) : url('movies')) ?>">取消</a>
</div>
</div>
</form>
<!-- 豆瓣自动补充:下拉联想(320ms 防抖 + 中文输入法组字期不请求)+ 一键抓取 -->
<script>
(function () {
var DB_URL = <?= json_encode(url('movies/douban')) ?>;
var titleEl = document.getElementById('title');
var box = document.getElementById('dbSuggest');
var fetchBtn = document.getElementById('dbFetch');
var metaEl = document.getElementById('dbMeta');
var posterKeyEl = document.getElementById('dbPosterKey');
var posterWrap = document.getElementById('dbPosterWrap');
var posterImg = document.getElementById('dbPosterImg');
var infoEl = document.getElementById('info');
if (!titleEl || !box || !fetchBtn || !metaEl) return;
var lastPosterKey = ''; // 本次会话里最近一次抓到的海报键(下次抓取时回传清理)
var timer = null;
var composing = false;
var seq = 0; // 丢弃过期响应
titleEl.addEventListener('compositionstart', function () { composing = true; });
titleEl.addEventListener('compositionend', function () { composing = false; schedule(); });
titleEl.addEventListener('input', function () {
if (composing) return; // 组字期间的拼音串没有意义,也不劫持回车
schedule();
});
document.addEventListener('click', function (e) {
if (!box.hidden && !box.contains(e.target) && e.target !== titleEl) hideBox();
});
document.addEventListener('keydown', function (e) {
if (e.key === 'Escape') hideBox();
});
function schedule() {
clearTimeout(timer);
timer = setTimeout(suggest, 320);
}
function hideBox() { box.hidden = true; box.innerHTML = ''; }
function suggest() {
var q = titleEl.value.trim();
if (q === '') { hideBox(); return; }
var my = ++seq;
getJson(DB_URL + '&action=suggest&q=' + encodeURIComponent(q), function (data, err) {
if (my !== seq) return; // 过期响应丢弃
if (err) return; // 联想失败静默(正片抓取会给出明确报错)
renderItems(data && data.items ? data.items : []);
});
}
function renderItems(items) {
box.innerHTML = '';
if (!items.length) { hideBox(); return; }
items.forEach(function (it) {
var btn = document.createElement('button');
btn.type = 'button';
btn.className = 'db-item';
if (it.thumb) {
var im = document.createElement('img');
im.src = it.thumb; im.alt = ''; im.loading = 'lazy';
btn.appendChild(im);
}
var tx = document.createElement('span');
tx.className = 'db-item-tx';
var b = document.createElement('b');
// 候选文本来自豆瓣 —— 一律 textContent 插入,绝不拼 innerHTML(豆瓣侧内容可注入脚本)
b.textContent = it.title || '(无片名)';
tx.appendChild(b);
var bits = [];
if (it.sub_title && it.sub_title !== it.title) bits.push(it.sub_title);
if (it.year) bits.push(it.year);
if (it.kind) bits.push(it.kind);
if (bits.length) {
var sm = document.createElement('small');
sm.textContent = bits.join(' · ');
tx.appendChild(sm);
}
btn.appendChild(tx);
btn.addEventListener('click', function () { hideBox(); fetchById(it.id); });
box.appendChild(btn);
});
box.hidden = false;
}
function fetchById(id) {
doFetch(DB_URL + '&id=' + encodeURIComponent(id));
}
fetchBtn.addEventListener('click', function () {
var q = titleEl.value.trim();
if (q === '') { titleEl.focus(); return; }
doFetch(DB_URL + '&q=' + encodeURIComponent(q));
});
function doFetch(urlWithQ) {
if (lastPosterKey) urlWithQ += '&old_poster=' + encodeURIComponent(lastPosterKey);
fetchBtn.disabled = true;
var my = ++seq;
getJson(urlWithQ, function (data, err) {
fetchBtn.disabled = false;
if (my !== seq) return;
if (err || !data) { alert(err || '抓取失败,请稍后再试'); return; }
if (data.error) { alert(data.error); return; }
apply(data);
});
}
function apply(data) {
if (data.title) titleEl.value = data.title;
if (data.meta) {
metaEl.value = JSON.stringify(data.meta);
// 剧情简介填进「简介」,但只填空白的 —— 用户已经写了就不覆盖
if (infoEl && data.meta.plot && infoEl.value.trim() === '') infoEl.value = data.meta.plot;
}
if (data.poster_key) {
lastPosterKey = data.poster_key;
posterKeyEl.value = data.poster_key;
if (data.poster) {
posterImg.src = data.poster;
posterWrap.hidden = false;
}
}
}
function getJson(u, cb) {
var xhr = new XMLHttpRequest();
xhr.open('GET', u, true);
xhr.onload = function () {
var data = null, err = '';
try { data = JSON.parse(xhr.responseText); }
catch (e) { err = '返回内容异常'; }
if (xhr.status >= 400) err = (data && data.error) ? data.error : ('请求失败(' + xhr.status + ')');
cb(data, err);
};
xhr.onerror = function () { cb(null, '网络异常'); };
xhr.send();
}
})();
</script>