用户 8 条原话要点:
①「名册页面,删除一个联系人后,能否不刷新页面,删除成功后,直接把这个人,
从当前页面的 dom 中删除,页面保持不动。」
②「观影模块,海报和票根以及照片都带进来了,但是没有缩放,把页面撑破了,
应该缩放成缩略图。」
③「个人设置页面,天气设置那里,把:只影响你自己首页上的那一格 / 填个城市名就行
(如「青岛」)… 这些提示,都删除。把城市单独放一行,精度维度放在一行。」
④「旅程模块,实际行程编辑后,点击保存,竟然又变成计划行程了,这个不合理,
实际行程永远是实际行程,不会再变回计划行程了。」
⑤「旅程模块,旅程列表,行程列表,都是按照行程的开始时间排序的,最新的在最上面,
而不是按照编辑修改时间。」
⑥「旅程的详情页面,右上角的按钮,设置在最右侧,和其他模块保持统一。」
⑦「所有上传图片等附件的地方,都不再放按钮,而是放一个框,点击这个框实现点击上传
按钮的功能,拖动图片进这个框里,实现拖动多个上传功能。框里面写一句话:
点击或拖动进行上传,其他的功能和现在保持一致。」
⑧「日历中新建日程,无论是点击按钮还是点击日历中间,都是采用弹框的形式进行添加,
这样不影响当前日历的显示,添加完成后,动态修改当前视图,不要刷新。添加日历日程,
开始时间和结束时间那里,用我们统一的时间范围选择器重做,现在功能无法使用。
选择日历本,带上颜色。」
🔴 五个真根因(全都不像 bug):
① 🔴 **④「实际行程变回计划」= 表单字段同名合并**(本批最要紧的一条)
暂存上传的令牌字段原叫 `stage[]`,与行程表单里那个隐藏的 `stage`(plan/actual)
**同名**。PHP 解析表单时同名会**合并进同一个键**:
`stage=actual` + `stage[]=tok` → `$_POST['stage'] = ['actual','tok']`
(`[]` 只是"往同一个键追加"的记号,**不构成另一个键名**。)
于是路由里 `(string)($_POST['stage'] ?? 'plan')` 得到 `"Array"` →
`in_array('Array', ['plan','actual'])` 为假 → **静默回落成 'plan'**。
⚠️ 只有"拖过图片的行程"会犯(没拖就没有 `stage[]`)→ 症状是"时好时坏"。
修法:令牌字段改名成 `stage_token[]`(改的是**字段名本身**,不是"是数组就取第一个"
绕过去 —— 同名合并是 PHP 的表单语义,绕过去只会把坑留给下一次加字段)。
**另加一道语义保险**:编辑路径**一律沿用库里那条自己的 stage**,不读表单 ——
编辑表单里根本没有改阶段的控件(改阶段走详情页那几个显式动作)。
这样即便将来又冒出某个字段名冲突,也不可能把「实际」悄悄变回「计划」。
② 🔴 **⑧「时间范围选择器无法使用」= 三道门叠在一起**
① `_event_fields.php` 的**结束端默认带 `hidden`**(要点「+ 添加结束时间」才出现);
② `app.js` 的 `upgradeRange()` 有「**两端都得可见**才升级」的判断 → 永远不成立
(实测 `data-semi-range-done` 恒为 `null`);
③ CSS `html.js .dt-range:not(.is-semi-range) .dt-input { visibility: hidden }` →
未升级时原生控件**也是不可见的** ⇒ 屏幕上一片空白、点哪儿都没反应。
修法:两端**始终可见**("没有结束"由清空后半段表达,不再靠开关);
并把旧的「+ 添加结束时间 / 去掉结束时间」开关整套删掉。
⚠️ 顺带挖出:`upgradeRange()` 里 `group.insertBefore(host, a)` 在"两端各自被
`.field` 包着"时 `a` 不是 `group` 的子节点 → 直接抛
`Failed to execute 'insertBefore' on 'Node'`。这个异常**以前从没触发过**
(被 ② 的提前 return 挡住了)—— 一旦放出来就炸。修成插在"端点最外层包装"之前。
⚠️ 观察器加了 `attributes: true, attributeFilter: ['hidden']`(并把 childList
分支的 `return` 去掉):弹框/折叠面板/tab 里"稍后才露出来"的日期控件从此都能自动升级。
③ 🔴 **⑧「新建日程默认建出观影记录」= 产品缺口,不只是显示问题**
`Calendar::DEFAULT_KINDS` 原来只有 6 本**派生**本(观影/旅行/农历/节假日/传统节日/
节气),**一本可写的普通本都没有**。于是"放在哪本"里全是派生本、默认选中排最前的
**观影** → 用户直接打字点「加上」,建出来的是一条**观影记录**
(日历里看着是多了条日程,观影列表里莫名多一条)。这是"建错东西",事后极难发现。
→ ① 默认本补成「我的日程」(kind='custom'),模板里默认选中也改成**优先 custom 本**;
② 选择器里把**纯派生只读本**禁用并标「(自动生成)」
(直接不列会让人以为本子丢了;列为可选又会白选一次再吃错误)。
⚠️ 顺带发现 `Calendar::READONLY_KINDS` 把 `movie`/`trip` 也算进去了,而
`event_add` 里**紧跟着**就有两段专门处理它们的分支(「已加进观影」/「已加进旅程」)
—— 那两段**永远走不到**(校验先一步把请求打回去了)。判据要按**能不能写**分,
不是按"是不是派生"。
④ 🔴 **②「观影编辑页图片撑破」= `.mv-slot` 这个类在样式表里根本不存在**
第 21 批加模板时只写了结构没写样式 → `<img>` 按**原始像素**渲染:600×900 的海报
在 236px 宽的格子里撑出 942px 高,还把整页横向顶破(实测 docW 1297 > vw 1280)。
→ 补 `.mv-slot` 规格:固定 108×162 缩略图 + `object-fit: cover`。
⚠️ **高度必须写死** —— 不写死就又会由原图比例决定,等于没修。
⑤ **⑤行程列表排序 = `category, position` 主导**
`position` 默认同一个数(旧迁移给的多是 0/100),于是顺序被 position 挤乱。
实测线上 #222 渲染成「返回青岛(10-5) → 出发去菏泽(9-30) → 去姥姥家(10-2)」。
→ 改成 `ORDER BY (starts_at IS NULL), starts_at, id`。
⚠️ 方向是**正序**(早的在前,已跟用户确认);旅程列表仍是 DESC(最新在最上)。
两者方向不同是**刻意的**:一个是"挑哪趟旅行",一个是"读这趟旅行的行程"。
⚠️ 详情页**按阶段分三组**渲染(计划/实际/未成行),排序只需在**组内**有序。
本批新增能力:
- **统一上传框**(⑦):`templates/_stage_drop.php` 现在**同时**负责
「sr-only 的真文件框 + 看得见的上传框 + 暂存清单」,调用方只 require 一行。
框是 `role="button" tabindex="0"`,JS 转发 `input.click()`(键盘 Enter/Space 也通),
拖文件进框走既有的暂存上传(拖一个立刻传、可续拖、失败标红、未传完拦住保存)。
⚠️ 框用 `<div>` 不是 `<button>`:里面要放暂存清单(含「撤掉这张」按钮),
按钮里嵌按钮是非法 HTML(第 21 批刚在 `<form>` 嵌套上栽过同一个跟头)。
⚠️ 文件框用 `.sr-only` 不是 `display:none`:后者不可聚焦,带 `required` 时
Chrome 会报 "An invalid form control is not focusable" —— 点了什么都不发生。
落了 11 处:行程照片 / 观影海报·票根·合影 / 资源 / 任务 / 日程附件 / 书籍 /
联系人导入 / ics 导入 / 观影补传 / 资源补传。
⚠️ 清单与提示行移到框**外面**(放框内会变成"一个大框套五张图"),
所以 app.js 改从 `.upfield` 容器里找它们。
- **无刷新删除(①)与无刷新新建日程(⑧)**:路由按 `X-Requested-With`
(或 `Accept: application/json`)区分调用者 —— 带它回 JSON、不带照旧 302
(无 JS 的兜底**不变**,两边的反向都写了断言)。
· 名册删除:成功 → 摘卡片 + 就地改「共 N 人」与分组人数 + 派发 `input` 让
filter.js 自己重算(**不抄它的判据**);失败 → 把原因说出来(不刷页);
拿不到 JSON → **退回原生提交**(绝不静默失败)。
· 日历新建:JSON 带齐前端插入当前视图要用的字段(时间/颜色/链接/是否全天/cal)。
月视图**按时间插入**(不能 append —— 服务端只渲染前 3 条、按时间序取,
append 会让"新加的早间日程"掉进「+N 条」里看不见,刷新后又跑到第一位);
周/日视图按"24h = 100%"算 top/height 插块。
· 观影 / 旅行本是**可写派生本**:AJAX 时不再跳详情页(跳走就离开了日历),
改在提示行给一个「去看详情 →」链接。
- **⑧日历本带颜色**:原生 `<option>` 画不出色块(浏览器不允许在 option 里放元素),
所以做成「色块 + 下拉」并排,色块跟着当前选中的本子变色。
- **③天气卡片**:三句提示全删;城市单独一行、纬度/经度同一行(`.loc-row`)。
删的只是说明文字,三个输入框 + 保存 + 状态回显都保留。
- **⑥设置按钮贴最右**:原来顺序是「… → 设置 ☰ → 删除 🗑」,设置被删除键挤到**倒数第二**;
改成删除在前、设置恒为最后一个(与观影/日程/任务/资源同一个手势)。
验证(本地全套):
- e2e **1059/0**(本批新增约 40 条断言)· 结构升级 149/0 · 桌面几何 428/0
- **真机探针 75/0**(`_fb_b21_ui.py`):AJAX 删除真的没导航 / 卡片真被摘掉 /
滚动位置保持;缩略图几何(108×162,不再溢出);上传框(框在、原生框不可见、
点框真打开文件选择框、连拖两张都上去且清单可见);日历弹框(打开时网格一动不动、
范围控件真的挂上且可见、能弹面板、色块跟着换、无刷新提交后当前视图里立刻出现、
周视图也能插时间块、全程无 JS 报错)。
- **反向验证 12 条**(`_fb_b21_falsify.py`):逐条把修复改回旧行为看断言是否变红 ——
令牌字段改回 stage[] / 编辑读表单 stage / 排序改回 position / 设置按钮挪走 /
框不转发点击 / 文件框不再 sr-only / 删缩略图规格 / 删除不回 JSON /
结束端改回 hidden / 日历本默认改回第一个 / 天气提示加回 / 弹框改回内联。
- 部署脚本静态断言段本地空跑 **307/0**。
564 lines
28 KiB
PHP
564 lines
28 KiB
PHP
<?php
|
||
/**
|
||
* 观影详情页(v9,展示方式照搬 MovieLog 的 detail.php)。
|
||
*
|
||
* 五大块:英雄区(左海报右信息)→ 一起看的人 → 电影院信息 → 影像记录(灯箱)→ 评价与评论。
|
||
* 海报/票根/照片一律走 media_url() 代理;感受标签只存 key,emoji 与文案查 CATALOG。
|
||
* 访客(只读)看不到编辑/删除/传照片/评价表单 —— 与名册同一口径。
|
||
* 评价人是「登录账号背后的人」,与同行观影人无关(MovieLog 同款规则)。
|
||
*/
|
||
$canWrite = \App\Auth::canWrite();
|
||
$hasPoster = !empty($m['poster_key']);
|
||
$hasTicket = !empty($m['ticket_key']);
|
||
// 豆瓣元数据(v10):整体 JSON 存 douban_meta,随用随解;解不开就当没有
|
||
$doubanMeta = [];
|
||
if (!empty($m['douban_meta'])) {
|
||
$decoded = json_decode((string)$m['douban_meta'], true);
|
||
if (is_array($decoded)) {
|
||
$doubanMeta = $decoded;
|
||
}
|
||
}
|
||
$watchTxt = \App\Movie::formatWatch($m['starts_at'], $m['ends_at'] ?? null);
|
||
$fmtNum = static function ($v): string {
|
||
if ($v === null) {
|
||
return '';
|
||
}
|
||
return rtrim(rtrim(number_format((float)$v, 1, '.', ''), '0'), '.');
|
||
};
|
||
|
||
/** 头像或首字占位(persons.avatar 是存储相对键) */
|
||
$avatarHtml = static function (?string $avatar, string $name, string $cls = '') {
|
||
if ($avatar !== null && $avatar !== '') {
|
||
return '<img class="rv-avatar ' . e($cls) . '" src="' . e(media_url($avatar)) . '" alt="">';
|
||
}
|
||
return '<span class="rv-avatar rv-avatar-text ' . e($cls) . '">' . e(mb_substr($name, 0, 1, 'UTF-8')) . '</span>';
|
||
};
|
||
|
||
/** 可勾选的感受 chips(原生 checkbox,外观在 .feel-inner 上) */
|
||
$feelPick = static function (array $checked = []) use ($feelCat) {
|
||
ob_start(); ?>
|
||
<span class="feel-chips">
|
||
<?php foreach ($feelCat as $k => $f): ?>
|
||
<label class="feel-chip feel-pick" title="<?= e($f['label']) ?>">
|
||
<input type="checkbox" name="feelings[]" value="<?= e($k) ?>"<?= in_array($k, $checked, true) ? ' checked' : '' ?>>
|
||
<span class="feel-inner"><span class="feel-emoji"><?= $f['emoji'] ?></span><span class="feel-label"><?= e($f['label']) ?></span></span>
|
||
</label>
|
||
<?php endforeach; ?>
|
||
</span>
|
||
<?php return ob_get_clean();
|
||
};
|
||
|
||
/** 只读的感受标签 */
|
||
$feelTags = static function (array $keys) use ($feelCat) {
|
||
if (!$keys) {
|
||
return '';
|
||
}
|
||
ob_start(); ?>
|
||
<span class="rv-feelings">
|
||
<?php foreach ($keys as $k): ?>
|
||
<?php if (!isset($feelCat[$k])) { continue; } $f = $feelCat[$k]; ?>
|
||
<span class="feel-chip is-static" title="观后感受:<?= e($f['label']) ?>">
|
||
<span class="feel-emoji"><?= $f['emoji'] ?></span><span class="feel-label"><?= e($f['label']) ?></span>
|
||
</span>
|
||
<?php endforeach; ?>
|
||
</span>
|
||
<?php return ob_get_clean();
|
||
};
|
||
|
||
/** 静态 10 星展示(v10):左 n 颗实心金黄,其余空心灰;n 越界按 0/10 兜底 */
|
||
$starsHtml = static function (int $n): string {
|
||
$n = max(0, min(10, $n));
|
||
$out = '<span class="stars-disp" aria-hidden="true">';
|
||
for ($i = 1; $i <= 10; $i++) {
|
||
$out .= '<span class="' . ($i <= $n ? 'd-on' : 'd-off') . '">' . ($i <= $n ? '★' : '☆') . '</span>';
|
||
}
|
||
return $out . '</span>';
|
||
};
|
||
|
||
/** 我的评价表单(打分 + 正文 + 感受),details 按需展开;写评价与修改共用这一份 */
|
||
$rvForm = static function (string $summary, bool $open) use ($m, $myReview, $feelPick, $rvError) {
|
||
ob_start(); ?>
|
||
<details class="rv-composer"<?= $open ? ' open' : '' ?>>
|
||
<summary class="rv-open-btn"><?= e($summary) ?></summary>
|
||
<form method="post" action="<?= e(url('movies/review_save')) ?>" class="rv-form" id="reviewForm">
|
||
<?= csrf_field() ?>
|
||
<input type="hidden" name="id" value="<?= (int)$m['id'] ?>">
|
||
<div class="rv-rating-row">
|
||
<span class="rv-rating-label">我的评分</span>
|
||
<?php /* v10:10 星制。DOM 倒序(10..1)+ CSS row-reverse,视觉 1..10 从左到右;
|
||
点亮由 JS 加 .lit(含悬停预览), radios 保持 name="rating" 原语义。 */ ?>
|
||
<span class="rv-scale rv-stars no-js" role="radiogroup" aria-label="评分,1 分到 10 分">
|
||
<?php $myRating = (int)($myReview['rating'] ?? 0); ?>
|
||
<?php for ($i = 10; $i >= 1; $i--): ?>
|
||
<label class="rv-star" data-v="<?= $i ?>" title="<?= $i ?> 分 · <?= e(\App\MovieReview::ratingWord($i)) ?>">
|
||
<input type="radio" name="rating" value="<?= $i ?>"<?= $myRating === $i ? ' checked' : '' ?>>
|
||
<span class="st-glyph st-off" aria-hidden="true">☆</span><span class="st-glyph st-on" aria-hidden="true">★</span>
|
||
</label>
|
||
<?php endfor; ?>
|
||
</span>
|
||
<span class="rv-word<?= $myRating > 0 ? ' is-set' : '' ?>" id="rvWord">
|
||
<?= $myRating > 0 ? $myRating . ' 分 · ' . e(\App\MovieReview::ratingWord($myRating)) : '未评分' ?>
|
||
</span>
|
||
</div>
|
||
<textarea name="content" class="rv-textarea" maxlength="<?= (int)\App\MovieReview::CONTENT_MAX ?>" required
|
||
placeholder="这部电影怎么样?剧情、表演、画面、音效……随便聊聊"><?= e((string)($myReview['content'] ?? '')) ?></textarea>
|
||
<div class="rv-feeling-pick">
|
||
<span class="rv-pick-label">我看完的感受(可多选)</span>
|
||
<?= $feelPick((array)($myReview['feelings'] ?? [])) ?>
|
||
</div>
|
||
<div class="rv-form-foot">
|
||
<span class="rv-hint">每个账号对每部电影只有一条评价,再次提交即为修改。</span>
|
||
<button type="submit" class="btn btn-sm"><?= $myReview ? '保存修改' : '发表评价' ?></button>
|
||
</div>
|
||
</form>
|
||
</details>
|
||
<?php return ob_get_clean();
|
||
};
|
||
|
||
/** 评论 / 回复表单(parent_id=0 是对评价发评论;>0 是回复某条评论) */
|
||
$commentBox = static function (int $reviewId, int $parentId, string $summary) use ($m, $feelPick) {
|
||
ob_start(); ?>
|
||
<details class="rv-composer rv-inline">
|
||
<summary class="rv-act-btn"><?= e($summary) ?></summary>
|
||
<form method="post" action="<?= e(url('movies/comment_add')) ?>" class="rv-form rv-form-inline">
|
||
<?= csrf_field() ?>
|
||
<input type="hidden" name="id" value="<?= (int)$m['id'] ?>">
|
||
<input type="hidden" name="review_id" value="<?= $reviewId ?>">
|
||
<input type="hidden" name="parent_id" value="<?= $parentId ?>">
|
||
<textarea name="content" class="rv-textarea rv-textarea-sm" maxlength="<?= (int)\App\MovieReview::COMMENT_MAX ?>" required
|
||
placeholder="<?= $parentId > 0 ? '回复这一条…' : '说说你的看法…' ?>"></textarea>
|
||
<div class="rv-feeling-pick">
|
||
<span class="rv-pick-label">观后感受(可多选)</span>
|
||
<?= $feelPick() ?>
|
||
</div>
|
||
<div class="rv-form-foot">
|
||
<button type="submit" class="btn btn-ghost btn-sm"><?= $parentId > 0 ? '发表回复' : '发表评论' ?></button>
|
||
</div>
|
||
</form>
|
||
</details>
|
||
<?php return ob_get_clean();
|
||
};
|
||
?>
|
||
<div class="page-head">
|
||
<span class="sub">观影记录</span>
|
||
<div class="actions">
|
||
<?php if ($canWrite): ?>
|
||
<a class="btn btn-ghost" href="<?= e(url('movies/edit', ['id' => (int)$m['id']])) ?>">编辑</a>
|
||
<form method="post" action="<?= e(url('movies/destroy')) ?>"
|
||
onsubmit="return confirm('删除这条观影记录?海报、票根、照片也会一并删除,不可恢复。')">
|
||
<?= csrf_field() ?>
|
||
<input type="hidden" name="id" value="<?= (int)$m['id'] ?>">
|
||
<button type="submit" class="btn btn-danger">删除</button>
|
||
</form>
|
||
<?php endif; ?>
|
||
<?php /* 设置入口放在 actions 最后 → 永远在最右侧(用户 2026-10-01 要求) */ ?>
|
||
<a class="btn btn-ghost" href="<?= e(url('movies')) ?>">返回观影</a>
|
||
<?php $setCurrent = 'show'; $setCanWrite = $canWrite; require __DIR__ . '/_settings_menu.php'; ?>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 主信息:英雄区 -->
|
||
<div class="detail-hero">
|
||
<div class="detail-poster<?= $hasPoster ? ' lb-openable' : '' ?>"
|
||
<?php if ($hasPoster): ?>data-lb-index="0" role="button" tabindex="0" aria-label="放大查看海报" title="点击查看大图"<?php endif; ?>>
|
||
<?php if ($hasPoster): ?>
|
||
<img src="<?= e(media_url($m['poster_key'])) ?>" alt="海报">
|
||
<?php else: ?>
|
||
<span class="placeholder-poster">
|
||
<span class="ph-icon" aria-hidden="true">影</span>
|
||
<span class="placeholder-title"><?= e($m['title']) ?></span>
|
||
</span>
|
||
<?php endif; ?>
|
||
</div>
|
||
<div class="detail-info">
|
||
<h1><?= e($m['title']) ?></h1>
|
||
<div class="meta-row">
|
||
<span>📅 <?= e($watchTxt) ?></span>
|
||
<?php if (!empty($m['cinema_name'])): ?>
|
||
<span style="color: <?= e((string)($m['cinema_color'] ?: '#888888')) ?>;">🏛️ <?= e($m['cinema_name']) ?></span>
|
||
<?php endif; ?>
|
||
<span>👥 观影人 <?= count($m['attendees']) ?> 人</span>
|
||
</div>
|
||
<?php if ($doubanMeta): ?>
|
||
<div class="db-meta">
|
||
<?php if (!empty($doubanMeta['rating'])): ?>
|
||
<span class="db-rating" title="豆瓣评分">豆瓣 <b><?= e((string)$doubanMeta['rating']) ?></b></span>
|
||
<?php endif; ?>
|
||
<?php foreach ([
|
||
'年份' => (string)($doubanMeta['year'] ?? ''),
|
||
'类型' => (string)($doubanMeta['genre'] ?? ''),
|
||
'片长' => (string)($doubanMeta['runtime'] ?? ''),
|
||
'导演' => (string)($doubanMeta['director'] ?? ''),
|
||
'主演' => (string)($doubanMeta['actors'] ?? ''),
|
||
'制片国家/地区' => (string)($doubanMeta['country'] ?? ''),
|
||
'又名' => (string)($doubanMeta['alias'] ?? ''),
|
||
] as $dbLbl => $dbVal): ?>
|
||
<?php if ($dbVal !== ''): ?>
|
||
<span class="db-line"><span class="db-label"><?= $dbLbl ?></span><?= e($dbVal) ?></span>
|
||
<?php endif; ?>
|
||
<?php endforeach; ?>
|
||
<?php if (!empty($doubanMeta['douban_url'])): ?>
|
||
<a class="db-link" href="<?= e((string)$doubanMeta['douban_url']) ?>"
|
||
target="_blank" rel="noopener noreferrer">在豆瓣查看 ↗</a>
|
||
<?php endif; ?>
|
||
</div>
|
||
<?php endif; ?>
|
||
<?php if (!empty($m['info'])): ?>
|
||
<div class="info-text"><?= nl2br(e($m['info'])) ?></div>
|
||
<?php endif; ?>
|
||
<?php if (!empty($m['note'])): ?>
|
||
<div class="remark-text">📝 <?= nl2br(e($m['note'])) ?></div>
|
||
<?php endif; ?>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 一起看的人 -->
|
||
<div class="detail-section">
|
||
<h3>一起看的人 <span class="badge"><?= count($m['attendees']) ?> 人</span></h3>
|
||
<?php if ($m['attendees']): ?>
|
||
<div class="viewers-list">
|
||
<?php foreach ($m['attendees'] as $a): ?>
|
||
<?= person_chip($a, url('people/show', ['id' => (int)$a['id']])) ?>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
<?php else: ?>
|
||
<p class="empty-hint">一个人看的</p>
|
||
<?php endif; ?>
|
||
</div>
|
||
|
||
<!-- 电影院信息 -->
|
||
<div class="detail-section">
|
||
<h3>电影院信息</h3>
|
||
<?php if (!empty($m['cinema_name'])): ?>
|
||
<div class="cinema-info">
|
||
<span class="label">所在地方</span>
|
||
<span class="value"><?= e((string)($m['cinema_place'] ?? '-')) ?></span>
|
||
<span class="label">影院名称</span>
|
||
<span class="value" style="color: <?= e((string)($m['cinema_color'] ?: '#888888')) ?>;"><?= e($m['cinema_name']) ?></span>
|
||
<span class="label">详细地址</span>
|
||
<span class="value"><?= e((string)($m['cinema_address'] ?? '-')) ?></span>
|
||
</div>
|
||
<?php else: ?>
|
||
<p class="empty-hint">未记录电影院信息</p>
|
||
<?php endif; ?>
|
||
</div>
|
||
|
||
<!-- 影像记录(票根 + 现场照片,点开灯箱) -->
|
||
<?php if ($hasTicket || $m['photos']): ?>
|
||
<div class="detail-section">
|
||
<h3>影像记录 <span class="badge"><?= count($m['photos']) + ($hasTicket ? 1 : 0) ?> 张</span></h3>
|
||
<div class="gallery-grid">
|
||
<?php if ($hasTicket): ?>
|
||
<div class="gallery-item lb-openable" data-lb-index="1" role="button" tabindex="0" aria-label="放大查看票根" title="点击查看大图">
|
||
<img src="<?= e(media_url($m['ticket_key'])) ?>" alt="票根" loading="lazy">
|
||
<span class="label-badge">票根</span>
|
||
</div>
|
||
<?php endif; ?>
|
||
<?php foreach ($m['photos'] as $i => $ph): ?>
|
||
<div class="gallery-item lb-openable" data-lb-index="<?= $i + 2 ?>" role="button" tabindex="0" aria-label="放大查看照片" title="点击查看大图">
|
||
<img src="<?= e(media_url((string)$ph['key'])) ?>" alt="" loading="lazy">
|
||
<span class="label-badge">照片</span>
|
||
<?php if ($canWrite): ?>
|
||
<form method="post" action="<?= e(url('movies/photo_del')) ?>"
|
||
onsubmit="return confirm('删除这张照片?')">
|
||
<?= csrf_field() ?>
|
||
<input type="hidden" name="id" value="<?= (int)$m['id'] ?>">
|
||
<input type="hidden" name="photo_id" value="<?= (int)$ph['id'] ?>">
|
||
<button type="submit" class="photo-del" title="删除这张照片">×</button>
|
||
</form>
|
||
<?php endif; ?>
|
||
</div>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
</div>
|
||
<?php endif; ?>
|
||
<?php if ($canWrite): ?>
|
||
<div class="detail-section">
|
||
<form method="post" enctype="multipart/form-data" action="<?= e(url('movies/photo_add')) ?>" class="photo-add">
|
||
<?= csrf_field() ?>
|
||
<input type="hidden" name="id" value="<?= (int)$m['id'] ?>">
|
||
<label>补一张现场照片</label>
|
||
<?php /* v24 第 21 批 第 7 条:统一成「点击或拖动进行上传」的框。
|
||
⚠️ 文件框 id 保持 `photo`(原来就叫这个),改名会让既有断言假红。 */
|
||
$sdName = 'photo'; $sdId = 'photo'; $sdAccept = 'image/*';
|
||
$sdMultiple = false; $sdRequired = true;
|
||
require __DIR__ . '/../_stage_drop.php'; ?>
|
||
<div class="btn-row" style="margin-top:12px">
|
||
<button type="submit" class="btn btn-ghost btn-sm">上传</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<?php endif; ?>
|
||
|
||
<!-- 评价与评论 -->
|
||
<div class="detail-section" id="reviews">
|
||
<h3>评价与评论
|
||
<span class="badge">
|
||
<?php if ($rvStats['count'] > 0): ?>
|
||
<?= (int)$rvStats['count'] ?> 条评价 · 均分 <?= e($fmtNum($rvStats['avg'])) ?>
|
||
<?php else: ?>
|
||
还没有评价
|
||
<?php endif; ?>
|
||
</span>
|
||
</h3>
|
||
|
||
<?php if ($canWrite && !$myReview): ?>
|
||
<?= $rvForm('写评价', $rvError !== '') ?>
|
||
<?php endif; ?>
|
||
|
||
<?php if (!$reviews): ?>
|
||
<p class="empty-hint">还没有评价,等你来评一个。</p>
|
||
<?php else: ?>
|
||
<div class="rv-list">
|
||
<?php foreach ($reviews as $rv): ?>
|
||
<?php
|
||
$rvMine = ((int)$rv['person_id'] === $meId);
|
||
$rvName = (string)($rv['person_name'] ?? '已注销');
|
||
$rvRate = (int)$rv['rating'];
|
||
?>
|
||
<div class="rv-item">
|
||
<div class="rv-head">
|
||
<?= $avatarHtml($rv['person_avatar'] ?? null, $rvName) ?>
|
||
<span class="rv-who">
|
||
<?php /* v11:这里原本还有个写着「我」的徽标(类名与这个区块的首行同名)——
|
||
.rv-who 是 flex column,徽标被 align-items:stretch 拉成整行宽,
|
||
在星星旁边显出一条丑长的品牌色色带(用户反馈「特别长的条」),已删。
|
||
「是不是我」由删除按钮的存在表达,不需要徽标。 */ ?>
|
||
<span class="rv-name"><?= e($rvName) ?></span>
|
||
<span class="rv-time"><?= e(substr((string)$rv['created_at'], 0, 16)) ?></span>
|
||
</span>
|
||
<span class="rv-score" title="<?= e(\App\MovieReview::ratingWord($rvRate)) ?>"><?= $starsHtml($rvRate) ?><span class="rv-score-max"><?= $rvRate ?>/10</span></span>
|
||
<?php if ($rvMine && $canWrite): ?>
|
||
<form method="post" action="<?= e(url('movies/review_del')) ?>" class="rv-del"
|
||
onsubmit="return confirm('删除我的这条评价?下面的评论也会一起删除,不可恢复。')">
|
||
<?= csrf_field() ?>
|
||
<input type="hidden" name="id" value="<?= (int)$m['id'] ?>">
|
||
<input type="hidden" name="review_id" value="<?= (int)$rv['id'] ?>">
|
||
<button type="submit" class="rv-del-btn" title="删除我的评价">×</button>
|
||
</form>
|
||
<?php endif; ?>
|
||
</div>
|
||
<div class="rv-content"><?= nl2br(e($rv['content'])) ?></div>
|
||
<?= $feelTags($rv['feelings']) ?>
|
||
<?php if (!empty($rv['updated_at']) && $rv['updated_at'] !== $rv['created_at']): ?>
|
||
<div class="rv-updated">已编辑 <?= e(substr((string)$rv['updated_at'], 0, 16)) ?></div>
|
||
<?php endif; ?>
|
||
|
||
<?php if (!empty($rv['comments'])): ?>
|
||
<div class="rv-comments">
|
||
<?php foreach ($rv['comments'] as $thread): ?>
|
||
<?php
|
||
$c = $thread['comment'];
|
||
$cMine = ((int)$c['person_id'] === $meId);
|
||
$cName = (string)($c['person_name'] ?? '已注销');
|
||
?>
|
||
<div class="rv-thread">
|
||
<div class="rv-comment">
|
||
<?= $avatarHtml($c['person_avatar'] ?? null, $cName, 'rv-avatar-sm') ?>
|
||
<span class="rv-c-body">
|
||
<span class="rv-c-head">
|
||
<span class="rv-name"><?= e($cName) ?></span>
|
||
<span class="rv-time"><?= e(substr((string)$c['created_at'], 0, 16)) ?></span>
|
||
<?php if ($cMine && $canWrite): ?>
|
||
<form method="post" action="<?= e(url('movies/comment_del')) ?>" class="rv-del"
|
||
onsubmit="return confirm('删除我的这条评论?它下面的回复也会一起删除。')">
|
||
<?= csrf_field() ?>
|
||
<input type="hidden" name="id" value="<?= (int)$m['id'] ?>">
|
||
<input type="hidden" name="comment_id" value="<?= (int)$c['id'] ?>">
|
||
<button type="submit" class="rv-del-btn" title="删除我的评论">×</button>
|
||
</form>
|
||
<?php endif; ?>
|
||
</span>
|
||
<?= $feelTags($c['feelings']) ?>
|
||
<span class="rv-c-text"><?= nl2br(e($c['content'])) ?></span>
|
||
<span class="rv-c-acts"><?= $canWrite ? $commentBox((int)$rv['id'], (int)$c['id'], '回复') : '' ?></span>
|
||
</span>
|
||
</div>
|
||
<?php foreach ($thread['replies'] as $rep): ?>
|
||
<?php
|
||
$rMine = ((int)$rep['person_id'] === $meId);
|
||
$rName = (string)($rep['person_name'] ?? '已注销');
|
||
?>
|
||
<div class="rv-comment rv-comment-reply">
|
||
<?= $avatarHtml($rep['person_avatar'] ?? null, $rName, 'rv-avatar-sm') ?>
|
||
<span class="rv-c-body">
|
||
<span class="rv-c-head">
|
||
<span class="rv-name"><?= e($rName) ?></span>
|
||
<span class="rv-time"><?= e(substr((string)$rep['created_at'], 0, 16)) ?></span>
|
||
<?php if ($rMine && $canWrite): ?>
|
||
<form method="post" action="<?= e(url('movies/comment_del')) ?>" class="rv-del"
|
||
onsubmit="return confirm('删除我的这条回复?')">
|
||
<?= csrf_field() ?>
|
||
<input type="hidden" name="id" value="<?= (int)$m['id'] ?>">
|
||
<input type="hidden" name="comment_id" value="<?= (int)$rep['id'] ?>">
|
||
<button type="submit" class="rv-del-btn" title="删除我的回复">×</button>
|
||
</form>
|
||
<?php endif; ?>
|
||
</span>
|
||
<?php if (!empty($rep['reply_to_name'])): ?>
|
||
<span class="rv-at">回复 <span>@<?= e($rep['reply_to_name']) ?></span></span>
|
||
<?php endif; ?>
|
||
<?= $feelTags($rep['feelings']) ?>
|
||
<span class="rv-c-text"><?= nl2br(e($rep['content'])) ?></span>
|
||
<span class="rv-c-acts"><?= $canWrite ? $commentBox((int)$rv['id'], (int)$rep['id'], '回复') : '' ?></span>
|
||
</span>
|
||
</div>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
<?php endif; ?>
|
||
|
||
<?php if ($canWrite): ?>
|
||
<div class="rv-actions">
|
||
<?= $commentBox((int)$rv['id'], 0, '评论') ?>
|
||
<?php if ($rvMine): ?>
|
||
<?= $rvForm('修改我的评价', $rvError !== '') ?>
|
||
<?php endif; ?>
|
||
</div>
|
||
<?php endif; ?>
|
||
</div>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
<?php endif; ?>
|
||
</div>
|
||
|
||
<?php if ($hasPoster || $hasTicket || $m['photos']): ?>
|
||
<!-- 图片灯箱:点任意一张图在当前页弹出,可左右翻看 / Esc 关闭(MovieLog 同款) -->
|
||
<div class="lightbox" id="lightbox" role="dialog" aria-modal="true" aria-hidden="true" aria-label="图片查看器">
|
||
<?php /* v24 第 3 条:预览层右上角恒有下载按钮(与全局附件预览一个规矩) */ ?>
|
||
<a class="lb-btn lb-dl" id="lbDl" href="#" download>下载</a>
|
||
<button type="button" class="lb-btn lb-close" id="lbClose" aria-label="关闭">✕</button>
|
||
<button type="button" class="lb-btn lb-nav lb-prev" id="lbPrev" aria-label="上一张">‹</button>
|
||
<button type="button" class="lb-btn lb-nav lb-next" id="lbNext" aria-label="下一张">›</button>
|
||
<div class="lb-stage" id="lbStage"><img class="lb-img" id="lbImg" alt=""></div>
|
||
<div class="lb-bar">
|
||
<span class="lb-caption" id="lbCaption"></span>
|
||
<span class="lb-counter" id="lbCounter"></span>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
(function () {
|
||
var items = [];
|
||
<?php if ($hasPoster): ?>
|
||
items.push({url: <?= json_encode(media_url((string)$m['poster_key']), JSON_UNESCAPED_UNICODE | JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT) ?>, cap: <?= json_encode('海报 · ' . $m['title'], JSON_UNESCAPED_UNICODE | JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT) ?>});
|
||
<?php endif; ?>
|
||
<?php if ($hasTicket): ?>
|
||
items.push({url: <?= json_encode(media_url((string)$m['ticket_key']), JSON_UNESCAPED_UNICODE | JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT) ?>, cap: <?= json_encode('票根 · ' . $m['title'], JSON_UNESCAPED_UNICODE | JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT) ?>});
|
||
<?php endif; ?>
|
||
<?php foreach ($m['photos'] as $ph): ?>
|
||
items.push({url: <?= json_encode(media_url((string)$ph['key']), JSON_UNESCAPED_UNICODE | JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT) ?>, cap: <?= json_encode('照片 · ' . $m['title'], JSON_UNESCAPED_UNICODE | JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT) ?>});
|
||
<?php endforeach; ?>
|
||
var box = document.getElementById('lightbox');
|
||
var stageEl = document.getElementById('lbStage');
|
||
var imgEl = document.getElementById('lbImg');
|
||
var capEl = document.getElementById('lbCaption');
|
||
var cntEl = document.getElementById('lbCounter');
|
||
var closeEl = document.getElementById('lbClose');
|
||
var dlEl = document.getElementById('lbDl');
|
||
var prevEl = document.getElementById('lbPrev');
|
||
var nextEl = document.getElementById('lbNext');
|
||
if (!box || !items.length) return;
|
||
var idx = 0, opener = null;
|
||
function render() {
|
||
imgEl.src = items[idx].url;
|
||
// 下载地址:与预览同一个键,只是带上 dl=1(服务端会改 Content-Disposition)
|
||
if (dlEl) {
|
||
dlEl.setAttribute('href', items[idx].url + (items[idx].url.indexOf('?') < 0 ? '?' : '&') + 'dl=1');
|
||
}
|
||
capEl.textContent = items[idx].cap;
|
||
cntEl.textContent = (idx + 1) + ' / ' + items.length;
|
||
var multi = items.length > 1;
|
||
prevEl.hidden = !multi;
|
||
nextEl.hidden = !multi;
|
||
}
|
||
function open(i, trigger) {
|
||
idx = Math.max(0, Math.min(items.length - 1, i));
|
||
opener = trigger || null;
|
||
box.classList.add('open');
|
||
box.setAttribute('aria-hidden', 'false');
|
||
render();
|
||
closeEl.focus();
|
||
}
|
||
function close() {
|
||
box.classList.remove('open');
|
||
box.setAttribute('aria-hidden', 'true');
|
||
if (opener && opener.focus) opener.focus();
|
||
opener = null;
|
||
}
|
||
function step(d) { idx = (idx + d + items.length) % items.length; render(); }
|
||
Array.prototype.forEach.call(document.querySelectorAll('[data-lb-index]'), function (el) {
|
||
var i = parseInt(el.getAttribute('data-lb-index'), 10);
|
||
if (isNaN(i)) return;
|
||
el.addEventListener('click', function (e) { e.preventDefault(); open(i, el); });
|
||
el.addEventListener('keydown', function (e) {
|
||
if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); open(i, el); }
|
||
});
|
||
});
|
||
closeEl.addEventListener('click', close);
|
||
prevEl.addEventListener('click', function (e) { e.stopPropagation(); step(-1); });
|
||
nextEl.addEventListener('click', function (e) { e.stopPropagation(); step(1); });
|
||
box.addEventListener('click', function (e) { if (e.target === box || e.target === stageEl) close(); });
|
||
imgEl.addEventListener('click', function (e) { e.stopPropagation(); });
|
||
document.addEventListener('keydown', function (e) {
|
||
if (!box.classList.contains('open')) return;
|
||
if (e.key === 'Escape') { close(); }
|
||
else if (e.key === 'ArrowLeft') { e.preventDefault(); step(-1); }
|
||
else if (e.key === 'ArrowRight') { e.preventDefault(); step(1); }
|
||
});
|
||
var tx = 0, ty = 0;
|
||
stageEl.addEventListener('touchstart', function (e) {
|
||
tx = e.changedTouches[0].clientX;
|
||
ty = e.changedTouches[0].clientY;
|
||
}, { passive: true });
|
||
stageEl.addEventListener('touchend', function (e) {
|
||
var dx = e.changedTouches[0].clientX - tx;
|
||
var dy = e.changedTouches[0].clientY - ty;
|
||
if (Math.abs(dx) > 40 && Math.abs(dx) > Math.abs(dy)) step(dx < 0 ? 1 : -1);
|
||
}, { passive: true });
|
||
})();
|
||
</script>
|
||
<?php endif; ?>
|
||
|
||
<?php if ($canWrite): ?>
|
||
<!-- 打分:星星点亮 + 悬停预览 + 实时提示「几分 · 怎么样」;radio 没 JS 也能选(:has 兜底点亮) -->
|
||
<script>
|
||
(function () {
|
||
var form = document.getElementById('reviewForm');
|
||
var word = document.getElementById('rvWord');
|
||
if (!form || !word) return;
|
||
var scale = form.querySelector('.rv-stars');
|
||
if (scale) scale.classList.remove('no-js');
|
||
var WORDS = <?= json_encode(\App\MovieReview::ratingWords(), JSON_UNESCAPED_UNICODE | JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT) ?>;
|
||
function pickedV() {
|
||
var picked = form.querySelector('input[name="rating"]:checked');
|
||
return picked ? parseInt(picked.value, 10) : 0;
|
||
}
|
||
function paint(v) {
|
||
if (!scale) return;
|
||
Array.prototype.forEach.call(scale.querySelectorAll('.rv-star'), function (el) {
|
||
el.classList.toggle('lit', parseInt(el.getAttribute('data-v'), 10) <= v);
|
||
});
|
||
}
|
||
function sync() {
|
||
var v = pickedV();
|
||
if (!v) { word.textContent = '未评分'; word.classList.remove('is-set'); paint(0); return; }
|
||
word.textContent = v + ' 分 · ' + (WORDS[v - 1] || '');
|
||
word.classList.add('is-set');
|
||
paint(v);
|
||
}
|
||
Array.prototype.forEach.call(form.querySelectorAll('input[name="rating"]'), function (el) {
|
||
el.addEventListener('change', sync);
|
||
});
|
||
if (scale) {
|
||
scale.addEventListener('mouseover', function (e) {
|
||
var lab = e.target.closest ? e.target.closest('.rv-star') : null;
|
||
if (lab) paint(parseInt(lab.getAttribute('data-v'), 10));
|
||
});
|
||
scale.addEventListener('mouseleave', function () { paint(pickedV()); });
|
||
}
|
||
sync();
|
||
})();
|
||
</script>
|
||
<?php endif; ?>
|