视频直播横划卡16:9

@@ -10,6 +10,8 @@ import { HorizontalStrokeCardThreeTwoRadioForMoreComponent } from './view/Horizo
 import { BigPicCardComponent } from './view/BigPicCardComponent';
 import { BigPicCardComponent } from './view/BigPicCardComponent';
 import { TriPicCardComponent } from './view/TriPicCardComponent';
 import { TriPicCardComponent } from './view/TriPicCardComponent';
 
 
+import { LiveHorizontalCardComponent } from './view/LiveHorizontalCardComponent';
+
 /**
 /**
  * comp适配器.
  * comp适配器.
  */
  */
@@ -36,6 +38,8 @@ export struct CompParser {
       BigPicCardComponent({ compDTO: compDTO })
       BigPicCardComponent({ compDTO: compDTO })
     } else if (compDTO.compStyle === "4") {
     } else if (compDTO.compStyle === "4") {
       TriPicCardComponent({ compDTO: compDTO })
       TriPicCardComponent({ compDTO: compDTO })
+    } else if (compDTO.compStyle === CompStyle.Zh_Single_Row_01 && compDTO.imageScale === 2 ) {
+      LiveHorizontalCardComponent({ compDTO: compDTO })
     } else {
     } else {
       // todo:组件未实现 / Component Not Implemented
       // todo:组件未实现 / Component Not Implemented
       Text(compDTO.compStyle)
       Text(compDTO.compStyle)

+// @ts-nocheck
+import { LiveVideoTypeComponent } from './LiveVideoTypeComponent'
+import { LiveHorizontalCardForOneComponent } from './LiveHorizontalCardForOneComponent'
+import { CompDTO } from '../../repository/bean/CompDTO'
+import { CommonConstants } from 'wdConstant'
+import { ContentDTO } from '../../repository/bean/ContentDTO'
+
+@Component
+export struct LiveHorizontalCardComponent {
+  @State compDTO: CompDTO = {} as CompDTO
+  build() {
+    Column() {
+      Row() {
+        Row() {
+          Image($r("app.media.redLine"))
+            .width(3)
+            .height(16)
+            .margin({ right: 4 })
+          Text(this.compDTO.objectTitle)
+            .fontSize($r("app.float.font_size_17"))
+            .fontColor($r("app.color.color_222222"))
+            .fontWeight(600)
+        }
+
+        if (this.compDTO.operDataList.length > 10) {
+          Row() {
+            Text("更多")
+              .fontSize($r("app.float.font_size_14"))
+              .fontColor($r("app.color.color_999999"))
+              .margin({ right: 1 })
+            Image($r("app.media.more"))
+              .width(14)
+              .height(14)
+          }
+        }
+      }.justifyContent(FlexAlign.SpaceBetween)
+      .padding({ left: 16, right: 16 })
+      .margin({ top: 8, bottom: 8 })
+      .width(CommonConstants.FULL_WIDTH)
+      // 多个
+      if (this.compDTO.operDataList.length >= 2) {
+        List({ space: 12 }) {
+
+          ForEach(this.compDTO.operDataList, (item: ContentDTO, index: number) => {
+            ListItem() {
+              Column() {
+                Stack({ alignContent: Alignment.BottomEnd }) {
+                  Image(item.coverUrl)
+                    .aspectRatio(16 / 9)
+                    .width(this.compDTO.operDataList.length == 2 ? 210 : 150)
+                    .borderRadius(4)
+                    .objectFit(ImageFit.Cover)
+                  if (item.objectType === '2' && item.liveInfo && item.liveInfo.liveState === 'running') {
+                    LiveVideoTypeComponent({ nType: 0, name: '直播中' })
+                      .padding({
+                        bottom: 4,
+                        right: 4
+                      })
+                  } else if (item.objectType === '1' && item.videoInfo) {
+                    LiveVideoTypeComponent({ nType: 1, name: item.videoInfo.videoDuration })
+                      .padding({
+                        bottom: 4,
+                        right: 4
+                      })
+                  }
+                }
+
+                Text(item.newsTitle)
+                  .fontSize($r("app.float.font_size_14"))
+                  .fontColor($r("app.color.color_212228"))
+                  .fontWeight(400)
+                  .maxLines(2)
+                  .textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出的部分显示省略号。
+                  .textAlign(TextAlign.Start)
+                  .margin({ top: 8 })
+                  .width(this.compDTO.operDataList.length == 2 ? 210 : 150)
+              }
+            }
+            .padding({ left: (index == 0) ? 16 : 0, right: (index == this.compDTO.operDataList.length - 1) ? 16 : 0 })
+            .onClick(() => {
+              if (item.objectType != '0') {
+                console.log(item.objectId)
+              }
+            })
+          }, item => item)
+
+        }.listDirection(Axis.Horizontal)
+        .width(CommonConstants.FULL_WIDTH)
+        .height(this.compDTO.operDataList.length == 2 ? 180 : 136)
+      } else if (this.compDTO.operDataList.length) {
+        // 一个
+        LiveHorizontalCardForOneComponent({ contentDTO: this.compDTO.operDataList[0] })
+      }
+    }
+    .width(CommonConstants.FULL_WIDTH)
+    .padding({
+      top: 14,
+    })
+    .backgroundColor($r("app.color.white"))
+  }
+}
+

+import { CommonConstants } from 'wdConstant'
+import { ContentDTO } from '../../repository/bean/ContentDTO'
+import { LiveVideoTypeComponent } from './LiveVideoTypeComponent'
+
+@Component
+export struct LiveHorizontalCardForOneComponent {
+  @State contentDTO: ContentDTO = {} as ContentDTO
+
+  build() {
+    Column() {
+      Stack({ alignContent: Alignment.BottomEnd }) {
+        Image(this.contentDTO.coverUrl)
+          .aspectRatio(16 / 9)
+          .width(CommonConstants.FULL_WIDTH)
+          .borderRadius(4)
+          .objectFit(ImageFit.Cover)
+        if (this.contentDTO.objectType === '2'
+        && this.contentDTO.liveInfo
+        && this.contentDTO.liveInfo.liveState === 'running') {
+          LiveVideoTypeComponent({ nType: 0, name: '直播中' })
+            .padding({
+              bottom: 2,
+              right: 2
+            })
+        } else if (this.contentDTO.objectType === '1' && this.contentDTO.videoInfo) {
+          LiveVideoTypeComponent({ nType: 1, name: this.contentDTO.videoInfo.videoDuration ?? '00:00' })
+            .padding({
+              bottom: 2,
+              right: 2
+            })
+        }
+      }
+
+      Text(this.contentDTO.newsTitle)
+        .fontSize($r("app.float.font_size_14"))
+        .fontColor($r("app.color.color_212228"))
+        .fontWeight(400)
+        .maxLines(1)
+        .textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出的部分显示省略号。
+        .textAlign(TextAlign.Start)
+        .margin({ top: 8 })
+        .width(CommonConstants.FULL_WIDTH)
+    }
+    .padding({
+      left: 16,
+      right: 16
+    })
+  }
+}

+@Component
+export struct LiveVideoTypeComponent {
+  @State nType: number = 0
+  @State name: string = '直播中'
+
+  build() {
+    Row() {
+      // @ts-ignore
+      Image(this.nType == 0 ? $r('app.media.videoTypeIcon') : $r('app.media.iv_card_play_yellow_flag'))
+        .width(22)
+        .height(18)
+        .padding({
+          left: 1,
+          top: 1,
+          bottom: 1,
+        })
+      Text(LiveStateName(this.name))
+        .fontColor($r('app.color.white'))
+        .fontSize(this.nType == 0 ? $r('app.float.font_size_11') : $r('app.float.font_size_13'))
+        .align(Alignment.Center)
+        .padding({
+          top: 1,
+          bottom: 1,
+        })
+    }
+    .width(60)
+    .height(20)
+    .backgroundColor($r('app.color.color_80000000'))
+
+  }
+}
+
+
+function LiveStateName(name: string): string {
+  if (name === 'wait') {
+    return '待开播'
+  }else if (name === 'running') {
+    return '直播中'
+  }else if (name === 'end') {
+    return '已结束'
+  }else if (name === 'cancel') {
+    return '已取消'
+  }else if (name === 'paused') {
+    return '暂停'
+  }
+  return name
+}

@@ -26,4 +26,5 @@ export interface CompDTO {
   provinceCode: string;
   provinceCode: string;
   sortValue: number;
   sortValue: number;
   subType: string;
   subType: string;
+  imageScale: number; // 封面图比例 1-4:3, 2-16:9, 3-3:2
 }
 }

 import { FullColumnImgUrlsDTO } from './FullColumnImgUrlsDTO';
 import { FullColumnImgUrlsDTO } from './FullColumnImgUrlsDTO';
+import  { LiveInfo } from './LiveInfo'
+import  { VideoInfo } from './VideoInfo'
+
 export interface ContentDTO {
 export interface ContentDTO {
   cityCode: string;
   cityCode: string;
   coverSize: string;
   coverSize: string;
@@ -43,4 +46,6 @@ export interface ContentDTO {
   newsTitle:string;
   newsTitle:string;
   publishTime:string;
   publishTime:string;
   fullColumnImgUrls:FullColumnImgUrlsDTO[];
   fullColumnImgUrls:FullColumnImgUrlsDTO[];
+  liveInfo?: LiveInfo; // 直播新闻信息【BFF聚合】
+  videoInfo?: VideoInfo; // 视频新闻信息【BFF聚合】，视频非原片+清晰度最高的
 }
 }

+export interface LiveInfo {
+  liveState: string; // 直播新闻-直播状态
+  liveUrl: string; //【暂时未使用，默认取第一个】直播新闻-直播地址
+  liveStartTime: string;
+  liveLandscape: string;
+  vrType: number; // 【迭代三】是否Vr,0:否，1:是
+  replayUri: string; // 直播回放地址【判断是否有回放；BFF: 允许展示回放+存在回放地址；默认取第一条】
+}

+export interface VideoInfo {
+  videoUrl: string; //视频播放地址
+  videoDuration: string; // 视频时长
+  videoLandscape: string; // 1横屏 2竖屏
+  firstFrameImageUri: string; // 首帧图；【视频内容，contentPictures中】
+}

@@ -43,6 +43,10 @@
     {
     {
       "name": "color_4d000000",
       "name": "color_4d000000",
       "value": "#4d000000"
       "value": "#4d000000"
+    },
+    {
+      "name": "color_80000000",
+      "value": "#80000000"
     }
     }
   ]
   ]
 }
 }

@@ -21,4 +21,5 @@ export const enum CompStyle {
   Masonry_Layout_01 = 'Masonry_Layout-01', // 双列瀑布流/瀑布流卡：视频、直播、专题、活动
   Masonry_Layout_01 = 'Masonry_Layout-01', // 双列瀑布流/瀑布流卡：视频、直播、专题、活动
   Title_Abbr_01 = 'Title_Abbr_01', // 标题缩略
   Title_Abbr_01 = 'Title_Abbr_01', // 标题缩略
   Title_All_01 = 'Title_All_01', // 全标题
   Title_All_01 = 'Title_All_01', // 全标题
+  Zh_Single_Row_01 = 'Zh_Single_Row-01', // 横划卡
 }
 }