developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
wangliang_wd
bc4ee43d 2 parents 147be0f6 2cfed5bd

Merge branch 'main' of http://192.168.1.42/developOne/harmonyPool into main 

* 'main' of http://192.168.1.42/developOne/harmonyPool:
  feat: 1)处理首页新闻tab的顶导数据源；2）处理顶导存在电子报和播报 左右切换 回归问题
  feat: 1)处理首页新闻tab的顶导数据源；2）处理顶导存在电子报和播报 左右切换 回归问题
  feat: 1)处理首页新闻tab的顶导数据源；2）处理顶导存在电子报和播报 左右切换 回归问题
Inline Side-by-side
Showing 4 changed files with 144 additions and 103 deletions
... ... @@ -2,26 +2,26 @@
* 顶导
*/
export class TopNavDTO {
channelId: number = 0;
channelStyle: number = 0;
channelId: number = 0; //频道id
channelStyle: number = 0; //频道样式；1-沉浸式;2-信息流
channelType: number = 0; // 频道样式；1-沉浸式;2-信息流;3-特殊频道（跳转指定页面的，如版面）
defaultPermitted: number = 0;
delPermitted: number = 0;
defaultPermitted: number = 0; //允许设置为默认首页 0:否, 1:是;【首页设置频道】
delPermitted: number = 0; //允许删除 0:否, 1:是；【撤销属性】
fontCColor: string = ''; // 频道展示样式颜色（选中状态)
fontColor: string = ''; // 频道展示样式颜色（未选中状态)
headlinesOn: number = 0;
homeChannel: string = '';
iconUrlSize: string = '';
iconCUrlSize: string = '';
headlinesOn: number = 0; //头条标识 0:否, 1:是；【是否头条=是的频道，固定排序在第一位，且不可移出/移动】
homeChannel: string = ''; //必须 是否首页设置；0否，1是
iconUrlSize: string = ''; // 选中图片的大小
iconCUrlSize: string = ''; // 未选中图片的大小
iconUrl: string = ''; // 频道图片展示样式图片相对地址（未选中状态)
iconCUrl: string = ''; //频道图片展示样式图片相对地址（选中状态
localChannel: string = '';
moreChannel: string = '';
movePermitted: number = 0;
myChannel: string = '';
name: string = '';
num: number = 0;
pageId: number = 0;
iconCUrl: string = ''; //频道图片展示样式图片相对地址（选中状态）
localChannel: string = ''; // 必须 是否地方频道栏目；0否，1是
moreChannel: string = ''; // 必须 是否更多栏目；0否，1是
movePermitted: number = 0; //允许移动 0:否, 1:是；【位置属性】
myChannel: string = '';// 必须 是否我的栏目；0否，1是
name: string = ''; //频道名称
num: number = 0; //首页设置根据这个排序20230828
pageId: number = 0; //频道关联页面id
pageType: string = '';
underlineCColor: string = ''; // 选中下划线颜色
}
... ...
... ... @@ -12,8 +12,7 @@ const MORE_CHANNEL: string = '更多频道'
const LOCAL_CHANNEL: string = '地方频道'
const TAG: string = 'ChannelSubscriptionLayout'
// @Entry
export { ChannelSubscriptionLayout }
@Component
struct ChannelSubscriptionLayout {
@State indexSettingArray: string [] = ['推荐', '热点']
... ... @@ -41,7 +40,9 @@ struct ChannelSubscriptionLayout {
aboutToAppear() {
this.currentTopNavSelectedItem = this.myChannelList[this.currentTopNavSelectedIndex]
this.myChannelList.forEach(item => {
if(item != undefined && item.channelId != undefined){
this.channelIds.push(item.channelId)
}
})
}
... ... @@ -222,7 +223,6 @@ struct ChannelSubscriptionLayout {
.padding({ bottom: 10 })
List() {
ListItem() {
Row() {
Text(INDEX_SETTING_TITLE)
... ... @@ -515,4 +515,3 @@ struct ChannelSubscriptionLayout {
}
}
export { ChannelSubscriptionLayout }
\ No newline at end of file
... ...
... ... @@ -11,6 +11,9 @@ import { channelSkeleton } from '../skeleton/channelSkeleton';
import { ParamType, TrackConstants, Tracking, TrackingButton } from 'wdTracking/Index';
import DailyPaperTopicModel from '../../model/DailyPaperTopicModel';
import { CompUtils } from '../../utils/CompUtils';
import ChannelViewModel from '../../viewmodel/ChannelViewModel';
import { JSON } from '@kit.ArkTS';
import text from '@ohos.graphics.text';
const TAG = 'TopNavigationComponent';
... ... @@ -25,22 +28,28 @@ export struct TopNavigationComponentNew {
private topRectHeight: string = AppStorage.get<number>('topSafeHeight') + 'px';
private pageName: string = ''
private pageId: number = 0
readonly MAX_LINE: number = 1; // 顶部tab text最大行数
private swiperController: SwiperController = new SwiperController()
private listScroller: Scroller = new Scroller()
/**
* 首页 底导 某个tab 对象
*/
navItem: BottomNavDTO = {} as BottomNavDTO
// 背景色
@Consume barBackgroundColor: Color
// 首页当前正在哪个tab的索引值
@Link _currentNavIndex?: 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列表
@State storageChannelIds: string = AppStorage.get<string>('channelIds') || ''
// 首页设置的频道信息数组
@State homeChannelList: TopNavDTO[] = []
// 我的频道列表
@State myChannelList: TopNavDTO[] = []
... ... @@ -48,18 +57,14 @@ export struct TopNavigationComponentNew {
@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 bottomNavIndex: number = 0
@State animationDuration: number = 0
@State indicatorLeftMargin: number = 0
@State indicatorWidth: number = 0
@State isClickMorningEveningPaper: boolean = false
build() {
... ... @@ -70,7 +75,7 @@ export struct TopNavigationComponentNew {
Swiper(this.swiperController) {
ForEach(CompUtils.isNews(this.navItem) ? this.myChannelList : this.topNavList,
(navItem: TopNavDTO, index: number) => {
if (CompUtils.isRMH(this.navItem) && navItem.channelType === 3) {
if (CompUtils.isRMH(this.navItem) && this.isSpecialChannel(navItem)) {
// 人民号 -- 关注tab
PeopleShipMainComponent({
currentTopNavSelectedIndex: $currentTopNavSelectedIndex,
... ... @@ -79,7 +84,7 @@ export struct TopNavigationComponentNew {
channelId: navItem?.channelId + '',
autoRefresh: this.autoRefresh2Page
})
} else
} else {
if (!this.isBroadcast(navItem) && !this.isLayout(navItem)) {
PageComponent({
currentTopNavSelectedIndex: $currentTopNavSelectedIndex,
... ... @@ -90,6 +95,8 @@ export struct TopNavigationComponentNew {
})
} else {
channelSkeleton()
//Text('特殊频道').fontColor(Color.Red).fontSize(20).width('100%').height('100%')
}
}
})
}
... ... @@ -109,29 +116,45 @@ export struct TopNavigationComponentNew {
if (curIndex === index) {
return
}
if (this.isBroadcastByIndex(index)) {
// 跳转到播报页面
ProcessUtils.gotoBroadcastPage(this.myChannelList[index].pageId)
let nextIndex = this.currentTopNavSelectedIndex > index ? index - 1 : index + 1
if (nextIndex < this.myChannelList.length) {
this.changePage(nextIndex)
}
} else if (this.isLayoutByIndex(index)) {
// 跳转到电子报页面
ProcessUtils.gotoENewsPaper()
} else {
this.changePage(index)
}
})
.onAnimationEnd((index: number) => {
Logger.info(TAG, `onAnimationEnd ${index}`);
})
.onChange((index) => {
Logger.info(TAG, `onChange index : ${index}`);
if (this.isLayoutByIndex(index) || this.isBroadcastByIndex(index)) {
let nextIndex = this.currentTopNavSelectedIndex > index ? index - 1 : index + 1
if (nextIndex < this.myChannelList.length) {
// 电子报和播报 相邻
if (this.isBroadcastByIndex(nextIndex) || this.isLayoutByIndex(nextIndex)) {
nextIndex = this.currentTopNavSelectedIndex > index ? nextIndex - 1 : nextIndex + 1
if (nextIndex < this.myChannelList.length) {
this.changePage(nextIndex)
} else {
this.changePage(this.currentTopNavSelectedIndex)
}
} else {
this.changePage(nextIndex)
}
} else {
this.currentTopNavSelectedIndex = index;
// 极左极右有特殊频道，用旧值
this.changePage(this.currentTopNavSelectedIndex)
}
})
// .onAnimationEnd((index: number)=>{
// Logger.info(TAG, `onAnimationEnd ${index}`);
// })
.onChange((index) => {
Logger.info(TAG, `onChange index : ${index}`);
}
})
}
.width('100%')
... ... @@ -141,10 +164,14 @@ export struct TopNavigationComponentNew {
.margin({ top: this.topRectHeight })
}
/**
* 新闻tab 头部
*/
@Builder
topBar() {
Column() {
Row() {
FirstTabTopSearchComponent()
Image($r('app.media.icon_ren_min_ri_bao'))
... ... @@ -173,19 +200,12 @@ export struct TopNavigationComponentNew {
.width(124)
.onClick(() => {
//防止多次点击
if(!this.isClickMorningEveningPaper) {
if (!this.isClickMorningEveningPaper) {
this.isClickMorningEveningPaper = true;
let c = setInterval(() => {
this.isClickMorningEveningPaper = false
}, 1000);
// 早晚报埋点
const params: ParamType = {
"pageName": this.pageName,
"pageId": this.pageId,
}
Tracking.event("morning_evening_news_click", params)
this.clickMorningEveningPaper()
}
})
... ... @@ -282,6 +302,11 @@ export struct TopNavigationComponentNew {
}
}
/**
* 顶部导航栏
* @param item
* @param index
*/
@Builder
tabBarBuilder(item: TopNavDTO, index: number) {
Column() {
... ... @@ -411,7 +436,8 @@ export struct TopNavigationComponentNew {
item.myChannel = '1'
}
//频道分类
if (item.name !== '播报') { //暂时隐藏播报
//TODO 暂时隐藏播报
if (item.name !== '播报') {
if (item.myChannel === '1') {
_myChannelList.push(item)
}
... ... @@ -451,28 +477,46 @@ export struct TopNavigationComponentNew {
}
}
/**
* 频道是播报
* @param item
* @returns
*/
private isBroadcast(item?: TopNavDTO): boolean {
// TODO 用id channelId = '2066'
return item?.name === '播报'
return item?.channelId === 2066
}
/**
* 频道是电子报
* @param item
* @returns
*/
private isLayout(item?: TopNavDTO): boolean {
// TODO 用id channelId = '2006'
return item?.name === '版面'
return item?.channelId === 2006
}
/**
* 检测播报
* @param index
* @returns
*/
private isBroadcastByIndex(index: number): boolean {
let item = this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index]
return this.isBroadcast(item)
}
/**
* 检测电子报
* @param index
* @returns
*/
private isLayoutByIndex(index: number): boolean {
let item = this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index]
return this.isLayout(item)
}
private isSpecialChannel(item?: TopNavDTO) {
// 版面、播报，可以用这个判断
// 版面、播报、关注，可以用这个判断
return item?.channelType === 3
}
... ... @@ -481,7 +525,8 @@ export struct TopNavigationComponentNew {
this.topNavListHandle()
this.changePage(this.currentTopNavSelectedIndex)
console.log('XY', '----TopNavigation-------aboutToAppear'+this.navItem.name)
console.log('XY', '----TopNavigation-------aboutToAppear' + this.navItem.name)
this.getTopNavList(this.navItem.id)
}
onTopNavigationDataUpdated() {
... ... @@ -489,14 +534,16 @@ export struct TopNavigationComponentNew {
`onTopNavigationDataUpdated currentTopNavIndex: ${this.currentTopNavSelectedIndex},topNavList.length:${this.topNavList.length}`);
}
/**
*
*/
updateCurrentTopNavSelectedIndex() {
Logger.info(TAG, `this.navItem 埋点参数topStyle: ${this.navItem.topStyle}`);
// 顶部tab埋点
if (CompUtils.isNews(this.navItem)) {
const tab = this.myChannelList[this.currentTopNavSelectedIndex]
Logger.info(TAG, `新闻tab埋点: ${JSON.stringify(tab)}`);
//Logger.info(TAG, `新闻tab埋点: ${JSON.stringify(tab)}`);
// 埋点
const params: ParamType = {
"pageName": tab.name,
"tabName": tab.name,
... ... @@ -507,6 +554,7 @@ export struct TopNavigationComponentNew {
const tab = this.topNavList[this.currentTopNavSelectedIndex]
Logger.info(TAG, `人民号tab埋点: ${JSON.stringify(tab)}`);
// 埋点
const params: ParamType = {
"pageName": tab.name,
"tabName": tab.name,
... ... @@ -516,12 +564,15 @@ export struct TopNavigationComponentNew {
}
}
/**
* 自动刷新方法
*/
onAutoRefresh() {
if (this.bottomNavIndex != this._currentNavIndex) {
return
}
// 通知page刷新
this.autoRefresh2Page++
this.doAutoRefresh()
}
private doAutoRefresh() {
... ... @@ -616,49 +667,34 @@ export struct TopNavigationComponentNew {
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 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
// })
// }
// 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 }
// }
/**
* 进入早晚报专题
*/
clickMorningEveningPaper() {
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
})
// 早晚报埋点
const params: ParamType = {
"pageName": this.pageName,
"pageId": this.pageId,
}
Tracking.event("morning_evening_news_click", params)
clickMorningEveningPaper() {
if (NetworkUtil.isNetConnected()) {
DailyPaperTopicModel.getDailyPaperTopic().then(dailyPaperTopicBean => {
if (dailyPaperTopicBean && dailyPaperTopicBean.id > 0) {
... ... @@ -676,4 +712,14 @@ export struct TopNavigationComponentNew {
ToastUtils.showToast('网络出小差了，请检查网络后重试', 1000)
}
}
//请求顶导数据
async getTopNavList(id: number) {
let bottomNavDetail = await ChannelViewModel.getBottomNavDetailData(id)
let topNavList = bottomNavDetail?.topNavChannelList || []
for (let topNav of topNavList) {
console.debug(TAG, 'getTopNavList=>' + JSON.stringify(topNav))
}
}
}
\ No newline at end of file
... ...
... ... @@ -36,7 +36,7 @@ export struct BottomNavigationComponent {
@State topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0
@State @Watch('onBottomNavigationDataUpdated') bottomNavList: BottomNavDTO[] = [] // 底导/顶导全部数据
@State currentNavIndex: number = BottomNavi.NEWS; // 底导当前选中/焦点下标
@State topNavList: TopNavDTO[] = []
// @State topNavList: TopNavDTO[] = []
// 底导TabsController
private navController: TabsController = new TabsController();
readonly ASPECT_RATIO_1_1: number = 1 / 1; // 底导图片宽高比
... ... @@ -52,8 +52,7 @@ export struct BottomNavigationComponent {
@State assignChannel: AssignChannelParam = new AssignChannelParam()
// 自动刷新触发（双击tab自动刷新）
@State autoRefresh: number = 0
// 顶导数据，从接口获取 TODO 顶导业务逻辑没看懂，暂时不替换顶导list。频道管理数据待梳理
// @State topNavMap: Record<string, TopNavDTO[]> = {}
async aboutToAppear() {
Logger.info(TAG, `aboutToAppear currentNavIndex: ${this.currentNavIndex}`);
... ... @@ -239,11 +238,7 @@ export struct BottomNavigationComponent {
// 请求顶导数据(参数）：
}
//请求顶导数据
async getTopNavList(id: number) {
let bottomNavDetail = await ChannelViewModel.getBottomNavDetailData(id)
this.topNavList = bottomNavDetail?.topNavChannelList || []
}
onBottomNavigationDataUpdated() {
Logger.error('yyyy', 'onBottomNavigationDataUpdated ' + JSON.stringify(this.bottomNavList))
... ... @@ -366,7 +361,8 @@ export struct BottomNavigationComponent {
item.pageName = 'MY';
break;
default:
item.pageName = 'NEWS'; break;
item.pageName = 'NEWS';
break;
}
})
this.bottomNavList = list
... ...