AlbumCardComponent.ets
3.8 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
import { CompDTO } from 'wdBean'
import { DateTimeUtils, Logger } from 'wdKit';
const TAG = 'AlbumCardComponent';
@Preview
@Component
export struct AlbumCardComponent {
@State compDTO: CompDTO = {} as CompDTO
aboutToAppear() {
Logger.debug(TAG + "" + JSON.stringify(this.compDTO.operDataList));
}
build() {
Column({ space: 8 }) {
Text(this.compDTO.operDataList[0].newsTitle)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.fontSize(17)
.fontColor(0x222222)
.lineHeight(25)
.maxLines(3)
.margin({ top: 6,
left: 16,
right: 16 })
.width(343)
RelativeContainer() {
Image(this.compDTO.operDataList[0].fullColumnImgUrls[0].url)
.width(229)
.height(154)
.alignRules({
top: { anchor: "__container__", align: VerticalAlign.Top },
left: { anchor: "__container__", align: HorizontalAlign.Start }
})
.id('mainImage')
Image(this.compDTO.operDataList[0].fullColumnImgUrls[1].url)
.width(112)
.height(76)
.alignRules({
top: { anchor: "__container__", align: VerticalAlign.Top },
right: { anchor: "__container__", align: HorizontalAlign.End }
})
.id('subTopImage')
Image(this.compDTO.operDataList[0].fullColumnImgUrls[2].url)
.width(112)
.height(76)
.alignRules({
right: { anchor: "__container__", align: HorizontalAlign.End },
bottom: { anchor: "__container__", align: VerticalAlign.Bottom }
})
.id('subBottomImage')
Shape() {
Rect().width(33).height(18)
}
// .viewPort({ x: -2, y: -2, width: 304, height: 130 })
.fill(0x000000)
.fillOpacity(0.3)
// .strokeDashArray([20])
// .strokeDashOffset(10)
.strokeLineCap(LineCapStyle.Round)
.strokeLineJoin(LineJoinStyle.Round)
.antiAlias(true)
.id('shape')
.alignRules({
right: { anchor: "__container__", align: HorizontalAlign.End },
bottom: { anchor: "__container__", align: VerticalAlign.Bottom }
})
.margin({ right: 4,
bottom: 4 })
Image($r('app.media.album_card_shape'))
.width(22)
.height(18)
.alignRules({
left: { anchor: "shape", align: HorizontalAlign.Start },
top: { anchor: "shape", align: VerticalAlign.Top }
})
.id('shapeSubImage')
Text(this.compDTO.operDataList[0].fullColumnImgUrls.length + '')
.fontSize(13)
.fontColor(0xFFFFFF)
.id('pageIndex')
.alignRules({
right: { anchor: "shape", align: HorizontalAlign.End },
top: { anchor: "shape", align: VerticalAlign.Top }
})
.margin({ right: 2 })
.textAlign(TextAlign.Center)
.width(17)
.height(17)
}
.width(343)
.height(154)
Row() {
if (this.compDTO.operDataList[0].source) {
Text(this.compDTO.operDataList[0].source)
.fontSize(13)
.fontColor(0xB0B0B0)
Image($r('app.media.point'))
.width(16)
.height(16)
}
if (this.compDTO.operDataList[0].publishTime && this.compDTO.operDataList[0].publishTime.length === 13) {
Text(DateTimeUtils.getCommentTime(Number.parseFloat(this.compDTO.operDataList[0].publishTime)))
.fontSize(13)
.fontColor(0xB0B0B0)
}
Text('328评')
.fontSize(13)
.fontColor(0xB0B0B0)
.margin({
left: 6
})
}.margin({ left: 24 })
.width(375)
.height(16)
.id('label')
}
.width(375)
// .backgroundColor(0x000000)
}
}