适配barner提交

@@ -20,7 +20,7 @@ export struct CarouselLayout01CardView {
 
 
   build() {
   build() {
     RelativeContainer() {
     RelativeContainer() {
-      Image(this.item.hImageUrl)
+      Image(this.item.coverUrl)
         .width(CommonConstants.FULL_PARENT)
         .width(CommonConstants.FULL_PARENT)
         .height(CommonConstants.FULL_PARENT)
         .height(CommonConstants.FULL_PARENT)
         .objectFit(ImageFit.Cover)
         .objectFit(ImageFit.Cover)

-/**
- * BannerComponent
- * 轮播图卡/单图
- * 邢照杰
- */
-
-import { CommonConstants } from 'wdConstant';
-import colorSpaceManager from '@ohos.graphics.colorSpaceManager';
-import { CompUtils } from '../../utils/CompUtils';
-import { Action, CompDTO, ContentDTO, Params } from 'wdBean';
-import { Logger } from 'wdKit';
-import { WDRouterRule } from 'wdRouter';
-
+import { CompDTO, ContentDTO, } from 'wdBean';
+import { BreakpointConstants,DurationEnum } from 'wdConstant';
+import { BreakPointType, Logger } from 'wdKit';
+import { CarouselLayout01CardView } from '../page/CardView';
+import { EmptyComponent } from './EmptyComponent';
 
 
 const TAG = 'BannerComponent';
 const TAG = 'BannerComponent';
-let timerIds: number[] = [];
-
 
 
 /**
 /**
- * 轮播卡(暂时仅展示主标题，不展示子标题)
- * comp类型
- * 重磅推荐/精选/电视剧/电影/综艺/短剧/更多>/
+ * 轮播组件,即Banner/轮播大图/焦点图/自动滑动
+ * 样式：
+ * 'Carousel_Layout-01', // 通用轮播卡：视频、直播、活动、专题、榜单、外链
  */
  */
-@Entry
 @Component
 @Component
 export struct BannerComponent {
 export struct BannerComponent {
+  @StorageLink('currentBreakpoint') @Watch('watchCurrentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_XS;
   @State compDTO: CompDTO = {} as CompDTO
   @State compDTO: CompDTO = {} as CompDTO
-  @State index: number = 0;
-  private bannerContent: ContentDTO = {} as ContentDTO;
-  private swiperController: SwiperController = new SwiperController();
-
-  aboutToAppear() {
 
 
-    // Data Initialization.
-    this.bannerContent = this.compDTO.operDataList[0];
-    // Turn on scheduled task.
-    if (this.compDTO.operDataList.length > 1) {
-      startPlay(this.swiperController);
+  watchCurrentBreakpoint() {
+    Logger.info(TAG, `watchCurrentBreakpoint, this.currentBreakpoint: ${this.currentBreakpoint}`);
   }
   }
+
+  aboutToAppear() {
+    Logger.info(TAG, `aboutToAppear, beanList:${this.compDTO?.operDataList?.length}, currentBreakpoint:${this.currentBreakpoint}`);
   }
   }
 
 
   aboutToDisappear() {
   aboutToDisappear() {
-    stopPlay();
+    Logger.info(TAG, 'aboutToDisappear');
   }
   }
 
 
-  build() {
-    // 整体父视图
-    Column() {
-      // 判断数组元素个数
-      if (this.compDTO.operDataList.length > 1) {
-        // 滚动banner
-        Swiper(this.swiperController) {
-          ForEach(this.compDTO.operDataList, (item: ContentDTO, index: number) => {
-            Stack() {
-              // 背景图
-              Image(item.coverUrl)
-                .objectFit(ImageFit.Fill)
-                .borderRadius(5)
-
-              // 底部标题和时间
-              Column() {
-                Text(item.description)
-                  .fontSize(18)
-                  .margin({ bottom: 4 })
-                  .fontColor(Color.White)
-                  .fontWeight(600)
-                  .maxLines(1)
-                  .textOverflow({ overflow: TextOverflow.Ellipsis })
-                  .padding({ left: 10, right: 5 })
-                  .width('100%')
-                  .textAlign(TextAlign.Start)
-                if (item.lengthTime) {
-                  Row() {
-                    Image($r('app.media.videoTypeIcon'))
-                      .height(20)
-                      .width(20)
-                    // .margin({right:3})
-                    Text(item.lengthTime + '')
-                      .padding({ left: 5, right: 5 })
-                      .fontColor(Color.White)
-                  }
-                  .backgroundColor('#333333')
-                  .height(20)
-                  .margin({ right: 5, bottom: 3 })
-                  .alignSelf(ItemAlign.End)
-                  .borderRadius(2)
+  onPageShow() {
+    Logger.info(TAG, 'onPageShow');
   }
   }
+
+  onPageHide() {
+    Logger.info(TAG, 'onPageHide');
   }
   }
-              .height('50')
-              .width('100%')
+
+  onBackPress() {
+    Logger.info(TAG, 'onBackPress');
   }
   }
-            .alignContent(Alignment.BottomStart)
-            .onClick((event: ClickEvent) => {
-              Logger.info(TAG, `BannerComponent onClick event index: ${this.index}`);
-              // let taskAction: Action = {
-              //   type: 'JUMP_H5_BY_WEB_VIEW',
-              //   params: {
-              //     url: ConfigConstants.DETAIL_URL
-              //   } as Params,
-              // };
-              // WDRouterRule.jumpWithAction(taskAction)
 
 
-              let taskAction: Action = {
-                type: 'JUMP_DETAIL_PAGE',
-                params: {
-                  detailPageType: 7, // 沉浸式竖屏详情页
-                  contentID: '863556812'
-                } as Params,
-              };
-              WDRouterRule.jumpWithAction(taskAction)
+  build() {
+    if (this.compDTO && this.compDTO?.operDataList?.length > 0) {
+      Swiper() {
+        ForEach(this.compDTO?.operDataList, (item: ContentDTO, index: number) => {
+          this.buildItemBanner01(item, index)
         })
         })
-          }, (item: ContentDTO, index: number) => JSON.stringify(item))
       }
       }
-        .width('100%')
-        .height('100%')
-        .index(this.index)
-        .indicatorStyle({
-          selectedColor: Color.White,
-          color: Color.Gray,
-          size: 18,
-          left: 15
+      .margin({ left: $r('app.float.main_margin'), right: $r('app.float.main_margin') })
+      .padding({ bottom: 14 })
+      .displayCount(this.buildDisplayCount()) // 仅展示1个图片
+      .cachedCount(2)
+      .index(1) // The default index of Swiper.
+      .autoPlay(true)
+      .interval(DurationEnum.DURATION_4)
+      .indicator(Indicator.dot()
+        .right(5)
+        .itemWidth(4)
+        .itemHeight(4)
+        .selectedItemWidth(10)
+        .selectedItemHeight(6))
+      .loop(true)
+      .duration(DurationEnum.DURATION_4)
+      .vertical(false)
+      .curve(Curve.Linear)
+      .onChange((index: number) => {
+        Logger.info(TAG, `Swiper onChange index : ${index}`);
       })
       })
-        .indicator(true)
-        .duration(500)
     } else {
     } else {
-        // 不滚动banner
-        Stack() {
-          // 背景图
-          Image(this.bannerContent.coverUrl.toString())
-            .objectFit(ImageFit.Fill)
-            .borderRadius(5)
-
-          // 底部标题和时间
-          Row() {
-            // 标题
-            Text(this.bannerContent.description.toString())
-              .fontSize(18)
-              .fontColor(Color.White)
-              .fontWeight(600)
-              .maxLines(2)
-              .textOverflow({ overflow: TextOverflow.Ellipsis })
-              .padding({ left: 10, right: 0, bottom: 5 })
-              .width('80%')
-            // 时间
-            if (this.bannerContent.lengthTime) {
-              Row() {
-                Image($r('app.media.videoTypeIcon'))
-                  .height(20)
-                  .width(20)
-                // .margin({right:3})
-                Text(this.bannerContent.lengthTime.toString())
-                  .padding({ left: 5, right: 5 })
-                  .fontColor(Color.White)
-              }
-              .backgroundColor('#333333')
-              .height(20)
-              .borderRadius(2)
-              .margin({ bottom: 6 })
-            }
+      EmptyComponent({ emptyHeight: 200 })
     }
     }
-          .width('100%')
-          .height('100%')
-          .alignItems(VerticalAlign.Bottom)
   }
   }
-        .alignContent(Alignment.BottomStart)
-        .width('100%')
-        .height('100%')
-      }
-    }
-    .width('100%')
-    .aspectRatio(1.7)
-    .padding({ left: 10, right: 15, top: 10, bottom: 10 })
+
+  public buildDisplayCount(): number {
+    return new BreakPointType({ xs: 1, sm: 1, md: 2, lg: 3 }).getValue(this.currentBreakpoint)
   }
   }
-}
 
 
-/**
- * start scheduled task.
+  /**
+   * 组件项
    *
    *
- * @param swiperController Controller.
+   * @param programmeBean item 组件项
    */
    */
-export function startPlay(swiperController: SwiperController) {
-  let timerId = setInterval(() => {
-    swiperController.showNext();
-  }, 3000);
-  timerIds.push(timerId);
-}
-
-/**
- * stop scheduled task.
- */
-export function stopPlay() {
-  timerIds.forEach((item) => {
-    clearTimeout(item);
+  @Builder
+  buildItemBanner01(item: ContentDTO, index: number) {
+    CarouselLayout01CardView({
+      item: item,
+      index: index
     })
     })
+  }
 }
 }