383 lines
13 KiB
PHP
383 lines
13 KiB
PHP
|
<?php
|
||
|
|
// ============================================
|
||
|
|
// 文件: detail.php (含观影人头像)
|
||
|
|
// ============================================
|
||
|
|
|
||
|
|
require_once 'config.php';
|
||
|
|
checkLogin();
|
||
|
|
|
||
|
|
$id = isset($_GET['id']) ? (int)$_GET['id'] : 0;
|
||
|
|
if ($id <= 0) {
|
||
|
|
header('Location: index.php');
|
||
|
|
exit;
|
||
|
|
}
|
||
|
|
|
||
|
|
$movie = getMovie($id);
|
||
|
|
if (!$movie) {
|
||
|
|
header('Location: index.php');
|
||
|
|
exit;
|
||
|
|
}
|
||
|
|
|
||
|
|
$admin = getCurrentAdmin();
|
||
|
|
?>
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html lang="zh-CN">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title><?= h($movie['title']) ?> - 电影日志</title>
|
||
|
|
<link rel="stylesheet" href="css/style.css">
|
||
|
|
<style>
|
||
|
|
.detail-container {
|
||
|
|
max-width: 900px;
|
||
|
|
margin: 0 auto;
|
||
|
|
padding: 20px;
|
||
|
|
}
|
||
|
|
.detail-back {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 8px;
|
||
|
|
color: var(--text-secondary);
|
||
|
|
text-decoration: none;
|
||
|
|
font-size: 15px;
|
||
|
|
margin-bottom: 24px;
|
||
|
|
transition: color 0.2s;
|
||
|
|
}
|
||
|
|
.detail-back:hover {
|
||
|
|
color: var(--primary);
|
||
|
|
}
|
||
|
|
.detail-hero {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: 300px 1fr;
|
||
|
|
gap: 32px;
|
||
|
|
background: var(--card-bg);
|
||
|
|
border-radius: 16px;
|
||
|
|
padding: 28px;
|
||
|
|
box-shadow: var(--shadow);
|
||
|
|
margin-bottom: 24px;
|
||
|
|
}
|
||
|
|
.detail-poster {
|
||
|
|
border-radius: 12px;
|
||
|
|
overflow: hidden;
|
||
|
|
background: var(--bg-secondary);
|
||
|
|
aspect-ratio: 2/3;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
.detail-poster img {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
object-fit: cover;
|
||
|
|
}
|
||
|
|
.detail-poster .placeholder-poster {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
background: linear-gradient(135deg, #2d2d44, #1a1a2e);
|
||
|
|
color: rgba(255,255,255,0.6);
|
||
|
|
font-size: 48px;
|
||
|
|
}
|
||
|
|
.detail-poster .placeholder-poster .placeholder-title {
|
||
|
|
font-size: 16px;
|
||
|
|
margin-top: 8px;
|
||
|
|
text-align: center;
|
||
|
|
padding: 0 12px;
|
||
|
|
}
|
||
|
|
.detail-info {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 12px;
|
||
|
|
}
|
||
|
|
.detail-info h1 {
|
||
|
|
font-size: 28px;
|
||
|
|
font-weight: 700;
|
||
|
|
margin: 0 0 4px;
|
||
|
|
color: var(--text-primary);
|
||
|
|
}
|
||
|
|
.detail-info .meta-row {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
gap: 16px;
|
||
|
|
font-size: 14px;
|
||
|
|
color: var(--text-secondary);
|
||
|
|
}
|
||
|
|
.detail-info .meta-row span {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 4px;
|
||
|
|
}
|
||
|
|
.detail-info .info-text {
|
||
|
|
color: var(--text-secondary);
|
||
|
|
line-height: 1.7;
|
||
|
|
margin: 8px 0 0;
|
||
|
|
font-size: 15px;
|
||
|
|
white-space: pre-wrap;
|
||
|
|
}
|
||
|
|
.detail-section {
|
||
|
|
background: var(--card-bg);
|
||
|
|
border-radius: 16px;
|
||
|
|
padding: 24px 28px;
|
||
|
|
box-shadow: var(--shadow);
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
.detail-section h3 {
|
||
|
|
font-size: 18px;
|
||
|
|
font-weight: 600;
|
||
|
|
margin: 0 0 16px;
|
||
|
|
color: var(--text-primary);
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 10px;
|
||
|
|
}
|
||
|
|
.detail-section h3 .badge {
|
||
|
|
font-size: 13px;
|
||
|
|
font-weight: 400;
|
||
|
|
background: var(--bg-secondary);
|
||
|
|
padding: 2px 12px;
|
||
|
|
border-radius: 20px;
|
||
|
|
color: var(--text-secondary);
|
||
|
|
}
|
||
|
|
.viewers-list {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
gap: 12px;
|
||
|
|
}
|
||
|
|
.viewer-tag {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 6px;
|
||
|
|
background: var(--bg-secondary);
|
||
|
|
padding: 4px 12px 4px 6px;
|
||
|
|
border-radius: 20px;
|
||
|
|
font-size: 14px;
|
||
|
|
color: var(--text-primary);
|
||
|
|
}
|
||
|
|
.viewer-tag img {
|
||
|
|
width: 28px;
|
||
|
|
height: 28px;
|
||
|
|
border-radius: 50%;
|
||
|
|
object-fit: cover;
|
||
|
|
}
|
||
|
|
.cinema-info {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: 1fr 1fr;
|
||
|
|
gap: 8px 24px;
|
||
|
|
font-size: 15px;
|
||
|
|
}
|
||
|
|
.cinema-info .label {
|
||
|
|
color: var(--text-secondary);
|
||
|
|
}
|
||
|
|
.cinema-info .value {
|
||
|
|
color: var(--text-primary);
|
||
|
|
}
|
||
|
|
.gallery-grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||
|
|
gap: 16px;
|
||
|
|
}
|
||
|
|
.gallery-item {
|
||
|
|
border-radius: 10px;
|
||
|
|
overflow: hidden;
|
||
|
|
background: var(--bg-secondary);
|
||
|
|
aspect-ratio: 4/3;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: transform 0.2s;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.gallery-item:hover {
|
||
|
|
transform: scale(1.02);
|
||
|
|
}
|
||
|
|
.gallery-item img {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
object-fit: cover;
|
||
|
|
}
|
||
|
|
.gallery-item .label-badge {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 8px;
|
||
|
|
left: 8px;
|
||
|
|
background: rgba(0,0,0,0.7);
|
||
|
|
color: #fff;
|
||
|
|
font-size: 11px;
|
||
|
|
padding: 2px 12px;
|
||
|
|
border-radius: 12px;
|
||
|
|
backdrop-filter: blur(4px);
|
||
|
|
}
|
||
|
|
.detail-actions {
|
||
|
|
display: flex;
|
||
|
|
gap: 12px;
|
||
|
|
margin-top: 8px;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
}
|
||
|
|
.detail-actions .btn {
|
||
|
|
padding: 10px 24px;
|
||
|
|
}
|
||
|
|
.btn-danger {
|
||
|
|
background: #e74c3c;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
.btn-danger:hover {
|
||
|
|
background: #c0392b;
|
||
|
|
}
|
||
|
|
.remark-text {
|
||
|
|
background: var(--bg-secondary);
|
||
|
|
padding: 12px 16px;
|
||
|
|
border-radius: 8px;
|
||
|
|
color: var(--text-primary);
|
||
|
|
border-left: 4px solid var(--primary);
|
||
|
|
margin-top: 8px;
|
||
|
|
}
|
||
|
|
@media (max-width: 768px) {
|
||
|
|
.detail-hero {
|
||
|
|
grid-template-columns: 1fr;
|
||
|
|
padding: 20px;
|
||
|
|
}
|
||
|
|
.detail-poster {
|
||
|
|
max-width: 240px;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
.cinema-info {
|
||
|
|
grid-template-columns: 1fr;
|
||
|
|
}
|
||
|
|
.gallery-grid {
|
||
|
|
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media (max-width: 480px) {
|
||
|
|
.detail-section {
|
||
|
|
padding: 16px 18px;
|
||
|
|
}
|
||
|
|
.detail-hero {
|
||
|
|
padding: 16px;
|
||
|
|
}
|
||
|
|
.detail-info h1 {
|
||
|
|
font-size: 22px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<?php include 'nav.php'; ?>
|
||
|
|
|
||
|
|
<main class="main-content">
|
||
|
|
<div class="detail-container">
|
||
|
|
<a href="index.php" class="detail-back">← 返回列表</a>
|
||
|
|
|
||
|
|
<!-- 主信息 -->
|
||
|
|
<div class="detail-hero">
|
||
|
|
<div class="detail-poster">
|
||
|
|
<?php
|
||
|
|
$poster = posterUrl($movie['poster_path']);
|
||
|
|
if (strpos($poster, 'placeholder') !== false):
|
||
|
|
?>
|
||
|
|
<div class="placeholder-poster">
|
||
|
|
<span>🎬</span>
|
||
|
|
<span class="placeholder-title"><?= h($movie['title']) ?></span>
|
||
|
|
</div>
|
||
|
|
<?php else: ?>
|
||
|
|
<img src="<?= $poster ?>" alt="<?= h($movie['title']) ?>">
|
||
|
|
<?php endif; ?>
|
||
|
|
</div>
|
||
|
|
<div class="detail-info">
|
||
|
|
<h1><?= h($movie['title']) ?></h1>
|
||
|
|
<div class="meta-row">
|
||
|
|
<span>📅 <?= $movie['watch_date'] ? date('Y年m月d日', strtotime($movie['watch_date'])) : '日期待补' ?></span>
|
||
|
|
<?php if ($movie['cinema_name']): ?>
|
||
|
|
<span>🏛️ <?= h($movie['cinema_name']) ?></span>
|
||
|
|
<?php endif; ?>
|
||
|
|
<span>🎫 观影人: <?= count($movie['viewers']) ?> 人</span>
|
||
|
|
</div>
|
||
|
|
<?php if ($movie['info']): ?>
|
||
|
|
<div class="info-text"><?= h($movie['info']) ?></div>
|
||
|
|
<?php endif; ?>
|
||
|
|
<?php if ($movie['remark']): ?>
|
||
|
|
<div class="remark-text">📝 <?= h($movie['remark']) ?></div>
|
||
|
|
<?php endif; ?>
|
||
|
|
<div class="detail-actions">
|
||
|
|
<a href="edit.php?id=<?= $movie['id'] ?>" class="btn btn-primary">✏️ 编辑</a>
|
||
|
|
<a href="delete.php?id=<?= $movie['id'] ?>" class="btn btn-danger" onclick="return confirm('确定要删除《<?= h($movie['title']) ?>》吗？此操作不可恢复！')">🗑️ 删除</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 一起看的人（带头像） -->
|
||
|
|
<div class="detail-section">
|
||
|
|
<h3>👥 一起看的人 <span class="badge"><?= count($movie['viewers']) ?> 人</span></h3>
|
||
|
|
<?php if (count($movie['viewers']) > 0): ?>
|
||
|
|
<div class="viewers-list">
|
||
|
|
<?php foreach ($movie['viewers'] as $viewer): ?>
|
||
|
|
<span class="viewer-tag" style="color: <?= h($viewer['person_color'] ?? '#888888') ?>;">
|
||
|
|
<img src="<?= getAvatarUrl($viewer['person_avatar'] ?? null, $viewer['name']) ?>" alt="<?= h($viewer['name']) ?>">
|
||
|
|
<?= h($viewer['name']) ?>
|
||
|
|
</span>
|
||
|
|
<?php endforeach; ?>
|
||
|
|
</div>
|
||
|
|
<?php else: ?>
|
||
|
|
<p style="color: var(--text-secondary); font-size: 14px;">暂无记录</p>
|
||
|
|
<?php endif; ?>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 电影院信息 -->
|
||
|
|
<div class="detail-section">
|
||
|
|
<h3>🏛️ 电影院信息</h3>
|
||
|
|
<?php if ($movie['cinema_name']): ?>
|
||
|
|
<div class="cinema-info">
|
||
|
|
<span class="label">所在地方</span>
|
||
|
|
<span class="value"><?= h($movie['place'] ?? '-') ?></span>
|
||
|
|
<span class="label">影院名称</span>
|
||
|
|
<span class="value" style="color: <?= h($movie['cinema_color'] ?? '#888888') ?>;">
|
||
|
|
<?= h($movie['cinema_name']) ?>
|
||
|
|
</span>
|
||
|
|
<span class="label">详细地址</span>
|
||
|
|
<span class="value"><?= h($movie['cinema_address'] ?? '-') ?></span>
|
||
|
|
</div>
|
||
|
|
<?php else: ?>
|
||
|
|
<p style="color: var(--text-secondary); font-size: 14px;">未记录电影院信息</p>
|
||
|
|
<?php endif; ?>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 图片展示（票根 + 多张观影照片） -->
|
||
|
|
<?php
|
||
|
|
$hasTicket = $movie['ticket_path'] && file_exists(__DIR__ . '/' . $movie['ticket_path']);
|
||
|
|
$all_photos = [];
|
||
|
|
if ($movie['photo_path'] && file_exists(__DIR__ . '/' . $movie['photo_path'])) {
|
||
|
|
$all_photos[] = ['path' => $movie['photo_path'], 'label' => '📸 旧照片'];
|
||
|
|
}
|
||
|
|
foreach ($movie['photos'] as $p) {
|
||
|
|
if (file_exists(__DIR__ . '/' . $p['photo_path'])) {
|
||
|
|
$all_photos[] = ['path' => $p['photo_path'], 'label' => '📸 观影照片'];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
?>
|
||
|
|
<?php if ($hasTicket || count($all_photos) > 0): ?>
|
||
|
|
<div class="detail-section">
|
||
|
|
<h3>🖼️ 影像记录 <span class="badge"><?= count($all_photos) + ($hasTicket ? 1 : 0) ?> 张</span></h3>
|
||
|
|
<div class="gallery-grid">
|
||
|
|
<?php if ($hasTicket): ?>
|
||
|
|
<div class="gallery-item" onclick="window.open('<?= '/' . $movie['ticket_path'] ?>', '_blank')">
|
||
|
|
<img src="<?= '/' . $movie['ticket_path'] ?>" alt="电影票">
|
||
|
|
<span class="label-badge">🎫 电影票</span>
|
||
|
|
</div>
|
||
|
|
<?php endif; ?>
|
||
|
|
<?php foreach ($all_photos as $photo): ?>
|
||
|
|
<div class="gallery-item" onclick="window.open('<?= '/' . $photo['path'] ?>', '_blank')">
|
||
|
|
<img src="<?= '/' . $photo['path'] ?>" alt="观影照片">
|
||
|
|
<span class="label-badge"><?= $photo['label'] ?></span>
|
||
|
|
</div>
|
||
|
|
<?php endforeach; ?>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<?php endif; ?>
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<script src="js/main.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|