视频频道页改成沉浸式

zhenghy
Commit a0a77bd48b7f301fefafb1b20abb5c476f890784 a0a77bd4 1 parent fe964b6d
Showing 3 changed files with 174 additions and 52 deletions
sight_harmony/features/wdComponent/src/main/ets/components/page/BottomNavigationComponent.ets
sight_harmony/features/wdComponent/src/main/ets/components/page/TopNavigationComponent.ets
sight_harmony/features/wdComponent/src/main/ets/components/page/VideoChannelPage.ets
--- a/sight_harmony/features/wdComponent/src/main/ets/components/page/BottomNavigationComponent.ets
View file @a0a77bd
+++ b/sight_harmony/features/wdComponent/src/main/ets/components/page/BottomNavigationComponent.ets
View file @a0a77bd
@@ -7,6 +7,7 @@ import { CompUtils } from '../../utils/CompUtils';
 import PageViewModel from '../../viewmodel/PageViewModel';
 import HomeChannelUtils, { AssignChannelParam } from 'wdRouter/src/main/ets/utils/HomeChannelUtils';
 import { Message } from 'wdJsBridge/src/main/ets/bean/Message';
+import { VideoChannelPage } from './VideoChannelPage';
 const TAG = 'BottomNavigationComponent';
 let storage = LocalStorage.getShared();
@@ -80,6 +81,12 @@ export struct BottomNavigationComponent {
             if (CompUtils.isMine(navItem)) {
               // 我的页面组件数据列表
               MinePageComponent()
+            } else if (navItem.name === '视频') {
+              // 视频频道，包含视频和直播
+              VideoChannelPage({
+                topNavList: navItem.topNavChannelList.filter(item => item.channelId != 2073),
+                _currentNavIndex: $currentNavIndex,
+              })
             } else {
               TopNavigationComponent({
                 groupId: navItem.id,
@@ -95,9 +102,11 @@ export struct BottomNavigationComponent {
           }
         }
         .tabBar(this.tabBarBuilder(navItem, index))
+        .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
       });
     }
+    .scrollable(false)
     .animationDuration(0)
     .barHeight($r('app.float.bottom_navigation_barHeight'))
     .barMode(BarMode.Fixed)
@@ -115,7 +124,12 @@ export struct BottomNavigationComponent {
     Stack({ alignContent: Alignment.Bottom }) {
       Image(this.currentNavIndex === index ? navItem.iconC : navItem.icon)
         .height(CommonConstants.FULL_PARENT)
-        .padding({ bottom: 15, left: 10, right: 10, top: 2 })
+        .padding({
+          bottom: 15,
+          left: 10,
+          right: 10,
+          top: 2
+        })
         .aspectRatio(this.ASPECT_RATIO_1_1)
       Text(navItem.name)
@@ -130,13 +144,13 @@ export struct BottomNavigationComponent {
     .hoverEffect(HoverEffect.Highlight)
     .onClick(() => {
       Logger.info(TAG, `onChange, index: ${index}`);
-      this.onBottomNavigationIndexChange(navItem,index)
+      this.onBottomNavigationIndexChange(navItem, index)
     })
   }
   // 底导切换函数
-  async onBottomNavigationIndexChange(navItem:BottomNavDTO,index:number) {
+  async onBottomNavigationIndexChange(navItem: BottomNavDTO, index: number) {
     Logger.info(TAG, `onBottomNavigationIndexChange this.currentNavIndex: ${this.currentNavIndex}`);
     if (navItem.name === '我的') {
       this.barBackgroundColor = Color.White
@@ -154,8 +168,9 @@ export struct BottomNavigationComponent {
     // 请求顶导数据(参数）：
   }
+
   //请求顶导数据
-  async getTopNavList(id:number){
+  async getTopNavList(id: number) {
     let bottomNavDetail = await PageViewModel.getBottomNavDetailData(id)
     this.topNavList = bottomNavDetail?.topNavChannelList || []
   }
--- a/sight_harmony/features/wdComponent/src/main/ets/components/page/TopNavigationComponent.ets
View file @a0a77bd
+++ b/sight_harmony/features/wdComponent/src/main/ets/components/page/TopNavigationComponent.ets
View file @a0a77bd
 import { BottomNavDTO, CompDTO, TopNavDTO } from 'wdBean';
-import { LazyDataSource, Logger,SPHelper } from 'wdKit';
+import { LazyDataSource, Logger, SPHelper } from 'wdKit';
 import { SpConstants } from 'wdConstant';
 import { ProcessUtils } from 'wdRouter';
 import { PageComponent } from './PageComponent';
@@ -31,13 +31,13 @@ export struct TopNavigationComponent {
   @Consume isLayoutFullScreen: boolean
   @Consume bottomRectHeight: number
   @Consume topRectHeight: number
-  @Consume @Watch('topOrBottomNavChange') currentBottomNavInfo: BottomNavDTO // 当前底导信息
+  @Consume currentBottomNavInfo: BottomNavDTO // 当前底导信息
   @Consume barBackgroundColor: Color
   @State bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') || 0
   @State topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0
   @Link _currentNavIndex?: number;
   // 顶导当前选中/焦点下标
-  @State @Watch('topOrBottomNavChange') currentTopNavSelectedIndex: number = 0;
+  @State currentTopNavSelectedIndex: number = 0;
   @State currentTopNavName: string = '';
   // 顶导数据
   @State @Watch('onTopNavigationDataUpdated') topNavList: TopNavDTO[] = []
@@ -68,20 +68,6 @@ export struct TopNavigationComponent {
   private tabsWidth: number = 0
   //定时器延时处理切换至版面、播报tab时 返回上一个tab
   @State tabTimmer: number = 0
-  topOrBottomNavChange() {
-    if (this.currentBottomNavName === this.currentBottomNavInfo?.name) {
-      this.setBarBackgroundColor()
-    }
-  }
-
-  setBarBackgroundColor() {
-    console.error('setBarBackgroundColor', this.currentTopNavName, this.currentBottomNavInfo?.name)
-    if (this.currentTopNavName === '视频' && this.currentBottomNavInfo?.name === '视频') {
-      this.barBackgroundColor = Color.Black
-    } else {
-      this.barBackgroundColor = Color.White
-    }
-  }
   //处理新闻tab顶导频道数据
   topNavListHandle() {
@@ -129,7 +115,7 @@ export struct TopNavigationComponent {
         item.myChannel = '1'
       }
       if (item.channelType === 2) {
-        if(cityName.includes(item.name)){
+        if (cityName.includes(item.name)) {
           item.myChannel = '1'
         }
         item.localChannel = '1'
@@ -158,8 +144,8 @@ export struct TopNavigationComponent {
     })
-    if(cityName){
-      let index = _myChannelList.findIndex(ele=> cityName.includes(ele.name))
+    if (cityName) {
+      let index = _myChannelList.findIndex(ele => cityName.includes(ele.name))
       const localChannelitem = _myChannelList.splice(index, 1)[0];
       // 将当前地区频道插入到第四个
       _myChannelList.splice(3, 0, localChannelitem);
@@ -170,9 +156,10 @@ export struct TopNavigationComponent {
     // 崩溃
     // this.currentTopNavName = this._currentNavIndex === 0 ? this.myChannelList[0].name : this.topNavList[0].name
-    if (this._currentNavIndex === 0 && this.myChannelList && this.myChannelList.length > 0 &&  this.myChannelList[0].name) {
-      this.currentTopNavName =  this.myChannelList[0].name
-    }else if(this._currentNavIndex != 0 && this.topNavList && this.topNavList.length > 0 &&  this.topNavList[0].name){
+    if (this._currentNavIndex === 0 && this.myChannelList && this.myChannelList.length > 0 &&
+    this.myChannelList[0].name) {
+      this.currentTopNavName = this.myChannelList[0].name
+    } else if (this._currentNavIndex != 0 && this.topNavList && this.topNavList.length > 0 && this.topNavList[0].name) {
       this.currentTopNavName = this.topNavList[0].name
     }
@@ -241,15 +228,7 @@ export struct TopNavigationComponent {
           ForEach(this.currentBottomNavName === '新闻' ? this.myChannelList : this.topNavList,
             (navItem: TopNavDTO, index: number) => {
               TabContent() {
-                if (this.currentBottomNavName === '视频' && navItem.name === '视频') {
-                  VideoChannelDetail({
-                    bottomNavIndex: $_currentNavIndex,
-                    topNavIndex: $currentTopNavSelectedIndex,
-                    groupId: this.groupId + '',
-                    pageId: navItem.pageId + '',
-                    channelId: navItem.channelId + '',
-                  })
-                } else if (this.currentBottomNavName === '人民号' && navItem.name === '关注') {
+                if (this.currentBottomNavName === '人民号' && navItem.name === '关注') {
                   PeopleShipMainComponent({
                     currentTopNavSelectedIndex: $currentTopNavSelectedIndex,
                     navIndex: index,
@@ -265,7 +244,7 @@ export struct TopNavigationComponent {
                       channelId: navItem.channelId + '',
                       autoRefresh: this.autoRefresh2Page
                     })
-                  }else{
+                  } else {
                   channelSkeleton()
                 }
               }
@@ -283,7 +262,7 @@ export struct TopNavigationComponent {
         })
         .animationDuration(this.animationDuration)
         .onChange((index: number) => {
-          if(this.tabTimmer){
+          if (this.tabTimmer) {
             clearTimeout(this.tabTimmer)
           }
           this.currentTopNavName =
@@ -356,7 +335,7 @@ export struct TopNavigationComponent {
               this.tabsController.changeIndex(index)
             }
           })
-        }else {
+        } else {
           Row() {
             Image($r('app.media.icon_search'))
               .width('24vp')
@@ -375,24 +354,13 @@ export struct TopNavigationComponent {
     }
   }
-  /**
-   * TODO:根据顶导配置获取颜色展示效果不对，待确认
-   */
-  getTopNavFontColor(item: TopNavDTO, index: number): Color | string {
-    if (item.name === '视频' && this.currentBottomNavInfo.name === '视频') {
-      return this.currentTopNavSelectedIndex === index ? Color.White : '#e5e0e0'
-    } else {
-      return this.currentTopNavSelectedIndex === index ? Color.Black : "#999999"
-    }
-  }
-
   @Builder
   tabBarBuilder(item: TopNavDTO, index: number) {
     Column() {
       Text(item.name)
         .fontSize($r('app.float.selected_text_size'))
         .fontWeight(this.currentTopNavSelectedIndex === index ? FontWeight.Bold : FontWeight.Normal)
-        .fontColor(this.getTopNavFontColor(item, index))
+        .fontColor(this.currentTopNavSelectedIndex === index ? Color.Black : "#999999")
         .padding({ top: $r('app.float.top_tab_item_padding_top'), bottom: $r('app.float.top_tab_item_padding_bottom') })
         .maxLines(this.MAX_LINE)
         .id(index.toString())
@@ -434,7 +402,6 @@ export struct TopNavigationComponent {
   aboutToAppear() {
     //处理新闻tab顶导频道数据
     this.topNavListHandle()
-    this.setBarBackgroundColor()
   }
   aboutToDisappear() {
--- a/sight_harmony/features/wdComponent/src/main/ets/components/page/VideoChannelPage.ets 0 → 100644
View file @a0a77bd
+++ b/sight_harmony/features/wdComponent/src/main/ets/components/page/VideoChannelPage.ets 0 → 100644
View file @a0a77bd
+/**
+ * 视频频道，包含视频和直播
+ * 视频为沉浸式,直播同新闻页面
+ */
+import { BottomNavDTO, TopNavDTO } from 'wdBean/Index'
+import { VideoChannelDetail } from 'wdDetailPlayShortVideo/Index';
+import { PageComponent } from './PageComponent';
+
+const TAG = 'VideoChannelPage'
+
+@Component
+export struct VideoChannelPage {
+  readonly MAX_LINE: number = 1;
+  private groupId: number = 0
+  private swiperController: SwiperController = new SwiperController()
+  @Prop topNavList: TopNavDTO[]
+  @Link _currentNavIndex?: number;
+  @Consume barBackgroundColor: Color
+  @Consume @Watch('setBarBackgroundColor') currentBottomNavInfo: BottomNavDTO // 当前底导信息
+  @State @Watch('setBarBackgroundColor') currentTopNavSelectedIndex: number = 0;
+  @State animationDuration: number = 0
+  @State indicatorLeftMargin: number = 0
+  @State indicatorWidth: number = 0
+  // 传递给page的自动刷新通知
+  @State autoRefresh2Page: number = 0
+
+  aboutToAppear(): void {
+    this.setBarBackgroundColor()
+    console.log(TAG, 'aboutToAppear')
+  }
+
+  /**
+   * 顶导、底导切换下标都到改变背景色，进入或退出沉浸式
+   */
+  setBarBackgroundColor() {
+    if (this.currentTopNavSelectedIndex === 0 && this.currentBottomNavInfo?.name === '视频') {
+      console.error('setBarBackgroundColor', '黑色')
+      this.barBackgroundColor = Color.Black
+    } else {
+      this.barBackgroundColor = Color.White
+      console.error('setBarBackgroundColor', '白色')
+    }
+  }
+
+  /**
+   * TODO:根据顶导配置获取颜色展示效果不对，待确认
+   */
+  getTopNavFontColor(item: TopNavDTO, index: number): Color | string {
+    if (item.name === '视频' && this.currentBottomNavInfo.name === '视频') {
+      return this.currentTopNavSelectedIndex === index ? Color.White : '#e5e0e0'
+    } else {
+      return this.currentTopNavSelectedIndex === index ? Color.Black : "#999999"
+    }
+  }
+
+  build() {
+    Stack() {
+      this.pageSwiperView()
+      this.topNavView()
+    }
+    .width('100%')
+    .height('100%')
+    .align(Alignment.Top)
+  }
+
+  @Builder
+  topNavView() {
+    Row() {
+      ForEach(this.topNavList, (item: TopNavDTO, index: number) => {
+        Column() {
+          Text(item.name)
+            .fontSize($r('app.float.selected_text_size'))
+            .fontWeight(this.currentTopNavSelectedIndex === index ? FontWeight.Bold : FontWeight.Normal)
+            .fontColor(this.getTopNavFontColor(item, index))
+            .padding({
+              top: $r('app.float.top_tab_item_padding_top'),
+              bottom: $r('app.float.top_tab_item_padding_bottom')
+            })
+            .maxLines(this.MAX_LINE)
+
+          Row()
+            .width(20)
+            .height(3)
+            .backgroundImage($r('app.media.icon_channel_active'), ImageRepeat.NoRepeat)
+            .backgroundImageSize(ImageSize.Contain)
+            .visibility(this.currentTopNavSelectedIndex === index ? Visibility.Visible : Visibility.Hidden)
+
+        }
+        .padding({
+          left: $r('app.float.top_tab_item_padding_horizontal'),
+          right: $r('app.float.top_tab_item_padding_horizontal'),
+        })
+        .onClick(() => {
+          this.currentTopNavSelectedIndex = index
+          this.swiperController.changeIndex(index, true)
+        })
+      }, (item: TopNavDTO) => item.channelId + '')
+    }
+    .width('100%')
+    .justifyContent(FlexAlign.Center)
+    .backgroundColor(this.currentTopNavSelectedIndex === 0 ? Color.Transparent : Color.White)
+  }
+
+  @Builder
+  pageSwiperView() {
+    Swiper(this.swiperController) {
+      ForEach(this.topNavList, (item: TopNavDTO, index: number) => {
+        if (index == 0) {
+          // 视频
+          VideoChannelDetail({
+            bottomNavIndex: $_currentNavIndex,
+            topNavIndex: $currentTopNavSelectedIndex,
+            groupId: this.groupId + '',
+            pageId: item.pageId + '',
+            channelId: item.channelId + '',
+          })
+        } else {
+          // 直播
+          PageComponent({
+            currentTopNavSelectedIndex: $currentTopNavSelectedIndex,
+            navIndex: index,
+            pageId: item.pageId + '',
+            channelId: item.channelId + '',
+            autoRefresh: this.autoRefresh2Page
+          }).margin({ top: 40 })
+        }
+      }, (item: TopNavDTO) => item.channelId + '')
+    }
+    .indicator(false)
+    .loop(false)
+    .width('100%')
+    .height('100%')
+    .cachedCount(3)
+    .displayCount(1, true)
+    .alignSelf(ItemAlign.Start)
+    .onChange((index: number) => {
+      this.currentTopNavSelectedIndex = index
+    })
+  }
+}