新增卡片组件解析模块

@@ -2,10 +2,11 @@ import { FullColumnImgUrlDTO } from '../detail/FullColumnImgUrlDTO';
 import { LiveInfoDTO } from '../detail/LiveInfoDTO';
 import { LiveInfoDTO } from '../detail/LiveInfoDTO';
 import { VideoInfoDTO } from '../detail/VideoInfoDTO';
 import { VideoInfoDTO } from '../detail/VideoInfoDTO';
 import { InteractDataDTO } from './InteractDataDTO';
 import { InteractDataDTO } from './InteractDataDTO';
-import { slideShows } from '../morningevening/slideShows'
-import { VoiceInfoDTO } from '../detail/VoiceInfoDTO'
+import { slideShows } from '../morningevening/slideShows';
+import { VoiceInfoDTO } from '../detail/VoiceInfoDTO';
 
 
 export interface ContentDTO {
 export interface ContentDTO {
+  appStyle: string;
   cityCode: string;
   cityCode: string;
   coverSize: string;
   coverSize: string;
   coverType: number;
   coverType: number;

+import { CommonConstants } from 'wdConstant';
+import { Card3Component } from './cardview/Card3Component';
+import { Card2Component } from './cardview/Card2Component';
+import { Card4Component } from './cardview/Card4Component';
+import { ContentDTO } from 'wdBean';
+import { Card5Component } from './cardview/Card5Component';
+import { Card6Component } from './cardview/Card6Component';
+
+/**
+ * card适配器，卡片样式汇总，依据ContentDTO#appStyle
+ * 卡片样式，最小单元样式布局
+ */
+@Component
+export struct CardParser {
+  @State contentDTO: ContentDTO = {} as ContentDTO;
+
+  build() {
+    this.contentBuilder(this.contentDTO);
+  }
+
+  @Builder
+  contentBuilder(contentDTO: ContentDTO) {
+    if (contentDTO.appStyle === '2') {
+      Card2Component({ contentDTO })
+    } else if (contentDTO.appStyle === '3') {
+      Card3Component({ contentDTO })
+    } else if (contentDTO.appStyle === "4") {
+      Card4Component({ contentDTO })
+    } else if (contentDTO.appStyle === "5") {
+      Card5Component({ contentDTO })
+    } else if (contentDTO.appStyle === "6") {
+      Card6Component({ contentDTO })
+    }
+    else {
+      // todo:组件未实现 / Component Not Implemented
+      Text(contentDTO.appStyle)
+        .width(CommonConstants.FULL_PARENT)
+        .padding(10)
+      // .backgroundColor(Color.Brown) // 展示本页未实现的compStyle
+    }
+  }
+}

@@ -23,6 +23,7 @@ import { CompStyle_10 } from './view/CompStyle_10'
 
 
 /**
 /**
  * comp适配器.
  * comp适配器.
+ * 首页楼层comp解析器.
  */
  */
 @Preview
 @Preview
 @Component
 @Component

+//全标题 "appStyle":"2",
+import { ContentDTO } from 'wdBean';
+import { ProcessUtils } from '../../utils/ProcessUtils';
+
+
+const TAG: string = 'Card2Component';
+
+/**
+ * 大图卡:
+ * compstyle:2
+ * 卡片结构：上下结构
+ * 卡片宽度:充满父窗口
+ * 卡片高度,仅包含横板图片：图片高度由图片的宽度及宽高比决定，图片宽度占父窗口'100%'，宽高比为16:9:
+ */
+// @Entry
+@Component
+export struct Card2Component {
+  @State contentDTO: ContentDTO = {} as ContentDTO;
+
+  build() {
+    Column() {
+
+      Column() {
+        //新闻标题
+        Text(this.contentDTO.newsTitle)
+          .fontSize(17)
+          .fontColor('#222222')
+          .maxLines(3)
+          .textOverflow({ overflow: TextOverflow.Ellipsis })// 超出的部分显示省略号。
+          .align(Alignment.Start)
+        //大图
+        Stack() {
+          Image(this.contentDTO.coverUrl)
+            .borderRadius(4)
+
+
+          //播放状态+时长
+          Row() {
+            Image($r('app.media.icon_live'))
+              .width(22)
+              .height(18)
+
+            Stack() {
+              Text('直播中')
+                .fontColor('#FFFFFF')
+                .fontSize(11)
+            }
+            .width(44)
+            .height(18)
+            .backgroundColor('#4d000000')
+          }.margin({ right: 8, bottom: 8 })
+
+        }
+        .width('100%')
+        .height(192)
+        .alignContent(Alignment.BottomEnd)
+        .margin({ top: 8 })
+
+      }
+      .width('100%')
+      .justifyContent(FlexAlign.Start)
+      .alignItems(HorizontalAlign.Start)
+      .padding({ top: 14 })
+
+      //bottom
+      Row() {
+        Text(this.contentDTO.source)
+          .bottomTextStyle()
+        //间隔点
+        Image($r('app.media.point'))
+          .width(12)
+          .height(12)
+
+        Text(this.contentDTO.source)
+          .bottomTextStyle()
+        Text(' ')
+
+        Text(this.contentDTO.subtitle)
+          .bottomTextStyle()
+
+      }
+      .width('100%')
+      .height(18)
+      .justifyContent(FlexAlign.Start)
+      // .padding({bottom:14})
+      .margin({ top: 8 })
+    }
+    .width('100%')
+    .padding({ left: 16, right: 16 })
+    .onClick((event: ClickEvent) => {
+      ProcessUtils.processPage(this.contentDTO)
+    })
+  }
+}
+
+@Extend(Text)
+function bottomTextStyle() {
+  .fontSize(12)
+  .fontColor('#B0B0B0')
+}

+import { ContentDTO } from 'wdBean';
+import { CommonConstants } from 'wdConstant'
+import { DateTimeUtils } from 'wdKit/src/main/ets/utils/DateTimeUtils'
+import { ProcessUtils } from '../../utils/ProcessUtils';
+
+/**
+ * 卡片样式："appStyle":"3"
+ */
+@Component
+export struct Card3Component {
+  @State contentDTO: ContentDTO = {} as ContentDTO;
+
+  build() {
+    Column() {
+      Text(this.contentDTO.newsTitle)
+        .fontSize($r("app.float.font_size_16"))
+        .fontColor($r("app.color.color_222222"))
+        .width(CommonConstants.FULL_WIDTH)
+      Row() {
+        Text("锐评")
+          .fontSize($r("app.float.font_size_12"))
+          .fontColor($r("app.color.color_ED2800"))
+        Text(this.contentDTO.source)
+          .fontSize($r("app.float.font_size_12"))
+          .fontColor($r("app.color.color_B0B0B0"))
+          .margin({ left: 6 })
+        Image($r("app.media.point"))
+          .width(16)
+          .height(16)
+
+        Text(DateTimeUtils.formatDate(Number.parseFloat(this.contentDTO.publishTime)))
+          .fontSize($r("app.float.font_size_12"))
+          .fontColor($r("app.color.color_B0B0B0"))
+
+      }.width(CommonConstants.FULL_WIDTH)
+      .justifyContent(FlexAlign.Start)
+      .margin({ top: 8 })
+
+    }
+    .width("100%")
+    .padding({
+      top: 14,
+      left: 16,
+      right: 16,
+      bottom: 14
+    })
+    .backgroundColor($r("app.color.white"))
+    .margin({ bottom: 8 })
+    .onClick((event: ClickEvent) => {
+      ProcessUtils.processPage(this.contentDTO)
+    })
+  }
+}

+//全标题 "appStyle":"4",
+import { ContentDTO } from 'wdBean';
+import { ProcessUtils } from '../../utils/ProcessUtils';
+
+const TAG: string = 'Card4Component';
+
+/**
+ * 三图卡:
+ * compstyle:4
+ * 卡片结构：上下结构
+ * 卡片宽度:充满父窗口
+ * 卡片高度,仅包含横板图片：图片高度由图片的宽度及宽高比决定，图片宽度占父窗口'100%'，宽高比为16:9:
+ */
+@Component
+export struct Card4Component {
+  @State contentDTO: ContentDTO = {} as ContentDTO;
+
+  build() {
+    Column() {
+
+
+      //body
+      Column() {
+        //新闻标题
+        Text(this.contentDTO.newsTitle)
+          .fontSize(17)
+          .fontColor('#222222')
+          .maxLines(3)
+          .textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出的部分显示省略号。
+        //三图
+        Row() {
+          Image(this.contentDTO.fullColumnImgUrls[0]?.url)
+            .width('32%')
+
+            .height(75)
+            .borderRadius({ topLeft:4,bottomLeft:4 })
+
+          Image(this.contentDTO.fullColumnImgUrls[1]?.url)
+            .width('32%')
+            .height(75)
+
+          Image(this.contentDTO.fullColumnImgUrls[2]?.url)
+            .width('32%')
+            .height(75)
+            .borderRadius({ topRight:4,bottomRight:4 })
+
+        }
+        .justifyContent(FlexAlign.SpaceBetween)
+        .width('100%')
+        .height(75)
+        .margin({top:8})
+        .borderRadius(8)
+
+      }
+      .width('100%')
+      .justifyContent(FlexAlign.Start)
+      .alignItems(HorizontalAlign.Start)
+      .padding({top:14})
+      .onClick((event: ClickEvent)=>{
+        ProcessUtils.processPage(this.contentDTO)
+      })
+
+
+      //bottom
+      Row() {
+        Text(this.contentDTO.source)
+          .bottomTextStyle()
+        //间隔点
+        Image($r('app.media.point'))
+          .width(12)
+          .height(12)
+
+        Text(this.contentDTO.publishTime)
+          .bottomTextStyle()
+        Text(' ')
+
+        Text('518条评论')
+          .bottomTextStyle()
+
+      }
+      .width('100%')
+
+      .justifyContent(FlexAlign.Start)
+      // .padding({bottom:14})
+      .margin({top:8})
+      .padding({bottom:14})
+
+    }
+    .width('100%')
+    .padding({top:8,left:16,right:16})
+
+  }
+}
+
+
+@Extend(Text) function bottomTextStyle() {
+  .fontSize(12)
+  .fontColor('#B0B0B0')
+}

+import { ContentDTO } from 'wdBean';
+import { CommonConstants } from 'wdConstant';
+import { ProcessUtils } from '../../utils/ProcessUtils';
+
+const TAG: string = 'Card5Component';
+
+/**
+ * 卡片样式："appStyle":"5"
+ */
+@Component
+export struct Card5Component {
+  @State contentDTO: ContentDTO = {} as ContentDTO;
+
+  build() {
+    Stack() {
+      Image(this.contentDTO.coverUrl)
+        .width(CommonConstants.FULL_WIDTH)
+        .autoResize(true)
+        .borderRadius($r('app.float.image_border_radius'))
+      if (this.contentDTO.newsTitle) {
+        Row()
+          .width(CommonConstants.FULL_WIDTH)
+          .height(59)
+          .linearGradient({
+            colors: [
+              ['rgba(0, 0, 0, 0.0)', 0.0], ['rgba(0, 0, 0, 0.3)', 1.0]
+            ]
+          })
+        Row() {
+          Text(this.contentDTO.newsTitle)
+            .width(CommonConstants.FULL_WIDTH)
+            .height(CommonConstants.FULL_HEIGHT)
+            .fontColor(Color.White)
+            .fontSize($r('app.float.normal_text_size'))
+            .fontWeight(FontWeight.Bold)
+            .maxLines(2)
+            .align(Alignment.Bottom)
+        }
+        .justifyContent(FlexAlign.Start)
+        .height(40)
+        .margin({ left: 12, bottom: 10, right: 12 })
+      }
+    }
+    .alignContent(Alignment.Bottom)
+    .width(CommonConstants.FULL_WIDTH)
+    .padding(
+      { top: 16, bottom: 16, left: 14, right: 14 })
+    .onClick((event: ClickEvent) => {
+      ProcessUtils.processPage(this.contentDTO)
+    })
+
+  }
+}

+import { ContentDTO } from 'wdBean';
+import { CommonConstants, CompStyle } from 'wdConstant';
+import { DateTimeUtils } from 'wdKit';
+import { ProcessUtils } from '../../utils/ProcessUtils';
+
+const TAG: string = 'Card6Component';
+const FULL_PARENT: string = '100%';
+
+/**
+ * 卡片样式："appStyle":"6"
+ */
+@Component
+export struct Card6Component {
+  @State contentDTO: ContentDTO = {} as ContentDTO;
+
+  build() {
+    Row() {
+      Column() {
+        Column() {
+          Text(this.contentDTO.newsTitle)
+            .fontSize(16)
+            .fontWeight(FontWeight.Normal)
+            .maxLines(3)//
+            .alignSelf(ItemAlign.Start)
+            .textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出的部分显示省略号。
+        }.height("80%")
+        .justifyContent(FlexAlign.Start)
+
+        Row() {
+          if (this.contentDTO.source) {
+            Text(this.contentDTO.source)
+              .fontSize($r('app.float.font_size_12'))
+              .fontColor(Color.Gray)
+              .maxLines(1)
+              .textOverflow({ overflow: TextOverflow.Ellipsis })// 超出的部分显示省略号。
+              .width(this.contentDTO.source.length > 8 ? '50%' : '')
+            Image($r('app.media.point'))
+              .width(16)
+              .height(16)
+          }
+          if (this.contentDTO.publishTime && this.contentDTO.publishTime.length === 13) {
+            Text(DateTimeUtils.getCommentTime(Number.parseFloat(this.contentDTO.publishTime)))
+              .fontSize($r('app.float.font_size_12'))
+              .fontColor(Color.Gray)
+          }
+          Text(this.contentDTO.visitorComment + '评')
+            .fontSize($r('app.float.font_size_12'))
+            .fontColor(Color.Gray)
+            .padding({
+              left: 5
+            })
+        }.alignSelf(ItemAlign.Start)
+        .height("20%")
+        .justifyContent(FlexAlign.Start)
+      }
+      .alignItems(HorizontalAlign.Start)
+      .justifyContent(FlexAlign.Start)
+      .width('58%')
+
+      Blank(16)
+      if (this.contentDTO.coverUrl) {
+        Stack() {
+          Image(this.contentDTO.coverUrl)
+            .borderRadius(5)
+            .aspectRatio(this.contentDTO.appStyle === CompStyle.Single_ImageCard_03 ? 3 / 2 : 3 / 4)
+            .height(this.contentDTO.appStyle === CompStyle.Single_ImageCard_03 ? 90 : 180)
+          if (this.contentDTO.videoInfo) {
+            Row() {
+              Image($r('app.media.iv_card_play_yellow_flag'))
+                .width(22)
+                .height(18)
+              Text(DateTimeUtils.getFormattedDuration(this.contentDTO.videoInfo.videoDuration * 1000))
+                .fontSize($r('app.float.font_size_13'))
+                .fontWeight(400)
+                .fontColor($r('app.color.color_fff'))
+            }
+            .alignItems(VerticalAlign.Bottom)
+            .height(18)
+            .padding({ right: 4 })
+            .margin({
+              right: 4,
+              bottom: 4
+            })
+            .backgroundColor($r('app.color.color_4d000000'))
+          } else if (this.contentDTO.voiceInfo) {
+            Row() {
+              Image($r('app.media.icon_listen'))
+                .width(22)
+                .height(18)
+              Text(DateTimeUtils.getFormattedDuration(this.contentDTO.voiceInfo
+                .voiceDuration * 1000))
+                .fontSize($r('app.float.font_size_13'))
+                .fontWeight(400)
+                .fontColor($r('app.color.color_fff'))
+            }
+            .alignItems(VerticalAlign.Bottom)
+            .height(18)
+            .padding({ right: 4 })
+            .margin({
+              right: 4,
+              bottom: 4
+            })
+            .backgroundColor($r('app.color.color_4d000000'))
+          }
+        }.alignContent(Alignment.BottomEnd)
+      }
+    }
+    .onClick((event: ClickEvent) => {
+      ProcessUtils.processPage(this.contentDTO)
+    })
+    .padding(
+      { top: 16, bottom: 16, left: 14, right: 14 })
+    .width(FULL_PARENT)
+    .height(this.contentDTO.appStyle === CompStyle.Single_ImageCard_03 ? 127 : 217)
+    .justifyContent(FlexAlign.SpaceBetween)
+
+  }
+}

-import { CompDTO } from 'wdBean';
-import { CommonConstants } from 'wdConstant'
+import { CompDTO, ContentDTO } from 'wdBean';
 import { ProcessUtils } from '../../utils/ProcessUtils';
 import { ProcessUtils } from '../../utils/ProcessUtils';
+import { CardParser } from '../CardParser';
 
 
 const TAG: string = 'BigPicCardComponent';
 const TAG: string = 'BigPicCardComponent';
 
 
@@ -15,8 +15,22 @@ const TAG: string = 'BigPicCardComponent';
 @Component
 @Component
 export struct BigPicCardComponent {
 export struct BigPicCardComponent {
   @State compDTO: CompDTO = {} as CompDTO
   @State compDTO: CompDTO = {} as CompDTO
+  contentDTO: ContentDTO = {} as ContentDTO;
+
+  aboutToAppear() {
+    // 取第一个数据
+    this.contentDTO = this.compDTO.operDataList[0];
+    this.contentDTO.appStyle = "2";
+  }
 
 
   build() {
   build() {
+    this.cardBuild();
+    // this.originalBuild();
+
+  }
+
+  @Builder
+  originalBuild() {
     Column() {
     Column() {
 
 
       Column() {
       Column() {
@@ -86,10 +100,14 @@ export struct BigPicCardComponent {
     }
     }
     .width('100%')
     .width('100%')
     .padding({ left: 16, right: 16 })
     .padding({ left: 16, right: 16 })
-    .onClick((event: ClickEvent) =>{
+    .onClick((event: ClickEvent) => {
       ProcessUtils.processPage(this.compDTO.operDataList[0])
       ProcessUtils.processPage(this.compDTO.operDataList[0])
     })
     })
+  }
 
 
+  @Builder
+  cardBuild() {
+    CardParser({ contentDTO: this.contentDTO });
   }
   }
 }
 }