Card14Component.ets
3.92 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
import { ContentDTO } from 'wdBean';
import { RmhTitle } from '../cardCommon/RmhTitle'
import { CardMediaInfo } from '../cardCommon/CardMediaInfo'
import { CommonConstants } from 'wdConstant/Index';
import { ProcessUtils } from 'wdRouter';
const TAG = 'Card14Component';
/**
* 人民号-动态---14：人民号单图卡；
*/
@Component
export struct Card14Component {
@State contentDTO: ContentDTO = {
appStyle: '20',
coverType: 1,
coverUrl: 'https://rmrbcmsonline.peopleapp.com/upload/user_app/gov_dynamic/video/default_image/202105/rmrb_default_image_4GdWrgSw1622451312.jpg?x-oss-process=image/resize,m_fill,h_480,w_360/quality,q_90',
fullColumnImgUrls: [
{
landscape: 1,
size: 1,
url: 'https://rmrbcmsonline.peopleapp.com/upload/user_app/gov_dynamic/video/default_image/202105/rmrb_default_image_4GdWrgSw1622451312.jpg?x-oss-process=image/resize,m_fill,h_480,w_360/quality,q_90',
weight: 1600
}
],
newsTitle: '好玩！》好玩！》好玩！》好玩！》好玩！》好玩！》好玩！》好玩！》好玩！》好玩！》好玩！》好玩！》好玩！》好玩！》好玩！》好玩！》好玩！》好玩！》好玩！》好玩！》好玩！》好玩！》好玩！》好玩！》好玩！》好玩！》好玩！》好玩！》好玩！》好玩！》好玩！》',
rmhInfo: {
authIcon:
'https://cdnjdphoto.aikan.pdnews.cn/creator-category/icon/auth/yellow.png',
authTitle: '10后音乐人王烁然个人人民号',
authTitle2: '10后音乐人王烁然个人人民号',
banControl: 0,
cnIsAttention: 1,
rmhDesc: '10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人',
rmhHeadUrl: 'https://cdnjdphoto.aikan.pdnews.cn/image/creator/rmh/20221031/3d3419e86a.jpeg?x-oss-process=image/resize,l_100/auto-orient,1/quality,q_90/format,jpg',
rmhName: '王烁然',
userId: '522435359667845',
userType: '2'
},
objectType: '1',
videoInfo: {
firstFrameImageUri: '',
videoDuration: 37,
videoUrl: 'https://rmrbcmsonline.peopleapp.com/upload/user_app/gov_dynamic/video/mp4/202105/rmrb_GSNARt6P1622451310.mp4'
}
} as ContentDTO;
aboutToAppear(): void {
}
build() {
Column() {
// rmh信息
if (this.contentDTO.rmhInfo) {
RmhTitle({ rmhInfo: this.contentDTO.rmhInfo, publishTime: this.contentDTO.publishTime })
}
// 左标题，右图
Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween }) {
Text(this.contentDTO.newsTitle)
.fontSize($r('app.float.font_size_17'))
.fontColor($r('app.color.color_222222'))
.textOverflowStyle(3)
.lineHeight(25)
.fontFamily('PingFang SC-Regular')
.textAlign(TextAlign.Start)
// .flexBasis('auto')
.margin({right: 12})
.flexBasis(214)
Image(this.contentDTO.coverUrl)
.flexBasis(117)
.height(78)
.borderRadius($r('app.float.image_border_radius'))
// .flexBasis(160)
.backgroundImageSize(ImageSize.Auto)
}
.width(CommonConstants.FULL_WIDTH)
.margin({ bottom: 8 })
.height(75)
//TODO 底部的：分享、评论、点赞 功能；需要引用一个公共组件
}
.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')
})
.onClick((event: ClickEvent) => {
ProcessUtils.processPage(this.contentDTO)
})
}
}
interface radiusType {
topLeft: number | Resource;
topRight: number | Resource;
bottomLeft: number | Resource;
bottomRight: number | Resource;
}
@Extend(Text)
function textOverflowStyle(maxLine: number) {
.maxLines(maxLine)
.textOverflow({ overflow: TextOverflow.Ellipsis })
}