CardMediaInfo.ets
6.37 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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
import { ContentDTO, joinPeopleNum } from 'wdBean/Index'
import { DateTimeUtils } from 'wdKit/Index'
import { LottieView } from '../../components/lottie/LottieView';
import { LiveModel } from '../../viewmodel/LiveModel'
import font from '@ohos.font';
/**
* 这里是样式卡中,右下角显示的音视频信息
* 目前已知:
* 音频: 音频图标+时长
* 视频:点播图标+时长;直播图标+'直播中'
*/
@Component
export struct CardMediaInfo {
@State contentDTO: ContentDTO = new ContentDTO() // 如果有duraion,代表点播,显示时长;如果不传或者传0,显示直播中
@State joinPeopleNum: number = 0;
// objectType 0:不跳转 1:点播,2:直播,3:活动,4:广告,5:专题,6:链接,7:榜单,8:图文,9:组图,10:H5新闻,11:频道,12:组件,13:音频,
// 14动态图文,15动态视频16问政;100人民号,101标签
aboutToAppear(): void {
this.getJoinPeopleNum();
font.registerFont({
familyName: 'BebasNeue',
familySrc: $rawfile('font/BebasNeue.ttf')
})
}
/**
* 全域数字显示规则
* 1、当数量为千位以內时,显示数字,不保留小数点,比如 4585
* 2、当数量为万位~1亿时,显示xx 万,保留小数点后一位,比如1517.9w、2.9w
* 3、当数量为1亿~千亿时,显示XX 亿,保留小数点后一位,比如1517.9亿、2.9亿
* 4、不进行四舍五入
* 5、0 和空 不显示
*/
handlerNum(number: string) {
const num = number??'0';
if (Number.parseInt(num) <= 9999) {
return Number.parseInt(num).toString()
} else if (Number.parseInt(num) > 9999 && Number.parseInt(num) <= 99999999) {
const num1: string = num.slice(0, -4); // 万
const num2: string = num.slice(-4, -3); // 千
return num2 === '0' ? num1 +'万' : num1 + '.' + num2 + '万'
} else if (Number.parseInt(num) > 99999999) {
const num1: string = num.slice(0, -8); // 亿
const num2: string = num.slice(-8, -7);
return num2 === '0' ? num1 +'亿' : num1 + '.' + num2 + '亿'
}
return num
}
//
/**
* 获取直播节目参与人数
*/
async getJoinPeopleNum() {
if (this.contentDTO.objectType !== '2') return;
console.log('getJoinPeopleNum-ContentDTO', JSON.stringify(this.contentDTO.objectId))
let liveIdList: string = this.contentDTO.objectId
let data: joinPeopleNum[] = await LiveModel.getJoinPeopleNum(liveIdList)
this.joinPeopleNum = data[0].pv;
}
build() {
Row() {
if (this.contentDTO?.objectType === '1' || this.contentDTO?.objectType === '15') {
// 点播、动态视频
Row() {
Image($r('app.media.card_play'))
.mediaLogo()
if (this.contentDTO.videoInfo != null) {
Text(DateTimeUtils.getFormattedDuration(this.contentDTO.videoInfo.videoDuration * 1000))
.mediaText()
.fontFamily('BebasNeue')
}
}
} else if (this.contentDTO.objectType === '2') {
// liveInfo.liveState 直播新闻-直播状态 wait待开播running直播中end已结束cancel已取消paused暂停
// 显示直播信息
Row() {
if (this.contentDTO?.liveInfo?.liveState === 'wait') {
Image($r('app.media.card_wait'))
.mediaLogo()
Text('预约')
.mediaText()
} else if (this.contentDTO?.liveInfo?.liveState === 'running') {
LottieView({
name: 'live_status_wait',
path: "lottie/live_detail_living.json",
lottieWidth: 14,
lottieHeight: 14,
autoplay: true,
loop: true,
})
.margin({
right: '2vp'
})
// Image($r('app.media.card_live'))
// .mediaLogo()
Text('直播中')
.mediaText()
} else if (this.contentDTO?.liveInfo?.liveState === 'end' && this.contentDTO?.liveInfo?.replayUri) {
Image($r('app.media.card_play'))
.mediaLogo()
Text('回看')
.mediaText()
}else if(this.contentDTO?.liveInfo?.liveState === 'end' && !this.contentDTO?.liveInfo
?.replayUri){
Text('已结束')
.mediaText()
}
if (!!this.joinPeopleNum) {
Text(' | ')
.mediaText()
Text(`${this.handlerNum(this.joinPeopleNum.toString())}人参加`)
.mediaText()
}
// } else if (this.contentDTO?.liveInfo?.liveState === 'end' && this.contentDTO?.liveInfo
// ?.replayUri) {
// // Image($r('app.media.card_live'))
// // .mediaLogo()
// Text('直播结束')
// .mediaText()
// }
}
} else if (this.contentDTO.objectType === '9') {
// 显示组图;图片数量
Row() {
Image($r('app.media.card_image'))
.mediaLogo()
Text(`${this.contentDTO.photoNum}`)
.mediaTextImgtype()
}
.margin({ left: 80,top: 55})
} else if (this.contentDTO.objectType === '13') {
// 显示音频信息
Row() {
Image($r('app.media.card_audio'))
.mediaLogo()
Text(DateTimeUtils.getFormattedDuration(this.contentDTO.voiceInfo.voiceDuration * 1000))
.mediaText()
.fontFamily('BebasNeue')
}
} else if (this.contentDTO.objectType === '4') {//广告标签
Text($r('app.string.comp_advertisement'))
.fontSize('10fp')
.fontColor($r('app.color.white'))
.width(28)
.height(16)
.backgroundColor('#4D000000')
.borderRadius(3)
.textAlign(TextAlign.Center)
}
}
.margin(6)
}
@Styles
mediaLogo() {
.width(14)
.height(14)
.margin({ right: 3 })
}
@Styles
mediaLogo2() {
.width(14)
.height(14)
.margin({ top:5,right:5 })
}
}
@Extend(Text)
function mediaText() {
.fontColor($r('app.color.color_fff'))
.fontSize($r('app.float.font_size_14'))
.lineHeight(18)
.textShadow({
radius: 2,
color: 'rgba(0,0,0,0.3)',
offsetY: 2
})
}
@Extend(Text)
function mediaTextImgtype() {
.fontColor($r('app.color.color_fff'))
.fontSize($r('app.float.font_size_13'))
.lineHeight(18)
.textShadow({
radius: 2,
color: 'rgba(0,0,0,0.3)',
offsetY: 2
})
}