developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
wangyong_wd
1085fe89 1 parent 6e47b532

样式卡底部来源、评论、发布日期抽离组件

Inline Side-by-side
Showing 7 changed files with 78 additions and 160 deletions
@@ -69,6 +69,7 @@ export interface ContentDTO { @@ -69,6 +69,7 @@ export interface ContentDTO {
69 isSelect: boolean; 69 isSelect: boolean;
70 rmhInfo: RmhInfoDTO; // 人民号信息 70 rmhInfo: RmhInfoDTO; // 人民号信息
71 photoNum: number; 71 photoNum: number;
72 - 72 + corner: string;
  73 + rmhPlatform: number
73 74
74 } 75 }
  1 +import { ContentDTO } from 'wdBean'
  2 +import { CommonConstants } from 'wdConstant/Index';
  3 +import { DateTimeUtils } from 'wdKit/Index';
  4 +
  5 +@Component
  6 +export struct CardSourceInfo {
  7 + @State contentDTO: ContentDTO = {} as ContentDTO;
  8 + build() {
  9 + Flex() {
  10 + if(this.contentDTO.corner === '1') {
  11 + Text("锐评")
  12 + .fontSize($r("app.float.font_size_12"))
  13 + .fontColor($r("app.color.color_ED2800"))
  14 + }
  15 + if(this.contentDTO.rmhPlatform === 1) {
  16 + Text(this.contentDTO.rmhInfo.rmhName)
  17 + .fontSize($r("app.float.font_size_12"))
  18 + .fontColor($r("app.color.color_B0B0B0"))
  19 + .maxLines(1)
  20 + .textOverflow({overflow: TextOverflow.Ellipsis})
  21 + Image($r("app.media.point"))
  22 + .width(16)
  23 + .height(16)
  24 + } else if(this.contentDTO.source) {
  25 + Text(`${this.contentDTO.source}`)
  26 + .fontSize($r("app.float.font_size_12"))
  27 + .fontColor($r("app.color.color_B0B0B0"))
  28 + .maxLines(1)
  29 + .textOverflow({overflow: TextOverflow.Ellipsis})
  30 + Image($r("app.media.point"))
  31 + .width(16)
  32 + .height(16)
  33 + }
  34 + Text(DateTimeUtils.getCommentTime(Number.parseFloat(this.contentDTO.publishTime)))
  35 + .fontSize($r("app.float.font_size_12"))
  36 + .fontColor($r("app.color.color_B0B0B0"))
  37 + .margin({ right: 6 })
  38 + .flexShrink(0)
  39 + if(this.contentDTO?.interactData?.commentNum) {
  40 + Text(`${this.contentDTO.interactData.commentNum}评`)
  41 + .fontSize($r("app.float.font_size_12"))
  42 + .fontColor($r("app.color.color_B0B0B0"))
  43 + .flexShrink(0)
  44 + }
  45 + }
  46 + .width(CommonConstants.FULL_WIDTH)
  47 + .margin({ top: 8 })
  48 + }
  49 +}
@@ -3,7 +3,7 @@ import { CommonConstants } from 'wdConstant' @@ -3,7 +3,7 @@ import { CommonConstants } from 'wdConstant'
3 import { ContentDTO } from 'wdBean' 3 import { ContentDTO } from 'wdBean'
4 import { DateTimeUtils } from 'wdKit' 4 import { DateTimeUtils } from 'wdKit'
5 import { ProcessUtils } from '../../utils/ProcessUtils'; 5 import { ProcessUtils } from '../../utils/ProcessUtils';
6 - 6 +import { CardSourceInfo } from '../cardCommon/CardSourceInfo'
7 const TAG = 'Card11Component'; 7 const TAG = 'Card11Component';
8 8
9 /** 9 /**
@@ -21,29 +21,8 @@ export struct Card11Component { @@ -21,29 +21,8 @@ export struct Card11Component {
21 .maxLines(3) 21 .maxLines(3)
22 .textOverflow({ overflow: TextOverflow.Ellipsis }) 22 .textOverflow({ overflow: TextOverflow.Ellipsis })
23 .width(CommonConstants.FULL_WIDTH) 23 .width(CommonConstants.FULL_WIDTH)
24 - Row() {  
25 - if (this.contentDTO.source) {  
26 - Text(this.contentDTO.source)  
27 - .fontSize($r("app.float.font_size_12"))  
28 - .fontColor($r("app.color.color_B0B0B0"))  
29 - .margin({ left: 6 })  
30 - Image($r("app.media.point"))  
31 - .width(16)  
32 - .height(16)  
33 - }  
34 -  
35 - Text(DateTimeUtils.getCommentTime(Number.parseFloat(this.contentDTO.publishTime)))  
36 - .fontSize($r("app.float.font_size_12"))  
37 - .fontColor($r("app.color.color_B0B0B0"))  
38 - .margin({ right: 6 })  
39 - // TODO '评论取哪个字段'  
40 - // Text(`1806评`)  
41 - // .fontSize($r("app.float.font_size_12"))  
42 - // .fontColor($r("app.color.color_B0B0B0"))  
43 - }.width(CommonConstants.FULL_WIDTH)  
44 - .justifyContent(FlexAlign.Start)  
45 - .margin({ top: 8 })  
46 - 24 + // 评论等信息
  25 + CardSourceInfo({ contentDTO: this.contentDTO })
47 }.width(CommonConstants.FULL_WIDTH) 26 }.width(CommonConstants.FULL_WIDTH)
48 .padding({ 27 .padding({
49 left: $r('app.float.card_comp_pagePadding_lf'), 28 left: $r('app.float.card_comp_pagePadding_lf'),
1 //全标题 "appStyle":"2", 1 //全标题 "appStyle":"2",
2 import { ContentDTO } from 'wdBean'; 2 import { ContentDTO } from 'wdBean';
3 import { CommonConstants } from 'wdConstant/Index'; 3 import { CommonConstants } from 'wdConstant/Index';
4 -import { DateTimeUtils } from 'wdKit/Index';  
5 import { ProcessUtils } from '../../utils/ProcessUtils'; 4 import { ProcessUtils } from '../../utils/ProcessUtils';
6 import { CardMediaInfo } from '../cardCommon/CardMediaInfo' 5 import { CardMediaInfo } from '../cardCommon/CardMediaInfo'
7 - 6 +import { CardSourceInfo } from '../cardCommon/CardSourceInfo'
8 const TAG: string = 'Card2Component'; 7 const TAG: string = 'Card2Component';
9 8
10 /** 9 /**
@@ -60,21 +59,8 @@ export struct Card2Component { @@ -60,21 +59,8 @@ export struct Card2Component {
60 .alignItems(HorizontalAlign.Start) 59 .alignItems(HorizontalAlign.Start)
61 60
62 //bottom 61 //bottom
63 - Row() {  
64 - Text(this.contentDTO.source)  
65 - .bottomTextStyle()  
66 - //间隔点  
67 - Image($r('app.media.point'))  
68 - .width(12)  
69 - .height(12)  
70 -  
71 - Text(DateTimeUtils.getCommentTime(Number.parseFloat(this.contentDTO.publishTime)))  
72 - .bottomTextStyle()  
73 - }  
74 - .width(CommonConstants.FULL_WIDTH)  
75 - .height(18)  
76 - .justifyContent(FlexAlign.Start)  
77 - .margin({ top: 8 }) 62 + // 评论等信息
  63 + CardSourceInfo({ contentDTO: this.contentDTO })
78 } 64 }
79 .width(CommonConstants.FULL_WIDTH) 65 .width(CommonConstants.FULL_WIDTH)
80 .padding({ 66 .padding({
1 import { ContentDTO } from 'wdBean'; 1 import { ContentDTO } from 'wdBean';
2 import { CommonConstants } from 'wdConstant' 2 import { CommonConstants } from 'wdConstant'
3 -import { DateTimeUtils } from 'wdKit/src/main/ets/utils/DateTimeUtils'  
4 import { ProcessUtils } from '../../utils/ProcessUtils'; 3 import { ProcessUtils } from '../../utils/ProcessUtils';
  4 +import { CardSourceInfo } from '../cardCommon/CardSourceInfo'
5 5
6 /** 6 /**
7 * 卡片样式："appStyle":"3" 7 * 卡片样式："appStyle":"3"
@@ -27,30 +27,8 @@ export struct Card3Component { @@ -27,30 +27,8 @@ export struct Card3Component {
27 .fontSize($r("app.float.font_size_16")) 27 .fontSize($r("app.float.font_size_16"))
28 .fontColor($r("app.color.color_222222")) 28 .fontColor($r("app.color.color_222222"))
29 .width(CommonConstants.FULL_WIDTH) 29 .width(CommonConstants.FULL_WIDTH)
30 - Row() {  
31 - // TODO "锐评"取得哪个字段，什么时候显示。  
32 - // Text("锐评")  
33 - // .fontSize($r("app.float.font_size_12"))  
34 - // .fontColor($r("app.color.color_ED2800"))  
35 - if(this.contentDTO.source) {  
36 - Text(this.contentDTO.source)  
37 - .fontSize($r("app.float.font_size_12"))  
38 - .fontColor($r("app.color.color_B0B0B0"))  
39 - Image($r("app.media.point"))  
40 - .width(16)  
41 - .height(16)  
42 - }  
43 - Text(DateTimeUtils.getCommentTime(Number.parseFloat(this.contentDTO.publishTime)))  
44 - .fontSize($r("app.float.font_size_12"))  
45 - .fontColor($r("app.color.color_B0B0B0"))  
46 - .margin({ right: 6 })  
47 - // TODO '评论取哪个字段'  
48 - Text(`${this.contentDTO?.interactData?.commentNum}评`)  
49 - .fontSize($r("app.float.font_size_12"))  
50 - .fontColor($r("app.color.color_B0B0B0"))  
51 - }.width(CommonConstants.FULL_WIDTH)  
52 - .justifyContent(FlexAlign.Start)  
53 - .margin({ top: 8 }) 30 + // 评论等信息
  31 + CardSourceInfo({ contentDTO: this.contentDTO })
54 } 32 }
55 .width(CommonConstants.FULL_WIDTH) 33 .width(CommonConstants.FULL_WIDTH)
56 .padding({ 34 .padding({
1 import { ContentDTO, FullColumnImgUrlDTO } from 'wdBean'; 1 import { ContentDTO, FullColumnImgUrlDTO } from 'wdBean';
2 import { CommonConstants } from 'wdConstant/Index'; 2 import { CommonConstants } from 'wdConstant/Index';
3 import { ProcessUtils } from '../../utils/ProcessUtils'; 3 import { ProcessUtils } from '../../utils/ProcessUtils';
4 -import { DateTimeUtils } from 'wdKit/Index';  
5 - 4 +import { CardSourceInfo } from '../cardCommon/CardSourceInfo'
6 const TAG: string = 'Card4Component'; 5 const TAG: string = 'Card4Component';
7 6
8 /** 7 /**
@@ -110,25 +109,8 @@ export struct Card4Component { @@ -110,25 +109,8 @@ export struct Card4Component {
110 .onClick((event: ClickEvent) => { 109 .onClick((event: ClickEvent) => {
111 ProcessUtils.processPage(this.contentDTO) 110 ProcessUtils.processPage(this.contentDTO)
112 }) 111 })
113 -  
114 -  
115 - //bottom  
116 - Row() {  
117 - Text(this.contentDTO.source)  
118 - .bottomTextStyle()  
119 - //间隔点  
120 - Image($r('app.media.point'))  
121 - .width(12)  
122 - .height(12)  
123 - Text(DateTimeUtils.getCommentTime(Number.parseFloat(this.contentDTO.publishTime)))  
124 - .bottomTextStyle()  
125 - // TODO 评论字段取值  
126 - // Text('518条评论')  
127 - // .bottomTextStyle()  
128 - }  
129 - .width('100%')  
130 - .justifyContent(FlexAlign.Start)  
131 - .margin({ top: 8 }) 112 + //bottom 评论等信息
  113 + CardSourceInfo({ contentDTO: this.contentDTO })
132 } 114 }
133 .width(CommonConstants.FULL_WIDTH) 115 .width(CommonConstants.FULL_WIDTH)
134 .padding({ 116 .padding({
@@ -2,12 +2,13 @@ import { ContentDTO } from 'wdBean'; @@ -2,12 +2,13 @@ import { ContentDTO } from 'wdBean';
2 import { CommonConstants, CompStyle } from 'wdConstant'; 2 import { CommonConstants, CompStyle } from 'wdConstant';
3 import { DateTimeUtils } from 'wdKit'; 3 import { DateTimeUtils } from 'wdKit';
4 import { ProcessUtils } from '../../utils/ProcessUtils'; 4 import { ProcessUtils } from '../../utils/ProcessUtils';
5 - 5 +import { CardSourceInfo } from '../cardCommon/CardSourceInfo'
  6 +import { CardMediaInfo } from '../cardCommon/CardMediaInfo'
6 const TAG: string = 'Card6Component-Card13Component'; 7 const TAG: string = 'Card6Component-Card13Component';
7 const FULL_PARENT: string = '100%'; 8 const FULL_PARENT: string = '100%';
8 9
9 /** 10 /**
10 - * 卡片样式："appStyle":"6"以及13 11 + * 卡片样式："appStyle":"6"以及13--- 小视频卡
11 */ 12 */
12 @Component 13 @Component
13 export struct Card6Component { 14 export struct Card6Component {
@@ -26,93 +27,35 @@ export struct Card6Component { @@ -26,93 +27,35 @@ export struct Card6Component {
26 }.height("80%") 27 }.height("80%")
27 .justifyContent(FlexAlign.Start) 28 .justifyContent(FlexAlign.Start)
28 29
29 - Row() {  
30 - if (this.contentDTO.source) {  
31 - Text(this.contentDTO.source)  
32 - .fontSize($r('app.float.font_size_12'))  
33 - .fontColor(Color.Gray)  
34 - .maxLines(1)  
35 - .textOverflow({ overflow: TextOverflow.Ellipsis })// 超出的部分显示省略号。  
36 - .width(this.contentDTO.source.length > 8 ? '50%' : '')  
37 - Image($r('app.media.point'))  
38 - .width(16)  
39 - .height(16)  
40 - }  
41 - if (this.contentDTO.publishTime && this.contentDTO.publishTime.length === 13) {  
42 - Text(DateTimeUtils.getCommentTime(Number.parseFloat(this.contentDTO.publishTime)))  
43 - .fontSize($r('app.float.font_size_12'))  
44 - .fontColor(Color.Gray)  
45 - }  
46 - Text(this.contentDTO.visitorComment + '评')  
47 - .fontSize($r('app.float.font_size_12'))  
48 - .fontColor(Color.Gray)  
49 - .padding({  
50 - left: 5  
51 - })  
52 - }.alignSelf(ItemAlign.Start)  
53 - .height("20%")  
54 - .justifyContent(FlexAlign.Start) 30 +
  31 + //bottom 评论等信息
  32 + CardSourceInfo({ contentDTO: this.contentDTO })
55 } 33 }
56 .alignItems(HorizontalAlign.Start) 34 .alignItems(HorizontalAlign.Start)
57 .justifyContent(FlexAlign.Start) 35 .justifyContent(FlexAlign.Start)
58 .width('58%') 36 .width('58%')
59 -  
60 - Blank(16)  
61 if (this.contentDTO.coverUrl) { 37 if (this.contentDTO.coverUrl) {
62 Stack() { 38 Stack() {
63 Image(this.contentDTO.coverUrl) 39 Image(this.contentDTO.coverUrl)
64 .borderRadius(5) 40 .borderRadius(5)
65 .aspectRatio(this.contentDTO.appStyle === CompStyle.Card_13 ? 3 / 2 : 3 / 4) 41 .aspectRatio(this.contentDTO.appStyle === CompStyle.Card_13 ? 3 / 2 : 3 / 4)
66 .height(this.contentDTO.appStyle === CompStyle.Card_13 ? 90 : 180) 42 .height(this.contentDTO.appStyle === CompStyle.Card_13 ? 90 : 180)
67 - if (this.contentDTO.videoInfo) {  
68 - Row() {  
69 - Image($r('app.media.iv_card_play_yellow_flag'))  
70 - .width(22)  
71 - .height(18)  
72 - Text(DateTimeUtils.getFormattedDuration(this.contentDTO.videoInfo.videoDuration * 1000))  
73 - .fontSize($r('app.float.font_size_13'))  
74 - .fontWeight(400)  
75 - .fontColor($r('app.color.color_fff')) 43 + CardMediaInfo({ contentDTO: this.contentDTO })
76 } 44 }
77 - .alignItems(VerticalAlign.Bottom)  
78 - .height(18)  
79 - .padding({ right: 4 })  
80 - .margin({  
81 - right: 4,  
82 - bottom: 4  
83 - })  
84 - .backgroundColor($r('app.color.color_4d000000'))  
85 - } else if (this.contentDTO.voiceInfo) {  
86 - Row() {  
87 - Image($r('app.media.icon_listen'))  
88 - .width(22)  
89 - .height(18)  
90 - Text(DateTimeUtils.getFormattedDuration(this.contentDTO.voiceInfo  
91 - .voiceDuration * 1000))  
92 - .fontSize($r('app.float.font_size_13'))  
93 - .fontWeight(400)  
94 - .fontColor($r('app.color.color_fff'))  
95 - }  
96 - .alignItems(VerticalAlign.Bottom)  
97 - .height(18)  
98 - .padding({ right: 4 })  
99 - .margin({  
100 - right: 4,  
101 - bottom: 4  
102 - })  
103 - .backgroundColor($r('app.color.color_4d000000'))  
104 - }  
105 - }.alignContent(Alignment.BottomEnd) 45 + .alignContent(Alignment.BottomEnd)
106 } 46 }
107 } 47 }
108 .onClick((event: ClickEvent) => { 48 .onClick((event: ClickEvent) => {
109 ProcessUtils.processPage(this.contentDTO) 49 ProcessUtils.processPage(this.contentDTO)
110 }) 50 })
111 - .padding(  
112 - { top: 16, bottom: 16, left: 14, right: 14 })  
113 - .width(FULL_PARENT) 51 + .padding({
  52 + left: $r('app.float.card_comp_pagePadding_lf'),
  53 + right: $r('app.float.card_comp_pagePadding_lf'),
  54 + top: $r('app.float.card_comp_pagePadding_tb'),
  55 + bottom: $r('app.float.card_comp_pagePadding_tb')
  56 + })
  57 + .width(CommonConstants.FULL_WIDTH)
114 .height(this.contentDTO.appStyle === CompStyle.Card_13 ? 127 : 217) 58 .height(this.contentDTO.appStyle === CompStyle.Card_13 ? 127 : 217)
115 .justifyContent(FlexAlign.SpaceBetween) 59 .justifyContent(FlexAlign.SpaceBetween)
116 -  
117 } 60 }
118 } 61 }