wangyong_wd

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

@@ -62,9 +62,11 @@ export interface ContentDTO { @@ -62,9 +62,11 @@ export interface ContentDTO {
62 // 二次请求接口,返回的数据,这里组装到content里; 62 // 二次请求接口,返回的数据,这里组装到content里;
63 interactData:InteractDataDTO; 63 interactData:InteractDataDTO;
64 64
65 - hasMore: number,  
66 - slideShows: slideShows[],  
67 - voiceInfo: VoiceInfoDTO,  
68 - tagWord: number,  
69 - rmhInfo: RmhInfoDTO, // 人民号信息 65 + hasMore: number;
  66 + slideShows: slideShows[];
  67 + voiceInfo: VoiceInfoDTO;
  68 + tagWord: number;
  69 + rmhInfo: RmhInfoDTO; // 人民号信息
  70 + photoNum: string;
  71 +
70 } 72 }
  1 +import { ContentDTO } from 'wdBean/Index'
1 import { DateTimeUtils } from 'wdKit/Index' 2 import { DateTimeUtils } from 'wdKit/Index'
2 3
3 /** 4 /**
@@ -6,26 +7,39 @@ import { DateTimeUtils } from 'wdKit/Index' @@ -6,26 +7,39 @@ import { DateTimeUtils } from 'wdKit/Index'
6 * 音频: 音频图标+时长 7 * 音频: 音频图标+时长
7 * 视频:点播图标+时长;直播图标+'直播中' 8 * 视频:点播图标+时长;直播图标+'直播中'
8 */ 9 */
9 -@Preview  
10 @Component 10 @Component
11 export struct CardMediaInfo { 11 export struct CardMediaInfo {
12 - @State duration: number = 0 // 如果有duraion,代表点播,显示时长;如果不传或者传0,显示直播中  
13 - @State mediaType: string = 'video' // audio: 音频;video: 视频 12 + @State contentDTO: ContentDTO = {} as ContentDTO // 如果有duraion,代表点播,显示时长;如果不传或者传0,显示直播中
  13 + // objectType 0:不跳转 1:点播,2:直播,3:活动,4:广告,5:专题,6:链接,7:榜单,8:图文,9:组图,10:H5新闻,11:频道,12:组件,13:音频,
  14 + // 14动态图文,15动态视频16问政;100人民号,101标签
14 15
15 build() { 16 build() {
16 Row() { 17 Row() {
17 - if (this.mediaType === 'audio') {  
18 - Image($r('app.media.broadcast_listen'))  
19 - .height(14)  
20 - .borderRadius($r('app.float.button_border_radius'))  
21 - } else {  
22 - Image(this.duration ? $r('app.media.videoTypeIcon') : $r('app.media.icon_live')) 18 + if(this.contentDTO.objectType === '1') {
  19 + // 显示点播
  20 + Row(){
  21 + Image($r('app.media.videoTypeIcon'))
23 .width(22) 22 .width(22)
24 .height(18) 23 .height(18)
25 .borderRadius($r('app.float.button_border_radius')) 24 .borderRadius($r('app.float.button_border_radius'))
  25 + Text(DateTimeUtils.getFormattedDuration(this.contentDTO.videoInfo.videoDuration * 1000))
  26 + .fontColor($r('app.color.color_fff'))
  27 + .fontSize($r('app.float.font_size_12'))
  28 + .width(40)
  29 + .height(18)
  30 + .textAlign(TextAlign.Center)
  31 + .margin({ left: -3 })
26 } 32 }
27 -  
28 - Text(this.duration ? DateTimeUtils.getFormattedDuration(this.duration * 1000) : '直播中') 33 + .backgroundColor('#4d000000')
  34 + .borderRadius($r('app.float.button_border_radius'))
  35 + } else if(this.contentDTO.objectType === '2') {
  36 + // 显示直播信息
  37 + Row(){
  38 + Image($r('app.media.icon_live'))
  39 + .width(22)
  40 + .height(18)
  41 + .borderRadius($r('app.float.button_border_radius'))
  42 + Text('直播中')
29 .fontColor($r('app.color.color_fff')) 43 .fontColor($r('app.color.color_fff'))
30 .fontSize($r('app.float.font_size_12')) 44 .fontSize($r('app.float.font_size_12'))
31 .width(40) 45 .width(40)
@@ -33,8 +47,41 @@ export struct CardMediaInfo { @@ -33,8 +47,41 @@ export struct CardMediaInfo {
33 .textAlign(TextAlign.Center) 47 .textAlign(TextAlign.Center)
34 .margin({ left: -3 }) 48 .margin({ left: -3 })
35 } 49 }
36 - .backgroundColor(this.mediaType === 'audio' ? '': '#4d000000') 50 + .backgroundColor('#4d000000')
  51 + .borderRadius($r('app.float.button_border_radius'))
  52 + } else if(this.contentDTO.objectType === '9') {
  53 + // 显示组图;图片数量
  54 + Row(){
  55 + Image($r('app.media.album_card_shape'))
  56 + .width(22)
  57 + .height(18)
  58 + .borderRadius($r('app.float.button_border_radius'))
  59 + Text(this.contentDTO.photoNum)
  60 + .fontColor($r('app.color.color_fff'))
  61 + .fontSize($r('app.float.font_size_12'))
  62 + .width(20)
  63 + .height(18)
  64 + .textAlign(TextAlign.Center)
  65 + .margin({ left: -3 })
  66 + }
  67 + .backgroundColor('#4d000000')
  68 + .borderRadius($r('app.float.button_border_radius'))
  69 + } else if(this.contentDTO.objectType === '13') {
  70 + // 显示音频信息
  71 + Row(){
  72 + Image($r('app.media.broadcast_listen'))
  73 + .height(14)
37 .borderRadius($r('app.float.button_border_radius')) 74 .borderRadius($r('app.float.button_border_radius'))
  75 + Text(DateTimeUtils.getFormattedDuration(this.contentDTO.voiceInfo.voiceDuration * 1000))
  76 + .fontColor($r('app.color.color_fff'))
  77 + .fontSize($r('app.float.font_size_12'))
  78 + .width(40)
  79 + .height(18)
  80 + .textAlign(TextAlign.Center)
  81 + .margin({ left: -3 })
  82 + }
  83 + }
  84 + }
38 .margin(6) 85 .margin(6)
39 } 86 }
40 } 87 }
1 -  
2 import { ContentDTO } from 'wdBean'; 1 import { ContentDTO } from 'wdBean';
3 import { RmhTitle } from '../cardCommon/RmhTitle' 2 import { RmhTitle } from '../cardCommon/RmhTitle'
4 import { CardMediaInfo } from '../cardCommon/CardMediaInfo' 3 import { CardMediaInfo } from '../cardCommon/CardMediaInfo'
@@ -38,6 +37,7 @@ export struct Card20Component { @@ -38,6 +37,7 @@ export struct Card20Component {
38 // userId: '522435359667845', 37 // userId: '522435359667845',
39 // userType: '2' 38 // userType: '2'
40 // }, 39 // },
  40 + // objectType: '1',
41 // videoInfo: { 41 // videoInfo: {
42 // firstFrameImageUri: '', 42 // firstFrameImageUri: '',
43 // videoDuration: 37, 43 // videoDuration: 37,
@@ -45,12 +45,13 @@ export struct Card20Component { @@ -45,12 +45,13 @@ export struct Card20Component {
45 // } 45 // }
46 } as ContentDTO; 46 } as ContentDTO;
47 47
48 - aboutToAppear(): void {} 48 + aboutToAppear(): void {
  49 + }
49 50
50 build() { 51 build() {
51 Column() { 52 Column() {
52 // rmh信息 53 // rmh信息
53 - RmhTitle({rmhInfo: this.contentDTO.rmhInfo}) 54 + RmhTitle({ rmhInfo: this.contentDTO.rmhInfo })
54 // 标题 55 // 标题
55 if (this.contentDTO.newsTitle) { 56 if (this.contentDTO.newsTitle) {
56 Text(this.contentDTO.newsTitle) 57 Text(this.contentDTO.newsTitle)
@@ -60,7 +61,7 @@ export struct Card20Component { @@ -60,7 +61,7 @@ export struct Card20Component {
60 .textOverflowStyle(2) 61 .textOverflowStyle(2)
61 .margin({ bottom: 8 }) 62 .margin({ bottom: 8 })
62 } 63 }
63 - if(this.contentDTO.fullColumnImgUrls[0]) { 64 + if (this.contentDTO.fullColumnImgUrls[0]) {
64 createImg({ contentDTO: this.contentDTO }) 65 createImg({ contentDTO: this.contentDTO })
65 } 66 }
66 //TODO 底部的:分享、评论、点赞 功能;需要引用一个公共组件 67 //TODO 底部的:分享、评论、点赞 功能;需要引用一个公共组件
@@ -95,11 +96,9 @@ struct createImg { @@ -95,11 +96,9 @@ struct createImg {
95 Stack() { 96 Stack() {
96 Image(this.contentDTO.coverUrl) 97 Image(this.contentDTO.coverUrl)
97 .width(CommonConstants.FULL_WIDTH) 98 .width(CommonConstants.FULL_WIDTH)
98 - .aspectRatio(16/9) 99 + .aspectRatio(16 / 9)
99 .borderRadius($r('app.float.image_border_radius')) 100 .borderRadius($r('app.float.image_border_radius'))
100 - CardMediaInfo({  
101 - duration: this.contentDTO.videoInfo.videoDuration, mediaType: 'video'  
102 - }) 101 + CardMediaInfo({ contentDTO: this.contentDTO })
103 } 102 }
104 .align(Alignment.BottomEnd) 103 .align(Alignment.BottomEnd)
105 } 104 }
@@ -112,9 +111,7 @@ struct createImg { @@ -112,9 +111,7 @@ struct createImg {
112 Image(this.contentDTO.coverUrl) 111 Image(this.contentDTO.coverUrl)
113 .width(CommonConstants.FULL_WIDTH) 112 .width(CommonConstants.FULL_WIDTH)
114 .borderRadius($r('app.float.image_border_radius')) 113 .borderRadius($r('app.float.image_border_radius'))
115 - CardMediaInfo({  
116 - duration: this.contentDTO.videoInfo.videoDuration, mediaType: 'video'  
117 - }) 114 + CardMediaInfo({ contentDTO: this.contentDTO })
118 } 115 }
119 .align(Alignment.BottomEnd) 116 .align(Alignment.BottomEnd)
120 } 117 }