视频频道入口文件

@@ -9,7 +9,7 @@ export class WDRouterPage {
     this.pagePath = pagePath
   }
 
-  static getBundleInfo(){
+  static getBundleInfo() {
     let bundleInfo = bundleManager.getBundleInfoForSelfSync(bundleManager.BundleFlag.GET_BUNDLE_INFO_DEFAULT)
     return `@bundle:${bundleInfo.name}/${"phone"}/${"ets/pages/MainPage"}`
   }
@@ -35,6 +35,8 @@ export class WDRouterPage {
   // 短视频详情页
   static detailVideoListPage = new WDRouterPage("wdDetailPlayShortVideo", "ets/pages/DetailVideoListPage");
   static detailPlayShortVideoPage = new WDRouterPage("wdDetailPlayShortVideo", "ets/pages/DetailPlayShortVideoPage");
+  static VideoChannelDetail = new WDRouterPage("wdDetailPlayShortVideo", "ets/pages/VideoChannelDetail");
+  static LottieViewDemo = new WDRouterPage("wdDetailPlayShortVideo", "ets/pages/LottieViewDemo");
   // 点播详情页
   static detailPlayVodPage = new WDRouterPage("wdDetailPlayVod", "ets/pages/DetailPlayVodPage");
   // 直播详情页
@@ -75,15 +77,12 @@ export class WDRouterPage {
   //其他普通用户 主页
   static otherNormalUserHomePagePage = new WDRouterPage("wdComponent", "ets/pages/OtherNormalUserHomePage");
   static guidePage = new WDRouterPage("wdLogin", "ets/pages/guide/GuidePages");
-
   //隐私政策页面
   static privacyPage = new WDRouterPage("phone", "ets/pages/launchPage/PrivacyPage");
   //启动广告页面
   static launchAdvertisingPage = new WDRouterPage("phone", "ets/pages/launchPage/LaunchAdvertisingPage");
   //主页
   static mainPage = new WDRouterPage("phone", "ets/pages/MainPage");
-
-
   // static loginProtocolPage = new WDRouterPage("wdLogin", "ets/pages/login/LoginProtocolWebview");
 
   //播报页面

@@ -34,7 +34,8 @@ export { ENewspaperItemComponent } from "./src/main/ets/components/ENewspaperIte
 
 export { ENewspaperListDialog } from "./src/main/ets/dialog/ENewspaperListDialog"
 
-export { MorningEveningPaperComponent } from "./src/main/ets/components/MorningEveningPaper/MorningEveningPaperComponent"
+export { MorningEveningPaperComponent
+} from "./src/main/ets/components/MorningEveningPaper/MorningEveningPaperComponent"
 
 export { ImageAndTextPageComponent } from "./src/main/ets/components/ImageAndTextPageComponent"
 
@@ -62,3 +63,4 @@ export { FirstTabTopSearchComponent } from "./src/main/ets/components/search/Fir
 
 export { ListHasNoMoreDataUI } from "./src/main/ets/components/reusable/ListHasNoMoreDataUI"
 
+export { LottieView } from './src/main/ets/lottie/LottieView'

+import lottie, { AnimationSegment } from '@ohos/lottie';
+
+@Component
+export struct LottieView {
+  @Prop name: string = ''
+  @Prop path: string = ''
+  @Prop lottieWidth?: number = 30
+  @Prop lottieHeight?: number = 30
+  @Prop autoplay?: boolean = false
+  @Prop loop?: boolean = false
+  @Prop initialSegment?: AnimationSegment = [0, 120] // 动画起始帧
+  @Prop onReady: (animateItem: ESObject) => void // 动画初始化完成事件
+  @Prop onComplete?: () => void // 动画完成事件
+  private politeChickyController: CanvasRenderingContext2D = new CanvasRenderingContext2D(); // CanvasRenderingContext2D对象
+  private animateItem: ESObject = null; // 初始化loadAnimation接口的返回对象
+
+  // 页面隐藏销毁动画
+  onPageHide(): void {
+    this.animateItem.destroy()
+
+    if (this.onComplete) {
+      this.animateItem.removeEventListener('complete', this.onComplete)
+    }
+  }
+
+  /**
+   * 加载动画
+   * @param autoplay 控制动画是否自动播放参数
+   */
+  loadAnimation() {
+    // 销毁动画，减少缓存
+    if (this.animateItem !== null) {
+      this.animateItem.destroy();
+      this.animateItem = null;
+    }
+
+    this.animateItem = lottie.loadAnimation({
+      container: this.politeChickyController,
+      renderer: 'canvas',
+      loop: this.loop,
+      autoplay: this.autoplay,
+      name: this.name, // 动画名称
+      path: this.path, // hap包内动画资源文件路径，仅支持json格式
+      // initialSegment: this.initialSegment
+    })
+    if (this.initialSegment) {
+      this.animateItem.initialSegment = this.initialSegment
+    }
+
+    if (this.onComplete) {
+      this.animateItem.addEventListener('complete', this.onComplete)
+    }
+
+  }
+
+  build() {
+    Stack({ alignContent: Alignment.TopStart }) {
+      Canvas(this.politeChickyController)
+        .width(this.lottieWidth)
+        .height(this.lottieHeight)
+        .onReady(() => {
+          this.loadAnimation();
+          if (this.onReady) {
+            this.onReady(this.animateItem)
+          }
+        })
+        .onClick(() => {
+          this.animateItem.play()
+        })
+    }
+  }
+}

+import lottie, { AnimationItem, AnimationSegment } from '@ohos/lottie';
+
+@Component
+export struct LottieView {
+  @Prop name: string
+  @Prop path: string
+  @Prop lottieWidth: number = 30
+  @Prop lottieHeight: number = 30
+  @Prop autoplay: boolean = false
+  @Prop loop: boolean = false
+  @Prop initialSegment?: AnimationSegment = [0, 120] // 动画起始帧
+  @Prop onReady: (animateItem: AnimationItem | null) => void // 动画初始化完成事件
+  @Prop onComplete: () => void = () => {
+  } // 动画完成事件
+  private politeChickyController: CanvasRenderingContext2D = new CanvasRenderingContext2D(); // CanvasRenderingContext2D对象
+  private animateItem: AnimationItem | null = null; // 初始化loadAnimation接口的返回对象
+
+  // 页面隐藏销毁动画
+  onPageHide(): void {
+    this.animateItem?.destroy()
+
+    if (this.onComplete) {
+      this.animateItem?.removeEventListener('complete', this.onComplete)
+    }
+  }
+
+  /**
+   * 加载动画
+   * @param autoplay 控制动画是否自动播放参数
+   */
+  loadAnimation() {
+    // 销毁动画，减少缓存
+    if (this.animateItem !== null) {
+      this.animateItem.destroy();
+      this.animateItem = null;
+    }
+
+    this.animateItem = lottie.loadAnimation({
+      container: this.politeChickyController,
+      renderer: 'canvas',
+      loop: this.loop,
+      autoplay: this.autoplay,
+      name: this.name, // 动画名称
+      path: this.path, // hap包内动画资源文件路径，仅支持json格式
+      // initialSegment: this.initialSegment
+    })
+    if (this.initialSegment) {
+      this.animateItem.segments = this.initialSegment
+    }
+
+    if (this.onComplete) {
+      this.animateItem.addEventListener('complete', this.onComplete)
+    }
+
+  }
+
+  build() {
+    Stack({ alignContent: Alignment.TopStart }) {
+      Canvas(this.politeChickyController)
+        .width(this.lottieWidth)
+        .height(this.lottieHeight)
+        .backgroundColor(Color.Black)
+        .onReady(() => {
+          this.loadAnimation();
+          if (this.onReady) {
+            this.onReady(this.animateItem)
+          }
+        })
+        .onClick(() => {
+          this.animateItem?.play()
+        })
+    }
+  }
+}

@@ -83,6 +83,9 @@ export struct DetailVideoListPage {
 
   }
 
+  /**
+   * 查询视频列表用于翻页
+   */
   async queryVideoList() {
     await ContentDetailRequest.postRecommendVideoList({
       pageSize: 5,
@@ -110,15 +113,6 @@ export struct DetailVideoListPage {
           }.width('100%')
           .height('100%')
         }, (item: ContentDetailDTO) => item.newsId + '')
-
-        // ForEach(this.testData, (item: string, index: number) => {
-        //   Column() {
-        //     Test({ currentItem: item, currentIndex: this.currentIndex, index: index })
-        //   }
-        //   .width('100%')
-        //   .height('100%')
-        // }, (item: string) => item)
-
       }
       .cachedCount(-1)
       .indicator(false)
@@ -126,7 +120,8 @@ export struct DetailVideoListPage {
       .loop(false)
       .width('100%')
       .height('100%')
-
+      // 扩展至所有非安全区域
+      .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
       .onChange((index: number) => {
         this.currentIndex = index
         console.info('onChange==', index.toString())

+import { AnimationItem } from '@ohos/lottie'
+import { LottieView } from 'wdComponent/Index'
+
+
+@Component
+export struct LottieViewDemo {
+  @State
+  animateItem: AnimationItem | null = null
+
+  build() {
+    Column() {
+      Text('点击开始')
+        .fontSize(30)
+        .backgroundColor(Color.Blue)
+        .padding(20)
+        .fontColor(Color.White)
+        .borderRadius(10)
+        .fontWeight(500)
+      LottieView({
+        name: 'lottieDemo',
+        path: 'common/lottie/politeChicky.json',
+        onReady: (animateItem: AnimationItem | null) => {
+          this.animateItem = animateItem
+        },
+        onComplete: () => {
+          console.log('onComplete===')
+        }
+      })
+    }
+    .width(200)
+    .height(200)
+    .alignItems(HorizontalAlign.Center)
+    .backgroundImageSize(ImageSize.Cover)
+
+  }
+}
\ No newline at end of file

+import { Action, ContentDetailDTO, InteractDataDTO } from 'wdBean/Index';
+import { ContentDetailRequest } from 'wdDetailPlayApi/Index'
+import { ResponseDTO } from 'wdNetwork/Index';
+import { DetailPlayShortVideoPage } from './DetailPlayShortVideoPage'
+import { Test } from './Test'
+import router from '@ohos.router';
+import window from '@ohos.window';
+import { contentListParams } from 'wdDetailPlayApi/src/main/ets/request/ContentDetailRequest';
+
+@Entry
+@Component
+export struct VideoChannelDetail {
+  private contentId: string = ''
+  private relId: string = ''
+  private relType: string = ''
+  private swiperController: SwiperController = new SwiperController()
+  @State data: ContentDetailDTO[] = []
+  @State testData: string[] = ['111', '222', '333']
+  @State currentIndex: number = 0
+  @State interactDataList: InteractDataDTO[] = []
+
+  async aboutToAppear(): Promise<void> {
+    let data: ContentDetailDTO[] = []
+    let action: Action = router.getParams() as Action
+    if (action) {
+      this.contentId = action.params?.contentID || ''
+      if (action.params && action.params.extra) {
+        this.relId = action.params.extra.relId || ''
+        this.relType = action.params.extra.relType || ''
+      }
+      await ContentDetailRequest.getContentDetail({
+        contentId: this.contentId,
+        relId: this.relId,
+        relType: this.relType
+      }).then((resDTO: ResponseDTO<ContentDetailDTO[]>) => {
+        console.error('resDTO==', JSON.stringify(resDTO.data))
+        if (resDTO.data) {
+          this.data.push(resDTO.data[0])
+        }
+
+      })
+    }
+
+    await this.queryVideoList()
+
+    // await ContentDetailRequest.postRecommendVideoList({
+    //   pageSize: 5,
+    //   refreshCnt: 1
+    // }).then(res => {
+    //   if (res.data) {
+    //     data = data.concat(res.data)
+    //   }
+    //   console.log('res1===', JSON.stringify(res))
+    //   console.log('res==' + this.data)
+    // })
+
+
+    if (this.data.length > 0) {
+      const params: contentListParams = {
+        contentList: []
+      }
+      this.data.map(item => {
+        params.contentList.push({
+          contentId: item.newsId + '',
+          contentType: item.newsType
+        })
+      })
+      // 批量查询内容当前用户点赞、收藏状态
+      await ContentDetailRequest.getContentInteract(params).then(res => {
+        if (res.data) {
+          this.interactDataList = res.data || []
+        }
+        console.log('获取互动点赞等数据===', JSON.stringify(res))
+      })
+      // 查询各类型内容动态数据接口V2
+
+    }
+
+    // this.data = data
+    console.error('aboutToAppear===', this.data.length)
+
+
+  }
+
+  /**
+   * 查询视频列表用于翻页
+   */
+  async queryVideoList() {
+    await ContentDetailRequest.postRecommendVideoList({
+      pageSize: 5,
+      refreshCnt: 1
+    }).then(res => {
+      if (res.data) {
+        this.data = this.data.concat(res.data)
+      }
+      // console.log('queryVideoList===', JSON.stringify(this.data))
+    })
+  }
+
+  build() {
+    Column() {
+      Swiper(this.swiperController) {
+
+        ForEach(this.data, (item: ContentDetailDTO, index: number) => {
+          Column() {
+            DetailPlayShortVideoPage({
+              contentDetailData: item,
+              currentIndex: this.currentIndex,
+              index: index,
+              interactData: this.interactDataList[index]
+            })
+          }.width('100%')
+          .height('100%')
+        }, (item: ContentDetailDTO) => item.newsId + '')
+      }
+      .cachedCount(-1)
+      .indicator(false)
+      .vertical(true)
+      .loop(false)
+      .width('100%')
+      .height('100%')
+      // 扩展至所有非安全区域
+      .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
+      .onChange((index: number) => {
+        this.currentIndex = index
+        console.info('onChange==', index.toString())
+
+        if (this.currentIndex === this.data.length - 1) {
+          this.queryVideoList()
+        }
+      })
+
+    }.width('100%').height('100%')
+  }
+}
\ No newline at end of file

 {
   "src": [
-    "pages/DetailVideoListPage"
+    "pages/DetailVideoListPage",
+    "pages/VideoChannelDetail"
   ]
 }
\ No newline at end of file