laoyang
c3d00ad66a
用户 9 条原话要点：
①「观影模块，编辑观影，已经保存的海报和票根、合影，都没带进来。」
②「个人设置页面，"只影响你自己看到的样子"这个提示删除，不要了。我怎么称呼家人，
这个卡片，不要了。我的资料这个卡片，不要了。」
③「旅程模块，编辑行程，点击保存没有反应。」
④「所有上传图片视频和附件的模块，都允许多次拖动添加文件上传，拖动一个进去，
就开始上传，还可以继续拖动，继续上传，最后统一保存即可。」
⑤「添加行程，线路名、承运方，都不要了。车辆，只在出行方式选择自驾时才出现，
其他情况下默认不出现。出发地和到达地，应该在同一行。」
⑥「日程模块，周视图和日视图，应该在视图中间显示一条红线，用来表示当前进行的时间…
用一个不断从上到下的红线，来表示当前时间在视图上的刻度和位置。」
⑦「对于重复的日程，当点击删除的时候，应该提示是删除这一次，还是全部都删除，
还是删除这一次及以后的。」
⑧「日程的提醒，是可以多选的，就是说，一个日程，我可以选择让它 5 分钟提醒，
10 分钟提醒等等。」
⑨「很多按钮的悬停效果非常奇怪，感觉纯粹是换了一个背景色…应该调整所有按钮的悬停效果，
保持统一，但是不要单纯的换一个不协调的背景色。」
🔴 三个真根因（都是"看着不像 bug"的地方）：
1. **③ 点保存没反应 = `<form>` 嵌套**（HTML 非法）：`trips/node_form.php` 的照片缩略图上
套了 `<form action=photo_del>`，而整块在**外层行程表单内部**。浏览器解析到内层
`</form>` 时**把外层表单提前关掉** → 「保存」按钮**掉出表单**（真机实测
`button.form === null`）。源码里完全看不出，**只有真浏览器量 `btn.form` 才现形**；
且**只有这段行程已经有照片时才触发** —— 所以表现为"有时候好、有时候坏"。
→ 按钮留在原位（布局不动），用 HTML5 `form="id"` 关联到**表单外**的独立表单。
2. **⑤ 车辆藏不住（第 17 批就写过、一直没生效）**：`.field` 自己声明 `display:flex`，
作者样式压过浏览器默认的 `[hidden]{display:none}` → `hidden` 形同虚设。
**本项目第 4 次栽同一个坑**（.att-item / .pv / .pp-item 各一次）→ 补 `.field[hidden]`。
3. **④ 拖动即时上传的卡片"看不见"**：模板给 `.stage-list` 加了 `hidden`（没人上传时
不留空边框），JS 建卡片时忘了 `list.hidden = false` → 卡片在 DOM 里但整条清单
`display:none`、尺寸 0×0。**HTTP 层断言全绿**（HTML 里确实有卡片），
**只有真机量尺寸才发现** —— 由新写的真机探针抓到。
本批新增能力：
- **拖动即时上传**（第 4 条）：新增 `upload_stage.php` + `app/StagedUpload.php` +
`templates/_stage_drop.php`。拖进来 → **立刻** POST 到暂存目录 → 回 `stoken` →
放进隐藏字段 `stage[]` → 保存时在 `attach_save_files()` 里**认领**（移文件 + 建附件行）。
`media.php` 加 `?stage=` 预览（拖完立刻看得见缩略图）。
⚠️ 三个必须踩准：**串行队列**（并发会让缩略图顺序乱跳）、**提交守卫**
（还有没传完就 preventDefault，否则"拖了但没保存上"必然发生）、**卡片清单要 un-hide**。
⚠️ 海报/票根走**独立字段名** `stage_poster`/`stage_ticket`（各自单槽位、要按比例重裁）。
⚠️ 落点**就近取**（`input.closest('.field')`）：一个表单里多个上传区不能串到第一个去。
- **观影编辑带出已存图片**（第 1 条）：编辑页显示海报 / 票根 / 合影 + 各自的删除入口；
新增 `movies/media_del`（只删不换也能删，槽位走白名单）；`movies/update` 收编辑页
新选的照片时**合并**而不是替换（否则一编辑就把已有合影冲掉）。
- **行程表单**（第 5 条）：去掉线路名 / 承运方（**库里的值保留**：UPDATE 时不参与，
与 seat_info/gate 同一套）；出发地/到达地包进 `.loc-row` 真同一行；车辆按自驾显隐。
- **当前时间红线**（第 6 条）：位置在服务端算（与 `.tg-block` 同一套"24h = 100%"坐标），
前端每分钟自己挪（对齐到下一分钟整再起定时器），跨午夜 reload；只画在**今天那一列**。
- **重复日程删除三档**（第 7 条）：与「编辑」那三档同名同序（全部 / 这一次及以后 /
只这一次）。「只删这一次」→ `skipOnce`（**绝不删整条系列**）；「这一次及以后」→
老系列截 UNTIL，**必须清掉 COUNT**（两者并存时 COUNT 优先，不清就截不断）。
- **提醒多选**（第 8 条）：同列存逗号串（`5,15,60`）；Schema 把它从 **INT 改 VARCHAR**
（INT 存逗号串会被隐式转换，多档会静默只剩第一档）；ICS 导出吐**多个 VALARM**。
- **悬停统一**（第 9 条）：原来 14 种互不相干的 hover 底色 → 统一成**两套手法**：
有底色 `filter: brightness(.92)` 同色系加深 + 轻抬升；描边白底 `--hov-veil` 中性薄雾
+ 边框微显。放在 CSS **最末**用一条兜底收口（新按钮自动继承），并把十几条旧规则
清成"交给统一段"。`person_picker.js` 同时改为按需加载。
验证（本地全套）：
- e2e **1004/0**（+21 条本批断言）· 升级 149/0 · 桌面几何 428/0 ·
**真机探针 25/0**（连续拖两次 / 红线位置与颜色与几何 / 车辆显隐 / 出发到达同行）。
- **反向验证 5/5**：①删除按钮改回嵌套 form ②卡片清单不 un-hide ③观影编辑不渲染海报
④车辆隐藏失效 ⑤「只删这一次」做成删全部 —— 五种坏法全部被抓住，还原后复绿 1004/0。
过程中还**抓到两条弱断言**（只查 DOM 有无、不查可见性/是否真渲染），已一并加强。
- 部署脚本静态断言段本地空跑 **305 条全过**。
586 lines
28 KiB
PHP
586 lines
28 KiB
PHP
<?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);
|
||
// 刚用「新建影院」弹框加完一家 → 回到这里要**自动选中**它（见 index.php 的 cinemas_save）。
|
||
// 优先级：老输入 > ?cinema=（刚新建的）> 记录里的值。
|
||
$selCinema = (int)old('cinema_id', (int)($_GET['cinema'] ?? 0) ?: ($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>
|
||
|
||
<?php /* 用户 2026-10-04 第 7 条：起止是一个**范围**，应该由日期插件的
|
||
范围选择方式一次选完，而不是并列两个控件（不好看、也多一步操作）。
|
||
服务端仍然收 starts_at_* / ends_at_* 两组字段（契约不变），
|
||
只是升级后由**一个** Semi dateTimeRange 统一填两端（见 app.js）。 */ ?>
|
||
<div class="field full dt-range">
|
||
<label <?= $isEdit ? '' : 'for="starts_at_date"' ?>>开始 / 结束时间（精确到秒）</label>
|
||
<?php $dtName = 'starts_at'; $dtValue = $dtStart; $dtId = 'starts_at_date';
|
||
$dtRange = 'start';
|
||
require __DIR__ . '/../_datetime.php'; ?>
|
||
<?php if (!empty($errors['starts_at'])): ?><span class="err"><?= e($errors['starts_at']) ?></span><?php endif; ?>
|
||
<?php $dtName = 'ends_at'; $dtValue = $dtEnd; $dtId = '';
|
||
$dtRange = 'end';
|
||
require __DIR__ . '/../_datetime.php'; ?>
|
||
<?php if (!empty($errors['ends_at'])): ?><span class="err"><?= e($errors['ends_at']) ?></span><?php endif; ?>
|
||
<span class="tip">散场时间可不填。</span>
|
||
</div>
|
||
|
||
<?php /* 用户 2026-10-04 第 11 批 #4（三件事）：
|
||
① 「选择影院的时候，影院的颜色要出现在下拉列表中，用来显示不同的影院」
|
||
→ 原生 <option> **画不了色块**（浏览器只渲染纯文本），
|
||
所以这里换成自定义下拉：按钮 + 弹出列表，每行左侧一个影院色点。
|
||
真实值仍然提交给隐藏的 <input name="cinema_id">（表单契约不变）。
|
||
② 「管理影院按钮，改为新建影院，点击后弹框，添加新影院，不要跳转到管理影院的页面」
|
||
→ 弹框里放"地方/名称/颜色"三个字段（影院管理页那张表单的核心），
|
||
提交时带 back=movies/new，服务端存完回到本页并自动选中新影院。
|
||
③ 下拉/弹框的样式与全站统一（宣纸底色、品牌色描边）。 */ ?>
|
||
<div class="field full">
|
||
<label for="cinema_id">影院</label>
|
||
<div class="cinema-select-row">
|
||
<div class="cs" id="cinemaPicker" data-open="0">
|
||
<button type="button" class="cs-btn" id="csBtn" aria-haspopup="listbox" aria-expanded="false">
|
||
<span class="cs-dot" id="csDot"<?= $selCinema > 0 ? '' : ' hidden' ?>></span>
|
||
<span class="cs-text" id="csText">不记录影院</span>
|
||
<span class="cs-caret" aria-hidden="true">▾</span>
|
||
</button>
|
||
<div class="cs-menu" id="csMenu" hidden role="listbox">
|
||
<button type="button" class="cs-item" data-id="0" data-color="" role="option">
|
||
<span class="cs-dot is-none" aria-hidden="true"></span><span>不记录影院</span>
|
||
</button>
|
||
<?php foreach ($cinemas as $c): ?>
|
||
<button type="button" class="cs-item" role="option"
|
||
data-id="<?= (int)$c['id'] ?>"
|
||
data-color="<?= e((string)($c['color'] ?: '#888888')) ?>"
|
||
data-text="<?= e(trim(((string)($c['place'] ?? '') !== '' ? $c['place'] . ' · ' : '') . $c['name'])) ?>">
|
||
<span class="cs-dot" style="background: <?= e((string)($c['color'] ?: '#888888')) ?>;"></span>
|
||
<span><?= e(trim(((string)($c['place'] ?? '') !== '' ? $c['place'] . ' · ' : '') . $c['name'])) ?></span>
|
||
</button>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
<input type="hidden" id="cinema_id" name="cinema_id" value="<?= (int)$selCinema ?>">
|
||
</div>
|
||
<button type="button" class="btn btn-ghost btn-sm" id="cinemaNewBtn">新建影院</button>
|
||
</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="6"
|
||
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>
|
||
|
||
<?php
|
||
/**
|
||
* v24 第 20 批 第 1 条：编辑页把**已经存过的**海报 / 票根 / 现场合影**显示出来**。
|
||
*
|
||
* 用户原话：「观影模块，编辑观影，已经保存的海报和票根、合影，都没带进来。」
|
||
* ⚠️ 原来这里只有两句灰字提示（"已有海报，不选新图就保留原图。"）——
|
||
* 也就是说**图上你根本看不见图**：想确认"当时选的是哪张"、或想换掉它，
|
||
* 都得先回到详情页看一眼。用户要的是"带进来"，即**看得见**。
|
||
*
|
||
* 做法：能预览的（图片）给缩略图 + 删除；不可预览的给一个下载入口。
|
||
* ⚠️ 换图仍然靠"选新文件"（服务端换新图时会顺手删掉旧对象，见 index.php movies/update），
|
||
* 所以这里**不需要**"确认换这张"之类的中间态。
|
||
* ⚠️ 每一块的删除按钮都关联到一个**独立的表单** —— 它们必须在**外层表单之外**
|
||
* （form 嵌套会让外层表单提前关闭，"保存"键就失效了，第 20 批 第 3 条刚栽过）。
|
||
* 按钮留在原位、用 HTML5 的 `form="id"` 关联到外面那个表单。
|
||
*/
|
||
$mHasPoster = $isEdit && !empty($m['poster_key']);
|
||
$mHasTicket = $isEdit && !empty($m['ticket_key']);
|
||
$mPhotos = $isEdit ? (array)($m['photos'] ?? []) : [];
|
||
$mDelForms = []; // 收集起来，在表单**外面**统一渲染
|
||
?>
|
||
<div class="form-grid" style="margin-top:4px">
|
||
<?php /* ---- 海报 ---- */ ?>
|
||
<div class="field">
|
||
<label for="poster">海报</label>
|
||
<?php if ($mHasPoster): ?>
|
||
<?php $mDelForms['poster'] = 'movies/media_del'; ?>
|
||
<div class="mv-slot">
|
||
<a href="<?= e(media_url((string)$m['poster_key'])) ?>" data-prev="image"
|
||
data-src="<?= e(media_url((string)$m['poster_key'])) ?>"
|
||
data-dl="<?= e(media_url((string)$m['poster_key'], ['dl' => 1])) ?>"
|
||
data-name="海报">
|
||
<img src="<?= e(media_url((string)$m['poster_key'])) ?>" alt="海报">
|
||
</a>
|
||
<button class="btn btn-ghost btn-sm" type="submit" form="mv-del-poster"
|
||
onclick="return confirm('删掉现在这张海报？')">删除这张</button>
|
||
</div>
|
||
<?php endif; ?>
|
||
<input class="input" id="poster" name="poster" type="file" accept="image/*">
|
||
<span class="tip"><?= $mHasPoster ? '想换就选一张新的（旧的会自动删掉）。' : '还没有海报。' ?></span>
|
||
<?php $sdSlot = 'poster'; require __DIR__ . '/../_stage_drop.php'; ?>
|
||
</div>
|
||
|
||
<?php /* ---- 票根 ---- */ ?>
|
||
<div class="field">
|
||
<label for="ticket">票根</label>
|
||
<?php if ($mHasTicket): ?>
|
||
<div class="mv-slot">
|
||
<a href="<?= e(media_url((string)$m['ticket_key'])) ?>" data-prev="image"
|
||
data-src="<?= e(media_url((string)$m['ticket_key'])) ?>"
|
||
data-dl="<?= e(media_url((string)$m['ticket_key'], ['dl' => 1])) ?>"
|
||
data-name="票根">
|
||
<img src="<?= e(media_url((string)$m['ticket_key'])) ?>" alt="票根">
|
||
</a>
|
||
<button class="btn btn-ghost btn-sm" type="submit" form="mv-del-ticket"
|
||
onclick="return confirm('删掉现在这张票根？')">删除这张</button>
|
||
</div>
|
||
<?php endif; ?>
|
||
<input class="input" id="ticket" name="ticket" type="file" accept="image/*">
|
||
<span class="tip"><?= $mHasTicket ? '想换就选一张新的（旧的会自动删掉）。' : '还没有票根。' ?></span>
|
||
<?php $sdSlot = 'ticket'; require __DIR__ . '/../_stage_drop.php'; ?>
|
||
</div>
|
||
</div>
|
||
|
||
<?php /* ---- 现场合影（用户第 1 条点名的三样之一）----
|
||
新增时可以一次多选；**编辑时在这里逐张看、逐张删**（与新选的图合并保存）。*/ ?>
|
||
<div class="field full">
|
||
<label for="photo">现场合影</label>
|
||
<?php if ($mPhotos): ?>
|
||
<div class="photo-grid">
|
||
<?php foreach ($mPhotos as $mp): $mpId = (int)$mp['id']; ?>
|
||
<figure class="photo-cell">
|
||
<a href="<?= e(media_url((string)$mp['key'])) ?>" data-prev="image"
|
||
data-src="<?= e(media_url((string)$mp['key'])) ?>"
|
||
data-dl="<?= e(media_url((string)$mp['key'], ['dl' => 1])) ?>"
|
||
data-name="现场照片">
|
||
<img src="<?= e(media_url((string)$mp['key'])) ?>" alt="">
|
||
</a>
|
||
<button class="btn btn-ghost btn-sm" type="submit" form="mv-del-photo-<?= $mpId ?>"
|
||
onclick="return confirm('删掉这张照片？')">删除</button>
|
||
</figure>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
<?php endif; ?>
|
||
<?php if ($isEdit): ?>
|
||
<input class="input" id="photo" name="photo[]" type="file" accept="image/*" multiple>
|
||
<span class="tip">可以继续加（可多选）；删掉的在保存后生效。</span>
|
||
<?php $sdSlot = 'photo'; $sdHint = '也可以把文件直接拖到这里 —— 拖一个就开始上传，可以接着再拖，最后点「保存」一起记下。'; require __DIR__ . '/../_stage_drop.php'; ?>
|
||
<?php else: ?>
|
||
<input class="input" id="photo" name="photo[]" type="file" accept="image/*" multiple>
|
||
<span class="tip">可以多选；之后也能在详情页里逐张补传。</span>
|
||
<?php $sdSlot = 'photo'; $sdHint = '也可以把文件直接拖到这里 —— 拖一个就开始上传，可以接着再拖，最后点「记下这场电影」一起记下。'; require __DIR__ . '/../_stage_drop.php'; ?>
|
||
<?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>
|
||
|
||
<?php /* ---- 删除海报 / 票根 / 合影的**独立表单**（必须在外层表单之外）----
|
||
⚠️ 见本文件顶部关于 form 嵌套的说明：按钮用 `form="id"` 指过来，按钮位置不变。
|
||
⚠️ 关联表单要自带全部字段（csrf / 记录 id / 照片 id）—— 提交的是**它自己**的字段。 */ ?>
|
||
<?php if ($mHasPoster): ?>
|
||
<form id="mv-del-poster" method="post" action="<?= e(url('movies/media_del')) ?>" class="form-outside">
|
||
<?= csrf_field() ?>
|
||
<input type="hidden" name="id" value="<?= (int)$m['id'] ?>">
|
||
<input type="hidden" name="slot" value="poster">
|
||
</form>
|
||
<?php endif; ?>
|
||
<?php if ($mHasTicket): ?>
|
||
<form id="mv-del-ticket" method="post" action="<?= e(url('movies/media_del')) ?>" class="form-outside">
|
||
<?= csrf_field() ?>
|
||
<input type="hidden" name="id" value="<?= (int)$m['id'] ?>">
|
||
<input type="hidden" name="slot" value="ticket">
|
||
</form>
|
||
<?php endif; ?>
|
||
<?php foreach ($mPhotos as $mp): ?>
|
||
<form id="mv-del-photo-<?= (int)$mp['id'] ?>" method="post"
|
||
action="<?= e(url('movies/photo_del')) ?>" class="form-outside">
|
||
<?= csrf_field() ?>
|
||
<input type="hidden" name="id" value="<?= (int)$m['id'] ?>">
|
||
<input type="hidden" name="photo_id" value="<?= (int)$mp['id'] ?>">
|
||
<?php /* 从编辑页删的 → 删完回编辑页（见 index.php movies/photo_del 的说明） */ ?>
|
||
<input type="hidden" name="back" value="edit">
|
||
</form>
|
||
<?php endforeach; ?>
|
||
<?php unset($mHasPoster, $mHasTicket, $mPhotos, $mDelForms, $mp, $mpId); ?>
|
||
|
||
<?php /* ---- 新建影院：弹框（不跳转，见上）---- */ ?>
|
||
<div class="cn-modal" id="cinemaNewModal" hidden>
|
||
<div class="cn-mask" data-cn-close></div>
|
||
<div class="cn-panel" role="dialog" aria-modal="true" aria-label="新建影院">
|
||
<div class="cn-head"><b>新建影院</b>
|
||
<button type="button" class="cn-x" data-cn-close aria-label="关闭">✕</button></div>
|
||
<form method="post" action="<?= e(url('movies/cinemas_save')) ?>">
|
||
<?= csrf_field() ?>
|
||
<?php /* back=movies/new 让服务端存完回到**本页**（而不是甩去影院管理页） */ ?>
|
||
<input type="hidden" name="back" value="movies/new">
|
||
<div class="cn-body">
|
||
<div class="field">
|
||
<label>地方（可不填）</label>
|
||
<input class="input" name="place" placeholder="如：青岛" maxlength="100">
|
||
</div>
|
||
<div class="field">
|
||
<label>影院名称 *</label>
|
||
<input class="input" name="name" required placeholder="如：万象城 CGV" maxlength="100">
|
||
</div>
|
||
<div class="field">
|
||
<label>主题颜色</label>
|
||
<div class="color-row">
|
||
<input type="color" name="color" class="color-picker cn-color" value="#A65C30">
|
||
<span class="color-hex cn-hex">#A65C30</span>
|
||
<span class="cn-presets">
|
||
<?php foreach (['#A63030','#A65C30','#A68930','#6BA630','#30A67A','#3078A6','#6B30A6','#A6305C'] as $pc): ?>
|
||
<button type="button" class="preset-color cn-preset" data-color="<?= $pc ?>"
|
||
style="background: <?= $pc ?>;" title="<?= $pc ?>"></button>
|
||
<?php endforeach; ?>
|
||
</span>
|
||
</div>
|
||
<span class="tip">这个颜色会出现在下拉、日历与观影列表上。</span>
|
||
</div>
|
||
</div>
|
||
<div class="cn-foot">
|
||
<button class="btn" type="submit">添加</button>
|
||
<button class="btn btn-ghost" type="button" data-cn-close>取消</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 豆瓣自动补充：下拉联想（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);
|
||
}
|
||
/* 简介：用服务端拼好的 summary（**含导演/主演/年份/类型/片长/国家/评分 + 剧情原文**），
|
||
而不是只塞剧情那一小段。用户 2026-10-03：「从豆瓣获取的信息不够，
|
||
应该把导演、主要演员，上映年份等主要信息，也都放在简介中。」
|
||
⚠️ 仍然**只填空白的**：用户已经写过的内容不能被抓取覆盖。
|
||
⚠️ 而且要把"有东西但没写进简介"这件事说清楚 —— 以前只塞 plot，
|
||
遇到豆瓣没有 plot 的电影就**什么都不填而且没有提示**，用户会以为抓取坏了。
|
||
现在：抓到了但简介非空 → 明确提示；什么都没抓到 → 也明确说一声。 */
|
||
if (infoEl) {
|
||
var summary = (data.summary || '').trim();
|
||
if (summary !== '') {
|
||
if (infoEl.value.trim() === '') {
|
||
infoEl.value = summary;
|
||
} else {
|
||
infoEl.setAttribute('data-db-summary', summary);
|
||
alert('豆瓣信息已抓取。\n\n「简介」里已经有你写的内容，我没有覆盖它。\n'
|
||
+ '如果想用豆瓣的简介（含导演/主演/年份等），请先清空「简介」再点一次「自动获取」。');
|
||
}
|
||
} else if ((data.meta && (data.meta.plot || data.meta.director)) || data.title) {
|
||
alert('豆瓣信息已抓取（片名/海报/元数据），但这部电影豆瓣没有可用的简介文本。');
|
||
}
|
||
}
|
||
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();
|
||
}
|
||
})();
|
||
|
||
/* ==================== 影院自定义下拉 + 新建影院弹框（第 11 批 #4）====================
|
||
① 下拉：原生 <option> 画不了色块，所以自己做一个"按钮 + 弹出列表"。
|
||
⚠️ 值仍然写进隐藏的 <input name="cinema_id">，服务端与既有测试都不用改。
|
||
② 新建影院：弹框里提交到 movies/cinemas_save（带 back=movies/new），
|
||
存完服务端会跳回本页并把新影院 id 放在 ?cinema= 上 → 模板已自动选中它。 */
|
||
(function () {
|
||
var picker = document.getElementById('cinemaPicker');
|
||
if (!picker) { return; }
|
||
var btn = document.getElementById('csBtn');
|
||
var menu = document.getElementById('csMenu');
|
||
var dot = document.getElementById('csDot');
|
||
var text = document.getElementById('csText');
|
||
var input = document.getElementById('cinema_id');
|
||
|
||
function close() { menu.hidden = true; btn.setAttribute('aria-expanded', 'false'); }
|
||
function openMenu() { menu.hidden = false; btn.setAttribute('aria-expanded', 'true'); }
|
||
|
||
function apply(id, color, label) {
|
||
input.value = String(id);
|
||
text.textContent = label || '不记录影院';
|
||
if (color) {
|
||
dot.hidden = false;
|
||
dot.style.background = color;
|
||
dot.classList.remove('is-none');
|
||
} else {
|
||
dot.hidden = true;
|
||
}
|
||
}
|
||
|
||
// 初始状态：按当前值把按钮上的色点/文字同步过来
|
||
(function init() {
|
||
var cur = String(input.value || '0');
|
||
var items = menu.querySelectorAll('.cs-item');
|
||
for (var i = 0; i < items.length; i++) {
|
||
if (items[i].getAttribute('data-id') === cur) {
|
||
var lbl = items[i].querySelector('span:last-child');
|
||
apply(cur, items[i].getAttribute('data-color'), lbl ? lbl.textContent : '');
|
||
break;
|
||
}
|
||
}
|
||
})();
|
||
|
||
btn.addEventListener('click', function (e) {
|
||
e.stopPropagation();
|
||
if (menu.hidden) { openMenu(); } else { close(); }
|
||
});
|
||
|
||
menu.addEventListener('click', function (e) {
|
||
var it = e.target.closest ? e.target.closest('.cs-item') : null;
|
||
if (!it) { return; }
|
||
e.stopPropagation();
|
||
var lbl2 = it.querySelector('span:last-child');
|
||
apply(it.getAttribute('data-id'), it.getAttribute('data-color'), lbl2 ? lbl2.textContent : '');
|
||
close();
|
||
});
|
||
|
||
// 点外面关（冒泡阶段，只关下拉本身）
|
||
document.addEventListener('click', function () { close(); });
|
||
|
||
// ---- 新建影院弹框 ----
|
||
var modal = document.getElementById('cinemaNewModal');
|
||
var nbtn = document.getElementById('cinemaNewBtn');
|
||
if (modal && nbtn) {
|
||
nbtn.addEventListener('click', function () {
|
||
modal.hidden = false;
|
||
var f = modal.querySelector('input[name="name"]');
|
||
if (f) { f.focus(); }
|
||
});
|
||
modal.addEventListener('click', function (e) {
|
||
if (e.target.closest && e.target.closest('[data-cn-close]')) { modal.hidden = true; }
|
||
});
|
||
document.addEventListener('keydown', function (e) {
|
||
if (e.key === 'Escape') { modal.hidden = true; }
|
||
});
|
||
// 颜色选择器与预设色（复刻影院管理页那套，只是缩在弹框里）
|
||
var cp = modal.querySelector('.cn-color');
|
||
var hx = modal.querySelector('.cn-hex');
|
||
if (cp && hx) {
|
||
cp.addEventListener('input', function () { hx.textContent = cp.value; });
|
||
}
|
||
modal.addEventListener('click', function (e) {
|
||
var pv = e.target.closest ? e.target.closest('.cn-preset') : null;
|
||
if (!pv || !cp) { return; }
|
||
cp.value = pv.getAttribute('data-color');
|
||
if (hx) { hx.textContent = cp.value; }
|
||
});
|
||
}
|
||
})();
|
||
</script>
|