ImageAndTextPageComponent.ets
4.45 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
import { Action, ContentDetailDTO } from 'wdBean';
import DetailViewModel from '../viewmodel/DetailViewModel';
import { ImageAndTextWebComponent } from './ImageAndTextWebComponent';
import router from '@ohos.router';
@Component
export struct ImageAndTextPageComponent {
scroller: Scroller = new Scroller();
action: Action = {} as Action
@State detailData: ContentDetailDTO = {} as ContentDetailDTO
build() {
RelativeContainer() {
RelativeContainer() {
Text('2024年1月25日 9:45')
.fontColor($r('app.color.color_B0B0B0'))
.fontSize($r('app.float.font_size_13'))
.id('date')
.alignRules({ right: { anchor: "__container__", align: HorizontalAlign.End },
center:{anchor: "__container__", align:VerticalAlign.Center}})
Image($r('app.media.icon_ren_min_ri_bao'))
.width(70)
.height(28)
.alignRules({ left: { anchor: "__container__", align: HorizontalAlign.Start },
center:{anchor: "__container__", align:VerticalAlign.Center}})
}
.height(32)
.width('100%')
.id('image_text_detail_top')
.alignRules({ top: { anchor: "__container__", align: VerticalAlign.Top } })
Image($r('app.media.line'))
.width('100%')
.height(6)
.objectFit(ImageFit.Contain)
.id('image_text_detail_top_line')
.alignRules({ top: { anchor: "image_text_detail_top", align: VerticalAlign.Bottom } })
.margin({ top: 10 })
RelativeContainer() {
Image($r('app.media.icon_arrow_left'))
.width(24)
.height(24)
.id('back')
.alignRules({ left: { anchor: "__container__", align: HorizontalAlign.Start },
center: { anchor: "__container__", align: VerticalAlign.Center } })
.onClick((event: ClickEvent) => {
router.back()
})
Image($r('app.media.icon_forward'))
.width(24)
.height(24)
.id('forward')
.alignRules({ right: { anchor: "__container__", align: HorizontalAlign.End },
center: { anchor: "back", align: VerticalAlign.Center } })
Image($r('app.media.icon_listen'))
.width(24)
.height(24)
.margin({ right: 24 })
.id('listen')
.alignRules({ right: { anchor: "forward", align: HorizontalAlign.Start },
center: { anchor: "back", align: VerticalAlign.Center } })
Image($r('app.media.icon_star'))
.width(24)
.height(24)
.margin({ right: 24 })
.id('star')
.alignRules({ right: { anchor: "listen", align: HorizontalAlign.Start },
center: { anchor: "back", align: VerticalAlign.Center } })
Image($r('app.media.icon_comment'))
.width(24)
.height(24)
.margin({ right: 24 })
.id('comment')
.alignRules({ right: { anchor: "star", align: HorizontalAlign.Start },
center: { anchor: "back", align: VerticalAlign.Center } })
}
.width('100%')
.height(56)
.id('image_text_detail_bottom')
.alignRules({ bottom: { anchor: "__container__", align: VerticalAlign.Bottom } })
Scroll(this.scroller) {
Column() {
ImageAndTextWebComponent({ detailData: this.detailData, action: this.action })
}
.width('100%')
}
.scrollable(ScrollDirection.Vertical)
.scrollBar(BarState.Off)
.alignRules({ top: { anchor: "image_text_detail_top_line", align: VerticalAlign.Bottom },
bottom:{anchor: "image_text_detail_bottom", align: VerticalAlign.Top}})
.id('image_text_detail_content')
}
.width('100%')
.height('100%')
.padding({ left: 16, right: 16 })
.backgroundColor(Color.White)
}
async aboutToAppear() {
let contentId: string = ''
let relId: string = ''
let relType: string = ''
if (this.action && this.action.params) {
if (this.action.params.contentID) {
contentId = this.action.params.contentID;
}
if (this.action && this.action.params && this.action.params.extra) {
if (this.action.params.extra.relId) {
relId = this.action.params.extra.relId;
}
if (this.action.params.extra.relType) {
relType = this.action.params.extra.relType
}
}
let detailBean = await DetailViewModel.getDetailPageData(relId, contentId, relType)
this.detailData = detailBean;
}
}
aboutToDisappear() {
}
}