Card4Component.ets
4.99 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
145
146
147
148
import { ContentDTO, FullColumnImgUrlDTO } from 'wdBean';
import { CommonConstants } from 'wdConstant/Index';
import { ProcessUtils } from '../../utils/ProcessUtils';
import { DateTimeUtils } from 'wdKit/Index';
const TAG: string = 'Card4Component';
/**
* 三图卡:
* compstyle:4
* 卡片结构：上下结构
* 卡片宽度:充满父窗口
* 卡片高度,仅包含横板图片：图片高度由图片的宽度及宽高比决定，图片宽度占父窗口'100%'，宽高比为16:9:
*/
@Component
export struct Card4Component {
@State contentDTO: ContentDTO = {
// appStyle: '4',
// fullColumnImgUrls: [
// {
// format: null,
// fullUrl: '',
// height: 187,
// landscape: 1,
// size: 1,
// url: 'https://rmrbcmsonline.peopleapp.com/upload/article_resource/image/1648118198_0c20f7c31c7b4eca6b0d0871e7771c62.png?x-oss-process=image/resize,m_fill,h_160,w_240/quality,q_90',
// weight: 248
// },
// {
// format: null,
// fullUrl: '',
// height: 187,
// landscape: 1,
// size: 1,
// url: 'https://rmrbcmsonline.peopleapp.com/upload/article_resource/image/1648118198_0c20f7c31c7b4eca6b0d0871e7771c62.png?x-oss-process=image/resize,m_fill,h_160,w_240/quality,q_90',
// weight: 248
// },
// {
// format: null,
// fullUrl: '',
// height: 187,
// landscape: 1,
// size: 1,
// url: 'https://rmrbcmsonline.peopleapp.com/upload/article_resource/image/1648118200_d10309bee894a67311e6c8f77df676d4.png?x-oss-process=image/resize,m_fill,h_160,w_240/quality,q_90',
// weight: 248
// },
// {
// format: null,
// fullUrl: '',
// height: 187,
// landscape: 1,
// size: 1,
// url: 'https://rmrbcmsonline.peopleapp.com/upload/article_resource/image/1648118202_f33743e452fb69ee2c45c18a56eccdf6.png?x-oss-process=image/resize,m_fill,h_160,w_240/quality,q_90',
// weight: 248
// }
// ],
// newsTitle: '科普：如何发现家中是否有白蚁危害？丨又到白蚁分飞季②',
// rmhInfo: {
// authIcon:
// 'https://cdnjdphoto.aikan.pdnews.cn/creator-category/icon/auth/blue.png',
// authTitle: '封面新闻',
// rmhDesc: '封面新闻，亿万年轻人的生活方式。',
// rmhHeadUrl:
// 'https://cdnjdphoto.aikan.pdnews.cn/image/creator/rmh/20221212/122faff796.jpeg?x-oss-process=image/resize,l_100/auto-orient,1/quality,q_90/format,jpg',
// rmhId: '2016608',
// rmhName: '封面新闻',
// userId: '522390888224390',
// userType: '2'
// },
// source: '头条号',
// publishTime: '1651204607000',
} as ContentDTO;
build() {
Column() {
//body
Column() {
//新闻标题
Text(this.contentDTO.newsTitle)
.fontSize($r('app.float.font_size_17'))
.fontColor($r('app.color.color_222222'))
.maxLines(3)
.textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出的部分显示省略号。
//三图
Row() {
GridRow({ gutter: 2 }) {
ForEach(this.contentDTO.fullColumnImgUrls, (item: FullColumnImgUrlDTO, index: number) => {
if (index < 3) {
GridCol({ span: { xs: 4 } }) {
Image(item.url)
.width('100%')
.aspectRatio(113 / 75)
.borderRadius({
topLeft: index === 0 ? $r('app.float.image_border_radius') : 0,
topRight: index === 2 ? $r('app.float.image_border_radius') : 0,
bottomLeft: index === 0 ? $r('app.float.image_border_radius') : 0,
bottomRight: index === 2 ? $r('app.float.image_border_radius') : 0,
})
}
}
})
}
}
.width('100%')
.margin({ top: 8 })
}
.width('100%')
.justifyContent(FlexAlign.Start)
.alignItems(HorizontalAlign.Start)
.onClick((event: ClickEvent) => {
ProcessUtils.processPage(this.contentDTO)
})
//bottom
Row() {
Text(this.contentDTO.source)
.bottomTextStyle()
//间隔点
Image($r('app.media.point'))
.width(12)
.height(12)
Text(DateTimeUtils.getCommentTime(Number.parseFloat(this.contentDTO.publishTime)))
.bottomTextStyle()
// TODO 评论字段取值
// Text('518条评论')
// .bottomTextStyle()
}
.width('100%')
.justifyContent(FlexAlign.Start)
.margin({ top: 8 })
}
.width(CommonConstants.FULL_WIDTH)
.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')
})
}
}
@Extend(Text)
function bottomTextStyle() {
.fontSize(12)
.fontColor('#B0B0B0')
}