developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
wangyong_wd
3dc5cd78 1 parent 94b378f4

优化样式卡右下角展示组件：类型为点播、直播、组图、音频

Inline Side-by-side
Showing 3 changed files with 85 additions and 39 deletions
... ... @@ -62,9 +62,11 @@ export interface ContentDTO {
// 二次请求接口，返回的数据，这里组装到content里；
interactData:InteractDataDTO;
hasMore: number,
slideShows: slideShows[],
voiceInfo: VoiceInfoDTO,
tagWord: number,
rmhInfo: RmhInfoDTO, // 人民号信息
hasMore: number;
slideShows: slideShows[];
voiceInfo: VoiceInfoDTO;
tagWord: number;
rmhInfo: RmhInfoDTO; // 人民号信息
photoNum: string;
}
\ No newline at end of file
... ...
import { ContentDTO } from 'wdBean/Index'
import { DateTimeUtils } from 'wdKit/Index'
/**
... ... @@ -6,35 +7,81 @@ import { DateTimeUtils } from 'wdKit/Index'
* 音频： 音频图标+时长
* 视频：点播图标+时长；直播图标+'直播中'
*/
@Preview
@Component
export struct CardMediaInfo {
@State duration: number = 0 // 如果有duraion，代表点播，显示时长；如果不传或者传0，显示直播中
@State mediaType: string = 'video' // audio: 音频；video: 视频
@State contentDTO: ContentDTO = {} as ContentDTO // 如果有duraion，代表点播，显示时长；如果不传或者传0，显示直播中
// objectType 0:不跳转 1:点播,2:直播,3:活动,4:广告,5:专题,6:链接,7:榜单,8:图文,9:组图,10:H5新闻,11:频道,12:组件,13:音频,
// 14动态图文,15动态视频16问政；100人民号,101标签
build() {
Row() {
if (this.mediaType === 'audio') {
Image($r('app.media.broadcast_listen'))
.height(14)
.borderRadius($r('app.float.button_border_radius'))
} else {
Image(this.duration ? $r('app.media.videoTypeIcon') : $r('app.media.icon_live'))
.width(22)
.height(18)
.borderRadius($r('app.float.button_border_radius'))
if(this.contentDTO.objectType === '1') {
// 显示点播
Row(){
Image($r('app.media.videoTypeIcon'))
.width(22)
.height(18)
.borderRadius($r('app.float.button_border_radius'))
Text(DateTimeUtils.getFormattedDuration(this.contentDTO.videoInfo.videoDuration * 1000))
.fontColor($r('app.color.color_fff'))
.fontSize($r('app.float.font_size_12'))
.width(40)
.height(18)
.textAlign(TextAlign.Center)
.margin({ left: -3 })
}
.backgroundColor('#4d000000')
.borderRadius($r('app.float.button_border_radius'))
} else if(this.contentDTO.objectType === '2') {
// 显示直播信息
Row(){
Image($r('app.media.icon_live'))
.width(22)
.height(18)
.borderRadius($r('app.float.button_border_radius'))
Text('直播中')
.fontColor($r('app.color.color_fff'))
.fontSize($r('app.float.font_size_12'))
.width(40)
.height(18)
.textAlign(TextAlign.Center)
.margin({ left: -3 })
}
.backgroundColor('#4d000000')
.borderRadius($r('app.float.button_border_radius'))
} else if(this.contentDTO.objectType === '9') {
// 显示组图；图片数量
Row(){
Image($r('app.media.album_card_shape'))
.width(22)
.height(18)
.borderRadius($r('app.float.button_border_radius'))
Text(this.contentDTO.photoNum)
.fontColor($r('app.color.color_fff'))
.fontSize($r('app.float.font_size_12'))
.width(20)
.height(18)
.textAlign(TextAlign.Center)
.margin({ left: -3 })
}
.backgroundColor('#4d000000')
.borderRadius($r('app.float.button_border_radius'))
} else if(this.contentDTO.objectType === '13') {
// 显示音频信息
Row(){
Image($r('app.media.broadcast_listen'))
.height(14)
.borderRadius($r('app.float.button_border_radius'))
Text(DateTimeUtils.getFormattedDuration(this.contentDTO.voiceInfo.voiceDuration * 1000))
.fontColor($r('app.color.color_fff'))
.fontSize($r('app.float.font_size_12'))
.width(40)
.height(18)
.textAlign(TextAlign.Center)
.margin({ left: -3 })
}
}
Text(this.duration ? DateTimeUtils.getFormattedDuration(this.duration * 1000) : '直播中')
.fontColor($r('app.color.color_fff'))
.fontSize($r('app.float.font_size_12'))
.width(40)
.height(18)
.textAlign(TextAlign.Center)
.margin({ left: -3 })
}
.backgroundColor(this.mediaType === 'audio' ? '': '#4d000000')
.borderRadius($r('app.float.button_border_radius'))
.margin(6)
}
}
\ No newline at end of file
... ...
import { ContentDTO } from 'wdBean';
import { ContentDTO } from 'wdBean';
import { RmhTitle } from '../cardCommon/RmhTitle'
import { CardMediaInfo } from '../cardCommon/CardMediaInfo'
import { CommonConstants } from 'wdConstant/Index';
... ... @@ -38,6 +37,7 @@ export struct Card20Component {
// userId: '522435359667845',
// userType: '2'
// },
// objectType: '1',
// videoInfo: {
// firstFrameImageUri: '',
// videoDuration: 37,
... ... @@ -45,12 +45,13 @@ export struct Card20Component {
// }
} as ContentDTO;
aboutToAppear(): void {}
aboutToAppear(): void {
}
build() {
Column() {
// rmh信息
RmhTitle({rmhInfo: this.contentDTO.rmhInfo})
RmhTitle({ rmhInfo: this.contentDTO.rmhInfo })
// 标题
if (this.contentDTO.newsTitle) {
Text(this.contentDTO.newsTitle)
... ... @@ -60,7 +61,7 @@ export struct Card20Component {
.textOverflowStyle(2)
.margin({ bottom: 8 })
}
if(this.contentDTO.fullColumnImgUrls[0]) {
if (this.contentDTO.fullColumnImgUrls[0]) {
createImg({ contentDTO: this.contentDTO })
}
//TODO 底部的：分享、评论、点赞 功能；需要引用一个公共组件
... ... @@ -95,11 +96,9 @@ struct createImg {
Stack() {
Image(this.contentDTO.coverUrl)
.width(CommonConstants.FULL_WIDTH)
.aspectRatio(16/9)
.aspectRatio(16 / 9)
.borderRadius($r('app.float.image_border_radius'))
CardMediaInfo({
duration: this.contentDTO.videoInfo.videoDuration, mediaType: 'video'
})
CardMediaInfo({ contentDTO: this.contentDTO })
}
.align(Alignment.BottomEnd)
}
... ... @@ -112,9 +111,7 @@ struct createImg {
Image(this.contentDTO.coverUrl)
.width(CommonConstants.FULL_WIDTH)
.borderRadius($r('app.float.image_border_radius'))
CardMediaInfo({
duration: this.contentDTO.videoInfo.videoDuration, mediaType: 'video'
})
CardMediaInfo({ contentDTO: this.contentDTO })
}
.align(Alignment.BottomEnd)
}
... ...