developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
liyubing
e1956ad8 2 parents d3f35c4e 0d79d46c

Merge remote-tracking branch 'origin/main'

Inline Side-by-side
Showing 7 changed files with 18 additions and 616 deletions
... ... @@ -14,8 +14,6 @@ export { PageComponent } from "./src/main/ets/components/page/PageComponent"
export { LikeComponent } from "./src/main/ets/components/view/LikeComponent"
export { TopNavigationComponent } from "./src/main/ets/components/page/TopNavigationComponent"
export { TopNavigationComponentNew } from "./src/main/ets/components/page/TopNavigationComponentNew"
export { LabelComponent } from "./src/main/ets/components/view/LabelComponent"
... ...
import { BottomNavDTO, CompDTO, TopNavDTO } from 'wdBean';
import { SpConstants } from 'wdConstant';
import { DisplayUtils, LazyDataSource, Logger, NetworkUtil, SPHelper, ToastUtils } from 'wdKit';
import { ProcessUtils, WDRouterPage, WDRouterRule } from 'wdRouter';
import { PageComponent } from './PageComponent';
import { ChannelSubscriptionLayout } from './ChannelSubscriptionLayout';
import { FirstTabTopSearchComponent } from '../search/FirstTabTopSearchComponent';
import { AssignChannelParam } from 'wdRouter/src/main/ets/utils/HomeChannelUtils';
import { PeopleShipMainComponent } from '../peopleShip/PeopleShipMainComponent';
import { channelSkeleton } from '../skeleton/channelSkeleton';
import { TrackingButton, TrackConstants } from 'wdTracking/Index';
const TAG = 'TopNavigationComponent';
PersistentStorage.persistProp('channelIds', '');
PersistentStorage.persistProp('indexSettingChannelId', 2002);
const storage = LocalStorage.getShared();
/**
* 顶部页签导航栏/顶导
*/
@Entry(storage)
@Component
export struct TopNavigationComponent {
private groupId: number = 0
private currentBottomNavName: string = ''
private tabsController: TabsController = new TabsController()
@Consume isLayoutFullScreen: boolean
@Consume bottomRectHeight: number
@Consume topRectHeight: number
@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 currentTopNavSelectedIndex: number = 0;
/**
* @deprecated TODO，没地方用到，是否弃用
*/
@State currentTopNavName: string = '';
@State currentTopNavItem: TopNavDTO = {} as TopNavDTO
// 顶导数据
@State @Watch('onTopNavigationDataUpdated') topNavList: TopNavDTO[] = []
@State compList: LazyDataSource<CompDTO> = new LazyDataSource();
@StorageProp('indexSettingChannelId') indexSettingChannelId: number = 2002
//我的频道id列表
@State channelIds: number[] = []
//本地缓存频道id列表
@StorageProp('channelIds') storageChannelIds: string = ''
@State homeChannelList: TopNavDTO[] = []
// 我的频道列表
@State myChannelList: TopNavDTO[] = []
// 更多频道列表
@State moreChannelList: TopNavDTO[] = []
// 地方频道列表
@State localChannelList: TopNavDTO[] = []
readonly MAX_LINE: number = 1;
@ObjectLink @Watch('onAssignChannelChange') assignChannel: AssignChannelParam
// 底导传递过来的自动刷新通知
@Prop @Watch('onAutoRefresh') autoRefresh: number = 0
// 传递给page的自动刷新通知
@State autoRefresh2Page: number = 0
// 当前底导index
@State navIndex: number = 0
@State animationDuration: number = 0
@State indicatorLeftMargin: number = 0
@State indicatorWidth: number = 0
private tabsWidth: number = 0
// 标识，是否为点击触发的tab切换，临时变量
private changeByClick: boolean = false
//处理新闻tab顶导频道数据
topNavListHandle() {
let cityName = SPHelper.default.getSync(SpConstants.LOCATION_CITY_NAME, '') as string
let _channelIds: number [] = []
let _myChannelList: TopNavDTO [] = []
let _storageChannelIds: string [] = [] //list1
let defaultMyChannelList: TopNavDTO[] = []
let defaultList = [...this.topNavList]
defaultList.sort((a, b) => {
return a.num - b.num;
});
//defaultMyChannelList
defaultList.forEach(item => {
if (item.defaultPermitted === 1 || item.movePermitted === 0 || item.delPermitted === 0 ||
item.headlinesOn === 1) {
defaultMyChannelList.push(item);
}
if (item.defaultPermitted === 1) {
this.homeChannelList.push(item)
}
})
//有缓存频道id
if (this.storageChannelIds) {
_storageChannelIds = this.storageChannelIds.split(',')
}
defaultMyChannelList.forEach(item => {
item.myChannel = '1'
if (item.defaultPermitted === 1) {
item.homeChannel = '1'
}
let index = defaultList.findIndex(_item => _item.channelId === item.channelId)
if (index !== -1) {
defaultList.splice(index, 1)
}
})
defaultList.unshift(...defaultMyChannelList)
defaultList.forEach((item, index) => {
if (this.storageChannelIds && _storageChannelIds.includes(String(item.channelId))) {
item.myChannel = '1'
}
if (item.channelType === 2) {
if (cityName.includes(item.name)) {
item.myChannel = '1'
}
item.localChannel = '1'
}
if (index >= 11) {
if (item.channelType === 1) {
item.moreChannel = '1'
}
} else {
if (item.channelType === 1 && item.myChannel !== '1') {
item.moreChannel = '1'
}
}
//频道分类
if (item.name !== '播报') { //暂时隐藏播报
if (item.myChannel === '1') {
_myChannelList.push(item)
_channelIds.push(item.channelId)
} else if (item.moreChannel === '1') {
this.moreChannelList.push(item)
} else if (item.localChannel === '1' && item.myChannel !== '1') {
this.localChannelList.push(item)
}
}
})
if (cityName) {
let index = _myChannelList.findIndex(ele => cityName.includes(ele.name))
const localChannelitem = _myChannelList.splice(index, 1)[0];
// 将当前地区频道插入到第四个
_myChannelList.splice(3, 0, localChannelitem);
}
this.channelIds = _channelIds
this.myChannelList = _myChannelList
// 崩溃
// 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] &&
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
}
//缓存首页频道
let index = this.myChannelList.findIndex(_item => _item?.channelId === this.indexSettingChannelId)
if (index > -1) {
this.currentTopNavSelectedIndex = index
this.currentTopNavName = this.myChannelList[index].name
}
this.currentTopNavItem = this.myChannelList[this.currentTopNavSelectedIndex]
}
isBroadcast(item?: TopNavDTO) {
// TODO 用id channelId = '2066'
return item?.name === '播报'
}
isLayout(item?: TopNavDTO) {
// TODO 用id channelId = '2006'
return item?.name === '版面'
}
isSpecialChannel(item?: TopNavDTO) {
// 版面、播报，可以用这个判断
return item?.channelType === 3
}
build() {
Column() {
// 顶部搜索、日报logo、早晚报
Column() {
Row() {
FirstTabTopSearchComponent()
Image($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'))
.width('100%')
.height('100%')
.objectFit(ImageFit.Contain)
Row() {
Image($r('app.media.icon_read_paper_home'))
.width(18)
.height(18)
Text('早晚报')
.fontColor("#666666")
.fontSize($r('app.float.font_size_13'))
}
.alignItems(VerticalAlign.Center)
.justifyContent(FlexAlign.Center)
}
.height(30)
.width(124)
.onClick(() => {
if (NetworkUtil.isNetConnected()) {
ProcessUtils.gotoMorningEveningPaper()
} else {
ToastUtils.showToast('网络出小差了，请检查网络后重试', 1000)
}
})
}.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
}
.width('100%')
.height(40)
.padding({ top: 10 })
.backgroundColor($r('app.color.white'))
.visibility(this._currentNavIndex == 0 ? Visibility.Visible : Visibility.None)
// 频道分类list
Stack({ alignContent: Alignment.TopEnd }) {
Tabs({ index: this.currentTopNavSelectedIndex, controller: this.tabsController }) {
ForEach(this.currentBottomNavName === '新闻' ? this.myChannelList : this.topNavList,
(navItem: TopNavDTO, index: number) => {
TabContent() {
if (this.currentBottomNavName === '人民号' && navItem.name === '关注') {
PeopleShipMainComponent({
currentTopNavSelectedIndex: $currentTopNavSelectedIndex,
navIndex: index,
pageId: navItem.pageId + '',
channelId: navItem.channelId + '',
})
} else
if (!this.isBroadcast(navItem) && !this.isLayout(navItem)) {
PageComponent({
currentTopNavSelectedIndex: $currentTopNavSelectedIndex,
navIndex: index,
pageId: navItem.pageId + '',
channelId: navItem.channelId + '',
autoRefresh: this.autoRefresh2Page
})
} else {
channelSkeleton()
}
}
.tabBar(this.tabBarBuilder(navItem, index))
}, (navItem: TopNavDTO) => JSON.stringify(navItem));
}
.barHeight($r('app.float.top_tab_bar_height'))
.height(this._currentNavIndex == 0 ? DisplayUtils.getDeviceHeight() - vp2px(48.3) :
'100%')
.barMode(BarMode.Scrollable)
.vertical(false)
.barBackgroundColor(this.barBackgroundColor)
.onAreaChange((oldValue: Area, newValue: Area) => {
let width = Number.parseFloat(newValue.width.toString())
this.tabsWidth = Number.isNaN(width) ? 0 : width
})
.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])
) {
//在 tab 切换之前意图共享
// this.topNavInsightIntentShare(this.currentTopNavItem)
this.currentTopNavSelectedIndex = index;
this.currentTopNavItem = this.myChannelList[index]
}
if (this.isBroadcast(this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index])) {
// 跳转到播报页面
ProcessUtils.gotoBroadcastPage(this.myChannelList[index].pageId)
this.tabsController.changeIndex(this.currentTopNavSelectedIndex)
}
if (this.isLayout(this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index])) {
ProcessUtils.gotoENewsPaper()
if (!this.changeByClick) {
// 识别左滑右滑，跳过版面，到下一个
let nextIndex = this.currentTopNavSelectedIndex > index ? index - 1 : index + 1
this.tabsController.changeIndex(nextIndex)
} else {
this.tabsController.changeIndex(this.currentTopNavSelectedIndex)
// 重置标识
this.changeByClick = false
}
}
})
// .onAnimationStart((index: number, targetIndex: number, event: TabsAnimationEvent) => {
// if (!this.isBroadcast(this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index]) &&
// !this.isLayout(this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index])
// ) {
// return
// }
// this.currentTopNavSelectedIndex = targetIndex
// // 切换动画开始时触发该回调。下划线跟着页面一起滑动，同时宽度渐变。
// let targetIndexInfo = this.getTextInfo(targetIndex)
// this.startAnimateTo(this.animationDuration, targetIndexInfo.left, targetIndexInfo.width)
// })
// .onAnimationEnd((index: number, event: TabsAnimationEvent) => {
// if (!this.isBroadcast(this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index]) &&
// !this.isLayout(this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index])
// ) {
// return
// }
// // 切换动画结束时触发该回调。下划线动画停止。
// let currentIndicatorInfo = this.getCurrentIndicatorInfo(index, event)
// this.startAnimateTo(0, currentIndicatorInfo.left, currentIndicatorInfo.width)
// })
// .onGestureSwipe((index: number, event: TabsAnimationEvent) => {
// if (!this.isBroadcast(this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index]) &&
// !this.isLayout(this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index])
// ) {
// return
// }
// // 在页面跟手滑动过程中，逐帧触发该回调。
// let currentIndicatorInfo = this.getCurrentIndicatorInfo(index, event)
// this.currentTopNavSelectedIndex = currentIndicatorInfo.index
// this.indicatorLeftMargin = currentIndicatorInfo.left
// this.indicatorWidth = currentIndicatorInfo.width
// })
// 分类列表最右侧频道设置
if (this._currentNavIndex === 0) {
ChannelSubscriptionLayout({
currentTopNavSelectedIndex: $currentTopNavSelectedIndex,
indexSettingChannelId: this.indexSettingChannelId,
homeChannelList: this.homeChannelList,
myChannelList: $myChannelList,
moreChannelList: $moreChannelList,
localChannelList: $localChannelList,
channelIds: $channelIds,
changeTab: (index) => {
this.tabsController.changeIndex(index)
}
})
} else {
Row() {
Image($r('app.media.icon_search'))
.width('24vp')
.height('24vp')
}
.height('40vp')
.width('40vp')
.margin({ right: 10 })
.alignItems(VerticalAlign.Center)
.justifyContent(FlexAlign.Center)
.onClick(() => {
WDRouterRule.jumpWithPage(WDRouterPage.searchPage)
})
}
}
}
}
@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.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())
.onAreaChange((oldValue: Area, newValue: Area) => {
if (this.currentTopNavSelectedIndex === index &&
(this.indicatorLeftMargin === 0 || this.indicatorWidth === 0)) {
if (newValue.position.x != undefined) {
let positionX = Number.parseFloat(newValue.position.x.toString())
this.indicatorLeftMargin = Number.isNaN(positionX) ? 0 : positionX
}
let width = Number.parseFloat(newValue.width.toString())
this.indicatorWidth = Number.isNaN(width) ? 0 : width
}
})
// .backgroundImage(this.currentTopNavSelectedIndex === index ? item.iconCUrl : item.iconUrl)
if (this.currentTopNavSelectedIndex === index) {
Row()
.width(20)
.height(3)
.backgroundImage($r('app.media.icon_channel_active'), ImageRepeat.NoRepeat)
.backgroundImageSize(ImageSize.Contain)
}
}
.hoverEffect(HoverEffect.Highlight)
.constraintSize({
minWidth: $r('app.float.top_tab_item_min_width'),
maxWidth: $r('app.float.top_tab_item_max_width')
})
// .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 })
.onClick(() => {
Logger.debug(TAG, `onClick, index: ${index}`);
if (this.currentTopNavSelectedIndex === index) {
// 当前tab，单击事件
this.doAutoRefresh()
} else {
this.changeByClick = true
this.tabsController.changeIndex(index)
}
})
}
aboutToAppear() {
//处理新闻tab顶导频道数据
this.topNavListHandle()
}
aboutToDisappear() {
AppStorage.set('channelIds', this.channelIds.join(','))
}
onTopNavigationDataUpdated() {
Logger.info(TAG,
`onTopNavigationDataUpdated currentTopNavIndex: ${this.currentTopNavSelectedIndex},topNavList.length:${this.topNavList.length}`);
}
onAutoRefresh() {
if (this.navIndex != this._currentNavIndex) {
return
}
// 通知page刷新
this.autoRefresh2Page++
}
private doAutoRefresh() {
// 通知page刷新
this.autoRefresh2Page++
}
/**
* 判断是否当前页面处理逻辑，如消息通知，只需要切换到当前底导的处理，过滤掉非当前。
*/
private isCurrentPage(): boolean {
return this._currentNavIndex === this.navIndex
}
/**
* 频道id变化，即指定频道跳转场景
*/
onAssignChannelChange() {
if (!this.isCurrentPage()) {
return
}
let channelId = this.assignChannel.channelId
let index = -1
if (this._currentNavIndex === 0) {
// 第一个，新闻，先拿我的，再拿其他
index = this.getChannelByMine(channelId)
if (index == -1) {
// 不在我的里，需要临时新增频道展示
let channel = this.getChannelByOthers(channelId)
if (channel) {
this.myChannelList.push(channel)
setTimeout(() => {
this.tabsController.changeIndex(this.myChannelList.length - 1)
}, 20)
}
} else {
// 直接切换
this.tabsController.changeIndex(index)
}
} else {
index = this.getChannelByTopNav(channelId)
if (index > -1) {
// 找到了，直接切换，否则不处理
this.tabsController.changeIndex(index)
}
}
}
/**
* 非新闻，从topNav里拿数据
*/
private getChannelByTopNav(channelId: string) {
for (let i = 0; i < this.topNavList.length; i++) {
let topNavDTO: TopNavDTO = this.topNavList[i]
if (topNavDTO.channelId.toString() === channelId) {
return i
}
}
return -1
}
/**
* 新闻，从myChannelList里拿数据
*/
private getChannelByMine(channelId: string) {
for (let i = 0; i < this.myChannelList.length; i++) {
let topNavDTO: TopNavDTO = this.myChannelList[i]
if (topNavDTO.channelId.toString() === channelId) {
return i
}
}
return -1
}
/**
* 新闻，从其他里拿数据
*/
private getChannelByOthers(channelId: string) {
for (let i = 0; i < this.moreChannelList.length; i++) {
let topNavDTO: TopNavDTO = this.moreChannelList[i]
if (topNavDTO.channelId.toString() === channelId) {
return topNavDTO
}
}
for (let j = 0; j < this.localChannelList.length; j++) {
let topNavDTO: TopNavDTO = this.localChannelList[j]
if (topNavDTO.channelId.toString() === channelId) {
return topNavDTO
}
}
return null
}
// private getTextInfo(index: number): Record<string, number> {
// let strJson = getInspectorByKey(index.toString())
// try {
// let obj: Record<string, string> = JSON.parse(strJson)
// let rectInfo: number[][] = JSON.parse('[' + obj.$rect + ']')
// return { 'left': px2vp(rectInfo[0][0]), 'width': px2vp(rectInfo[1][0] - rectInfo[0][0]) }
// } catch (error) {
// return { 'left': 0, 'width': 0 }
// }
// }
//
// private getCurrentIndicatorInfo(index: number, event: TabsAnimationEvent): Record<string, number> {
// let nextIndex = index
// if (index > 0 && event.currentOffset > 0) {
// nextIndex--
// } else if (index < 3 && event.currentOffset < 0) {
// nextIndex++
// }
// let indexInfo = this.getTextInfo(index)
// let nextIndexInfo = this.getTextInfo(nextIndex)
// let swipeRatio = Math.abs(event.currentOffset / this.tabsWidth)
// let currentIndex = swipeRatio > 0.5 ? nextIndex : index // 页面滑动超过一半，tabBar切换到下一页。
// let currentLeft = indexInfo.left + (nextIndexInfo.left - indexInfo.left) * swipeRatio
// let currentWidth = indexInfo.width + (nextIndexInfo.width - indexInfo.width) * swipeRatio
// return { 'index': currentIndex, 'left': currentLeft, 'width': currentWidth }
// }
// private startAnimateTo(duration: number, leftMargin: number, width: number) {
// animateTo({
// duration: duration, // 动画时长
// curve: Curve.Linear, // 动画曲线
// iterations: 1, // 播放次数
// playMode: PlayMode.Normal, // 动画模式
// onFinish: () => {
// console.info('play end')
// }
// }, () => {
// this.indicatorLeftMargin = leftMargin
// this.indicatorWidth = width
// })
// }
}
\ No newline at end of file
... ... @@ -4,7 +4,7 @@ import { EmitterEventId, EmitterUtils, Logger, StringUtils } from 'wdKit';
import { HttpUtils } from 'wdNetwork/Index';
import HomeChannelUtils, { AssignChannelParam } from 'wdRouter/Index';
import { MinePageComponent } from 'wdComponent/src/main/ets/components/page/MinePageComponent';
import { CompUtils, TopNavigationComponent, TopNavigationComponentNew } from 'wdComponent/Index';
import { CompUtils, TopNavigationComponentNew } from 'wdComponent/Index';
import { VideoChannelPage } from './VideoChannelPage';
import ChannelViewModel from 'wdComponent/src/main/ets/viewmodel/ChannelViewModel';
import { ALL, ImageKnifeComponent, ImageKnifeOption, NONE } from '@ohos/imageknife';
... ... @@ -21,7 +21,6 @@ let storage = LocalStorage.getShared();
@Entry(storage)
@Component
export struct BottomNavigationComponent {
private isNewTopPage = true // TODO 顶导重构页面开关，false，则用原来的顶导
@Provide bottomRectHeight: number = 0
@Provide topRectHeight: number = 0
@Provide isLayoutFullScreen: boolean = false
... ... @@ -87,28 +86,15 @@ export struct BottomNavigationComponent {
autoRefresh: this.autoRefresh
})
} else {
if (this.isNewTopPage) {
TopNavigationComponentNew({
groupId: navItem.id,
topNavList: navItem.topNavChannelList.filter(item => item.channelId != 2073),
_currentNavIndex: $currentNavIndex,
bottomNavIndex: index,
currentBottomNavName: navItem.name,
assignChannel: this.assignChannel,
autoRefresh: this.autoRefresh
})
} else {
TopNavigationComponent({
groupId: navItem.id,
topNavList: navItem.topNavChannelList.filter(item => item.channelId != 2073),
_currentNavIndex: $currentNavIndex,
navIndex: index,
currentBottomNavName: navItem.name,
assignChannel: this.assignChannel,
autoRefresh: this.autoRefresh
})
}
TopNavigationComponentNew({
groupId: navItem.id,
topNavList: navItem.topNavChannelList.filter(item => item.channelId != 2073),
_currentNavIndex: $currentNavIndex,
bottomNavIndex: index,
currentBottomNavName: navItem.name,
assignChannel: this.assignChannel,
autoRefresh: this.autoRefresh
})
}
}
.tabBar(this.tabBarBuilder(navItem, index))
... ...
... ... @@ -17,7 +17,7 @@
"name": "EntryAbility", // 这里不能改动，和后台推送有绑定
"srcEntry": "./ets/entryability/EntryAbility.ets",
"description": "$string:EntryAbility_desc",
"icon": "$media:app_icon",
"icon": "$media:app_icon_layer",
"label": "$string:EntryAbility_label",
"startWindowIcon": "$media:app_icon",
"startWindowBackground": "$color:start_window_background",
... ...
{
"layered-image":
{
"background" : "$media:app_icon_background",
"foreground" : "$media:app_icon_foreground"
}
}
\ No newline at end of file
... ...