developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
zhangbo1_wd
8e4fe0f1 1 parent f9fcee23

新增卡片组件解析模块

Inline Side-by-side
Showing 8 changed files with 400 additions and 10 deletions
  1 +import { CommonConstants } from 'wdConstant';
  2 +import { ContentDTO } from '../repository/bean/ContentDTO';
  3 +import { Card11Component } from './cardview/Card11Component';
  4 +import { Card3Component } from './cardview/Card3Component';
  5 +import { Card2Component } from './cardview/Card2Component';
  6 +import { Card4Component } from './cardview/Card4Component';
  7 +
  8 +/**
  9 + * card适配器，卡片样式汇总，依据ContentDTO#appStyle
  10 + * 卡片样式，最小单元样式布局
  11 + */
  12 +@Component
  13 +export struct CardParser {
  14 + @State contentDTO: ContentDTO = {} as ContentDTO;
  15 +
  16 + build() {
  17 + this.contentBuilder(this.contentDTO);
  18 + }
  19 +
  20 + @Builder
  21 + contentBuilder(contentDTO: ContentDTO) {
  22 + if (contentDTO.appStyle === '11') {
  23 + Card11Component({ contentDTO })
  24 + } else if (contentDTO.appStyle === '3') {
  25 + Card3Component({ contentDTO })
  26 + } else if (contentDTO.appStyle === "2") {
  27 + Card2Component({ contentDTO })
  28 + } else if (contentDTO.appStyle === "4") {
  29 + Card4Component({ contentDTO })
  30 + }
  31 + else {
  32 + // todo:组件未实现 / Component Not Implemented
  33 + Text(contentDTO.appStyle)
  34 + .width(CommonConstants.FULL_PARENT)
  35 + .padding(10)
  36 + // .backgroundColor(Color.Brown) // 展示本页未实现的compStyle
  37 + }
  38 + }
  39 +}
@@ -22,6 +22,7 @@ import { SmallVideoCardHorComponent } from './view/SmallVideoCardHorComponent'; @@ -22,6 +22,7 @@ import { SmallVideoCardHorComponent } from './view/SmallVideoCardHorComponent';
22 22
23 /** 23 /**
24 * comp适配器. 24 * comp适配器.
  25 + * 首页楼层comp解析器
25 */ 26 */
26 @Component 27 @Component
27 export struct CompParser { 28 export struct CompParser {
  1 +//缩略标题
  2 +import { CommonConstants } from 'wdConstant'
  3 +import { DateTimeUtils } from 'wdKit'
  4 +import { ContentDTO } from '../../repository/bean/ContentDTO';
  5 +
  6 +@Component
  7 +export struct Card11Component {
  8 + @State contentDTO: ContentDTO = {} as ContentDTO;
  9 + @State @Watch('isPoint') source: boolean = false; //来源是否为空 publishTime 字段是否为空
  10 + @State isPo: number = Visibility.Visible;
  11 +
  12 + isPoint() {
  13 + if (this.source) {
  14 + this.isPo = Visibility.None
  15 + }
  16 + }
  17 +
  18 + build() {
  19 + Column() {
  20 + Text(this.contentDTO.newsTitle)
  21 + .fontSize($r("app.float.font_size_17"))
  22 + .fontColor($r("app.color.color_222222"))
  23 + .maxLines(3)
  24 + .textOverflow({ overflow: TextOverflow.Ellipsis })
  25 + .width(CommonConstants.FULL_WIDTH)
  26 + .fontWeight(400)
  27 + Row() {
  28 + Text(this.contentDTO.corner)
  29 + .fontSize($r("app.float.font_size_12"))
  30 + .fontColor($r("app.color.color_ED2800"))
  31 + .fontWeight(400)
  32 + Text(this.contentDTO.source)
  33 + .fontSize($r("app.float.font_size_12"))
  34 + .fontColor($r("app.color.color_B0B0B0"))
  35 + .margin({ left: 6 })
  36 + .fontWeight(400)
  37 + Image($r("app.media.point"))
  38 + .width(16)
  39 + .height(16)
  40 + .visibility(this.isPo)
  41 +
  42 + Text(DateTimeUtils.getCommentTime(Number.parseFloat(this.contentDTO.publishTime)))
  43 + .fontSize($r("app.float.font_size_12"))
  44 + .fontColor($r("app.color.color_B0B0B0"))
  45 + .fontWeight(400)
  46 +
  47 + }.width(CommonConstants.FULL_WIDTH)
  48 + .justifyContent(FlexAlign.Start)
  49 + .margin({ top: 8 })
  50 +
  51 + }.width(CommonConstants.FULL_WIDTH)
  52 + .padding({
  53 + top: 14,
  54 + left: 16,
  55 + right: 16,
  56 + bottom: 14
  57 + })
  58 + .backgroundColor($r("app.color.white"))
  59 + .margin({ bottom: 8 })
  60 + }
  61 +
  62 + aboutToAppear() {
  63 + if (this.contentDTO.source == "") {
  64 + this.source = true;
  65 + }
  66 + if (this.contentDTO.publishTime == "") {
  67 + this.source = true;
  68 + }
  69 + }
  70 +}
  1 +//全标题 "compStyle":"2",
  2 +import { ContentDTO } from '../../repository/bean/ContentDTO';
  3 +
  4 +const TAG: string = 'BigPicCardComponent';
  5 +
  6 +/**
  7 + * 大图卡:
  8 + * compstyle:2
  9 + * 卡片结构：上下结构
  10 + * 卡片宽度:充满父窗口
  11 + * 卡片高度,仅包含横板图片：图片高度由图片的宽度及宽高比决定，图片宽度占父窗口'100%'，宽高比为16:9:
  12 + */
  13 +// @Entry
  14 +@Component
  15 +export struct Card2Component {
  16 + @State contentDTO: ContentDTO = {} as ContentDTO;
  17 +
  18 + build() {
  19 + Column() {
  20 +
  21 + Column() {
  22 + //新闻标题
  23 + Text(this.contentDTO.newsTitle)
  24 + .fontSize(17)
  25 + .fontColor('#222222')
  26 + .maxLines(3)
  27 + .textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出的部分显示省略号。
  28 + .align(Alignment.Start)
  29 + //大图
  30 + Stack() {
  31 + Image(this.contentDTO.coverUrl)
  32 + .backgroundColor('#888888')
  33 + .borderRadius(4)
  34 + .width('100%')
  35 + .aspectRatio(343 / 192)
  36 +
  37 +
  38 + //播放状态+时长
  39 + Row() {
  40 + Image($r('app.media.icon_live'))
  41 + .width(22)
  42 + .height(18)
  43 +
  44 + Stack() {
  45 + Text('直播中')
  46 + .fontColor('#FFFFFF')
  47 + .fontSize(11)
  48 + }
  49 + .width(44)
  50 + .height(18)
  51 + .backgroundColor('#4d000000')
  52 + }.margin({ right: 8, bottom: 8 })
  53 +
  54 + }
  55 + .width('100%')
  56 + .alignContent(Alignment.BottomEnd)
  57 + .margin({ top: 8 })
  58 +
  59 + }
  60 + .width('100%')
  61 + .justifyContent(FlexAlign.Start)
  62 + .alignItems(HorizontalAlign.Start)
  63 + .padding({ top: 14 })
  64 +
  65 + //bottom
  66 + Row() {
  67 + Text(this.contentDTO.source)
  68 + .bottomTextStyle()
  69 + //间隔点
  70 + Image($r('app.media.point'))
  71 + .width(12)
  72 + .height(12)
  73 +
  74 + Text(this.contentDTO.source)
  75 + .bottomTextStyle()
  76 + Text(' ')
  77 +
  78 + Text(this.contentDTO.subtitle)
  79 + .bottomTextStyle()
  80 +
  81 + }
  82 + .width('100%')
  83 + .height(18)
  84 + .justifyContent(FlexAlign.Start)
  85 + // .padding({bottom:14})
  86 + .margin({ top: 8 })
  87 + }
  88 + .width('100%')
  89 + .padding({ left: 16, right: 16 })
  90 + }
  91 +}
  92 +
  93 +@Extend(Text) function bottomTextStyle() {
  94 + .fontSize(12)
  95 + .fontColor('#B0B0B0')
  96 +}
  1 +//全标题 "compStyle":"3",
  2 +import { CommonConstants } from 'wdConstant'
  3 +import { DateTimeUtils } from 'wdKit/src/main/ets/utils/DateTimeUtils'
  4 +import { ContentDTO } from '../../repository/bean/ContentDTO'
  5 +
  6 +@Component
  7 +export struct Card3Component {
  8 + @State contentDTO: ContentDTO = {} as ContentDTO;
  9 + @State @Watch('isPoint') source: boolean = false; //来源是否为空 publishTime 字段是否为空
  10 + @State isPo: number = Visibility.Visible;
  11 +
  12 + isPoint() {
  13 + if (this.source) {
  14 + this.isPo = Visibility.None
  15 + }
  16 + }
  17 +
  18 + build() {
  19 + Column() {
  20 + Text(this.contentDTO.newsTitle)
  21 + .fontSize($r("app.float.font_size_17"))
  22 + .fontColor($r("app.color.color_222222"))
  23 + .width(CommonConstants.FULL_WIDTH)
  24 + .fontWeight(400)
  25 + Row() {
  26 + Text(this.contentDTO.corner)
  27 + .fontSize($r("app.float.font_size_12"))
  28 + .fontColor($r("app.color.color_ED2800"))
  29 + .fontWeight(400)
  30 + Text(this.contentDTO.source)
  31 + .fontSize($r("app.float.font_size_12"))
  32 + .fontColor($r("app.color.color_B0B0B0"))
  33 + .margin({ left: 6 })
  34 + .fontWeight(400)
  35 + Image($r("app.media.point"))
  36 + .width(16)
  37 + .height(16)
  38 + .visibility(this.isPo)
  39 +
  40 + Text(DateTimeUtils.getCommentTime(Number.parseFloat(this.contentDTO.publishTime)))
  41 + .fontSize($r("app.float.font_size_12"))
  42 + .fontColor($r("app.color.color_B0B0B0"))
  43 + .fontWeight(400)
  44 +
  45 + }.width(CommonConstants.FULL_WIDTH)
  46 + .justifyContent(FlexAlign.Start)
  47 + .margin({ top: 8 })
  48 +
  49 + }.width("100%")
  50 + .padding({
  51 + top: 14,
  52 + left: 16,
  53 + right: 16,
  54 + bottom: 14
  55 + })
  56 + .backgroundColor($r("app.color.white"))
  57 + .margin({ bottom: 8 })
  58 + }
  59 +
  60 + aboutToAppear() {
  61 + // Logger.info("ssx",JSON.stringify(this.compDTO.operDataList[0]))
  62 + if (this.contentDTO.source == "") {
  63 + this.source = true;
  64 + }
  65 + if (this.contentDTO.publishTime == "") {
  66 + this.source = true;
  67 + }
  68 +
  69 + }
  70 +}
  1 +//全标题 "compStyle":"4",
  2 +import { DateTimeUtils } from 'wdKit';
  3 +import { ContentDTO } from '../../repository/bean/ContentDTO';
  4 +
  5 +const TAG: string = 'TriPicCardComponent';
  6 +
  7 +/**
  8 + * 三图卡:
  9 + * compstyle:4
  10 + * 卡片结构：上下结构
  11 + * 卡片宽度:充满父窗口
  12 + * 卡片高度,仅包含横板图片：图片高度由图片的宽度及宽高比决定，图片宽度占父窗口'100%'，宽高比为16:9:
  13 + */
  14 +@Entry
  15 +@Component
  16 +export struct Card4Component {
  17 + @State contentDTO: ContentDTO = {} as ContentDTO;
  18 +
  19 + build() {
  20 + Column() {
  21 +
  22 +
  23 + //body
  24 + Column() {
  25 + //新闻标题
  26 + Text(this.contentDTO.newsTitle)
  27 + .fontSize(17)
  28 + .fontColor('#222222')
  29 + .maxLines(3)
  30 + .textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出的部分显示省略号。
  31 + //三图
  32 + Row() {
  33 + Image(this.contentDTO.fullColumnImgUrls[0]?.url)
  34 + .width('32%')
  35 + .aspectRatio(113 / 75)
  36 + .borderRadius({ topLeft: 4, bottomLeft: 4 })
  37 +
  38 + Image(this.contentDTO.fullColumnImgUrls[1]?.url)
  39 + .width('32%')
  40 + .aspectRatio(113 / 75)
  41 +
  42 + Image(this.contentDTO.fullColumnImgUrls[2]?.url)
  43 + .width('32%')
  44 + .aspectRatio(113 / 75)
  45 + .borderRadius({ topRight: 4, bottomRight: 4 })
  46 +
  47 + }
  48 + .justifyContent(FlexAlign.SpaceBetween)
  49 + .width('100%')
  50 + .margin({ top: 8 })
  51 + .borderRadius(8)
  52 +
  53 + }
  54 + .width('100%')
  55 + .justifyContent(FlexAlign.Start)
  56 + .alignItems(HorizontalAlign.Start)
  57 + .padding({ top: 14 })
  58 +
  59 +
  60 + //bottom
  61 + Row() {
  62 + Text(this.contentDTO.source)
  63 + .bottomTextStyle()
  64 + //间隔点
  65 + Image($r('app.media.point'))
  66 + .width(12)
  67 + .height(12)
  68 +
  69 + Text(DateTimeUtils.getCommentTime(Number.parseFloat(this.contentDTO.publishTime)))
  70 + .bottomTextStyle()
  71 + Text(' ')
  72 +
  73 + Text('518条评论')
  74 + .bottomTextStyle()
  75 +
  76 + }
  77 + .width('100%')
  78 +
  79 + .justifyContent(FlexAlign.Start)
  80 + // .padding({bottom:14})
  81 + .margin({ top: 8 })
  82 + .padding({ bottom: 14 })
  83 +
  84 + }
  85 + .width('100%')
  86 + .padding({ top: 8, left: 16, right: 16 })
  87 +
  88 + }
  89 +}
  90 +
  91 +
  92 +@Extend(Text) function bottomTextStyle() {
  93 + .fontSize(12)
  94 + .fontColor('#B0B0B0')
  95 +}
1 //全标题 "compStyle":"2", 1 //全标题 "compStyle":"2",
2 import { CommonConstants } from 'wdConstant' 2 import { CommonConstants } from 'wdConstant'
3 import { CompDTO } from '../../repository/bean/CompDTO' 3 import { CompDTO } from '../../repository/bean/CompDTO'
  4 +import { ContentDTO } from '../../repository/bean/ContentDTO';
  5 +import { CardParser } from '../CardParser';
  6 +
4 const TAG: string = 'BigPicCardComponent'; 7 const TAG: string = 'BigPicCardComponent';
5 8
6 /** 9 /**
@@ -14,8 +17,21 @@ const TAG: string = 'BigPicCardComponent'; @@ -14,8 +17,21 @@ const TAG: string = 'BigPicCardComponent';
14 @Component 17 @Component
15 export struct BigPicCardComponent { 18 export struct BigPicCardComponent {
16 @State compDTO: CompDTO = {} as CompDTO 19 @State compDTO: CompDTO = {} as CompDTO
  20 + contentDTO: ContentDTO = {} as ContentDTO;
17 21
18 build() { 22 build() {
  23 + // this.cardBuild();
  24 + this.originalBuild();
  25 + }
  26 +
  27 + async aboutToAppear() {
  28 + // 取第一个数据
  29 + this.contentDTO = this.compDTO.operDataList[0];
  30 + this.contentDTO.appStyle = "2";
  31 + }
  32 +
  33 + @Builder
  34 + originalBuild() {
19 Column() { 35 Column() {
20 36
21 Column() { 37 Column() {
@@ -49,18 +65,18 @@ export struct BigPicCardComponent { @@ -49,18 +65,18 @@ export struct BigPicCardComponent {
49 .width(44) 65 .width(44)
50 .height(18) 66 .height(18)
51 .backgroundColor('#4d000000') 67 .backgroundColor('#4d000000')
52 - }.margin({right:8,bottom:8}) 68 + }.margin({ right: 8, bottom: 8 })
53 69
54 } 70 }
55 .width('100%') 71 .width('100%')
56 .alignContent(Alignment.BottomEnd) 72 .alignContent(Alignment.BottomEnd)
57 - .margin({top:8}) 73 + .margin({ top: 8 })
58 74
59 } 75 }
60 .width('100%') 76 .width('100%')
61 .justifyContent(FlexAlign.Start) 77 .justifyContent(FlexAlign.Start)
62 .alignItems(HorizontalAlign.Start) 78 .alignItems(HorizontalAlign.Start)
63 - .padding({top:14}) 79 + .padding({ top: 14 })
64 80
65 //bottom 81 //bottom
66 Row() { 82 Row() {
@@ -82,15 +98,17 @@ export struct BigPicCardComponent { @@ -82,15 +98,17 @@ export struct BigPicCardComponent {
82 .width('100%') 98 .width('100%')
83 .height(18) 99 .height(18)
84 .justifyContent(FlexAlign.Start) 100 .justifyContent(FlexAlign.Start)
85 - // .padding({bottom:14})  
86 - .margin({top:8}) 101 + // .padding({bottom:14})
  102 + .margin({ top: 8 })
87 } 103 }
88 .width('100%') 104 .width('100%')
89 - .padding({left:16,right:16})  
90 -  
91 - 105 + .padding({ left: 16, right: 16 })
92 } 106 }
93 107
  108 + @Builder
  109 + cardBuild() {
  110 + CardParser({ contentDTO: this.contentDTO });
  111 + }
94 } 112 }
95 113
96 @Extend(Text) function bottomTextStyle() { 114 @Extend(Text) function bottomTextStyle() {
1 import { FullColumnImgUrlsDTO } from './FullColumnImgUrlsDTO'; 1 import { FullColumnImgUrlsDTO } from './FullColumnImgUrlsDTO';
2 import { InteractDataDTO } from './InteractDataDTO'; 2 import { InteractDataDTO } from './InteractDataDTO';
3 -import { LiveInfo } from './LiveInfo'  
4 -import { VideoInfo } from './VideoInfo' 3 +import { LiveInfo } from './LiveInfo';
  4 +import { VideoInfo } from './VideoInfo';
5 5
6 export interface ContentDTO { 6 export interface ContentDTO {
  7 + appStyle: string;
7 cityCode: string; 8 cityCode: string;
8 coverSize: string; 9 coverSize: string;
9 coverType: number; 10 coverType: number;