developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
liyubing
8231f827 1 parent a5b8ccc5

feat:换肤 

1）处理灰度用户换肤；2）开发新闻、人民号、视频tab对应的顶部导航栏换肤；3）处理顶部状态栏颜色动态控制
Inline Side-by-side
Showing 16 changed files with 330 additions and 86 deletions
... ... @@ -21,7 +21,7 @@ export enum HostEnum {
* 环境host管理工具类
*/
export class HostManager {
private static _hostUrl: HostEnum = HostEnum.HOST_PRODUCT;
private static _hostUrl: HostEnum = HostEnum.HOST_UAT;
static changeHost(host: HostEnum) {
HostManager._hostUrl = host;
... ...
import { TopNavDTO } from 'wdBean';
import { BottomNavDTO, TopNavDTO } from 'wdBean';
import curves from '@ohos.curves';
import { Logger, SPHelper } from 'wdKit/Index';
import { SpConstants } from 'wdConstant/Index';
import { ColorUtils } from '../../utils/ColorUtils';
const INDEX_SETTING_TITLE: string = '首页设置'
const INDEX_SETTING_SUBTITLE: string = '将指定频道设置为首页'
... ... @@ -42,6 +43,7 @@ struct ChannelSubscriptionLayout {
private FIX_VP_Y: number = 48
@State indexSettingChannelId: number = AppStorage.get<number>('indexSettingChannelId') || 2002
@State isEditIng: boolean = false
navItem: BottomNavDTO = {} as BottomNavDTO
// 顶部导航栏是否有临时跳转频道数据不
@Prop haveTempTabData: boolean
changeTab: (index: number) => void = () => {
... ... @@ -566,13 +568,13 @@ struct ChannelSubscriptionLayout {
build() {
Row() {
Image($r('app.media.channel_button'))
Image($r('app.media.icon_news_home_menu'))
.width(18)
.colorFilter(ColorUtils.getDrawingColorFilter(this.getChannelMoreColor("")))
}
.width(36)
.height(40)
.justifyContent(FlexAlign.Center)
.backgroundColor(Color.White)
.onClick(() => {
this.isShow = true
if (this.haveTempTabData) {
... ... @@ -614,5 +616,14 @@ struct ChannelSubscriptionLayout {
console.debug('TopNavigationComponent', '--changeMyChannelData channelIds--->' + this.channelIds.join(','))
}
/**
* 两侧文字图标颜色,搜索图标颜色
* @returns
*/
getChannelMoreColor(defaultColor: string): string {
let bothColor = this.navItem.channelMoreColor ? this.navItem.channelMoreColor : defaultColor
return bothColor
}
}
... ...
import { WindowModel } from 'wdKit/Index';
import CommonPageTitle from './CommonPageTitle';
import TemplatePageComponent from './template/TemplatePageComponent';
import { TemplatePageConstant } from './template/TemplatePageConstant';
... ... @@ -16,6 +17,14 @@ struct LiveMorePage {
title: string = '直播列表'
onPageShow(): void {
WindowModel.shared.setWindowSystemBarProperties({
statusBarContentColor: '#000000',
})
}
build() {
Column() {
... ...
... ... @@ -4,6 +4,7 @@ import PageAdModel from '../../viewmodel/PageAdvModel';
import CommonPageTitle from './CommonPageTitle';
import TemplatePageComponent from './template/TemplatePageComponent';
import { TemplatePageConstant } from './template/TemplatePageConstant';
import { WindowModel } from 'wdKit/Index';
const TAG: string = 'ThemeListPage';
... ... @@ -31,6 +32,12 @@ struct ThemeListPage {
}
onPageShow(): void {
WindowModel.shared.setWindowSystemBarProperties({
statusBarContentColor: '#000000',
})
}
build() {
Column() {
... ...
import { BottomNavDTO, NavigationDetailDTO, TopNavDTO } from 'wdBean';
import { Logger, NetworkUtil, SPHelper, ToastUtils } from 'wdKit';
import { Logger, NetworkUtil, SPHelper, ToastUtils, WindowModel } from 'wdKit';
import { ProcessUtils, WDRouterPage, WDRouterRule } from 'wdRouter';
import { PageComponent } from './PageComponent';
import { ChannelSubscriptionLayout } from './ChannelSubscriptionLayout';
... ... @@ -11,6 +11,8 @@ import { ParamType, TrackConstants, Tracking, TrackingButton } from 'wdTracking/
import DailyPaperTopicModel from '../../model/DailyPaperTopicModel';
import { CompUtils } from '../../utils/CompUtils';
import ChannelViewModel from '../../viewmodel/ChannelViewModel';
import { common2D, drawing } from '@kit.ArkGraphics2D';
import { ColorUtils } from '../../utils/ColorUtils';
const TAG = 'TopNavigationComponent';
... ... @@ -22,7 +24,7 @@ const storage = LocalStorage.getShared();
@Entry(storage)
@Component
export struct TopNavigationComponentNew {
private topRectHeight: string = AppStorage.get<number>('topSafeHeight') + 'px';
private topRectHeight: number = AppStorage.get<number>('topSafeHeight') || 0;
private pageName: string = ''
private pageId: number = 0
readonly MAX_LINE: number = 1; // 顶部tab text最大行数
... ... @@ -32,16 +34,17 @@ export struct TopNavigationComponentNew {
* 首页 底导 某个tab 对象
*/
navItem: BottomNavDTO = {} as BottomNavDTO
// 背景色
@Consume barBackgroundColor: Color
// 首页当前正在哪个tab的索引值
@Link _currentNavIndex?: number;
@Link @Watch('setBarBackgroundColor') _currentNavIndex?: number;
@Consume @Watch('pageShowChange') pageShow: number
// 记录首页底部tab 的索引值
@State bottomNavIndex: number = 0
// 顶导当前选中/焦点下标
@State @Watch('updateCurrentTopNavSelectedIndex') currentTopNavSelectedIndex: number = 0;
// 顶导数据
@State @Watch('onTopNavigationDataUpdated') topNavList: TopNavDTO[] = []
//
@State indexSettingChannelId: number = AppStorage.get<number>('indexSettingChannelId') || 2002
//本地缓存频道id列表
... ... @@ -65,6 +68,7 @@ export struct TopNavigationComponentNew {
@State isClickMorningEveningPaper: boolean = false
// 顶部导航栏是否有临时跳转频道数据不
@State haveTempTabData: boolean = false
@State backgroundImageH: number = 0
build() {
Column() {
... ... @@ -150,8 +154,7 @@ export struct TopNavigationComponentNew {
.width('100%')
.height('100%')
}
// 预留状态栏
.margin({ top: this.topRectHeight })
}
/**
... ... @@ -161,26 +164,35 @@ export struct TopNavigationComponentNew {
topBar() {
Column() {
Row() {
//新闻页面搜索组件
FirstTabTopSearchComponent({ navItem: this.navItem })
FirstTabTopSearchComponent()
Image($r('app.media.icon_ren_min_ri_bao'))
Image(this.navItem.logoUrl ? this.navItem.logoUrl : $r('app.media.icon_ren_min_ri_bao'))
.width(72)
.height(29)
.onClick(() => {
ProcessUtils.gotoENewsPaper()
})
// 新闻页面早晚报组件
Stack({ alignContent: Alignment.Center }) {
Image($r('app.media.background_read_paper_home'))
Image(this.navItem.morningAndEveningUrl ? this.navItem.morningAndEveningUrl :
$r('app.media.background_read_paper_home'))
.width('100%')
.height('100%')
.objectFit(ImageFit.Contain)
Row() {
Image($r('app.media.icon_read_paper_home'))
.width(18)
.height(18)
.colorFilter(ColorUtils.getDrawingColorFilter(this.getBothColor("")))
.margin({ right: '10lpx' })
Text('早晚报')
.fontColor("#666666")
.fontColor(this.getBothColor("#666666"))
.fontSize($r('app.float.font_size_13'))
}
.alignItems(VerticalAlign.Center)
... ... @@ -201,15 +213,29 @@ export struct TopNavigationComponentNew {
.width('100%')
.height(40)
.padding({ top: 10 })
.backgroundColor($r('app.color.white'))
// 预留状态栏
.margin({ top: this.topRectHeight + 'px' })
.id('topBar')
}
/**
* 两侧文字图标颜色,搜索图标颜色
* @returns
*/
getBothColor(defaultColor: string): string {
let bothColor = this.navItem.searchBothColor ? this.navItem.searchBothColor : defaultColor
return bothColor
}
@Builder
tabBar() {
if (CompUtils.isNews(this.navItem)) {
// 顶部背景图
Image(this.navItem.backgroundUrl).width('100%')
// 顶部搜索、日报logo、早晚报
this.topBar()
ChannelSubscriptionLayout({
currentTopNavSelectedIndex: $currentTopNavSelectedIndex,
homeChannelList: this.homeChannelList,
... ... @@ -217,6 +243,7 @@ export struct TopNavigationComponentNew {
moreChannelList: $moreChannelList,
localChannelList: $localChannelList,
haveTempTabData: this.haveTempTabData,
navItem: this.navItem,
changeTab: (index) => {
this.channelJumpToPage(index)
}
... ... @@ -239,7 +266,6 @@ export struct TopNavigationComponentNew {
.edgeEffect(EdgeEffect.None)
.padding({ left: 8, top: 0, right: 0 })
.height($r('app.float.top_tab_bar_height'))
.backgroundColor(this.barBackgroundColor)
.id('tabList')
.alignRules({
'top': { 'anchor': 'topBar', 'align': VerticalAlign.Bottom },
... ... @@ -247,14 +273,18 @@ export struct TopNavigationComponentNew {
'right': { 'anchor': 'channelManageBtn', 'align': HorizontalAlign.Start }
})
} else {
// 顶部背景图
Image(this.navItem.backgroundUrl).width('100%').height(this.backgroundImageH)
Row() {
Image($r('app.media.icon_search'))
.colorFilter(ColorUtils.getDrawingColorFilter(this.getBothColor("")))
.width('24vp')
.height('24vp')
}
.height($r('app.float.top_tab_bar_height_common'))
.width('40vp')
.margin({ right: 10 })
.margin({ right: 10, top: this.topRectHeight + 'px' })
.alignItems(VerticalAlign.Center)
.justifyContent(FlexAlign.Center)
.id('searchBtn')
... ... @@ -280,7 +310,8 @@ export struct TopNavigationComponentNew {
.scrollBar(BarState.Off)
.edgeEffect(EdgeEffect.None)
.height($r('app.float.top_tab_bar_height_common'))
.backgroundColor(this.barBackgroundColor)
// 预留状态栏
.margin({ top: this.topRectHeight + 'px' })
.id('tabList')
.alignRules({
'top': { 'anchor': '__container__', 'align': VerticalAlign.Top },
... ... @@ -300,7 +331,7 @@ export struct TopNavigationComponentNew {
Text(item?.name)
.fontSize($r('app.float.selected_text_size'))
.fontWeight(this.currentTopNavSelectedIndex === index ? FontWeight.Bold : FontWeight.Normal)
.fontColor(this.currentTopNavSelectedIndex === index ? Color.Black : "#999999")
.fontColor(this.tabSelectedColor(this.currentTopNavSelectedIndex === index))
.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())
... ... @@ -316,11 +347,16 @@ export struct TopNavigationComponentNew {
// }
// })
if (this.currentTopNavSelectedIndex === index) {
Row()
Image($r('app.media.icon_channel_active'))
.colorFilter(ColorUtils.getDrawingColorFilter(this.getBothColor("")))
.width(20)
.height(3)
.backgroundImage($r('app.media.icon_channel_active'), ImageRepeat.NoRepeat)
.backgroundImageSize(ImageSize.Contain)
// Row()
// .width(20)
// .height(3)
// .backgroundImage($r('app.media.icon_channel_active'), ImageRepeat.NoRepeat)
// .backgroundImageSize(ImageSize.Contain)
}
}
.hoverEffect(HoverEffect.Highlight)
... ... @@ -349,6 +385,20 @@ export struct TopNavigationComponentNew {
}
/**
* 频道文字颜色
* @returns
*/
tabSelectedColor(selected: boolean): string {
if (selected) {
return this.navItem.channelChooseColor ? this.navItem.channelChooseColor : '#222222'
} else {
let ccolor = this.navItem.channelChooseCColor.replace('#', '#B3')
return this.navItem.channelChooseCColor ? ccolor : '#999999'
}
}
/**
* 频道信息跳转页面方法
* @param index
*/
... ... @@ -419,25 +469,59 @@ export struct TopNavigationComponentNew {
return item?.channelType === 3
}
@Consume barBackgroundColor: Color
@Consume isImmersive: boolean
async aboutToAppear() {
if (CompUtils.isNews(this.navItem)) {
// 请求顶导网络数据
this.getTopNavList(this.navItem.id)
} else {
// if(CompUtils.isNews(this.navItem)){
// //处理新闻tab顶导频道数据
// this.topNavListHandle()
// }
this.changePage(this.currentTopNavSelectedIndex)
// 背景图高度
this.backgroundImageH = px2vp(this.topRectHeight) + 44
}
this.changeTopStatusBarColor(this.navItem.statusBarColor)
}
pageShowChange() {
this.changeTopStatusBarColor(this.navItem.statusBarColor)
}
/**
* 修改手机顶部状态栏颜色
*/
setBarBackgroundColor() {
Logger.debug('setBarBackgroundColor','setBarBackgroundColor '+this.navItem.name+' '+this._currentNavIndex +' '+this.bottomNavIndex)
if(this._currentNavIndex == this.bottomNavIndex){
this.changeTopStatusBarColor(this.navItem.statusBarColor)
}
}
/**
* 修改手机顶部状态栏颜色
* @param statusValue
*/
changeTopStatusBarColor(statusValue: number) {
if (statusValue === 1) { // 黑色状态栏
WindowModel.shared.setWindowSystemBarProperties({
statusBarContentColor: '#000000',
})
} else { //白色状态栏
WindowModel.shared.setWindowSystemBarProperties({
statusBarContentColor: '#ffffff',
})
}
}
onTopNavigationDataUpdated() {
Logger.info(TAG,
`onTopNavigationDataUpdated currentTopNavIndex: ${this.currentTopNavSelectedIndex},topNavList.length:${this.topNavList.length}`);
... ... @@ -577,6 +661,7 @@ export struct TopNavigationComponentNew {
return null
}
/**
* 进入早晚报专题
*/
... ... @@ -618,9 +703,6 @@ export struct TopNavigationComponentNew {
async getTopNavList(id: number) {
Logger.debug(TAG, 'getTopNavList=存储=>' + this.storageChannelIds)
// 1 、使用存储数据或者预置数据,首先使用缓存数据，其次使用预置数据
let bottomDetailCache = await ChannelViewModel.getBottomNavDetailCacheData(id)
... ...
import { WindowModel } from 'wdKit/Index';
import { TrackConstants, TrackingPageBrowse } from 'wdTracking/Index';
import CommonPageTitle from '../page/CommonPageTitle';
import TemplatePageComponent from '../page/template/TemplatePageComponent';
... ... @@ -52,6 +53,10 @@ struct ReserveMorePage {
onPageShow(): void {
this.pageShowStartTime = Date.now()
WindowModel.shared.setWindowSystemBarProperties({
statusBarContentColor: '#000000',
})
}
onPageHide(): void {
... ...
... ... @@ -9,6 +9,8 @@ import { WDRouterPage, WDRouterRule } from 'wdRouter'
import { TrackingButton, TrackConstants } from 'wdTracking/Index'
import SearcherAboutDataModel from '../../model/SearcherAboutDataModel'
import { Logger } from 'wdKit';
import { BottomNavDTO } from 'wdBean/Index'
import { ColorUtils } from '../../utils/ColorUtils'
const TAG = "FirstTabTopSearchComponent"
... ... @@ -16,6 +18,7 @@ const TAG = "FirstTabTopSearchComponent"
export struct FirstTabTopSearchComponent {
@State searchTextData: string[] = []
private swiperController: SwiperController = new SwiperController()
navItem: BottomNavDTO = {} as BottomNavDTO
async aboutToAppear() {
this.getSearchHint()
... ... @@ -33,8 +36,8 @@ export struct FirstTabTopSearchComponent {
})
}
setDefaultHitData(){
if(this.searchTextData.length === 0){
setDefaultHitData() {
if (this.searchTextData.length === 0) {
this.searchTextData.push("搜索")
}
}
... ... @@ -44,14 +47,15 @@ export struct FirstTabTopSearchComponent {
Image($r('app.media.icon_search'))
.width(18)
.height(18)
.margin({right:'10lpx'})
.colorFilter(ColorUtils.getDrawingColorFilter(this.getBothColor("")))
.margin({ right: '10lpx' })
if (this.searchTextData != null && this.searchTextData.length > 0) {
Swiper(this.swiperController) {
ForEach(this.searchTextData, (item: string, index: number) => {
Text(item)
.fontWeight(400)
.fontColor("#666666")
.fontColor(this.getBothColor("#666666"))
.fontSize($r('app.float.font_size_13'))
.textAlign(TextAlign.Start)
.maxLines(1)
... ... @@ -71,13 +75,24 @@ export struct FirstTabTopSearchComponent {
.height(30)
.width(124)
.padding({ left: 15 })
.backgroundImage($r('app.media.background_search'))
.backgroundImage(this.navItem.searchUrl ? this.navItem.searchUrl :
$r('app.media.background_search'))
.backgroundImageSize(ImageSize.Cover)
.onClick(() => {
Logger.info(TAG, `搜索按钮点击: 新闻`);
TrackingButton.searchClick( TrackConstants.PageName.Search, "NEWS")
TrackingButton.searchClick(TrackConstants.PageName.Search, "NEWS")
let params = { 'tabName': "NEWS" } as Record<string, string>
WDRouterRule.jumpWithPage(WDRouterPage.searchPage,params)
WDRouterRule.jumpWithPage(WDRouterPage.searchPage, params)
})
}
/**
* 两侧文字图标颜色,搜索图标颜色
* @returns
*/
getBothColor(defaultColor: string): string {
let bothColor = this.navItem.searchBothColor ? this.navItem.searchBothColor : defaultColor
return bothColor
}
}
\ No newline at end of file
... ...
... ... @@ -12,6 +12,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { common2D, drawing } from '@kit.ArkGraphics2D';
/**
* RGB颜色类型
... ... @@ -175,10 +176,10 @@ export class ColorUtils {
}
public static getMorningEveningPaperRgb(color: ColorRgb): ColorRgb{
public static getMorningEveningPaperRgb(color: ColorRgb): ColorRgb {
// RGB颜色取值范围是0~255，需要转换为0~1的浮点数
const red: number = color.red ;
const green: number = color.green ;
const red: number = color.red;
const green: number = color.green;
const blue: number = color.blue;
const max: number = Math.max(red, green, blue);
... ... @@ -216,4 +217,52 @@ export class ColorUtils {
}
/**
* 十六进制色值转成arg
* @param hex 必须是十六进制的色值 如#999999
* @returns
*/
public static hexColorValueToRGB(hex: string): number[] {
let rgbArray: number[] = []
let sanitizedHex = hex.replace("#", "");
// 解析红、绿、蓝色值
let r = parseInt(sanitizedHex.substring(0, 2), 16);
let g = parseInt(sanitizedHex.substring(2, 4), 16);
let b = parseInt(sanitizedHex.substring(4, 6), 16);
rgbArray.push(r)
rgbArray.push(g)
rgbArray.push(b)
return rgbArray
}
/**
* 获取图片填充的ColorFilter
* @param hex 十六进制颜色值
* @returns undefined:无填充颜色
*/
public static getDrawingColorFilter(hex: string): ColorFilter | undefined {
let drawColorFilter: ColorFilter | undefined = undefined
if (hex) {
let color: common2D.Color = {
alpha: 255,
red: 0,
green: 0,
blue: 0
}
let rgbArray = ColorUtils.hexColorValueToRGB(hex)
color.red = rgbArray[0]
color.green = rgbArray[1]
color.blue = rgbArray[2]
drawColorFilter = drawing.ColorFilter.createBlendModeColorFilter(color, drawing.BlendMode.SRC_IN);
}
return drawColorFilter
}
}
\ No newline at end of file
... ...
... ... @@ -82,6 +82,7 @@ export struct VideoChannelDetail {
}
pageShowChange() {
if (this.bottomNavIndex === 2 && this.topNavIndex === 0) {
this.barBackgroundColor = Color.Black
this.switchVideoStatus = true
... ... @@ -89,7 +90,6 @@ export struct VideoChannelDetail {
}
this.pageShowTime = DateTimeUtils.getTimeStamp()
console.log(TAG, '一级视频显示')
}
pageHideChange() {
... ... @@ -135,29 +135,21 @@ export struct VideoChannelDetail {
/**
* 开启沉浸式
* TODO:颜色待根据业务接口修改
*/
openFullScreen() {
WindowModel.shared.setWindowSystemBarProperties({
statusBarContentColor: '#ffffff',
// statusBarColor: '#000000',
// navigationBarColor: '#000000',
// navigationBarContentColor: '#ffffff'
})
// WindowModel.shared.setWindowSystemBarProperties({
// statusBarContentColor: '#ffffff',
// })
}
/**
* 关闭沉浸式
* TODO:颜色待根据业务接口修改
*/
closeFullScreen() {
WindowModel.shared.setWindowSystemBarProperties({
statusBarContentColor: '#000000',
// statusBarColor: '#ffffff',
// navigationBarColor: '#0x66000000',
// navigationBarContentColor: '#0xE5FFFFFF'
})
// WindowModel.shared.setWindowSystemBarProperties({
// statusBarContentColor: '#000000',
//
// })
}
onBackPress(): boolean | void {
... ...
... ... @@ -55,7 +55,7 @@ struct ENewspaper {
}
onPageHide() {
this.setSystemBar('#FFFFFFFF', '#00000000', '#000000')
// this.setSystemBar('#FFFFFFFF', '#00000000', '#000000')
Logger.info(TAG, 'onPageHide');
//页面浏览
TrackingPageBrowse.trackCommonPageExposureEnd(TrackConstants.PageName.NewsPaperPage,
... ...
... ... @@ -14,6 +14,7 @@ const TAG = 'MainPage';
@Entry
@Component
struct MainPage {
@Provide pageShow: number = -1
@Provide pageHide: number = -1
private breakpointSystem: BreakpointSystem = new BreakpointSystem()
... ... @@ -58,6 +59,8 @@ struct MainPage {
// 升级检查
this.upgradeCheck()
Logger.debug('setBarBackgroundColor','Top onPageShow ')
}
upgradeCheck() {
... ... @@ -111,4 +114,5 @@ struct MainPage {
BottomNavigationComponent()
}
}
}
... ...
... ... @@ -24,6 +24,7 @@ let storage = LocalStorage.getShared();
@Entry(storage)
@Component
export struct BottomNavigationComponent {
@Provide bottomRectHeight: number = 0
private bottomRectHeight1: string = AppStorage.get<number>('bottomSafeHeight') + 'px';
@Provide topRectHeight: number = 0
... ... @@ -34,7 +35,7 @@ export struct BottomNavigationComponent {
@Provide currentBottomNavInfo: BottomNavDTO = {} as BottomNavDTO; // 当前底导信息
@Provide currentTopNavInfo: TopNavDTO = {} as TopNavDTO; // 当前顶导信息
@Provide barBackgroundColor: Color = Color.Transparent
@State bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') || 0
// @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; // 底导当前选中/焦点下标
... ... @@ -89,7 +90,9 @@ export struct BottomNavigationComponent {
VideoChannelPage({
topNavList: navItem.topNavChannelList.filter(item => item.channelId != 2073),
_currentNavIndex: $currentNavIndex,
autoRefresh: this.autoRefresh
bottomNavIndex: index,
autoRefresh: this.autoRefresh,
navItem: navItem
})
} else {
// 其它带顶到的页面，如 新闻、人民号、服务
... ... @@ -381,7 +384,10 @@ export struct BottomNavigationComponent {
break
}
}
}
// 没有匹配到换肤，则直接用data.bottomNavList
if (list.length <= 0) {
list = data.bottomNavList
... ...
... ... @@ -6,10 +6,11 @@ import { BottomNavDTO, TopNavDTO } from 'wdBean/Index'
import { VideoChannelDetail } from 'wdDetailPlayShortVideo/Index';
import { WDRouterPage, WDRouterRule } from 'wdRouter';
import { DisplayDirection } from 'wdConstant/Index';
import { PageComponent } from 'wdComponent/Index';
import { CompUtils, PageComponent } from 'wdComponent/Index';
import { TrackingButton, TrackConstants } from 'wdTracking/Index';
import { Logger } from 'wdKit';
import { Logger, WindowModel } from 'wdKit';
import { ParamType, Tracking } from 'wdTracking/Index';
import { ColorUtils } from 'wdComponent/src/main/ets/utils/ColorUtils';
const TAG = 'VideoChannelPage'
... ... @@ -22,6 +23,7 @@ export struct VideoChannelPage {
@Prop autoRefresh: number = 0
@Prop topNavList: TopNavDTO[]
@Link _currentNavIndex?: number;
@State bottomNavIndex: number = 0
@Consume barBackgroundColor: Color
@Consume isImmersive: boolean
@Consume displayDirection: DisplayDirection
... ... @@ -34,42 +36,89 @@ export struct VideoChannelPage {
@State autoRefresh2Page: number = 0
@Provide showComment: boolean = false
@State topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0
aboutToAppear(): void {
this.setBarBackgroundColor()
console.log(TAG, 'aboutToAppear')
navItem: BottomNavDTO = {} as BottomNavDTO
// 背景高度
@State backgroundImageH: number = 0
@Consume @Watch('setBarBackgroundColor') pageShow: number
console.log('XY', '----VideoChannel-------aboutToAppear')
async aboutToAppear() {
// 背景图高度
this.backgroundImageH = px2vp(this.topSafeHeight) + 44
this.setBarBackgroundColor()
}
/**
* 顶导、底导切换下标都到改变背景色，进入或退出沉浸式
*/
setBarBackgroundColor() {
if (this.currentTopNavSelectedIndex === 0 && this.currentBottomNavInfo?.name === '视频') {
console.error('setBarBackgroundColor', '黑色')
Logger.debug('setBarBackgroundColor','setBarBackgroundColor '+this.navItem.name+' '+this.navItem.statusBarColor)
if (this.currentTopNavSelectedIndex === 0 && CompUtils.isVideo(this.currentBottomNavInfo)) {
this.barBackgroundColor = Color.Black
this.isImmersive = true
this.changeTopStatusBarColor(0)
} else {
this.barBackgroundColor = Color.White
this.isImmersive = false
console.error('setBarBackgroundColor', '白色')
this.barBackgroundColor = Color.White
this.changeTopStatusBarColor(this.navItem.statusBarColor)
}
}
/**
* 修改手机顶部状态栏颜色
* @param statusValue
*/
changeTopStatusBarColor(statusValue: number) {
if (statusValue === 1) { // 黑色状态栏
WindowModel.shared.setWindowSystemBarProperties({
statusBarContentColor: '#000000',
})
} else { //白色状态栏
WindowModel.shared.setWindowSystemBarProperties({
statusBarContentColor: '#ffffff',
})
}
}
/**
* TODO:根据顶导配置获取颜色展示效果不对，待确认
* 得到顶导文字颜色
* @param item
* @param index
* @returns
*/
getTopNavFontColor(item: TopNavDTO, index: number): Color | string {
if (item.channelStyle === 1) {
return this.currentTopNavSelectedIndex === index ? Color.White : '#949494'
return this.currentTopNavSelectedIndex === index ? Color.White : this.tabSelectedColor(false)
} else {
return this.tabSelectedColor(this.currentTopNavSelectedIndex ===
index)
}
}
/**
* 频道文字颜色
* @returns
*/
tabSelectedColor(selected: boolean): string {
if (selected) {
return this.navItem.channelChooseColor ? this.navItem.channelChooseColor : '#222222'
} else {
return this.currentTopNavSelectedIndex === index ? Color.Black : "#B2B2B2"
let ccolor = this.navItem.channelChooseCColor.replace('#', '#B3')
return this.navItem.channelChooseCColor ? ccolor : '#B3999999'
}
}
build() {
Stack({ alignContent: Alignment.Top }) {
this.pageSwiperView()
this.topNavView()
}
.width('100%')
... ... @@ -79,9 +128,11 @@ export struct VideoChannelPage {
@Builder
topNavView() {
Stack({ alignContent: Alignment.End }) {
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)
... ... @@ -92,12 +143,12 @@ export struct VideoChannelPage {
})
.maxLines(this.MAX_LINE)
Row()
Image($r('app.media.icon_channel_active'))
.colorFilter(ColorUtils.getDrawingColorFilter(this.getBothColor("")))
.width(20)
.height(3)
.backgroundImage($r('app.media.icon_channel_active'), ImageRepeat.NoRepeat)
.backgroundImageSize(ImageSize.Contain)
.visibility(this.currentTopNavSelectedIndex === index ? Visibility.Visible : Visibility.Hidden)
.height(3).visibility(this.currentTopNavSelectedIndex === index ? Visibility.Visible : Visibility.Hidden)
}
.padding({
... ... @@ -105,11 +156,9 @@ export struct VideoChannelPage {
right: $r('app.float.top_tab_item_padding_horizontal'),
})
.onClick(() => {
// 视频tab埋点
const tab = this.topNavList[index]
Logger.info(TAG, `视频tab埋点: ${JSON.stringify(tab)}`);
const params: ParamType = {
"pageName": tab.name,
"tabName": tab.name,
... ... @@ -131,7 +180,10 @@ export struct VideoChannelPage {
// 搜索按钮
Row() {
Image($r(this.currentTopNavSelectedIndex === 0 ? 'app.media.icon_search_gray_svg' :'app.media.icon_search_svg'))
Image($r(this.currentTopNavSelectedIndex === 0 ? 'app.media.icon_search_gray_svg' :
'app.media.icon_search'))
.colorFilter(this.currentTopNavSelectedIndex === 0 ? undefined :
ColorUtils.getDrawingColorFilter(this.getBothColor("")))
.width('24vp')
.height('24vp')
}
... ... @@ -159,6 +211,15 @@ export struct VideoChannelPage {
}
/**
* 两侧文字图标颜色,搜索图标颜色
* @returns
*/
getBothColor(defaultColor: string): string {
let bothColor = this.navItem.searchBothColor ? this.navItem.searchBothColor : defaultColor
return bothColor
}
@Builder
pageSwiperView() {
Swiper(this.swiperController) {
... ... @@ -175,6 +236,9 @@ export struct VideoChannelPage {
autoRefresh: this.autoRefresh,
})
} else {
Column() {
// 顶部背景图
Image(this.navItem.backgroundUrl).width('100%').height(this.backgroundImageH)
// 直播
PageComponent({
currentTopNavSelectedIndex: $currentTopNavSelectedIndex,
... ... @@ -182,10 +246,11 @@ export struct VideoChannelPage {
pageId: item.pageId + '',
channelId: item.channelId + '',
autoRefresh: this.autoRefresh
})
.padding({ top: px2vp(this.topSafeHeight) + 44 })
})// .padding({ top: px2vp(this.topSafeHeight) + 44 })
.backgroundColor(Color.White)
}
}
}, (item: TopNavDTO) => item.channelId + '')
}
.indicator(false)
... ... @@ -197,7 +262,6 @@ export struct VideoChannelPage {
.displayCount(1, true)
.alignSelf(ItemAlign.Start)
.effectMode(EdgeEffect.None)
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
.onChange((index: number) => {
this.currentTopNavSelectedIndex = index
})
... ...