220 lines
7.3 KiB
Plaintext
220 lines
7.3 KiB
Plaintext
|
/**
|
|||
|
|
* 家书 FamilyBook · 观影模块（鸿蒙端）
|
|||
|
|
*
|
|||
|
|
* 对应 Web 端 `templates/movies/index.php`。Web 端是**海报墙**（waterfall 瀑布流），
|
|||
|
|
* 端上改成**两列网格**：手机宽度下两列海报刚好一屏看清 4–6 部，
|
|||
|
|
* 比瀑布流（列宽随图片高度浮动）更整齐、也更好点。
|
|||
|
|
*
|
|||
|
|
* 页头右侧两个入口：搜索、设置（影院管理 / 统计 / 年度报告 —— 与 Web 端一致，
|
|||
|
|
* 「影院」不单独占抽屉位置，它是观影模块的一部分）。
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
import { FbColors, FbMetric, fbPalette } from '../../common/Theme';
|
|||
|
|
import { FbAppState, fbAppState } from '../../common/Store';
|
|||
|
|
import { FbMovieItem, FbKinChip } from '../../model/Types';
|
|||
|
|
import { FB_DEMO_CINEMAS, FB_DEMO_MOVIES } from '../../model/DemoData';
|
|||
|
|
import { FbDot, FbEmptyBox, FbIconButton, FbPersonChip, FbPrimaryButton, FbRating, FbSectionTitle } from '../../components/Widgets';
|
|||
|
|
|
|||
|
|
@ComponentV2
|
|||
|
|
export struct FbMoviesPage {
|
|||
|
|
@Param app: FbAppState = fbAppState();
|
|||
|
|
|
|||
|
|
private movies: FbMovieItem[] = FB_DEMO_MOVIES;
|
|||
|
|
private cinemas: string[] = FB_DEMO_CINEMAS;
|
|||
|
|
/** 模块主题色（观影 = 紫） */
|
|||
|
|
private accent: string = '#7A4E8C';
|
|||
|
|
|
|||
|
|
build() {
|
|||
|
|
Column() {
|
|||
|
|
// ---- 页头：标题 + 记一场电影 + 设置 ----
|
|||
|
|
Row({ space: 8 }) {
|
|||
|
|
Column({ space: 2 }) {
|
|||
|
|
Text('观影记录')
|
|||
|
|
.fontSize(FbMetric.fontTitle)
|
|||
|
|
.fontWeight(FontWeight.Medium)
|
|||
|
|
.fontColor(FbColors.ink)
|
|||
|
|
Text('共 ' + this.movies.length.toString() + ' 部 · 按观影时间排序')
|
|||
|
|
.fontSize(FbMetric.fontTiny)
|
|||
|
|
.fontColor(FbColors.faint)
|
|||
|
|
}
|
|||
|
|
.alignItems(HorizontalAlign.Start)
|
|||
|
|
.layoutWeight(1)
|
|||
|
|
|
|||
|
|
FbPrimaryButton({
|
|||
|
|
label: '记一场',
|
|||
|
|
bg: this.accent,
|
|||
|
|
icon: $r('app.media.fb_ic_plus')
|
|||
|
|
})
|
|||
|
|
// 「影院」不单独占抽屉位置 —— 它是观影模块的一部分，从这里进
|
|||
|
|
FbIconButton({
|
|||
|
|
icon: $r('app.media.fb_ic_gear'),
|
|||
|
|
tint: FbColors.muted,
|
|||
|
|
dia: 36
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
.width('100%')
|
|||
|
|
.padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 12, bottom: 8 })
|
|||
|
|
.alignItems(VerticalAlign.Center)
|
|||
|
|
|
|||
|
|
// ---- 搜索条 ----
|
|||
|
|
Row({ space: 6 }) {
|
|||
|
|
Image($r('app.media.fb_ic_search'))
|
|||
|
|
.width(15)
|
|||
|
|
.height(15)
|
|||
|
|
.renderMode(ImageRenderMode.Template)
|
|||
|
|
.fillColor(FbColors.faint)
|
|||
|
|
Text('搜索片名、影院、观影人…')
|
|||
|
|
.fontSize(FbMetric.fontSmall)
|
|||
|
|
.fontColor(FbColors.faint)
|
|||
|
|
.layoutWeight(1)
|
|||
|
|
.maxLines(1)
|
|||
|
|
}
|
|||
|
|
.width('100%')
|
|||
|
|
.height(36)
|
|||
|
|
.padding({ left: 12, right: 12 })
|
|||
|
|
.backgroundColor(FbColors.inputBg)
|
|||
|
|
.borderRadius(FbMetric.radiusS)
|
|||
|
|
.margin({ left: FbMetric.pagePad, right: FbMetric.pagePad, bottom: 4 })
|
|||
|
|
.alignItems(VerticalAlign.Center)
|
|||
|
|
|
|||
|
|
// ---- 影院数提示 ----
|
|||
|
|
Row({ space: 6 }) {
|
|||
|
|
Blank()
|
|||
|
|
Text('影院 ' + this.cinemas.length.toString() + ' 家')
|
|||
|
|
.fontSize(FbMetric.fontTiny)
|
|||
|
|
.fontColor(FbColors.faint)
|
|||
|
|
}
|
|||
|
|
.width('100%')
|
|||
|
|
.padding({ left: FbMetric.pagePad + 4, right: FbMetric.pagePad + 4, top: 6, bottom: 6 })
|
|||
|
|
|
|||
|
|
// ---- 海报网格 ----
|
|||
|
|
if (this.movies.length === 0) {
|
|||
|
|
FbEmptyBox({
|
|||
|
|
title: '还没有观影记录',
|
|||
|
|
hint: '一家人一起看过的电影，都会以海报墙的方式排在这里',
|
|||
|
|
icon: $r('app.media.fb_ic_movies')
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
Grid() {
|
|||
|
|
ForEach(this.movies, (mv: FbMovieItem) => {
|
|||
|
|
GridItem() {
|
|||
|
|
this.movieCard(mv)
|
|||
|
|
}
|
|||
|
|
}, (mv: FbMovieItem): string => 'mv_' + mv.id.toString())
|
|||
|
|
}
|
|||
|
|
.columnsTemplate('1fr 1fr')
|
|||
|
|
.columnsGap(12)
|
|||
|
|
.rowsGap(12)
|
|||
|
|
.padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, bottom: 24 })
|
|||
|
|
.layoutWeight(1)
|
|||
|
|
.width('100%')
|
|||
|
|
.scrollBar(BarState.Off)
|
|||
|
|
.edgeEffect(EdgeEffect.Spring)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.width('100%')
|
|||
|
|
.height('100%')
|
|||
|
|
.backgroundColor(FbColors.paper)
|
|||
|
|
.alignItems(HorizontalAlign.Start)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/** 一张电影卡：海报位（2:3）+ 片名 + 元信息 + 同看的人 */
|
|||
|
|
@Builder
|
|||
|
|
movieCard(mv: FbMovieItem) {
|
|||
|
|
Column({ space: 0 }) {
|
|||
|
|
// 海报位：有海报就放图，没有就画占位（Web 端用「影」字占位，端上用图标）
|
|||
|
|
Stack({ alignContent: Alignment.Center }) {
|
|||
|
|
if (mv.hasPoster) {
|
|||
|
|
// TODO(接口)：接上 media.php 的海报地址后换掉这个纯色块
|
|||
|
|
Column()
|
|||
|
|
.width('100%')
|
|||
|
|
.height('100%')
|
|||
|
|
.linearGradient({
|
|||
|
|
angle: 145,
|
|||
|
|
colors: [[fbPalette(this.accent).brand2, 0.0], [fbPalette(this.accent).ink, 1.0]]
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
Column()
|
|||
|
|
.width('100%')
|
|||
|
|
.height('100%')
|
|||
|
|
.backgroundColor(FbColors.inputBg)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
Column({ space: 6 }) {
|
|||
|
|
Image($r('app.media.fb_ic_movies'))
|
|||
|
|
.width(mv.hasPoster ? 26 : 22)
|
|||
|
|
.height(mv.hasPoster ? 26 : 22)
|
|||
|
|
.renderMode(ImageRenderMode.Template)
|
|||
|
|
.fillColor(mv.hasPoster ? '#FFFFFFB3' : FbColors.faint)
|
|||
|
|
if (!mv.hasPoster) {
|
|||
|
|
Text(mv.title)
|
|||
|
|
.fontSize(FbMetric.fontSmall)
|
|||
|
|
.fontColor(FbColors.muted)
|
|||
|
|
.textAlign(TextAlign.Center)
|
|||
|
|
.maxLines(3)
|
|||
|
|
.padding({ left: 10, right: 10 })
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.width('100%')
|
|||
|
|
.aspectRatio(0.75)
|
|||
|
|
.clip(true)
|
|||
|
|
.borderRadius({ topLeft: FbMetric.radius, topRight: FbMetric.radius })
|
|||
|
|
|
|||
|
|
// 卡片正文
|
|||
|
|
Column({ space: 5 }) {
|
|||
|
|
Text(mv.title)
|
|||
|
|
.fontSize(FbMetric.fontSmall)
|
|||
|
|
.fontWeight(FontWeight.Medium)
|
|||
|
|
.fontColor(FbColors.ink)
|
|||
|
|
.maxLines(2)
|
|||
|
|
.textOverflow({ overflow: TextOverflow.Ellipsis })
|
|||
|
|
|
|||
|
|
Row({ space: 6 }) {
|
|||
|
|
Text(mv.watchedAt)
|
|||
|
|
.fontSize(10)
|
|||
|
|
.fontColor(FbColors.faint)
|
|||
|
|
.maxLines(1)
|
|||
|
|
.textOverflow({ overflow: TextOverflow.Ellipsis })
|
|||
|
|
}
|
|||
|
|
.width('100%')
|
|||
|
|
|
|||
|
|
if (mv.cinemaName.length > 0) {
|
|||
|
|
Row({ space: 4 }) {
|
|||
|
|
FbDot({ dia: 6, fillC: mv.cinemaColor })
|
|||
|
|
Text(mv.cinemaName)
|
|||
|
|
.fontSize(10)
|
|||
|
|
.fontColor(mv.cinemaColor)
|
|||
|
|
.maxLines(1)
|
|||
|
|
.textOverflow({ overflow: TextOverflow.Ellipsis })
|
|||
|
|
.layoutWeight(1)
|
|||
|
|
}
|
|||
|
|
.width('100%')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
Row({ space: 8 }) {
|
|||
|
|
if (mv.reviewCount > 0) {
|
|||
|
|
FbRating({ score: mv.rating, max: 10 })
|
|||
|
|
}
|
|||
|
|
Blank()
|
|||
|
|
// 同看的人（只出头像，空间紧）
|
|||
|
|
Row({ space: 2 }) {
|
|||
|
|
ForEach(mv.viewers.slice(0, 3), (v: FbKinChip) => {
|
|||
|
|
FbPersonChip({ name: v.shown, color: v.avatarColor, withText: false })
|
|||
|
|
.padding({ left: 0, right: 0 })
|
|||
|
|
}, (v: FbKinChip): string => 'vw_' + mv.id.toString() + '_' + v.id.toString())
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.width('100%')
|
|||
|
|
.alignItems(VerticalAlign.Center)
|
|||
|
|
}
|
|||
|
|
.width('100%')
|
|||
|
|
.padding(10)
|
|||
|
|
.alignItems(HorizontalAlign.Start)
|
|||
|
|
}
|
|||
|
|
.width('100%')
|
|||
|
|
.backgroundColor(FbColors.surface)
|
|||
|
|
.borderRadius(FbMetric.radius)
|
|||
|
|
.clip(true)
|
|||
|
|
}
|
|||
|
|
}
|