Card9Component.ets
4.44 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
135
136
137
138
139
140
141
142
143
144
import { ContentDTO, slideShows } from 'wdBean';
import { CommonConstants } from 'wdConstant'
import { DateTimeUtils } from 'wdKit';
import { ProcessUtils } from '../../utils/ProcessUtils';
/**
* 时间链卡--CompStyle: 09
*/
const TAG: string = 'Card9Component';
@Component
export struct Card9Component {
@State contentDTO: ContentDTO = {} as ContentDTO;
build() {
Column() {
// 顶部标题，最多两行
if (this.contentDTO.newsTitle) {
Text(this.contentDTO.newsTitle)
.width(CommonConstants.FULL_WIDTH)
.fontSize($r('app.float.font_size_17'))
.fontWeight(600)
.maxLines(2)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.margin({ bottom: 19 })
}
// 大图
Stack() {
Image(this.contentDTO.coverUrl)
.width('100%')
.borderRadius({
topLeft: $r('app.float.image_border_radius'),
topRight: $r('app.float.image_border_radius')
})
Text('专题')
.fontSize($r('app.float.font_size_12'))
.padding({ left: 8, right: 8, top: 3, bottom: 3 })
.backgroundColor(Color.Red)
.fontColor(Color.White)
.borderRadius($r('app.float.button_border_radius'))
.margin({ left: 5, bottom: 5 })
}.alignContent(Alignment.BottomStart)
// 时间线--后端返回三个，
Column() {
ForEach(this.contentDTO.slideShows, (item: slideShows, index: number) => {
this.timelineItem(item, index)
})
}
// 底部-查看更多。根据接口返回的isMore判断是否显示查看更多
if (this.contentDTO.hasMore == 1) {
Row() {
Text("查看更多")
.fontSize($r("app.float.font_size_14"))
.fontColor($r("app.color.color_222222"))
.margin({ right: 1 })
Image($r("app.media.more"))
.width(14)
.height(14)
}
.backgroundColor($r('app.color.color_F5F5F5'))
.width(CommonConstants.FULL_WIDTH)
.height(40)
.borderRadius($r('app.float.button_border_radius'))
.justifyContent(FlexAlign.Center)
.margin({ top: 5 })
}
}
.width(CommonConstants.FULL_WIDTH)
.padding({
top: 14,
left: 16,
right: 16,
bottom: 14
})
.backgroundColor($r("app.color.white"))
.margin({ bottom: 8 })
.onClick((event: ClickEvent) => {
ProcessUtils.processPage(this.contentDTO)
})
}
@Builder
timelineItem(item: slideShows, index: number) {
Column() {
Stack() {
if (index < this.contentDTO.slideShows.length - 1) {
Divider()
.vertical(true)
.color($r('app.color.color_EDEDED'))
.strokeWidth(1)
.margin({ top: index > 0 ? 0 : 16, left: 4 })
}
if (index > 0 && index == this.contentDTO.slideShows.length - 1) {
Divider()
.vertical(true)
.color($r('app.color.color_EDEDED'))
.strokeWidth(1)
.height(16)
.margin({ left: 4 })
}
Column() {
Row() {
// 标题
Image($r("app.media.point_icon"))
.width(9)
.height(9)
.margin({ right: 5 })
Text(DateTimeUtils.formatDate(item.publishTime, "MM月dd日 HH:mm"))
.fontSize($r('app.float.font_size_12'))
.fontColor($r('app.color.color_222222'))
.fontWeight(600)
}
.width(CommonConstants.FULL_WIDTH)
.height(32)
.alignItems(VerticalAlign.Center)
Row() {
Text(item.newsTitle)
.fontSize($r('app.float.font_size_17'))
.fontWeight(400)
.fontColor($r('app.color.color_222222'))
.layoutWeight(1)
.maxLines(2)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.alignSelf(ItemAlign.Center)
.margin({ left: 12 })
if (item.fullColumnImgUrls[0] && item.fullColumnImgUrls[0].url) {
Image(item.fullColumnImgUrls[0].url)
.width(90)
.height(60)
.borderRadius($r('app.float.image_border_radius'))
}
}
}
}
.alignContent(Alignment.TopStart)
}
.height(item.fullColumnImgUrls[0] && item.fullColumnImgUrls[0].url ? 100 : 78)
.alignItems(HorizontalAlign.Start)
}
}