developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
yuzhilin
d186a496 1 parent bf2fb560

频道数据处理

Inline Side-by-side
Showing 3 changed files with 375 additions and 291 deletions
... ... @@ -10,259 +10,18 @@ const MORE_CHANNEL: string = '更多频道'
const LOCAL_CHANNEL: string = '地方频道'
@CustomDialog
struct CustomDialogExample {
@State indexSettingArray: Array<string> = ['推荐', '热点']
struct ChannelDialog {
@State indexSettingTabIndex: number = 1
@State myChannelList: Array<TopNavDTO> = [
{
channelId: 0,
channelStyle: 1,
channelType: 1,
defaultPermitted: 1,
delPermitted: 1,
fontCColor: '#000000',
fontColor: '#000000',
headlinesOn: 0,
homeChannel: '1',
iconCUrl: '',
iconCUrlSize: '',
iconUrl: '',
iconUrlSize: '',
localChannel: '',
moreChannel: '',
movePermitted: 0,
myChannel: '1',
name: '推荐',
num: 0,
pageId: 21212,
pageType: '',
underlineCColor: ''
},
{
channelId: 1,
channelStyle: 1,
channelType: 1,
defaultPermitted: 1,
delPermitted: 1,
fontCColor: '#000000',
fontColor: '#000000',
headlinesOn: 0,
homeChannel: '1',
iconCUrl: '',
iconCUrlSize: '',
iconUrl: '',
iconUrlSize: '',
localChannel: '',
moreChannel: '',
movePermitted: 0,
myChannel: '1',
name: '热点',
num: 0,
pageId: 21212,
pageType: '',
underlineCColor: ''
},
{
channelId: 2,
channelStyle: 1,
channelType: 1,
defaultPermitted: 1,
delPermitted: 1,
fontCColor: '#000000',
fontColor: '#000000',
headlinesOn: 0,
homeChannel: '',
iconCUrl: '',
iconCUrlSize: '',
iconUrl: '',
iconUrlSize: '',
localChannel: '',
moreChannel: '',
movePermitted: 0,
myChannel: '1',
name: '视频',
num: 0,
pageId: 21212,
pageType: '',
underlineCColor: ''
},
{
channelId: 3,
channelStyle: 1,
channelType: 1,
defaultPermitted: 1,
delPermitted: 1,
fontCColor: '#000000',
fontColor: '#000000',
headlinesOn: 0,
homeChannel: '',
iconCUrl: '',
iconCUrlSize: '',
iconUrl: '',
iconUrlSize: '',
localChannel: '',
moreChannel: '',
movePermitted: 0,
myChannel: '1',
name: '云课堂',
num: 0,
pageId: 21212,
pageType: '',
underlineCColor: ''
},
]
@State moreChannelList: Array<TopNavDTO> = [
{
channelId: 4,
channelStyle: 1,
channelType: 1,
defaultPermitted: 1,
delPermitted: 1,
fontCColor: '#000000',
fontColor: '#000000',
headlinesOn: 0,
homeChannel: '',
iconCUrl: '',
iconCUrlSize: '',
iconUrl: '',
iconUrlSize: '',
localChannel: '',
moreChannel: '1',
movePermitted: 0,
myChannel: '',
name: '房产',
num: 0,
pageId: 21212,
pageType: '',
underlineCColor: ''
},
{
channelId: 5,
channelStyle: 1,
channelType: 1,
defaultPermitted: 1,
delPermitted: 1,
fontCColor: '#000000',
fontColor: '#000000',
headlinesOn: 0,
homeChannel: '',
iconCUrl: '',
iconCUrlSize: '',
iconUrl: '',
iconUrlSize: '',
localChannel: '',
moreChannel: '1',
movePermitted: 0,
myChannel: '',
name: '生态',
num: 0,
pageId: 21212,
pageType: '',
underlineCColor: ''
},
{
channelId: 6,
channelStyle: 1,
channelType: 1,
defaultPermitted: 1,
delPermitted: 1,
fontCColor: '#000000',
fontColor: '#000000',
headlinesOn: 0,
homeChannel: '',
iconCUrl: '',
iconCUrlSize: '',
iconUrl: '',
iconUrlSize: '',
localChannel: '',
moreChannel: '1',
movePermitted: 0,
myChannel: '',
name: '健康',
num: 0,
pageId: 21212,
pageType: '',
underlineCColor: ''
}
]
@State localChannelList: Array<TopNavDTO> = [
{
channelId: 7,
channelStyle: 1,
channelType: 1,
defaultPermitted: 1,
delPermitted: 1,
fontCColor: '#000000',
fontColor: '#000000',
headlinesOn: 0,
homeChannel: '',
iconCUrl: '',
iconCUrlSize: '',
iconUrl: '',
iconUrlSize: '',
localChannel: '1',
moreChannel: '',
movePermitted: 0,
myChannel: '',
name: '北京',
num: 0,
pageId: 21212,
pageType: '',
underlineCColor: ''
},
{
channelId: 8,
channelStyle: 1,
channelType: 1,
defaultPermitted: 1,
delPermitted: 1,
fontCColor: '#000000',
fontColor: '#000000',
headlinesOn: 0,
homeChannel: '',
iconCUrl: '',
iconCUrlSize: '',
iconUrl: '',
iconUrlSize: '',
localChannel: '1',
moreChannel: '',
movePermitted: 0,
myChannel: '',
name: '上海',
num: 0,
pageId: 21212,
pageType: '',
underlineCColor: ''
},
{
channelId: 9,
channelStyle: 1,
channelType: 1,
defaultPermitted: 1,
delPermitted: 1,
fontCColor: '#000000',
fontColor: '#000000',
headlinesOn: 0,
homeChannel: '',
iconCUrl: '',
iconCUrlSize: '',
iconUrl: '',
iconUrlSize: '',
localChannel: '1',
moreChannel: '',
movePermitted: 0,
myChannel: '',
name: '江苏',
num: 0,
pageId: 21212,
pageType: '',
underlineCColor: ''
}
]
@State isEditIng: boolean = false
@Link currentTopNavSelectedIndex : number
@Link myChannelList: Array<TopNavDTO>
@Link moreChannelList: Array<TopNavDTO>
@Link localChannelList: Array<TopNavDTO>
@Link indexSettingArray: Array<string>
@Link topNavList: Array<TopNavDTO>
myChannelItemEditHandle = (index: number): void => {
let item = this.myChannelList.splice(index, 1)[0]
console.info(`itemitemitem${JSON.stringify(item)}`)
if (item.moreChannel === '1') {
this.moreChannelList.unshift(item)
}
... ... @@ -271,10 +30,6 @@ struct CustomDialogExample {
}
}
controller?: CustomDialogController
cancel: () => void = () => {
}
confirm: () => void = () => {
}
build() {
Column() {
... ... @@ -353,20 +108,27 @@ struct CustomDialogExample {
Row() {
Text(item.name)
.fontSize(14)
.fontColor(item.homeChannel === '1' ? '#999999': '#222222')
.fontColor( this.currentTopNavSelectedIndex === index ? '#ED2800' : (item.homeChannel === '1' ? '#999999' : '#222222'))
if (this.isEditIng && item.myChannel !== '1') {
Image($r('app.media.icon_audio_close'))
.width(12)
.margin({ left: 1 })
}
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
.backgroundColor(item.homeChannel === '1' ? '#F5F5F5' : '')
.onClick(() => {
if (this.isEditIng) {
if(item.myChannel !== '1'){
this.myChannelItemEditHandle(index)
})
}
}else{
this.controller?.close()
}
.width('100%').height('100%')
.justifyContent(FlexAlign.Center)
.backgroundColor(item.homeChannel === '1' ? '#F5F5F5': '')
})
}
.width(80)
.height(40)
... ... @@ -396,18 +158,18 @@ struct CustomDialogExample {
ForEach(this.moreChannelList, (item: TopNavDTO, index: number) => {
GridCol() {
Row() {
Image($r('app.media.add_icon'))
.width(12)
.margin({ right: 1 })
.onClick(() => {
this.myChannelList.push(this.moreChannelList.splice(index, 1)[0])
})
Text(item.name)
.fontSize(14)
Image($r('app.media.add_icon'))
.width(12)
.margin({ left: 1 })
}
.width('100%').height('100%')
.justifyContent(FlexAlign.Center)
.onClick(() => {
this.myChannelList.push(this.moreChannelList.splice(index, 1)[0])
})
}
.width(80)
.height(40)
... ... @@ -445,13 +207,12 @@ struct CustomDialogExample {
Image($r('app.media.add_icon'))
.width(12)
.margin({ left: 1 })
.onClick(() => {
this.myChannelList.push(this.localChannelList.splice(index, 1)[0])
})
}
.width('100%').height('100%')
.justifyContent(FlexAlign.Center)
.onClick(() => {
this.myChannelList.push(this.localChannelList.splice(index, 1)[0])
})
}
.width(80)
.height(40)
... ... @@ -473,28 +234,292 @@ struct CustomDialogExample {
.padding(16)
.backgroundColor('#ffffff')
}
onTopNavigationDataUpdated() {
}
}
@Entry
@Component
struct ChannelSubscriptionLayout {
@State textValue: string = ''
@State inputValue: string = 'click me'
//当前选中的频道
@Prop currentTopNavSelectedIndex?: number;
@State indexSettingArray: Array<string> = ['推荐', '热点']
@State myChannelList: Array<TopNavDTO> = [
// {
// channelId: 0,
// channelStyle: 1,
// channelType: 1,
// defaultPermitted: 1,
// delPermitted: 1,
// fontCColor: '#000000',
// fontColor: '#000000',
// headlinesOn: 0,
// homeChannel: '1',
// iconCUrl: '',
// iconCUrlSize: '',
// iconUrl: '',
// iconUrlSize: '',
// localChannel: '',
// moreChannel: '',
// movePermitted: 0,
// myChannel: '1',
// name: '推荐',
// num: 0,
// pageId: 21212,
// pageType: '',
// underlineCColor: ''
// },
// {
// channelId: 1,
// channelStyle: 1,
// channelType: 1,
// defaultPermitted: 1,
// delPermitted: 1,
// fontCColor: '#000000',
// fontColor: '#000000',
// headlinesOn: 0,
// homeChannel: '1',
// iconCUrl: '',
// iconCUrlSize: '',
// iconUrl: '',
// iconUrlSize: '',
// localChannel: '',
// moreChannel: '',
// movePermitted: 0,
// myChannel: '1',
// name: '热点',
// num: 0,
// pageId: 21212,
// pageType: '',
// underlineCColor: ''
// },
// {
// channelId: 2,
// channelStyle: 1,
// channelType: 1,
// defaultPermitted: 1,
// delPermitted: 1,
// fontCColor: '#000000',
// fontColor: '#000000',
// headlinesOn: 0,
// homeChannel: '',
// iconCUrl: '',
// iconCUrlSize: '',
// iconUrl: '',
// iconUrlSize: '',
// localChannel: '',
// moreChannel: '',
// movePermitted: 0,
// myChannel: '1',
// name: '视频',
// num: 0,
// pageId: 21212,
// pageType: '',
// underlineCColor: ''
// },
// {
// channelId: 3,
// channelStyle: 1,
// channelType: 1,
// defaultPermitted: 1,
// delPermitted: 1,
// fontCColor: '#000000',
// fontColor: '#000000',
// headlinesOn: 0,
// homeChannel: '',
// iconCUrl: '',
// iconCUrlSize: '',
// iconUrl: '',
// iconUrlSize: '',
// localChannel: '',
// moreChannel: '',
// movePermitted: 0,
// myChannel: '1',
// name: '云课堂',
// num: 0,
// pageId: 21212,
// pageType: '',
// underlineCColor: ''
// },
]
@State moreChannelList: Array<TopNavDTO> = [
// {
// channelId: 4,
// channelStyle: 1,
// channelType: 1,
// defaultPermitted: 1,
// delPermitted: 1,
// fontCColor: '#000000',
// fontColor: '#000000',
// headlinesOn: 0,
// homeChannel: '',
// iconCUrl: '',
// iconCUrlSize: '',
// iconUrl: '',
// iconUrlSize: '',
// localChannel: '',
// moreChannel: '1',
// movePermitted: 0,
// myChannel: '',
// name: '房产',
// num: 0,
// pageId: 21212,
// pageType: '',
// underlineCColor: ''
// },
// {
// channelId: 5,
// channelStyle: 1,
// channelType: 1,
// defaultPermitted: 1,
// delPermitted: 1,
// fontCColor: '#000000',
// fontColor: '#000000',
// headlinesOn: 0,
// homeChannel: '',
// iconCUrl: '',
// iconCUrlSize: '',
// iconUrl: '',
// iconUrlSize: '',
// localChannel: '',
// moreChannel: '1',
// movePermitted: 0,
// myChannel: '',
// name: '生态',
// num: 0,
// pageId: 21212,
// pageType: '',
// underlineCColor: ''
// },
// {
// channelId: 6,
// channelStyle: 1,
// channelType: 1,
// defaultPermitted: 1,
// delPermitted: 1,
// fontCColor: '#000000',
// fontColor: '#000000',
// headlinesOn: 0,
// homeChannel: '',
// iconCUrl: '',
// iconCUrlSize: '',
// iconUrl: '',
// iconUrlSize: '',
// localChannel: '',
// moreChannel: '1',
// movePermitted: 0,
// myChannel: '',
// name: '健康',
// num: 0,
// pageId: 21212,
// pageType: '',
// underlineCColor: ''
// }
]
@State localChannelList: Array<TopNavDTO> = [
// {
// channelId: 7,
// channelStyle: 1,
// channelType: 1,
// defaultPermitted: 1,
// delPermitted: 1,
// fontCColor: '#000000',
// fontColor: '#000000',
// headlinesOn: 0,
// homeChannel: '',
// iconCUrl: '',
// iconCUrlSize: '',
// iconUrl: '',
// iconUrlSize: '',
// localChannel: '1',
// moreChannel: '',
// movePermitted: 0,
// myChannel: '',
// name: '北京',
// num: 0,
// pageId: 21212,
// pageType: '',
// underlineCColor: ''
// },
// {
// channelId: 8,
// channelStyle: 1,
// channelType: 1,
// defaultPermitted: 1,
// delPermitted: 1,
// fontCColor: '#000000',
// fontColor: '#000000',
// headlinesOn: 0,
// homeChannel: '',
// iconCUrl: '',
// iconCUrlSize: '',
// iconUrl: '',
// iconUrlSize: '',
// localChannel: '1',
// moreChannel: '',
// movePermitted: 0,
// myChannel: '',
// name: '上海',
// num: 0,
// pageId: 21212,
// pageType: '',
// underlineCColor: ''
// },
// {
// channelId: 9,
// channelStyle: 1,
// channelType: 1,
// defaultPermitted: 1,
// delPermitted: 1,
// fontCColor: '#000000',
// fontColor: '#000000',
// headlinesOn: 0,
// homeChannel: '',
// iconCUrl: '',
// iconCUrlSize: '',
// iconUrl: '',
// iconUrlSize: '',
// localChannel: '1',
// moreChannel: '',
// movePermitted: 0,
// myChannel: '',
// name: '江苏',
// num: 0,
// pageId: 21212,
// pageType: '',
// underlineCColor: ''
// }
]
// 顶导数据
@State topNavList: TopNavDTO[] = []
dialogController: CustomDialogController | null = new CustomDialogController({
builder: CustomDialogExample({
cancel: () => {
this.onCancel()
},
confirm: () => {
this.onAccept()
},
builder: ChannelDialog({
currentTopNavSelectedIndex:this.currentTopNavSelectedIndex,
indexSettingArray: this.indexSettingArray,
topNavList: this.topNavList,
myChannelList: this.myChannelList,
moreChannelList: this.moreChannelList,
localChannelList: this.localChannelList,
}),
cancel: this.exitApp,
autoCancel: true,
alignment: DialogAlignment.TopEnd,
customStyle: true,
})
aboutToAppear() {
this.topNavList.forEach((item,index)=>{
if(item.myChannel === '1'){
this.myChannelList.push(item)
}
if(item.moreChannel === '1'){
this.moreChannelList.push(item)
}
if(item.localChannel === '1'){
this.localChannelList.push(item)
}
})
}
aboutToDisappear() {
this.dialogController = null // 将dialogController置空
}
... ... @@ -514,12 +539,17 @@ struct ChannelSubscriptionLayout {
build() {
Row() {
Image($r('app.media.channel_button'))
.width(18)
}
.width(36)
.height(30)
.justifyContent(FlexAlign.Center)
.backgroundColor('#ffffff')
.onClick(() => {
if (this.dialogController != null) {
this.dialogController.open()
}
}).width($r('app.float.top_tab_bar_height'))
}.backgroundColor('#ffffff')
})
}
}
... ...
... ... @@ -3,6 +3,7 @@ import { LazyDataSource, Logger } from 'wdKit';
import { WDRouterRule } from 'wdRouter';
import { PageComponent } from './PageComponent';
import { ChannelSubscriptionLayout } from './ChannelSubscriptionLayout'
const TAG = 'TopNavigationComponent';
/**
... ... @@ -16,8 +17,48 @@ export struct TopNavigationComponent {
// 顶导数据
@State @Watch('onTopNavigationDataUpdated') topNavList: TopNavDTO[] = []
@State compList: LazyDataSource<CompDTO> = new LazyDataSource();
@State handledTopNavList: TopNavDTO[] = []
readonly MAX_LINE: number = 1;
topNavListHandle() {
let defaultMyChannelList: TopNavDTO[] = []
this.handledTopNavList = [...this.topNavList]
this.handledTopNavList.sort((a, b) => {
return a.num - b.num;
});
Logger.info(TAG, `aboutToAppear this.handledTopNavListsort : ${JSON.stringify(this.handledTopNavList)}`);
for (let i = 0; i < this.handledTopNavList.length; i++) {
if (this.handledTopNavList[i].defaultPermitted === 0 || this.handledTopNavList[i].movePermitted === 0 || this.handledTopNavList[i].delPermitted === 0 || this.handledTopNavList[i].headlinesOn === 1) {
defaultMyChannelList.push(this.handledTopNavList.splice(i, 1)[0]);
}
}
Logger.info(TAG, `aboutToAppear defaultMyChannelListsort : ${JSON.stringify(defaultMyChannelList)}`);
for (const element of defaultMyChannelList) {
element.myChannel = '1'
if (element.defaultPermitted === 1) {
element.homeChannel = '1'
}
}
this.handledTopNavList.unshift(...defaultMyChannelList)
for (let i = 0; i < this.handledTopNavList.length; i++) {
if(this.handledTopNavList[i].channelType === 2){
this.handledTopNavList[i].localChannel = '1'
}
if(i>=11){
if(this.handledTopNavList[i].channelType === 1){
this.handledTopNavList[i].moreChannel = '1'
}
}else{
if(this.handledTopNavList[i].channelType === 1 && this.handledTopNavList[i].myChannel !== '1'){
this.handledTopNavList[i].moreChannel = '1'
}
}
}
console.info(`handledTopNavList:${JSON.stringify(this.handledTopNavList)}`)
}
build() {
Column() {
RelativeContainer() {
... ... @@ -44,8 +85,10 @@ export struct TopNavigationComponent {
.height(30)
.width(123)
.id('search')
.alignRules({ left: { anchor: "__container__", align: HorizontalAlign.Start },
center: { anchor: "__container__", align: VerticalAlign.Center } })
.alignRules({
left: { anchor: "__container__", align: HorizontalAlign.Start },
center: { anchor: "__container__", align: VerticalAlign.Center }
})
Image($r('app.media.icon_ren_min_ri_bao'))
.width(72)
... ... @@ -60,8 +103,10 @@ export struct TopNavigationComponent {
WDRouterRule.jumpWithAction(taskAction)
})
.id('ren_min')
.alignRules({ middle: { anchor: "__container__", align: HorizontalAlign.Center },
center: { anchor: "__container__", align: VerticalAlign.Center } })
.alignRules({
middle: { anchor: "__container__", align: HorizontalAlign.Center },
center: { anchor: "__container__", align: VerticalAlign.Center }
})
Stack({ alignContent: Alignment.Center }) {
Image($r('app.media.background_read_paper_home'))
... ... @@ -83,8 +128,10 @@ export struct TopNavigationComponent {
.height(30)
.width(124)
.id('read')
.alignRules({ right: { anchor: "__container__", align: HorizontalAlign.End },
center: { anchor: "__container__", align: VerticalAlign.Center } })
.alignRules({
right: { anchor: "__container__", align: HorizontalAlign.End },
center: { anchor: "__container__", align: VerticalAlign.Center }
})
.onClick((event: ClickEvent) => {
let taskAction: Action = {
... ... @@ -99,10 +146,11 @@ export struct TopNavigationComponent {
.width('100%')
.height(40)
.visibility(this._currentNavIndex == 0 ? Visibility.Visible : Visibility.None)
Stack({alignContent:Alignment.TopEnd}){
Stack({ alignContent: Alignment.TopEnd }) {
Tabs() {
ForEach(this.topNavList, (navItem: TopNavDTO, index: number) => {
ForEach(this.handledTopNavList, (navItem: TopNavDTO, index: number) => {
TabContent() {
PageComponent({
currentTopNavSelectedIndex: $currentTopNavSelectedIndex,
... ... @@ -122,7 +170,10 @@ export struct TopNavigationComponent {
this.currentTopNavSelectedIndex = index;
})
ChannelSubscriptionLayout()
ChannelSubscriptionLayout({
topNavList: this.handledTopNavList,
currentTopNavSelectedIndex: this.currentTopNavSelectedIndex
})
}
}
... ... @@ -149,6 +200,7 @@ export struct TopNavigationComponent {
minWidth: $r('app.float.top_tab_item_min_width'),
maxWidth: $r('app.float.top_tab_item_max_width')
})
// .margin({ right: 36 })
// .backgroundColor(Color.Black)
.padding({
left: $r('app.float.top_tab_item_padding_horizontal'),
... ... @@ -156,9 +208,11 @@ export struct TopNavigationComponent {
bottom: $r('app.float.top_tab_item_padding_bottom')
})
.id(`col_tabBar${index}`)
}
aboutToAppear() {
this.topNavListHandle()
Logger.info(TAG, `aboutToAppear this.topNavList : ${JSON.stringify(this.topNavList)}`);
}
... ...