Card6Component.ets
3.38 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
import { ContentDTO } from 'wdBean';
import { CommonConstants, CompStyle } from 'wdConstant';
import { ProcessUtils } from 'wdRouter';
import { CardSourceInfo } from '../cardCommon/CardSourceInfo';
import { CardMediaInfo } from '../cardCommon/CardMediaInfo';
import { Notes } from './notes';
import { onlyWifiLoadImg } from '../../utils/lazyloadImg';
const TAG: string = 'Card6Component-Card13Component';
/**
* 卡片样式："appStyle":"6"以及13--- 小视频卡
*/
@Component
export struct Card6Component {
@State contentDTO: ContentDTO = new ContentDTO();
@State loadImg: boolean = false;
@State clicked: boolean = false;
async aboutToAppear(): Promise<void> {
this.loadImg = await onlyWifiLoadImg();
}
build() {
Row() {
Column() {
Column() {
// TODO 这个tag涉及样式问题。待优化。
// if (this.contentDTO.newTags) {
// Text(this.contentDTO.newTags)
// .backgroundColor($r('app.color.color_ED2800'))
// .borderRadius($r('app.float.button_border_radius'))
// .fontColor($r('app.color.color_fff'))
// .fontSize($r('app.float.font_size_12'))
// .padding(2)
// .margin({ right: 2 })
// }
Stack() {
if (this.contentDTO.newTags) {
Notes({ newTags: this.contentDTO.newTags })
} else if (this.contentDTO.objectType == '5') {
Notes({ objectType: this.contentDTO.objectType })
}
Text(`${this.contentDTO.newsTitle}`)
.fontColor(this.clicked ? 0x848484 : 0x222222)
.fontSize(16)
.lineHeight(24)
.fontWeight(FontWeight.Normal)
.maxLines(3)
.alignSelf(ItemAlign.Start)
.textOverflow({ overflow: TextOverflow.Ellipsis })// 超出的部分显示省略号。
.textIndent(this.contentDTO.newTags?.length < 5 && this.contentDTO.newTags?.length > 2 ? 58 :
(this.contentDTO.newTags?.length != 0 && this.contentDTO.newTags?.length) ||
this.contentDTO.objectType == '5' ? 30 : 0)
}.alignContent(Alignment.TopStart)
}.height("80%")
.justifyContent(FlexAlign.Start)
//bottom 评论等信息
CardSourceInfo({ contentDTO: this.contentDTO })
}
.alignItems(HorizontalAlign.Start)
.justifyContent(FlexAlign.Start)
.width('58%')
Stack() {
Image(this.loadImg ? this.contentDTO.coverUrl : '')
.backgroundColor(this.loadImg ? $r('app.color.color_B0B0B0') : 0xf5f5f5)
.borderRadius(5)
.aspectRatio(this.contentDTO.appStyle === CompStyle.Card_13 ? 3 / 2 : 3 / 4)
.height(this.contentDTO.appStyle === CompStyle.Card_13 ? 78 : 156)
CardMediaInfo({ contentDTO: this.contentDTO })
}
.alignContent(Alignment.BottomEnd)
}
.onClick((event: ClickEvent) => {
this.clicked = true;
ProcessUtils.processPage(this.contentDTO)
})
.padding({
left: $r('app.float.card_comp_pagePadding_lf'),
right: $r('app.float.card_comp_pagePadding_lf'),
top: $r('app.float.card_comp_pagePadding_tb'),
bottom: $r('app.float.card_comp_pagePadding_tb')
})
.width(CommonConstants.FULL_WIDTH)
.height(this.contentDTO.appStyle === CompStyle.Card_13 ? 127 : 217)
.justifyContent(FlexAlign.SpaceBetween)
}
}