zhangbo1_wd
@@ -16,3 +16,6 @@ export { TopNavigationComponent } from "./components/TopNavigationComponent" @@ -16,3 +16,6 @@ export { TopNavigationComponent } from "./components/TopNavigationComponent"
16 export { LabelComponent } from "./components/LabelComponent" 16 export { LabelComponent } from "./components/LabelComponent"
17 17
18 export { SmallVideoCardComponent } from "./components/SmallVideoCardComponent" 18 export { SmallVideoCardComponent } from "./components/SmallVideoCardComponent"
  19 +
  20 +export { BannerComponent } from "./components/BannerComponent"
  21 +
  1 +/**
  2 + * BannerComponent
  3 + * 轮播图卡/单图
  4 + * 邢照杰
  5 + */
  6 +
  7 +import { CommonConstants } from 'wdConstant';
  8 +import colorSpaceManager from '@ohos.graphics.colorSpaceManager';
  9 +import { CompDTO } from '../repository/bean/CompDTO';
  10 +import { CompUtils } from '../utils/CompUtils';
  11 +import { ContentDTO } from '../repository/bean/ContentDTO';
  12 +
  13 +
  14 +const TAG = 'BannerComponent';
  15 +let timerIds: number[] = [];
  16 +
  17 +
  18 +/**
  19 + * 轮播卡(暂时仅展示主标题,不展示子标题)
  20 + * comp类型
  21 + * 重磅推荐/精选/电视剧/电影/综艺/短剧/更多>/
  22 + */
  23 +@Entry
  24 +@Component
  25 +export struct BannerComponent {
  26 + @State compDTO: CompDTO = {} as CompDTO
  27 + @State index: number = 0;
  28 + private bannerContent:ContentDTO;
  29 + private swiperController: SwiperController = new SwiperController();
  30 +
  31 + aboutToAppear() {
  32 +
  33 + // Data Initialization.
  34 + this.bannerContent = this.compDTO.operDataList[0];
  35 + // Turn on scheduled task.
  36 + if (this.compDTO.operDataList.length > 1) {
  37 + startPlay(this.swiperController);
  38 + }
  39 + }
  40 +
  41 + aboutToDisappear() {
  42 + stopPlay();
  43 + }
  44 +
  45 + build() {
  46 + // 整体父视图
  47 + Column() {
  48 + // 判断数组元素个数
  49 + if (this.compDTO.operDataList.length > 1) {
  50 + // 滚动banner
  51 + Swiper(this.swiperController) {
  52 + ForEach(this.compDTO.operDataList, item => {
  53 + Stack() {
  54 + // 背景图
  55 + Image(item.coverUrl)
  56 + .objectFit(ImageFit.Fill)
  57 + .borderRadius(5)
  58 +
  59 + // 底部标题和时间
  60 + Column() {
  61 + Text(item.description)
  62 + .fontSize(18)
  63 + .margin({ bottom: 4 })
  64 + .fontColor(Color.White)
  65 + .fontWeight(600)
  66 + .maxLines(1)
  67 + .textOverflow({ overflow: TextOverflow.Ellipsis })
  68 + .padding({ left: 10, right: 5 })
  69 + .width('100%')
  70 + .textAlign(TextAlign.Start)
  71 + if (item.lengthTime) {
  72 + Row() {
  73 + Image($r('app.media.videoTypeIcon'))
  74 + .height(20)
  75 + .width(20)
  76 + // .margin({right:3})
  77 + Text(item.lengthTime)
  78 + .padding({ left: 5, right: 5 })
  79 + .fontColor(Color.White)
  80 + }
  81 + .backgroundColor('#333333')
  82 + .height(20)
  83 + .margin({ right: 5, bottom: 3 })
  84 + .alignSelf(ItemAlign.End)
  85 + .borderRadius(2)
  86 + }
  87 + }
  88 + .height('50')
  89 + .width('100%')
  90 + }
  91 + .alignContent(Alignment.BottomStart)
  92 + }, item => JSON.stringify(item))
  93 + }
  94 + .width('100%')
  95 + .height('100%')
  96 + .index(this.index)
  97 + .indicatorStyle({
  98 + selectedColor: Color.White,
  99 + color: Color.Gray,
  100 + size: 18,
  101 + left: 15
  102 + })
  103 + .indicator(true)
  104 + .duration(500)
  105 + } else {
  106 + // 不滚动banner
  107 + Stack() {
  108 + // 背景图
  109 + Image(this.bannerContent.coverUrl.toString())
  110 + .objectFit(ImageFit.Fill)
  111 + .borderRadius(5)
  112 +
  113 + // 底部标题和时间
  114 + Row() {
  115 + // 标题
  116 + Text(this.bannerContent.description.toString())
  117 + .fontSize(18)
  118 + .fontColor(Color.White)
  119 + .fontWeight(600)
  120 + .maxLines(2)
  121 + .textOverflow({ overflow: TextOverflow.Ellipsis })
  122 + .padding({ left: 10, right: 0 ,bottom: 5 })
  123 + .width('80%')
  124 + // 时间
  125 + if (this.bannerContent.lengthTime) {
  126 + Row() {
  127 + Image($r('app.media.videoTypeIcon'))
  128 + .height(20)
  129 + .width(20)
  130 + // .margin({right:3})
  131 + Text(this.bannerContent.lengthTime.toString())
  132 + .padding({ left: 5, right: 5 })
  133 + .fontColor(Color.White)
  134 + }
  135 + .backgroundColor('#333333')
  136 + .height(20)
  137 + .borderRadius(2)
  138 + .margin({ bottom: 6 })
  139 + }
  140 + }
  141 + .width('100%')
  142 + .height('100%')
  143 + .alignItems(VerticalAlign.Bottom)
  144 + }
  145 + .alignContent(Alignment.BottomStart)
  146 + .width('100%')
  147 + .height('100%')
  148 + }
  149 + }
  150 + .width('100%')
  151 + .aspectRatio(1.7)
  152 + .padding({left:10,right:15,top:10,bottom:10})
  153 + }
  154 +}
  155 +
  156 +/**
  157 + * start scheduled task.
  158 + *
  159 + * @param swiperController Controller.
  160 + */
  161 +export function startPlay(swiperController: SwiperController) {
  162 + let timerId = setInterval(() => {
  163 + swiperController.showNext();
  164 + }, 3000);
  165 + timerIds.push(timerId);
  166 +}
  167 +
  168 +/**
  169 + * stop scheduled task.
  170 + */
  171 +export function stopPlay() {
  172 + timerIds.forEach((item) => {
  173 + clearTimeout(item);
  174 + })
  175 +}
@@ -8,6 +8,7 @@ import { LabelComponent } from './LabelComponent'; @@ -8,6 +8,7 @@ import { LabelComponent } from './LabelComponent';
8 import { LoadingComponent } from './LoadingComponent'; 8 import { LoadingComponent } from './LoadingComponent';
9 import { TitleAbbrComponent } from './TitleAbbrComponent'; 9 import { TitleAbbrComponent } from './TitleAbbrComponent';
10 import { TitleAllComponent } from './TitleAllComponent'; 10 import { TitleAllComponent } from './TitleAllComponent';
  11 +import {BannerComponent} from './BannerComponent'
11 12
12 const TAG = 'PageComponent'; 13 const TAG = 'PageComponent';
13 14
@@ -52,6 +53,8 @@ export struct PageComponent { @@ -52,6 +53,8 @@ export struct PageComponent {
52 TitleAbbrComponent({ compDTO: compDTO }) 53 TitleAbbrComponent({ compDTO: compDTO })
53 } else if (compDTO.compStyle === CompStyle.Title_All_01) { 54 } else if (compDTO.compStyle === CompStyle.Title_All_01) {
54 TitleAllComponent({ compDTO: compDTO }) 55 TitleAllComponent({ compDTO: compDTO })
  56 + } else if(compDTO.compStyle === CompStyle.Carousel_Layout_01) {
  57 + BannerComponent({ compDTO: compDTO })
55 } else { 58 } else {
56 // todo:组件未实现 / Component Not Implemented 59 // todo:组件未实现 / Component Not Implemented
57 Text(compDTO.compStyle) 60 Text(compDTO.compStyle)
@@ -10,7 +10,7 @@ export interface ContentDTO { @@ -10,7 +10,7 @@ export interface ContentDTO {
10 heatValue: string; 10 heatValue: string;
11 innerUrl: string; 11 innerUrl: string;
12 landscape: number; 12 landscape: number;
13 - // lengthTime?: any; 13 + lengthTime?: any;
14 linkUrl: string; 14 linkUrl: string;
15 openLikes: number; 15 openLikes: number;
16 openUrl: string; 16 openUrl: string;
  1 +{
  2 + "src": [
  3 + "pages/Index",
  4 + "pages/MainPage"
  5 + ]
  6 +}