修复频道切换颜色问题

zhenghy
Commit 775cd46ee8b1232f3084e61eac3c6cf0881c11ae 775cd46e 1 parent fb21ece7
Showing 7 changed files with 115 additions and 100 deletions
sight_harmony/features/wdBean/src/main/ets/bean/navigation/BottomNavDTO.ets
sight_harmony/features/wdBean/src/main/ets/bean/navigation/NavigationBodyDTO.ets
sight_harmony/features/wdBean/src/main/ets/bean/navigation/TopNavDTO.ets
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/wdDetailPlayShortVideo/src/main/ets/pages/DetailPlayShortVideoPage.ets
sight_harmony/features/wdDetailPlayShortVideo/src/main/ets/pages/VideoChannelDetail.ets
--- a/sight_harmony/features/wdBean/src/main/ets/bean/navigation/BottomNavDTO.ets
View file @775cd46
+++ b/sight_harmony/features/wdBean/src/main/ets/bean/navigation/BottomNavDTO.ets
View file @775cd46
@@ -4,37 +4,39 @@ import { TopNavDTO } from './TopNavDTO';
  * 底导(包含顶导列表）数据
  */
 export interface BottomNavDTO {
-  backgroundUrl: string;
-  channelChooseActionUrl: string;
-  channelChooseCColor: string;
-  channelChooseColor: string;
-  channelMoreColor: string;
+  backgroundUrl: string; // 迭代四：页面背景图
+  channelChooseActionUrl: string; // 迭代四：频道选中下划线动画
+  channelChooseCColor: string; // 迭代四：频道未选中颜色
+  channelChooseColor: string; // 迭代四：频道选中颜色
+  channelMoreColor: string; // 迭代四：更多频道颜色
   extraData: string;
-  homePageColor: string;
-  icon: string;
-  iconC: string;
+  homePageColor: string; // 迭代四：主页图标/文字颜色
+  icon: string; // 未选中图标
+  iconC: string; // 选中图标
   id: number;
-  immersiveIconCUrl: string;
-  immersiveIconUrl: string;
-  immersiveNameCColor: string;
-  immersiveNameColor: string;
-  logoUrl: string;
+  immersiveIconCUrl: string; // 迭代二新增-图标颜色-选中（沉浸式频道）
+  immersiveIconUrl: string; // 迭代二新增-图标颜色-未选中（沉浸式频道）
+  immersiveNameCColor: string; // 迭代二新增-文字颜色-选中（沉浸式频道）
+  immersiveNameColor: string; // 迭代二新增-文字颜色-未选中（沉浸式频道）
+  logoUrl: string; // 迭代四：logo图片
   morningAndEveningUrl: string;
   name: string;
-  nameCColor: string;
-  nameColor: string;
-  nightIconCUrl: string;
-  nightIconUrl: string;
-  nightNameCColor: string;
-  nightNameColor: string;
-  noticeColor: string;
+  nameCColor: string; // 名字选中颜色
+  nameColor: string; // 名字颜色
+  nightIconCUrl: string; // 迭代三新增-图标颜色-选中（夜间模式）
+  nightIconUrl: string; // 迭代三新增-图标颜色-未选中（夜间模式）
+  nightNameCColor: string; // 迭代三新增-文字颜色-选中（夜间模式）
+  nightNameColor: string; // 迭代三新增-文字颜色-未选中（夜间模式）
+  noticeColor: string; // 迭代四：消息通知提醒颜色
   pageId?: string;
   pageType?: string;
-  searchBothColor: string;
-  searchUrl: string;
+  searchBothColor: string; // 迭代四：两侧文字图标颜色,搜索图标颜色
+  searchUrl: string; // 迭代四：搜索背景框
   sortValue: number;
-  statusBarColor: number;
+  statusBarColor: number; // 迭代四：状态栏图标颜色，0：白色，1：黑色
   topNavChannelList: TopNavDTO[];
-  topStyle: string;
-  type: string;
+  topStyle: string; // 顶部样式：中文的(11-新闻;12-人民号;13-视频;14-服务)
+  type: string; // 底部导航类型，1普通 2我的；【rmrb需要扩展】
+  fmorningAndEveningUrl: string; // 迭代四：早晚报背景框
+  dropDownAnimationColor: string; // 下拉加载动画颜色，1白色，2灰色。未配置值是null
 }
--- a/sight_harmony/features/wdBean/src/main/ets/bean/navigation/NavigationBodyDTO.ets
View file @775cd46
+++ b/sight_harmony/features/wdBean/src/main/ets/bean/navigation/NavigationBodyDTO.ets
View file @775cd46
@@ -4,9 +4,10 @@ import { BottomNavDTO } from './BottomNavDTO';
  * 导航Body数据
  */
 export interface NavigationBodyDTO {
-  backgroundColor: string;
+  backgroundColor: string; // 迭代二新增-底部导航背景色（信息流频道）
   bottomNavList: BottomNavDTO[];
-  // greyBottomNav: GreyBottomNav;
-  immersiveBackgroundColor: string;
-  nightBackgroundColor: string;
+
+  // greyBottomNav: GreyBottomNav; // 灰度皮肤
+  immersiveBackgroundColor: string; // 迭代二新增-底部导航背景色（沉浸式频道）
+  nightBackgroundColor: string; // 迭代三新增-底部导航背景色（夜间模式）
 }
--- a/sight_harmony/features/wdBean/src/main/ets/bean/navigation/TopNavDTO.ets
View file @775cd46
+++ b/sight_harmony/features/wdBean/src/main/ets/bean/navigation/TopNavDTO.ets
View file @775cd46
@@ -7,14 +7,14 @@ export interface TopNavDTO {
   channelType: number;
   defaultPermitted: number;
   delPermitted: number;
-  fontCColor: string;
-  fontColor: string;
+  fontCColor: string; // 频道展示样式颜色（选中状态)
+  fontColor: string; // 频道展示样式颜色（未选中状态)
   headlinesOn: number;
   homeChannel: string;
-  iconCUrl: string;
-  iconCUrlSize: string;
-  iconUrl: string;
   iconUrlSize: string;
+  iconCUrlSize: string;
+  iconUrl: string; // 频道图片展示样式图片相对地址（未选中状态)
+  iconCUrl: string; //频道图片展示样式图片相对地址（选中状态
   localChannel: string;
   moreChannel: string;
   movePermitted: number;
@@ -23,5 +23,5 @@ export interface TopNavDTO {
   num: number;
   pageId: number;
   pageType: string;
-  underlineCColor: string;
+  underlineCColor: string; // 选中下划线颜色
 }
--- a/sight_harmony/features/wdComponent/src/main/ets/components/page/BottomNavigationComponent.ets
View file @775cd46
+++ b/sight_harmony/features/wdComponent/src/main/ets/components/page/BottomNavigationComponent.ets
View file @775cd46
 import { BottomNavi, CommonConstants } from 'wdConstant';
-import { BottomNavDTO } from 'wdBean';
+import { BottomNavDTO, TopNavDTO } from 'wdBean';
 import { DateTimeUtils, EmitterEventId, EmitterUtils, Logger } from 'wdKit';
 import { TopNavigationComponent } from './TopNavigationComponent';
 import { MinePageComponent } from './MinePageComponent';
 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';
 const TAG = 'BottomNavigationComponent';
 let storage = LocalStorage.getShared();
@@ -21,14 +22,13 @@ export struct BottomNavigationComponent {
   @Provide isLayoutFullScreen: boolean = false
   @Provide isImmersive: boolean = false // 是否开启沉浸式模式 http://192.168.1.3:3300/project/3802/interface/api/189229
   @Provide isNight: boolean = false // 是否开启夜间模式
+  @Provide currentBottomNavInfo: BottomNavDTO = {} as BottomNavDTO; // 当前底导信息
+  @Provide currentTopNavInfo: TopNavDTO = {} as TopNavDTO; // 当前顶导信息
+  @Provide barBackgroundColor: Color = Color.Transparent
   @State bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') || 0
   @State topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0
-  // 底导/顶导全部数据
-  @State @Watch('onBottomNavigationDataUpdated') bottomNavList: BottomNavDTO[] = []
-  // 底导当前选中/焦点下标
-  @State currentNavIndex: number = BottomNavi.NEWS;
-  // @State currentTopNavSelectedIndex: number = 0; //
-  @State barBackgroundColor: Color = Color.Transparent
+  @State @Watch('onBottomNavigationDataUpdated') bottomNavList: BottomNavDTO[] = [] // 底导/顶导全部数据
+  @State currentNavIndex: number = BottomNavi.NEWS; // 底导当前选中/焦点下标
   // 底导TabsController
   private navController: TabsController = new TabsController();
   readonly ASPECT_RATIO_1_1: number = 1 / 1; // 底导图片宽高比
@@ -44,6 +44,7 @@ export struct BottomNavigationComponent {
   @State assignChannel: AssignChannelParam = new AssignChannelParam()
   // 自动刷新触发（双击tab自动刷新）
   @State autoRefresh: number = 0
+
   async aboutToAppear() {
     Logger.info(TAG, `aboutToAppear currentNavIndex: ${this.currentNavIndex}`);
     let bottomNav = await PageViewModel.getBottomNavData(getContext(this))
@@ -84,7 +85,6 @@ export struct BottomNavigationComponent {
                 _currentNavIndex: $currentNavIndex,
                 navIndex: index,
                 currentBottomNavName: navItem.name,
-                barBackgroundColor: $barBackgroundColor,
                 assignChannel: this.assignChannel,
                 autoRefresh: this.autoRefresh
               })
@@ -99,8 +99,8 @@ export struct BottomNavigationComponent {
     .animationDuration(0)
     .barHeight($r('app.float.bottom_navigation_barHeight'))
     .barMode(BarMode.Fixed)
-    // TODO:更详细的判断是视频频道
     .barBackgroundColor(this.barBackgroundColor)
+    // 备注：鸿蒙目前只有修改三线导航背景方法，对于全面屏导航条手机需要设置背景色并使其扩散到导航区域
     .backgroundColor(this.barBackgroundColor)
     .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
@@ -108,17 +108,6 @@ export struct BottomNavigationComponent {
   }
-  /**
-   * TODO:更详细的判断视频频道
-   */
-  getFontColor(index: number): Color {
-    if (this.currentNavIndex === 2 && this.barBackgroundColor === Color.Black) {
-      return Color.White
-    } else {
-      return this.currentNavIndex === index ? Color.Red : Color.Gray
-    }
-  }
-
   @Builder
   tabBarBuilder(navItem: BottomNavDTO, index: number) {
     Stack({ alignContent: Alignment.Bottom }) {
@@ -132,31 +121,34 @@ export struct BottomNavigationComponent {
         .fontWeight(this.currentNavIndex === index ? FontWeight.Bold : FontWeight.Normal)
         .textAlign(TextAlign.Center)
         .fontSize($r('app.float.font_size_10'))// .fontColor(this.currentNavIndex === index ? Color.Red : Color.Gray)
-        .fontColor(this.getFontColor(index))
+        .fontColor(this.currentNavIndex === index ? navItem.nameCColor : navItem.nameColor)
         .opacity(this.currentNavIndex === index ? this.FULL_OPACITY : this.SIXTY_OPACITY)
     }
     .height($r('app.float.bottom_navigation_barHeight'))
     .hoverEffect(HoverEffect.Highlight)
-    .onClick(() => {
-      if (this.currentNavIndex === index) {
-        // 当前tab，双击事件
-        this.doubleClick(() => {
-          Logger.info(TAG, 'tab double click ')
-          this.autoRefresh++
+    .gesture(
+      TapGesture({ count: 2 })
+        .onAction((event: GestureEvent) => {
+          AlertDialog.show({ message: 'aa' })
+          if (this.currentNavIndex === index) {
+            // 当前tab，双击事件
+            this.autoRefresh++
+          }
         })
+    )
+    .onClick(() => {
+      if (navItem.name === '我的') {
+        this.barBackgroundColor = Color.White
+        this.currentBottomNavInfo = {} as BottomNavDTO
       } else {
-        // 切换tab
-        this.currentNavIndex = index;
-        Logger.info(TAG, `onChange, index: ${index}`);
+        this.currentBottomNavInfo = navItem
       }
+
+      this.currentNavIndex = index;
+      Logger.info(TAG, `onChange, index: ${index}`);
+
     })
-    // .justifyContent(FlexAlign.Center)
-    // .onClick(() => {
-    //   Logger.info(TAG, `onClick, index: ${index}`);
-    //   this.currentNavIndex = index ?? 0;
-    //   this.navController.changeIndex(this.currentNavIndex);
-    // })
   }
   // 底导切换函数
@@ -199,17 +191,17 @@ export struct BottomNavigationComponent {
   /**
    * 双击实现
    */
-  doubleClickTime: number = 0
+  // doubleClickTime: number = 0
   /**
    * 双击实现
    */
-  private doubleClick(fun: () => void) {
-    let now = DateTimeUtils.getTimeStamp()
-    if (now - this.doubleClickTime < 200) {
-      fun()
-    } else {
-      this.doubleClickTime = now
-    }
-  }
+  // private doubleClick(fun: () => void) {
+  //   let now = DateTimeUtils.getTimeStamp()
+  //   if (now - this.doubleClickTime < 200) {
+  //     fun()
+  //   } else {
+  //     this.doubleClickTime = now
+  //   }
+  // }
 }
--- a/sight_harmony/features/wdComponent/src/main/ets/components/page/TopNavigationComponent.ets
View file @775cd46
+++ b/sight_harmony/features/wdComponent/src/main/ets/components/page/TopNavigationComponent.ets
View file @775cd46
-import { CompDTO, TopNavDTO } from 'wdBean';
+import { BottomNavDTO, CompDTO, TopNavDTO } from 'wdBean';
 import { LazyDataSource, Logger } from 'wdKit';
 import { ProcessUtils } from 'wdRouter';
 import { PageComponent } from './PageComponent';
@@ -26,12 +26,14 @@ export struct TopNavigationComponent {
   @Consume isLayoutFullScreen: boolean
   @Consume bottomRectHeight: number
   @Consume topRectHeight: number
+  @Consume @Watch('topOrBottomNavChange') currentBottomNavInfo: BottomNavDTO // 当前底导信息
+  @Consume barBackgroundColor: Color
   @State bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') || 0
   @State topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0
-  @Link barBackgroundColor: Color
   @Link _currentNavIndex?: number;
   // 顶导当前选中/焦点下标
-  @State currentTopNavSelectedIndex: number = 0;
+  @State @Watch('topOrBottomNavChange') currentTopNavSelectedIndex: number = 0;
+  @State currentTopNavName: string = '';
   // 顶导数据
   @State @Watch('onTopNavigationDataUpdated') topNavList: TopNavDTO[] = []
   @State compList: LazyDataSource<CompDTO> = new LazyDataSource();
@@ -56,6 +58,21 @@ export struct TopNavigationComponent {
   // 当前底导index
   @State navIndex: 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() {
     let _channelIds: number [] = []
@@ -126,10 +143,14 @@ export struct TopNavigationComponent {
     this.channelIds = _channelIds
     this.myChannelList = _myChannelList
+    this.currentTopNavName = this._currentNavIndex === 0 ? this.myChannelList[0].name : this.topNavList[0].name
+
+
     //缓存首页频道
     let index = this.myChannelList.findIndex(_item => _item.channelId === this.indexSettingChannelId)
     if (index > -1) {
       this.currentTopNavSelectedIndex = index
+      this.currentTopNavName = this.myChannelList[index].name
     }
   }
@@ -196,7 +217,6 @@ export struct TopNavigationComponent {
                   groupId: this.groupId + '',
                   pageId: navItem.pageId + '',
                   channelId: navItem.channelId + '',
-                  barBackgroundColor: $barBackgroundColor
                 })
               } else
                 if (!this.isBroadcast(navItem) && !this.isLayout(navItem)) {
@@ -216,9 +236,10 @@ export struct TopNavigationComponent {
         .barHeight($r('app.float.top_tab_bar_height'))
         .barMode(BarMode.Scrollable)
         .vertical(false)
-        // item.name === '视频' && this.currentTopNavSelectedIndex === 0 ?
         .barBackgroundColor(this.barBackgroundColor)
         .onChange((index: number) => {
+          this.currentTopNavName = this._currentNavIndex === 0 ? this.myChannelList[index].name : this.topNavList[index].name
+
           Logger.info(TAG, `onChange index : ${index}`);
           if (!this.isBroadcast(this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index]) &&
             !this.isLayout(this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index])
@@ -256,15 +277,11 @@ export struct TopNavigationComponent {
   }
   /**
-   * TODO:更详细的判断视频频道
+   * TODO:根据顶导配置获取颜色展示效果不对，待确认
    */
-  getFontColor(item: TopNavDTO, index: number): Color | string {
-    if (this._currentNavIndex === 2) {
-      if (this.currentTopNavSelectedIndex == 0) {
-        return item.name === '视频' ? Color.White : '#e5e0e0'
-      } else {
-        return this.currentTopNavSelectedIndex === index ? Color.Black : "#999999"
-      }
+  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"
     }
@@ -276,9 +293,10 @@ export struct TopNavigationComponent {
       Text(item.name)
         .fontSize($r('app.float.selected_text_size'))
         .fontWeight(this.currentTopNavSelectedIndex === index ? FontWeight.Bold : FontWeight.Normal)
-        .fontColor(this.getFontColor(item, index))
-        .padding({ top: $r('app.float.top_tab_item_padding_top') , bottom: $r('app.float.top_tab_item_padding_bottom')})
+        .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)
+      // .backgroundImage(this.currentTopNavSelectedIndex === index ? item.iconCUrl : item.iconUrl)
       if (this.currentTopNavSelectedIndex === index) {
         Row()
           .width(20)
@@ -292,18 +310,20 @@ export struct TopNavigationComponent {
       minWidth: $r('app.float.top_tab_item_min_width'),
       maxWidth: $r('app.float.top_tab_item_max_width')
     })
-    .backgroundColor(Color.Transparent)
+    // .backgroundColor(Color.Transparent)
     .padding({
       left: $r('app.float.top_tab_item_padding_horizontal'),
       right: $r('app.float.top_tab_item_padding_horizontal'),
     })
     .id(`col_tabBar${index}`)
     .margin({ right: this.myChannelList.length === index + 1 ? 36 : 0 })
+
   }
   aboutToAppear() {
     //处理新闻tab顶导频道数据
     this.topNavListHandle()
+    this.setBarBackgroundColor()
   }
   aboutToDisappear() {
--- a/sight_harmony/features/wdDetailPlayShortVideo/src/main/ets/pages/DetailPlayShortVideoPage.ets
View file @775cd46
+++ b/sight_harmony/features/wdDetailPlayShortVideo/src/main/ets/pages/DetailPlayShortVideoPage.ets
View file @775cd46
@@ -133,7 +133,7 @@ export struct DetailPlayShortVideoPage {
   aboutToAppear() {
     this.videoLandScape = this.contentDetailData?.videoInfo[0]?.videoLandScape
     this.playerController.onCanplay = () => {
-      if (this.index == 0 || this.currentIndex === this.index) {
+      if ((this.index == 0 || this.currentIndex === this.index) && this.switchVideoStatus) {
         this.playerController.play()
       }
     }
--- a/sight_harmony/features/wdDetailPlayShortVideo/src/main/ets/pages/VideoChannelDetail.ets
View file @775cd46
+++ b/sight_harmony/features/wdDetailPlayShortVideo/src/main/ets/pages/VideoChannelDetail.ets
View file @775cd46
@@ -38,7 +38,7 @@ export struct VideoChannelDetail {
   // private recommend?: string = '' // 0.非推荐，1.推荐；
   @Link @Watch('navIndexChange') bottomNavIndex: number
   @Link @Watch('navIndexChange') topNavIndex: number
-  @Link barBackgroundColor: Color
+  @Consume barBackgroundColor: Color
   private swiperController: SwiperController = new SwiperController()
   @Provide showComment: boolean = false
   @Provide windowWidth: number = AppStorage.get<number>('windowWidth') || 0
@@ -72,11 +72,11 @@ export struct VideoChannelDetail {
   navIndexChange() {
     console.log('navIndexChange', this.bottomNavIndex, this.topNavIndex)
     if (this.bottomNavIndex === 2 && this.topNavIndex === 0) {
-      this.barBackgroundColor = Color.Black
+      // this.barBackgroundColor = Color.Black
       this.switchVideoStatus = true
       this.openFullScreen()
     } else {
-      this.barBackgroundColor = Color.Transparent
+      // this.barBackgroundColor = Color.Transparent
       this.switchVideoStatus = false
       this.closeFullScreen()
     }