laoyang
a7947f31be
用户：电影这个框弹出来的时候，应该在下面盖一层蒙版吧？跟近期任务类似。 首页各浮层里只有这两张卡没有遮罩：FbTaskPanel / FbDayEditSheet 都是组件内部 根 Stack 自带遮罩+卡片，而 FbMovieDetailSheet / FbPersonSheet 两处漏了， 卡片直接浮在正文上，底下的片名、影院、联系人名字透出来。 改法（按项目既有约定：谁铺满全屏，谁负责画遮罩）： - FbMovieDetailSheet.build 根节点 Column -> Stack，前面插全屏 FB_MASK 遮罩， onClick 关闭；卡片容器保持铺满+居中且 HitTestMode.Transparent； - FbPersonSheet.build 同样套一层 Stack + 遮罩（embedded 分支跳过， 那种形态宿主是 bindSheet，系统已有遮罩，再叠就是双暗）； - 宿主 FbHomePage 不再包遮罩，只留注释说明。 原因：组件根节点自己铺满全屏，会在外面先吃掉点击 —— 宿主包遮罩会 蒙版看着有、点它关不掉；包两层还会越点越黑（本轮真机实测踩到）。 验证（真机 5NC0225B27004718）： - 弹卡后卡片外像素 (247,243,234) -> (147,146,141)，反推 alpha=0.40 = 0x66/255； - 卡片内海报 (230,212,188) 不受影响； - 点遮罩后恢复 (247,243,234)，卡片关闭； - 联系人卡同样三条全过；hvigorw assembleHap BUILD SUCCESSFUL。
640 lines
27 KiB
Plaintext
640 lines
27 KiB
Plaintext
/**
|
||
* 家书 FamilyBook · 观影详情浮层（鸿蒙端）
|
||
*
|
||
* 点观影卡片后弹出，展示：海报大图、片名、时间、影院（含地址）、
|
||
* 剧情简介、评分、同看的人、照片。
|
||
*
|
||
* 🔴 为什么用**页面内浮层（Stack 覆盖）**而不是系统弹窗：
|
||
* ① 系统弹窗（`AlertDialog` / `CustomDialog`）受"多弹窗堆叠""后台不许弹"
|
||
* 等一堆约束，还要处理生命周期；
|
||
* ② 浮层就是一个普通组件，**状态完全由父页面掌控**（`@Param` 一个
|
||
* `visible` 就行），要加动画/手势/局部刷新都自由。
|
||
* 本项目 Web 端 v43 也是这个思路（`?embed=1` 浮层而不是整页跳转）。
|
||
*
|
||
* ⚠️ 详情数据是**异步拉的**（网络），所以这个组件要处理三种态：
|
||
* 加载中 / 成功 / 失败。别只画成功态 —— 断网时用户会看到"空白浮层"。
|
||
*/
|
||
|
||
import { FbColors, FbMetric, fbAlpha, FB_MASK } from '../common/Theme';
|
||
import { FbModuleDef, fbModuleOf, fbThemeVars } from '../model/Modules';
|
||
import { FbMovieAttendeeRow, FbMovieDetail } from '../data/FbMovieRepo';
|
||
import { FB_TOKEN_STORE } from '../data/FbTokenStore';
|
||
import { FbAvatar, FbRating } from './Widgets';
|
||
import { FbSheetRing } from './FbSheetRing';
|
||
import { FbSheetClose } from './FbSheetClose';
|
||
import { FbMovieReviewSheet } from './FbMovieReviewSheet';
|
||
import { fbImageSrc } from '../data/FbAttachQueue';
|
||
|
||
/**
|
||
* 照片缩略图的宽高比。
|
||
*
|
||
* 🔴 **实测值**：线上照片是 **270×377**（`270/377 ≈ 0.7162`）。
|
||
* 别改成 1（正方形）—— 竖版照片会被裁掉上下大半，用户一眼就看出不对。
|
||
* ⚠️ 服务端目前上传的图都是这个尺寸（4 张实测一致），
|
||
* 若将来允许不同比例，应改成"每张读自己的尺寸"而不是统一比例。
|
||
*/
|
||
const FB_PHOTO_RATIO: number = 270 / 377;
|
||
|
||
@ComponentV2
|
||
export struct FbMovieDetailSheet {
|
||
/** 要展示的详情（null = 还在加载） */
|
||
@Param detail: FbMovieDetail | null = null;
|
||
/** 加载中标志（与 detail 配合：加载中时 detail 也可能是 null） */
|
||
@Param loading: boolean = false;
|
||
/** 加载失败信息（空串 = 没失败） */
|
||
@Param error: string = '';
|
||
/** 列表项带过来的评分（详情接口不给，见 FbMovieRepo.detail 的说明） */
|
||
@Param listRating: number = 0;
|
||
@Param listReviewCount: number = 0;
|
||
/** 影评/评论浮层是否打开（工单 #27） */
|
||
@Local reviewsOpen: boolean = false;
|
||
/** 关闭回调 */
|
||
@Event onClose: () => void = (): void => {
|
||
};
|
||
|
||
/**
|
||
* 卡片外圈描边环的颜色（hex，'' = 用观影模块色）。
|
||
*
|
||
* ⚠️ 必须是字符串：环色要直接当背景色（`FbColors.brand` 是 `Resource`，用不了）。
|
||
*/
|
||
@Param accent: string = '';
|
||
|
||
/** 环色：显式给了就用给的，否则取观影模块色 */
|
||
private accentColor(): string {
|
||
if (this.accent !== '') {
|
||
return this.accent;
|
||
}
|
||
const m: FbModuleDef | undefined = fbModuleOf('movies');
|
||
return fbThemeVars(m !== undefined ? m.color : '#A84A28').brand;
|
||
}
|
||
|
||
// ---- 全屏大图查看器 ----
|
||
/** 查看器是否打开 */
|
||
@Local viewerOpen: boolean = false;
|
||
/** 查看器当前显示第几张 */
|
||
@Local viewerIndex: number = 0;
|
||
/** 查看器里的图片列表（打开时快照，避免与详情刷新打架） */
|
||
@Local viewerList: string[] = [];
|
||
|
||
/**
|
||
* 详情里所有可看的图：**票根在前 + 现场照片**。
|
||
*
|
||
* ⚠️ 与 Web 端口径一致（`templates/movies/show.php` 把票根和照片
|
||
* "合成一块展示、同一套灯箱"，注释里写明了不再分类）。
|
||
* 端上也别分类 —— 用户关心的是"这次观影的照片"，不是它的来源。
|
||
*/
|
||
private allPhotos(d: FbMovieDetail): string[] {
|
||
const out: string[] = [];
|
||
if (d.ticketKey !== '') {
|
||
out.push(d.ticketKey);
|
||
}
|
||
for (const k of d.photos) {
|
||
out.push(k);
|
||
}
|
||
return out;
|
||
}
|
||
|
||
/** 打开全屏查看器（点缩略图时） */
|
||
private openViewer(key: string): void {
|
||
const list: string[] = this.allPhotos(this.detail !== null
|
||
? this.detail : this.emptyForViewer());
|
||
const idx: number = list.indexOf(key);
|
||
if (idx < 0) {
|
||
return;
|
||
}
|
||
this.viewerList = list;
|
||
this.viewerIndex = idx;
|
||
this.viewerOpen = true;
|
||
}
|
||
|
||
/** 查看器用的空详情（列表为空时 openViewer 不会走到，仅类型需要） */
|
||
private emptyForViewer(): FbMovieDetail {
|
||
return {
|
||
ok: false, error: '', id: 0, title: '', startsAt: '', endsAt: '', note: '',
|
||
info: '', posterKey: '', ticketKey: '', cinemaName: '', cinemaPlace: '',
|
||
cinemaAddress: '', cinemaColor: '', myRating: 0, myReview: '',
|
||
reviewCount: 0, reviewAvg: 0, attendees: [], photos: []
|
||
};
|
||
}
|
||
|
||
/** 上一张 / 下一张（**循环**：到末张再往后回到第一张） */
|
||
private viewerStep(delta: number): void {
|
||
const n: number = this.viewerList.length;
|
||
if (n === 0) {
|
||
return;
|
||
}
|
||
// ⚠️ 必须取模归一到 [0,n)：直接加会让 index 越界 / 变成负数
|
||
this.viewerIndex = ((this.viewerIndex + delta) % n + n) % n;
|
||
}
|
||
|
||
/**
|
||
* 时间显示：'YYYY-MM-DD HH:mm'（去掉秒）。
|
||
* ⚠️ 之前这里写错过一次（把小时当分钟取），时用 substring(11,13)。
|
||
*/
|
||
private shortTime(v: string): string {
|
||
if (v.length < 16) {
|
||
return v;
|
||
}
|
||
return v.substring(0, 16);
|
||
}
|
||
|
||
build() {
|
||
/* 🔴 用户 2026-11-06：「电影这个框弹出来的时候，应该在下面盖一层蒙版吧？
|
||
跟近期任务类似。」
|
||
|
||
⇒ 根节点是 **`Stack`**，里面「全屏遮罩 + 卡片」是兄弟节点、叠在一起 ——
|
||
与 `FbTaskPanel`（其文件头第 ③ 条）、`FbDayEditSheet` 完全同一做法。
|
||
|
||
⚠️ 为什么蒙版做在**组件内部**、而不是宿主外面包一层：
|
||
· 组件根节点自己铺满全屏（居中卡片需要），会把"点遮罩关闭"的点击
|
||
吃在手里 ⇒ 蒙版看着有、点它关不掉；
|
||
· 宿主再包一层遮罩就成了两层暗色叠在一起（越点越黑）。
|
||
⇒ 谁铺满全屏，谁负责画遮罩。这是本项目浮层的一致约定。
|
||
|
||
⚠️ 遮罩色统一用 `FB_MASK`（`#66000000`，与全站其它浮层一致；
|
||
实测压暗后底噪 247→147，反推 alpha≈0.40 = 0x66/255）。 */
|
||
Stack({ alignContent: Alignment.Center }) {
|
||
/* 全屏遮罩：点它就关（与任务面板同一交互） */
|
||
Column()
|
||
.width('100%')
|
||
.height('100%')
|
||
.backgroundColor(FB_MASK)
|
||
.onClick((): void => {
|
||
this.onClose();
|
||
})
|
||
|
||
/* 卡片容器：铺满 + 居中。
|
||
⚠️ 居中放在**组件内部**做，而不是改宿主的 Stack 对齐 ——
|
||
宿主 Stack 里还有别的子元素（日程页的悬浮 ＋），改对齐会连带挪走它们。
|
||
⚠️ 必须 `HitTestMode.Transparent`：让点击穿透到上层遮罩，
|
||
同时卡片自身的子节点仍可点（`Block` 会让关闭按钮点不动）。 */
|
||
Column() {
|
||
// 🔴 用 Stack 把"浮层内容"和"全屏查看器"叠起来：
|
||
// 查看器要盖住整个浮层（含它自己的圆角），所以必须是
|
||
// **同一个 Stack 里的后声明节点**，不能放进浮层内部的 Column
|
||
// （那会被浮层的圆角裁剪、也会被内层 Scroll 的滚动带走）。
|
||
Stack({ alignContent: Alignment.Center }) {
|
||
/* ⚠️ 2026-10-19：外面这一层只给宽度（92%）——
|
||
以前卡片是 `width('100%')`（贴屏幕两边）+ 内部 Scroll 92%，
|
||
看上去是"一整块通栏白"，加环也没处可加（环会跑出屏幕）。
|
||
现在：卡片 92% + 主题色环，内部滚动区 100%。 */
|
||
Column() {
|
||
FbSheetRing({ radius: FbMetric.radius, ringColor: this.accentColor() }) {
|
||
Column({ space: 0 }) {
|
||
this.sheetHeader()
|
||
this.sheetBody()
|
||
}
|
||
.width('100%')
|
||
}
|
||
}
|
||
.width('92%')
|
||
// ⚠️ 同样用 `Default`（不写）。`Block` 会挡住浮层内部的子节点
|
||
// （照片缩略图、关闭按钮都点不动）。
|
||
|
||
// ---- 全屏大图查看器 ----
|
||
if (this.viewerOpen) {
|
||
this.viewer()
|
||
}
|
||
|
||
// ---- 影评 + 评论浮层（工单 #27）----
|
||
if (this.reviewsOpen && this.detail !== null) {
|
||
FbMovieReviewSheet({
|
||
movieId: this.detail.id,
|
||
movieTitle: this.detail.title,
|
||
accent: this.accentColor(),
|
||
onClose: (): void => {
|
||
this.reviewsOpen = false;
|
||
},
|
||
onChanged: (): void => {
|
||
// 评分/条数可能变了，但详情接口不返回，不在这里强刷
|
||
}
|
||
})
|
||
}
|
||
}
|
||
.width('100%')
|
||
// ⚠️ 高度随内容自适应（浮层是"底部抽屉"形态）。
|
||
// 🔴 但**查看器打开时必须撑满**：查看器要盖住整屏，
|
||
// 如果这里还是内容高度，查看器会被裁在一小块里，
|
||
// 而且**它没盖住的地方点击会穿透到外层** ——
|
||
// 表现就是"点查看器的 ✕，结果把详情浮层也一起关了"
|
||
// （ 2026-10-12 实测到的 bug）。
|
||
.height(this.viewerOpen ? '100%' : undefined)
|
||
}
|
||
.width('100%')
|
||
.height('100%')
|
||
.justifyContent(FlexAlign.Center)
|
||
.hitTestBehavior(HitTestMode.Transparent)
|
||
}
|
||
.width('100%')
|
||
.height('100%')
|
||
}
|
||
|
||
/** 浮层顶部：把手 + 关闭 */
|
||
/** 浮层顶部：**只有右上角的 ✕**（关闭位置全应用统一）。 */
|
||
@Builder
|
||
sheetHeader() {
|
||
/* 🔴🔴 用户 2026-10-19：「点击一个影片之后，弹出的框**左上角有一条灰色的线**，
|
||
不知道是什么。」
|
||
⇒ 那是原来放在标题行**最左端**的"把手"（36×4 的浅灰短线，
|
||
`FbColors.line2`）。我的本意是"抽屉可以下拉关掉"的视觉提示，
|
||
但 ① 它落在左上角、旁边没有任何文字，看起来就是**一条莫名其妙的灰线**；
|
||
② 这个浮层的关闭本来就不靠下拉（有按钮）。
|
||
⇒ 直接**去掉把手**（用户明确认不出它 = 它没起到提示作用），
|
||
同时把关闭收到右上角统一的 ✕（见 `FbSheetClose.ets`）。
|
||
⚠️ 不要"改成居中的把手"来救 —— 那只会把灰线从左上角挪到中间，
|
||
用户依然不知道它是什么；这一屏真正需要的信息是"怎么关掉我"，
|
||
而那个就是右上角的 ✕。 */
|
||
Row() {
|
||
Blank()
|
||
FbSheetClose({
|
||
onClose: (): void => {
|
||
this.onClose();
|
||
}
|
||
})
|
||
}
|
||
.width('100%')
|
||
.alignItems(VerticalAlign.Center)
|
||
.padding({ left: 16, right: 16, top: 10, bottom: 2 })
|
||
}
|
||
|
||
/** 浮层主体（三种态） */
|
||
@Builder
|
||
sheetBody() {
|
||
Column({ space: 0 }) {
|
||
if (this.error !== '') {
|
||
// 失败：明确告诉用户，别留白
|
||
Column({ space: 8 }) {
|
||
Text('详情没能加载出来')
|
||
.fontSize(FbMetric.fontSmall)
|
||
.fontColor(FbColors.ink)
|
||
Text(this.error)
|
||
.fontSize(FbMetric.fontTiny)
|
||
.fontColor(FbColors.faint)
|
||
.maxLines(3)
|
||
.textAlign(TextAlign.Center)
|
||
}
|
||
.width('100%')
|
||
.padding({ top: 40, bottom: 40 })
|
||
.justifyContent(FlexAlign.Center)
|
||
} else if (this.loading || this.detail === null) {
|
||
Row() {
|
||
Text('正在加载详情…')
|
||
.fontSize(FbMetric.fontSmall)
|
||
.fontColor(FbColors.faint)
|
||
}
|
||
.width('100%')
|
||
.padding({ top: 40, bottom: 40 })
|
||
.justifyContent(FlexAlign.Center)
|
||
} else {
|
||
this.body(this.detail)
|
||
}
|
||
}
|
||
.width('100%')
|
||
}
|
||
|
||
/**
|
||
* 全屏大图查看器。
|
||
*
|
||
* 交互（对齐 Web 端灯箱）：
|
||
* · 点背景关闭；
|
||
* · 左右两个按钮翻页（**循环**）；
|
||
* · 底部显示"第 n / N 张"。
|
||
*
|
||
* ⚠️ 图片用 `ImageFit.Contain` 而不是 `Cover`：
|
||
* 查看器的目的是"看清整张图"，裁掉边缘就失去意义了。
|
||
* （缩略图用 Cover 保持整齐，大图用 Contain 保证完整 —— 两者目的不同。）
|
||
*/
|
||
@Builder
|
||
viewer() {
|
||
// 🔴 必须用一个容器把查看器的所有零件**包在一层里**。
|
||
// `@Builder` 里平铺多个节点时，它们会被依次挂到**父容器**（浮层的
|
||
// Stack）上，各自独立参与布局 —— 结果是遮罩/图/控制条/关闭按钮
|
||
// 全都变成浮层 Stack 的兄弟节点，位置靠 position/margin 硬凑，
|
||
// 点击区域互相错位（2026-10-12 实测：点 ✕ 会连带关掉详情浮层）。
|
||
// ⇒ 外层一个 Stack 包住，内部用 alignContent 定位，才是正确写法。
|
||
Stack({ alignContent: Alignment.Center }) {
|
||
// ① 全屏背景（点它关闭）
|
||
Column()
|
||
.width('100%')
|
||
.height('100%')
|
||
.backgroundColor('#E6000000')
|
||
.onClick((): void => {
|
||
this.viewerOpen = false;
|
||
})
|
||
|
||
// ② 大图
|
||
// ⚠️ `ImageFit.Contain`：查看器的目的是"看清整张图"，
|
||
// 裁掉边缘就失去意义（缩略图才用 Cover）。
|
||
// 🔴 用户 2026-10-19：「点击这个图片呢，不能左右滑动看所有的这个图片。」
|
||
// ⇒ 原来只有底部的「上一张/下一张」文字按钮，**没有滑动手势**。
|
||
// 现在整张大图可以左右滑（见下面 `parallelGesture`）。
|
||
Stack({ alignContent: Alignment.Center }) {
|
||
Image(fbImageSrc(this.viewerList[this.viewerIndex], FB_TOKEN_STORE.get()))
|
||
.width('100%')
|
||
.height('76%')
|
||
.objectFit(ImageFit.Contain)
|
||
/* 🔴🔴 左右滑翻页。
|
||
⚠️ 用 **`gesture(PanGesture)`** 而不是 `SwipeGesture`：
|
||
本轮在日程页实测过 —— `SwipeGesture` 要求"**快速**划动"才识别，
|
||
在有滚动容器/复杂布局的页面里容易被别的手势先吃掉，**慢划不触发**
|
||
（`.gesture` 与 `.priorityGesture` 都试过）。而 `PanGesture` 看的是
|
||
**累计位移**（`event.offsetX`），只要够长就认，稳得多。
|
||
⚠️ 这里用 `.gesture`（普通优先级）而不是 `parallelGesture`：
|
||
查看器是**全屏覆盖层**，下面没有需要并行滚动的东西；
|
||
而且同一个节点上挂两条方向不同的 `parallelGesture` 会互相压制
|
||
（日程页周条的实测结论）。
|
||
⚠️ 判定必须要求「横向位移明显大于纵向」：竖着划（想关掉/看上下）时
|
||
不该被当成翻页。 */
|
||
.gesture(
|
||
PanGesture({ direction: PanDirection.Horizontal })
|
||
.onActionEnd((event: GestureEvent): void => {
|
||
const dx: number = event.offsetX;
|
||
const dy: number = event.offsetY;
|
||
if (Math.abs(dx) < 40 || Math.abs(dx) <= Math.abs(dy)) {
|
||
return;
|
||
}
|
||
// 左滑（dx < 0）= 看下一张；右滑 = 上一张（与相册一致）
|
||
this.viewerStep(dx < 0 ? 1 : -1);
|
||
})
|
||
)
|
||
}
|
||
.width('100%')
|
||
.height('76%')
|
||
|
||
// ③ 底部控制条（靠下对齐）
|
||
Row({ space: 18 }) {
|
||
Text('‹ 上一张')
|
||
.fontSize(FbMetric.fontSmall)
|
||
.fontColor('#FFFFFFCC')
|
||
.padding({ left: 12, right: 12, top: 8, bottom: 8 })
|
||
.onClick((): void => {
|
||
this.viewerStep(-1);
|
||
})
|
||
Text((this.viewerIndex + 1).toString() + ' / ' + this.viewerList.length.toString())
|
||
.fontSize(FbMetric.fontTiny)
|
||
.fontColor('#FFFFFF99')
|
||
Text('下一张 ›')
|
||
.fontSize(FbMetric.fontSmall)
|
||
.fontColor('#FFFFFFCC')
|
||
.padding({ left: 12, right: 12, top: 8, bottom: 8 })
|
||
.onClick((): void => {
|
||
this.viewerStep(1);
|
||
})
|
||
}
|
||
.width('100%')
|
||
.justifyContent(FlexAlign.Center)
|
||
// ⚠️ 用 `align` 把它压到 Stack 底部，而不是靠 margin 推
|
||
.align(Alignment.Bottom)
|
||
.margin({ bottom: 40 })
|
||
|
||
// ④ 右上角关闭（比"点背景"更明确）
|
||
// ⚠️ 必须留在 Stack 里当子节点（不能平铺出去）——
|
||
// 平铺会跑到浮层 Stack 上，position 相对的是**浮层**而不是查看器。
|
||
Column({ space: 2 }) {
|
||
Text('✕')
|
||
.fontSize(FbMetric.fontTitle)
|
||
.fontColor('#FFFFFFCC')
|
||
Text('关闭')
|
||
.fontSize(9)
|
||
.fontColor('#FFFFFF88')
|
||
}
|
||
.padding({ left: 16, right: 16, top: 12, bottom: 12 })
|
||
.align(Alignment.TopEnd)
|
||
.onClick((): void => {
|
||
this.viewerOpen = false;
|
||
})
|
||
}
|
||
.width('100%')
|
||
.height('100%')
|
||
// 🔴 事件拦截取 **`Default`（默认值，不写就行）**，**不能用 `Block`**。
|
||
// 🔴 SDK 原文（`component/enums.d.ts`）说得很清楚：
|
||
// · `Default` —— 自身和**子节点**响应，阻挡**兄弟节点**，不影响祖先；
|
||
// · `Block` —— 自身响应，**阻挡子节点**、兄弟、祖先；
|
||
// · `Transparent` —— 自身和子节点响应，**不阻挡**兄弟和祖先。
|
||
// 需求是"查看器挡住下层遮罩（兄弟），但里面的翻页/关闭按钮要能点（子节点）"
|
||
// ⇒ 正是 `Default`。
|
||
// ⚠️ 我一开始用了 `Block`，结果**子节点（缩略图/翻页按钮）全部点不动**
|
||
// —— 2026-10-12 实测：点缩略图毫无反应，查 SDK 注释才发现 Block 会挡子节点。
|
||
//
|
||
// ⚠️ 这里**不额外加 onClick**：加了会让"点查看器任意处"都关掉查看器，
|
||
// 而遮罩层（子节点之一）已经负责"点空白关闭"，两者会打架。
|
||
// 靠 `Default` + 遮罩子节点即可：遮罩铺满、点它关闭；
|
||
// 翻页/关闭按钮在遮罩**之后**声明，层级更高、优先响应。
|
||
}
|
||
|
||
/** 成功态的主体 */
|
||
@Builder
|
||
body(d: FbMovieDetail) {
|
||
Scroll() {
|
||
Column({ space: 10 }) {
|
||
// ---- 海报（大图，2:3）----
|
||
if (d.posterKey !== '') {
|
||
Image(fbImageSrc(d.posterKey, FB_TOKEN_STORE.get()))
|
||
.width(140)
|
||
.aspectRatio(0.75)
|
||
.objectFit(ImageFit.Cover)
|
||
.borderRadius(FbMetric.radiusS)
|
||
.alt($r('app.media.fb_ic_movies'))
|
||
}
|
||
|
||
// ---- 片名 ----
|
||
Text(d.title)
|
||
.fontSize(FbMetric.fontTitle)
|
||
.fontWeight(FontWeight.Medium)
|
||
.fontColor(FbColors.ink)
|
||
.textAlign(TextAlign.Center)
|
||
|
||
// ---- 时间 ----
|
||
Text(this.shortTime(d.startsAt) +
|
||
(d.endsAt !== '' ? ' — ' + this.shortTime(d.endsAt).substring(11) : ''))
|
||
.fontSize(FbMetric.fontTiny)
|
||
.fontColor(FbColors.muted)
|
||
|
||
// ---- 评分（来自列表项，见 FbMovieRepo.detail 说明）----
|
||
if (this.listReviewCount > 0) {
|
||
Row({ space: 6 }) {
|
||
FbRating({ score: this.listRating, max: 10 })
|
||
Text(this.listRating.toFixed(1).toString() + ' 分 · ' +
|
||
this.listReviewCount.toString() + ' 条评价')
|
||
.fontSize(FbMetric.fontTiny)
|
||
.fontColor(FbColors.faint)
|
||
}
|
||
.alignItems(VerticalAlign.Center)
|
||
}
|
||
|
||
// ---- 评价与评论入口（工单 #27）----
|
||
Row() {
|
||
Text('评价与评论' + (this.listReviewCount > 0 ? '（' + this.listReviewCount.toString() + '）' : ''))
|
||
.fontSize(FbMetric.fontSmall)
|
||
.fontColor(this.accentColor())
|
||
.padding({ left: 12, right: 12, top: 7, bottom: 7 })
|
||
.borderRadius(FbMetric.radiusPill)
|
||
.backgroundColor(fbAlpha(this.accentColor(), 0.1))
|
||
.onClick((): void => {
|
||
this.reviewsOpen = true;
|
||
})
|
||
}
|
||
.width('100%')
|
||
|
||
// ---- 影院 ----
|
||
if (d.cinemaName !== '') {
|
||
Column({ space: 4 }) {
|
||
Row({ space: 6 }) {
|
||
Column()
|
||
.width(6)
|
||
.height(6)
|
||
.backgroundColor(d.cinemaColor !== '' ? d.cinemaColor : FbColors.muted)
|
||
.borderRadius(3)
|
||
Text(d.cinemaName)
|
||
.fontSize(FbMetric.fontSmall)
|
||
.fontColor(FbColors.ink)
|
||
}
|
||
.alignItems(VerticalAlign.Center)
|
||
if (d.cinemaAddress !== '') {
|
||
Text(d.cinemaAddress)
|
||
.fontSize(FbMetric.fontTiny)
|
||
.fontColor(FbColors.faint)
|
||
.maxLines(2)
|
||
}
|
||
}
|
||
.width('100%')
|
||
.alignItems(HorizontalAlign.Center)
|
||
}
|
||
|
||
// ---- 同看的人 ----
|
||
if (d.attendees.length > 0) {
|
||
Column({ space: 6 }) {
|
||
Text('同看的人')
|
||
.fontSize(FbMetric.fontTiny)
|
||
.fontColor(FbColors.faint)
|
||
Row({ space: 10 }) {
|
||
ForEach(d.attendees, (a: FbMovieAttendeeRow) => {
|
||
Column({ space: 3 }) {
|
||
FbAvatar({
|
||
name: a.myNickname !== '' ? a.myNickname : a.name,
|
||
// ⚠️ 用接口给的头像色（`avatar_color`）；没有才退回灰。
|
||
// 别写死一个灰 —— 那样所有人的头像都是同一个颜色。
|
||
color: a.avatarColor !== undefined && a.avatarColor !== ''
|
||
? a.avatarColor : '#A84A28',
|
||
dia: 34,
|
||
/* 🔴🔴 用户 2026-10-19：「然后这个观影人的头像并没有带进来。」
|
||
⇒ 同看人这里**只传了名字和底色**，漏了 `imageUrl` ——
|
||
于是**有头像的人也退化成色块字**，看起来像"头像没带进来"。
|
||
服务端 `Movie::attendees()` 本来就 `SELECT p.avatar`，
|
||
端上 `parseAttendees` 也解析进了 `a.avatar`，
|
||
纯粹是**渲染时忘了用它**。
|
||
⚠️ 与名册详情 2026-10-15 踩的那个是**同一个 bug**
|
||
（当时是 `FbPersonSheet` 漏传 `imageUrl`）——
|
||
凡是 `FbAvatar` 都要检查是否传了 `imageUrl`。
|
||
⚠️ `a.avatar` 是**裸 key**，必须走 `fbImageSrc` 拼绝对地址 +
|
||
令牌（`Image()` 不支持自定义请求头，令牌只能进查询串）。 */
|
||
imageUrl: a.avatar !== '' ? fbImageSrc(a.avatar, FB_TOKEN_STORE.get()) : ''
|
||
})
|
||
Text(a.myNickname !== '' ? a.myNickname : a.name)
|
||
.fontSize(10)
|
||
.fontColor(FbColors.muted)
|
||
.maxLines(1)
|
||
}
|
||
}, (a: FbMovieAttendeeRow): string => 'att_' + a.id.toString())
|
||
}
|
||
}
|
||
.width('100%')
|
||
.alignItems(HorizontalAlign.Center)
|
||
}
|
||
|
||
// ---- 剧情简介 ----
|
||
if (d.info !== '') {
|
||
Column({ space: 6 }) {
|
||
Text('简介')
|
||
.fontSize(FbMetric.fontTiny)
|
||
.fontColor(FbColors.faint)
|
||
Text(d.info)
|
||
.fontSize(FbMetric.fontSmall)
|
||
.fontColor(FbColors.ink)
|
||
// ⚠️ 不设 maxLines：简介本来就长，让用户滚着看全文
|
||
.textAlign(TextAlign.Start)
|
||
}
|
||
.width('100%')
|
||
.alignItems(HorizontalAlign.Start)
|
||
}
|
||
|
||
// ---- 备注 ----
|
||
if (d.note !== '') {
|
||
Column({ space: 6 }) {
|
||
Text('备注')
|
||
.fontSize(FbMetric.fontTiny)
|
||
.fontColor(FbColors.faint)
|
||
Text(d.note)
|
||
.fontSize(FbMetric.fontSmall)
|
||
.fontColor(FbColors.ink)
|
||
}
|
||
.width('100%')
|
||
.alignItems(HorizontalAlign.Start)
|
||
}
|
||
|
||
// ---- 照片（票根 + 现场照片合成一块，与 Web 端一致）----
|
||
if (this.allPhotos(d).length > 0) {
|
||
Column({ space: 6 }) {
|
||
Row({ space: 6 }) {
|
||
Text('观影照片')
|
||
.fontSize(FbMetric.fontTiny)
|
||
.fontColor(FbColors.faint)
|
||
Text(this.allPhotos(d).length.toString() + ' 张')
|
||
.fontSize(FbMetric.fontTiny)
|
||
.fontColor(FbColors.faint)
|
||
}
|
||
.alignItems(VerticalAlign.Center)
|
||
|
||
Grid() {
|
||
ForEach(this.allPhotos(d), (k: string) => {
|
||
GridItem() {
|
||
// 🔴 缩略图必须按**照片真实比例**做格子。
|
||
// 实测线上照片是 **270×377（竖版，比例 ≈0.716）**，
|
||
// 而第一版用的是**正方形格子**（GridItem 没有固定高度，
|
||
// 由 Grid 行高决定）⇒ 竖版照片被 `Cover` 裁掉上下大半，
|
||
// "看起来格式不对"。用户 2026-10-12 反馈的就是这个。
|
||
Column() {
|
||
Image(fbImageSrc(k, FB_TOKEN_STORE.get()))
|
||
.width('100%')
|
||
.height('100%')
|
||
.objectFit(ImageFit.Cover)
|
||
.alt($r('app.media.fb_ic_movies'))
|
||
}
|
||
.width('100%')
|
||
// ⚠️ 用 `aspectRatio` 指定比例，而不是靠父容器推：
|
||
// 在 Grid 里 `height('100%')` 拿不到确定的高度
|
||
// （行高是内容决定的），必须显式给比例。
|
||
.aspectRatio(FB_PHOTO_RATIO)
|
||
.clip(true)
|
||
.borderRadius(FbMetric.radiusS)
|
||
.onClick((): void => {
|
||
this.openViewer(k);
|
||
})
|
||
}
|
||
}, (k: string): string => 'ph_' + k)
|
||
}
|
||
.columnsTemplate('1fr 1fr 1fr')
|
||
.columnsGap(6)
|
||
.rowsGap(6)
|
||
.width('100%')
|
||
}
|
||
.width('100%')
|
||
.alignItems(HorizontalAlign.Start)
|
||
}
|
||
}
|
||
.width('100%')
|
||
.padding({ left: 16, right: 16, top: 4, bottom: 28 })
|
||
.alignItems(HorizontalAlign.Center)
|
||
}
|
||
// 🔴 用户 2026-10-16：「它应该弹出一个**圆角的、浮在上面的卡片**……
|
||
// **不要让它左右充满整个屏幕，下面也不要挨着屏幕**，
|
||
// 而是放在**屏幕中间**，采用**圆角浮窗**式的形式。」
|
||
// ⇒ 不再贴底满宽：左右留边、四角圆角、垂直居中（由宿主的 Stack 对齐）。
|
||
/* ⚠️ 100%（不是 92%）：卡片本身已经是 92% 宽，
|
||
这里再 92% 就变成 84.6%（"卡片比容器窄一圈"的经典错）。 */
|
||
.width('100%')
|
||
.constraintSize({ maxHeight: '72%' })
|
||
.scrollBar(BarState.Off)
|
||
.edgeEffect(EdgeEffect.Spring)
|
||
}
|
||
} |