Showing
35 changed files
with
500 additions
and
925 deletions
| @@ -295,6 +295,10 @@ export class ProcessUtils { | @@ -295,6 +295,10 @@ export class ProcessUtils { | ||
| 295 | Logger.debug(TAG, `gotoVod, ${content.objectId}`); | 295 | Logger.debug(TAG, `gotoVod, ${content.objectId}`); |
| 296 | } | 296 | } |
| 297 | 297 | ||
| 298 | + /** | ||
| 299 | + * 进入直播详情页面 | ||
| 300 | + * @param content | ||
| 301 | + */ | ||
| 298 | public static async gotoLive(content: ContentDTO) { | 302 | public static async gotoLive(content: ContentDTO) { |
| 299 | let taskAction: Action = { | 303 | let taskAction: Action = { |
| 300 | type: 'JUMP_DETAIL_PAGE', | 304 | type: 'JUMP_DETAIL_PAGE', |
| @@ -4,6 +4,7 @@ import { TopNavDTO } from './TopNavDTO'; | @@ -4,6 +4,7 @@ import { TopNavDTO } from './TopNavDTO'; | ||
| 4 | * 底导(包含顶导列表)数据 | 4 | * 底导(包含顶导列表)数据 |
| 5 | */ | 5 | */ |
| 6 | export interface BottomNavDTO { | 6 | export interface BottomNavDTO { |
| 7 | + pageName: string; | ||
| 7 | backgroundUrl: string; // 迭代四:页面背景图 | 8 | backgroundUrl: string; // 迭代四:页面背景图 |
| 8 | channelChooseActionUrl: string; // 迭代四:频道选中下划线动画 | 9 | channelChooseActionUrl: string; // 迭代四:频道选中下划线动画 |
| 9 | channelChooseCColor: string; // 迭代四:频道未选中颜色 | 10 | channelChooseCColor: string; // 迭代四:频道未选中颜色 |
| @@ -14,8 +14,6 @@ export { PageComponent } from "./src/main/ets/components/page/PageComponent" | @@ -14,8 +14,6 @@ export { PageComponent } from "./src/main/ets/components/page/PageComponent" | ||
| 14 | 14 | ||
| 15 | export { LikeComponent } from "./src/main/ets/components/view/LikeComponent" | 15 | export { LikeComponent } from "./src/main/ets/components/view/LikeComponent" |
| 16 | 16 | ||
| 17 | -export { TopNavigationComponent } from "./src/main/ets/components/page/TopNavigationComponent" | ||
| 18 | - | ||
| 19 | export { TopNavigationComponentNew } from "./src/main/ets/components/page/TopNavigationComponentNew" | 17 | export { TopNavigationComponentNew } from "./src/main/ets/components/page/TopNavigationComponentNew" |
| 20 | 18 | ||
| 21 | export { LabelComponent } from "./src/main/ets/components/view/LabelComponent" | 19 | export { LabelComponent } from "./src/main/ets/components/view/LabelComponent" |
| @@ -34,11 +34,10 @@ export struct ENewspaperItemComponent { | @@ -34,11 +34,10 @@ export struct ENewspaperItemComponent { | ||
| 34 | .visibility(this.isShowSkeleton ? Visibility.Visible : Visibility.None) | 34 | .visibility(this.isShowSkeleton ? Visibility.Visible : Visibility.None) |
| 35 | Image(this.newspaperListItemBean.pagePic) | 35 | Image(this.newspaperListItemBean.pagePic) |
| 36 | .width('100%') | 36 | .width('100%') |
| 37 | - .aspectRatio(378 / 566) | ||
| 38 | - .objectFit(ImageFit.Fill) | ||
| 39 | .onComplete(() => { | 37 | .onComplete(() => { |
| 40 | this.isShowSkeleton = false | 38 | this.isShowSkeleton = false |
| 41 | }) | 39 | }) |
| 40 | + .objectFit(ImageFit.Contain) | ||
| 42 | .visibility(this.isShowSkeleton ? Visibility.None : Visibility.Visible) | 41 | .visibility(this.isShowSkeleton ? Visibility.None : Visibility.Visible) |
| 43 | 42 | ||
| 44 | Canvas(this.context) | 43 | Canvas(this.context) |
| @@ -49,7 +48,7 @@ export struct ENewspaperItemComponent { | @@ -49,7 +48,7 @@ export struct ENewspaperItemComponent { | ||
| 49 | 48 | ||
| 50 | }) | 49 | }) |
| 51 | } | 50 | } |
| 52 | - .padding({ top: 16, right: 16, bottom: 16, left: 16 }) | 51 | + .padding({ top:14, right: 10, bottom: 14, left: 10 }) |
| 53 | .margin({ left: 10, right: 10 }) | 52 | .margin({ left: 10, right: 10 }) |
| 54 | .backgroundColor(Color.White) | 53 | .backgroundColor(Color.White) |
| 55 | .width('100%') | 54 | .width('100%') |
| @@ -28,6 +28,8 @@ export struct ENewspaperPageComponent { | @@ -28,6 +28,8 @@ export struct ENewspaperPageComponent { | ||
| 28 | @State swiperIndex: number = 0; | 28 | @State swiperIndex: number = 0; |
| 29 | //当前选择的日期标记 | 29 | //当前选择的日期标记 |
| 30 | @State selectDate: Date = new Date() | 30 | @State selectDate: Date = new Date() |
| 31 | + @State bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') || 0 | ||
| 32 | + @State topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0 | ||
| 31 | 33 | ||
| 32 | //watch监听报纸页码回调 | 34 | //watch监听报纸页码回调 |
| 33 | onCurrentPageNumUpdated(): void { | 35 | onCurrentPageNumUpdated(): void { |
| @@ -102,7 +104,10 @@ export struct ENewspaperPageComponent { | @@ -102,7 +104,10 @@ export struct ENewspaperPageComponent { | ||
| 102 | //获取宽高尺寸 | 104 | //获取宽高尺寸 |
| 103 | this.screenWidth = this.displayTool.width | 105 | this.screenWidth = this.displayTool.width |
| 104 | this.picWidth = this.screenWidth - vp2px(52) | 106 | this.picWidth = this.screenWidth - vp2px(52) |
| 105 | - this.picHeight = this.picWidth * 566 / 378 | 107 | + let screenHeight = this.displayTool.height; |
| 108 | + // bottomSafeHeight 底导高度 topSafeHeight 顶导高度 44 顶部高度 60 底部高度 | ||
| 109 | + let height = screenHeight -this.bottomSafeHeight - this.topSafeHeight - vp2px(44) - vp2px(60) | ||
| 110 | + this.picHeight = height | ||
| 106 | // 默认日期 | 111 | // 默认日期 |
| 107 | const date = new Date() | 112 | const date = new Date() |
| 108 | const month = date.getMonth() + 1 | 113 | const month = date.getMonth() + 1 |
| @@ -213,10 +218,11 @@ export struct ENewspaperPageComponent { | @@ -213,10 +218,11 @@ export struct ENewspaperPageComponent { | ||
| 213 | } | 218 | } |
| 214 | .index(this.swiperIndex) | 219 | .index(this.swiperIndex) |
| 215 | .width('100%') | 220 | .width('100%') |
| 216 | - .height(px2vp(this.picHeight) + 32) | 221 | + // newspaper_shadow 44 高度 e_newspaper_content 35 margin top |
| 222 | + .height(px2vp(this.picHeight) - 44 - 35) | ||
| 217 | .vertical(true) | 223 | .vertical(true) |
| 218 | .autoPlay(false) | 224 | .autoPlay(false) |
| 219 | - .cachedCount(3) | 225 | + .cachedCount(1) |
| 220 | .indicator(false) | 226 | .indicator(false) |
| 221 | .loop(false) | 227 | .loop(false) |
| 222 | .displayCount(1) | 228 | .displayCount(1) |
| @@ -234,6 +240,7 @@ export struct ENewspaperPageComponent { | @@ -234,6 +240,7 @@ export struct ENewspaperPageComponent { | ||
| 234 | 240 | ||
| 235 | Image($r('app.media.newspaper_shadow')) | 241 | Image($r('app.media.newspaper_shadow')) |
| 236 | .height($r('app.float.vp_12')) | 242 | .height($r('app.float.vp_12')) |
| 243 | + .width('100%') | ||
| 237 | .margin({ left: 10, right: 10, top: -1 }) | 244 | .margin({ left: 10, right: 10, top: -1 }) |
| 238 | .objectFit(ImageFit.Contain) | 245 | .objectFit(ImageFit.Contain) |
| 239 | .alignRules({ | 246 | .alignRules({ |
| @@ -89,72 +89,77 @@ export struct CardMediaInfo { | @@ -89,72 +89,77 @@ export struct CardMediaInfo { | ||
| 89 | Row() { | 89 | Row() { |
| 90 | // 搜索接口没有返回liveInfo字段所以得做个区分 | 90 | // 搜索接口没有返回liveInfo字段所以得做个区分 |
| 91 | if (this.contentDTO && this.contentDTO.liveInfo && JSON.stringify(this.contentDTO.liveInfo) === '{}') { | 91 | if (this.contentDTO && this.contentDTO.liveInfo && JSON.stringify(this.contentDTO.liveInfo) === '{}') { |
| 92 | - // 当liveInfo不存在的时候 | ||
| 93 | - if (this.contentDTO?.liveType === 'wait') { | ||
| 94 | - Image($r('app.media.card_wait')) | ||
| 95 | - .mediaLogo() | ||
| 96 | - Text('预约') | ||
| 97 | - .mediaText() | ||
| 98 | - } else if (this.contentDTO?.liveType === 'running') { | ||
| 99 | - LottieView({ | ||
| 100 | - name: 'live_status_wait', | ||
| 101 | - path: "lottie/live_detail_living.json", | ||
| 102 | - lottieWidth: 14, | ||
| 103 | - lottieHeight: 14, | ||
| 104 | - autoplay: true, | ||
| 105 | - loop: true, | ||
| 106 | - }) | ||
| 107 | - .margin({ | ||
| 108 | - right: '2vp' | 92 | + // 当liveInfo不存在的时候 |
| 93 | + if (this.contentDTO?.liveType === 'wait') { | ||
| 94 | + Image($r('app.media.card_wait')) | ||
| 95 | + .mediaLogo() | ||
| 96 | + Text('预约') | ||
| 97 | + .mediaText() | ||
| 98 | + } else if (this.contentDTO?.liveType === 'running') { | ||
| 99 | + LottieView({ | ||
| 100 | + name: 'live_status_wait', | ||
| 101 | + path: "lottie/live_detail_living.json", | ||
| 102 | + lottieWidth: 14, | ||
| 103 | + lottieHeight: 14, | ||
| 104 | + autoplay: true, | ||
| 105 | + loop: true, | ||
| 109 | }) | 106 | }) |
| 110 | - // Image($r('app.media.card_live')) | ||
| 111 | - // .mediaLogo() | ||
| 112 | - Text('直播中') | ||
| 113 | - .mediaText() | ||
| 114 | - } else if (this.contentDTO?.liveType === 'end' && this.contentDTO?.linkUrl) { | ||
| 115 | - Image($r('app.media.card_play')) | ||
| 116 | - .mediaLogo() | ||
| 117 | - Text('回看') | ||
| 118 | - .mediaText() | ||
| 119 | - }else if(this.contentDTO?.liveInfo?.liveState === 'end' && !this.contentDTO?.linkUrl){ | ||
| 120 | - Text('已结束') | ||
| 121 | - .mediaText() | ||
| 122 | - } | 107 | + .margin({ |
| 108 | + right: '2vp' | ||
| 109 | + }) | ||
| 110 | + Text('直播中') | ||
| 111 | + .mediaText() | ||
| 112 | + } else if (this.contentDTO?.liveType === 'end' && this.contentDTO?.linkUrl) { | ||
| 113 | + Image($r('app.media.card_play')) | ||
| 114 | + .mediaLogo() | ||
| 115 | + Text('回看') | ||
| 116 | + .mediaText() | ||
| 117 | + }else if(this.contentDTO?.liveType === 'end' && !this.contentDTO?.linkUrl){ | ||
| 118 | + Text('已结束') | ||
| 119 | + .mediaText() | ||
| 120 | + }else if(!this.contentDTO?.liveType && this.contentDTO?.linkUrl){ | ||
| 121 | + // 加个防护,生产有出现这样的特例 | ||
| 122 | + Image($r('app.media.card_play')) | ||
| 123 | + .mediaLogo() | ||
| 124 | + Text('回看') | ||
| 125 | + .mediaText() | ||
| 126 | + } | ||
| 127 | + | ||
| 123 | }else { | 128 | }else { |
| 124 | // 当liveInfo存在时后 | 129 | // 当liveInfo存在时后 |
| 125 | 130 | ||
| 126 | - if (this.contentDTO?.liveInfo?.liveState === 'wait') { | ||
| 127 | - Image($r('app.media.card_wait')) | ||
| 128 | - .mediaLogo() | ||
| 129 | - Text('预约') | ||
| 130 | - .mediaText() | ||
| 131 | - } else if (this.contentDTO?.liveInfo?.liveState === 'running') { | ||
| 132 | - LottieView({ | ||
| 133 | - name: 'live_status_wait', | ||
| 134 | - path: "lottie/live_detail_living.json", | ||
| 135 | - lottieWidth: 14, | ||
| 136 | - lottieHeight: 14, | ||
| 137 | - autoplay: true, | ||
| 138 | - loop: true, | ||
| 139 | - }) | ||
| 140 | - .margin({ | ||
| 141 | - right: '2vp' | ||
| 142 | - }) | ||
| 143 | - // Image($r('app.media.card_live')) | ||
| 144 | - // .mediaLogo() | ||
| 145 | - Text('直播中') | ||
| 146 | - .mediaText() | ||
| 147 | - } else if (this.contentDTO?.liveInfo?.liveState === 'end' && this.contentDTO?.liveInfo?.replayUri) { | ||
| 148 | - Image($r('app.media.card_play')) | ||
| 149 | - .mediaLogo() | ||
| 150 | - Text('回看') | ||
| 151 | - .mediaText() | ||
| 152 | - }else if(this.contentDTO?.liveInfo?.liveState === 'end' && !this.contentDTO?.liveInfo | ||
| 153 | - ?.replayUri){ | ||
| 154 | - Text('已结束') | ||
| 155 | - .mediaText() | ||
| 156 | - } | ||
| 157 | - | 131 | + if (this.contentDTO?.liveInfo?.liveState === 'wait') { |
| 132 | + Image($r('app.media.card_wait')) | ||
| 133 | + .mediaLogo() | ||
| 134 | + Text('预约') | ||
| 135 | + .mediaText() | ||
| 136 | + } else if (this.contentDTO?.liveInfo?.liveState === 'running') { | ||
| 137 | + Row(){ | ||
| 138 | + LottieView({ | ||
| 139 | + name: 'live_status_wait', | ||
| 140 | + path: "lottie/live_detail_living.json", | ||
| 141 | + lottieWidth: 14, | ||
| 142 | + lottieHeight: 14, | ||
| 143 | + autoplay: true, | ||
| 144 | + loop: true, | ||
| 145 | + }).margin({ | ||
| 146 | + right: '2vp' | ||
| 147 | + }) | ||
| 148 | + Text('直播中') | ||
| 149 | + .mediaText() | ||
| 150 | + | ||
| 151 | + } | ||
| 152 | + | ||
| 153 | + } else if (this.contentDTO?.liveInfo?.liveState === 'end' && this.contentDTO?.liveInfo?.replayUri) { | ||
| 154 | + Image($r('app.media.card_play')) | ||
| 155 | + .mediaLogo() | ||
| 156 | + Text('回看') | ||
| 157 | + .mediaText() | ||
| 158 | + }else if(this.contentDTO?.liveInfo?.liveState === 'end' && !this.contentDTO?.liveInfo | ||
| 159 | + ?.replayUri){ | ||
| 160 | + Text('已结束') | ||
| 161 | + .mediaText() | ||
| 162 | + } | ||
| 158 | } | 163 | } |
| 159 | // 备注直播间观看人数在轮播图卡不显示 | 164 | // 备注直播间观看人数在轮播图卡不显示 |
| 160 | if(this.beused !== 'Zh_Carousel_Layout_01'){ | 165 | if(this.beused !== 'Zh_Carousel_Layout_01'){ |
| @@ -165,15 +170,6 @@ export struct CardMediaInfo { | @@ -165,15 +170,6 @@ export struct CardMediaInfo { | ||
| 165 | .mediaText() | 170 | .mediaText() |
| 166 | } | 171 | } |
| 167 | } | 172 | } |
| 168 | - | ||
| 169 | - | ||
| 170 | - // } else if (this.contentDTO?.liveInfo?.liveState === 'end' && this.contentDTO?.liveInfo | ||
| 171 | - // ?.replayUri) { | ||
| 172 | - // // Image($r('app.media.card_live')) | ||
| 173 | - // // .mediaLogo() | ||
| 174 | - // Text('直播结束') | ||
| 175 | - // .mediaText() | ||
| 176 | - // } | ||
| 177 | } | 173 | } |
| 178 | } else if (this.contentDTO.objectType === '9') { | 174 | } else if (this.contentDTO.objectType === '9') { |
| 179 | // 显示组图;图片数量 | 175 | // 显示组图;图片数量 |
| @@ -6,24 +6,25 @@ import { TrackingButton, TrackConstants } from 'wdTracking/Index'; | @@ -6,24 +6,25 @@ import { TrackingButton, TrackConstants } from 'wdTracking/Index'; | ||
| 6 | @Component | 6 | @Component |
| 7 | export default struct MinePageMoreFunctionUI { | 7 | export default struct MinePageMoreFunctionUI { |
| 8 | @Link moreData: MinePageMoreFunctionModel[] | 8 | @Link moreData: MinePageMoreFunctionModel[] |
| 9 | + @Link percent:number | ||
| 9 | 10 | ||
| 10 | build() { | 11 | build() { |
| 11 | Column() { | 12 | Column() { |
| 12 | Column() { | 13 | Column() { |
| 13 | Text("更多功能") | 14 | Text("更多功能") |
| 14 | .fontColor($r('app.color.color_222222')) | 15 | .fontColor($r('app.color.color_222222')) |
| 15 | - .fontSize('29lpx') | ||
| 16 | - .margin({ left: "31lpx" }) | ||
| 17 | - .lineHeight('46lpx') | 16 | + .fontSize(`${this.calcHeight(29)}lpx`) |
| 17 | + .margin({ left: `${this.calcHeight(31)}lpx` }) | ||
| 18 | + .lineHeight(`${this.calcHeight(46)}lpx`) | ||
| 18 | .fontWeight(FontWeight.Bold) | 19 | .fontWeight(FontWeight.Bold) |
| 19 | - }.height('92lpx') | 20 | + }.height(`${this.calcHeight(92)}lpx`) |
| 20 | .width('100%') | 21 | .width('100%') |
| 21 | .justifyContent(FlexAlign.Center) | 22 | .justifyContent(FlexAlign.Center) |
| 22 | .alignItems(HorizontalAlign.Start) | 23 | .alignItems(HorizontalAlign.Start) |
| 23 | 24 | ||
| 24 | Text().backgroundColor($r('app.color.color_F5F5F5')) | 25 | Text().backgroundColor($r('app.color.color_F5F5F5')) |
| 25 | .width('100%') | 26 | .width('100%') |
| 26 | - .height('1lpx') | 27 | + .height(`${this.calcHeight(1)}lpx`) |
| 27 | 28 | ||
| 28 | List() { | 29 | List() { |
| 29 | ForEach(this.moreData, (item: MinePageMoreFunctionModel, index: number) => { | 30 | ForEach(this.moreData, (item: MinePageMoreFunctionModel, index: number) => { |
| @@ -31,39 +32,42 @@ export default struct MinePageMoreFunctionUI { | @@ -31,39 +32,42 @@ export default struct MinePageMoreFunctionUI { | ||
| 31 | Column() { | 32 | Column() { |
| 32 | Column() { | 33 | Column() { |
| 33 | Row() { | 34 | Row() { |
| 34 | - if (item.imgSrc) { | ||
| 35 | - Image(item.imgSrc) | ||
| 36 | - .width('38lpx') | ||
| 37 | - .height('38lpx') | ||
| 38 | - .margin({ right: '15lpx' }) | ||
| 39 | - .objectFit(ImageFit.Auto) | ||
| 40 | - .interpolation(ImageInterpolation.High) | ||
| 41 | - } | ||
| 42 | - Text(`${item.msg}`) | ||
| 43 | - .width('456lpx') | ||
| 44 | - .height('38lpx') | ||
| 45 | - .fontColor($r('app.color.color_666666')) | ||
| 46 | - .fontSize('29lpx') | ||
| 47 | - .fontWeight(400) | 35 | + Row(){ |
| 36 | + if (item.imgSrc) { | ||
| 37 | + Image(item.imgSrc) | ||
| 38 | + .width(`${this.calcHeight(38)}lpx`) | ||
| 39 | + .height(`${this.calcHeight(38)}lpx`) | ||
| 40 | + .margin({ right: `${this.calcHeight(15)}lpx` }) | ||
| 41 | + .objectFit(ImageFit.Auto) | ||
| 42 | + .interpolation(ImageInterpolation.High) | ||
| 43 | + } | ||
| 44 | + Text(`${item.msg}`) | ||
| 45 | + .height(`${this.calcHeight(38)}lpx`) | ||
| 46 | + .fontColor($r('app.color.color_666666')) | ||
| 47 | + .fontSize(`${this.calcHeight(29)}lpx`) | ||
| 48 | + .fontWeight(400) | ||
| 49 | + }.alignItems(VerticalAlign.Center) | ||
| 50 | + .justifyContent(FlexAlign.Start) | ||
| 48 | 51 | ||
| 49 | - Blank() | ||
| 50 | Image($r('app.media.mine_user_arrow_2')) | 52 | Image($r('app.media.mine_user_arrow_2')) |
| 51 | - .width('27lpx') | ||
| 52 | - .height('27lpx') | 53 | + .width(`${this.calcHeight(27)}lpx`) |
| 54 | + .height(`${this.calcHeight(27)}lpx`) | ||
| 53 | .objectFit(ImageFit.Auto) | 55 | .objectFit(ImageFit.Auto) |
| 54 | .interpolation(ImageInterpolation.High) | 56 | .interpolation(ImageInterpolation.High) |
| 55 | - .margin({ left: '81lpx', right: '29lpx' }) | 57 | + .margin({ left: `${this.calcHeight(81)}lpx`, right: `${this.calcHeight(29)}lpx` }) |
| 56 | }.alignItems(VerticalAlign.Center) | 58 | }.alignItems(VerticalAlign.Center) |
| 57 | - .justifyContent(FlexAlign.Center) | ||
| 58 | - }.height('108lpx') | 59 | + .justifyContent(FlexAlign.SpaceBetween) |
| 60 | + .width("100%") | ||
| 61 | + | ||
| 62 | + }.height(`${this.calcHeight(108)}lpx`) | ||
| 59 | .justifyContent(FlexAlign.Center) | 63 | .justifyContent(FlexAlign.Center) |
| 60 | - .alignItems(HorizontalAlign.Start) | ||
| 61 | - .padding({ left: '27lpx' }) | 64 | + .padding({ left: `${this.calcHeight(27)}lpx` }) |
| 65 | + .width("100%") | ||
| 62 | 66 | ||
| 63 | if (index != this.moreData.length - 1) { | 67 | if (index != this.moreData.length - 1) { |
| 64 | Text().backgroundColor($r('app.color.color_F5F5F5')) | 68 | Text().backgroundColor($r('app.color.color_F5F5F5')) |
| 65 | - .width('612lpx') | ||
| 66 | - .height('1lpx') | 69 | + .width(`612lpx`) |
| 70 | + .height(`${this.calcHeight(1)}lpx`) | ||
| 67 | } | 71 | } |
| 68 | } | 72 | } |
| 69 | } | 73 | } |
| @@ -83,15 +87,21 @@ export default struct MinePageMoreFunctionUI { | @@ -83,15 +87,21 @@ export default struct MinePageMoreFunctionUI { | ||
| 83 | ProcessUtils.gotoFeedBackActivity() | 87 | ProcessUtils.gotoFeedBackActivity() |
| 84 | } | 88 | } |
| 85 | }) | 89 | }) |
| 86 | - .height('117lpx') | 90 | + .height(`${this.calcHeight(117)}lpx`) |
| 91 | + .width("100%") | ||
| 87 | }) | 92 | }) |
| 88 | }.onScrollFrameBegin((offset, state) => { | 93 | }.onScrollFrameBegin((offset, state) => { |
| 89 | return { offsetRemain: 0 } | 94 | return { offsetRemain: 0 } |
| 90 | }) | 95 | }) |
| 96 | + .width("100%") | ||
| 91 | } | 97 | } |
| 92 | .backgroundColor($r('app.color.white')) | 98 | .backgroundColor($r('app.color.white')) |
| 93 | .borderRadius(8) | 99 | .borderRadius(8) |
| 94 | - .margin({ left: '23lpx', right: '23lpx', top: "19lpx" }) | 100 | + .margin({ left: `${this.calcHeight(23)}lpx`, right: `${this.calcHeight(23)}lpx`, top: `${this.calcHeight(19)}lpx` }) |
| 101 | + } | ||
| 102 | + | ||
| 103 | + calcHeight(value:number): number{ | ||
| 104 | + return value * this.percent | ||
| 95 | } | 105 | } |
| 96 | } | 106 | } |
| 97 | 107 |
| @@ -11,12 +11,13 @@ const TAG = "MinePagePersonFunctionUI" | @@ -11,12 +11,13 @@ const TAG = "MinePagePersonFunctionUI" | ||
| 11 | export default struct MinePagePersonFunctionUI { | 11 | export default struct MinePagePersonFunctionUI { |
| 12 | @Link personalData:MinePagePersonalFunctionsItem[] | 12 | @Link personalData:MinePagePersonalFunctionsItem[] |
| 13 | @Prop isLogin:boolean | 13 | @Prop isLogin:boolean |
| 14 | + @Link percent:number | ||
| 14 | 15 | ||
| 15 | build() { | 16 | build() { |
| 16 | Grid(){ | 17 | Grid(){ |
| 17 | ForEach(this.personalData,(item:MinePagePersonalFunctionsItem,index:number)=>{ | 18 | ForEach(this.personalData,(item:MinePagePersonalFunctionsItem,index:number)=>{ |
| 18 | GridItem(){ | 19 | GridItem(){ |
| 19 | - PagePersonFunction({ item: item, noDivider : (index % 5 < 4 && index != this.personalData.length-1) ? false : true}) | 20 | + PagePersonFunction({ item: item, noDivider : (index % 5 < 4 && index != this.personalData.length-1) ? false : true,percent:$percent}) |
| 20 | }.onClick(()=>{ | 21 | }.onClick(()=>{ |
| 21 | console.log(index+"") | 22 | console.log(index+"") |
| 22 | switch (item.msg){ | 23 | switch (item.msg){ |
| @@ -77,14 +78,14 @@ export default struct MinePagePersonFunctionUI { | @@ -77,14 +78,14 @@ export default struct MinePagePersonFunctionUI { | ||
| 77 | break; | 78 | break; |
| 78 | } | 79 | } |
| 79 | } | 80 | } |
| 80 | - }).width('142lpx') | ||
| 81 | - .height('117lpx') | 81 | + })/*.width(`${this.calcHeight(142)}lpx`)*/ |
| 82 | + .height(`${this.calcHeight(117)}lpx`) | ||
| 82 | }) | 83 | }) |
| 83 | } | 84 | } |
| 84 | .rowsTemplate('1fr') | 85 | .rowsTemplate('1fr') |
| 85 | .columnsTemplate('1fr 1fr 1fr 1fr 1fr') | 86 | .columnsTemplate('1fr 1fr 1fr 1fr 1fr') |
| 86 | - .height('117lpx') | ||
| 87 | - .margin({top:'31lpx'}) | 87 | + .height(`${this.calcHeight(117)}lpx`) |
| 88 | + .margin({top:`${this.calcHeight(31)}lpx`}) | ||
| 88 | } | 89 | } |
| 89 | 90 | ||
| 90 | messageClick(){ | 91 | messageClick(){ |
| @@ -94,6 +95,10 @@ export default struct MinePagePersonFunctionUI { | @@ -94,6 +95,10 @@ export default struct MinePagePersonFunctionUI { | ||
| 94 | console.log(TAG, JSON.stringify(err)) | 95 | console.log(TAG, JSON.stringify(err)) |
| 95 | }) | 96 | }) |
| 96 | } | 97 | } |
| 98 | + | ||
| 99 | + calcHeight(value:number): number{ | ||
| 100 | + return value * this.percent | ||
| 101 | + } | ||
| 97 | } | 102 | } |
| 98 | 103 | ||
| 99 | function trackButtonClick(buttonName: string){ | 104 | function trackButtonClick(buttonName: string){ |
| @@ -13,6 +13,7 @@ export default struct MinePageUserSimpleInfoUI { | @@ -13,6 +13,7 @@ export default struct MinePageUserSimpleInfoUI { | ||
| 13 | userType:string = "1" | 13 | userType:string = "1" |
| 14 | @State levelHead:string = "" | 14 | @State levelHead:string = "" |
| 15 | @State levelId:number = 0 | 15 | @State levelId:number = 0 |
| 16 | + @Link percent:number | ||
| 16 | 17 | ||
| 17 | loginStateChange(){ | 18 | loginStateChange(){ |
| 18 | if(this.isLogin){ | 19 | if(this.isLogin){ |
| @@ -29,20 +30,20 @@ export default struct MinePageUserSimpleInfoUI { | @@ -29,20 +30,20 @@ export default struct MinePageUserSimpleInfoUI { | ||
| 29 | Stack(){ | 30 | Stack(){ |
| 30 | Image(this.headPhotoUrl==""?$r('app.media.default_head'):this.headPhotoUrl) | 31 | Image(this.headPhotoUrl==""?$r('app.media.default_head'):this.headPhotoUrl) |
| 31 | .alt($r('app.media.default_head')) | 32 | .alt($r('app.media.default_head')) |
| 32 | - .width('100lpx') | ||
| 33 | - .height('100lpx') | 33 | + .width(`${this.calcHeight(100)}lpx`) |
| 34 | + .height(`${this.calcHeight(100)}lpx`) | ||
| 34 | .objectFit(ImageFit.Cover) | 35 | .objectFit(ImageFit.Cover) |
| 35 | .borderRadius(50) | 36 | .borderRadius(50) |
| 36 | 37 | ||
| 37 | if(StringUtils.isNotEmpty(this.levelHead)){ | 38 | if(StringUtils.isNotEmpty(this.levelHead)){ |
| 38 | Image(this.levelHead) | 39 | Image(this.levelHead) |
| 39 | - .width('130lpx') | ||
| 40 | - .height('130lpx') | 40 | + .width(`${this.calcHeight(130)}lpx`) |
| 41 | + .height(`${this.calcHeight(130)}lpx`) | ||
| 41 | .objectFit(ImageFit.Cover) | 42 | .objectFit(ImageFit.Cover) |
| 42 | .borderRadius(50) | 43 | .borderRadius(50) |
| 43 | } | 44 | } |
| 44 | - }.width('130lpx') | ||
| 45 | - .height('130lpx') | 45 | + }.width(`${this.calcHeight(130)}lpx`) |
| 46 | + .height(`${this.calcHeight(130)}lpx`) | ||
| 46 | .alignContent(Alignment.Center) | 47 | .alignContent(Alignment.Center) |
| 47 | .onClick(()=>{ | 48 | .onClick(()=>{ |
| 48 | this.jumpLogin() | 49 | this.jumpLogin() |
| @@ -58,13 +59,13 @@ export default struct MinePageUserSimpleInfoUI { | @@ -58,13 +59,13 @@ export default struct MinePageUserSimpleInfoUI { | ||
| 58 | .maxLines(1) | 59 | .maxLines(1) |
| 59 | .fontWeight(FontWeight.Bold) | 60 | .fontWeight(FontWeight.Bold) |
| 60 | .textOverflow({ overflow: TextOverflow.Ellipsis }) | 61 | .textOverflow({ overflow: TextOverflow.Ellipsis }) |
| 61 | - .fontSize('33lpx') | ||
| 62 | - .lineHeight("46lpx") | 62 | + .fontSize(`${this.calcHeight(33)}lpx`) |
| 63 | + .lineHeight(`${this.calcHeight(46)}lpx`) | ||
| 63 | 64 | ||
| 64 | Image($r('app.media.mine_user_edit')) | 65 | Image($r('app.media.mine_user_edit')) |
| 65 | - .width('27lpx') | ||
| 66 | - .height('27lpx') | ||
| 67 | - .margin({left:'15lpx'}) | 66 | + .width(`${this.calcHeight(27)}lpx`) |
| 67 | + .height(`${this.calcHeight(27)}lpx`) | ||
| 68 | + .margin({left:`${this.calcHeight(15)}lpx`}) | ||
| 68 | .objectFit(ImageFit.Cover) | 69 | .objectFit(ImageFit.Cover) |
| 69 | Blank() | 70 | Blank() |
| 70 | }.width('100%') | 71 | }.width('100%') |
| @@ -75,39 +76,39 @@ export default struct MinePageUserSimpleInfoUI { | @@ -75,39 +76,39 @@ export default struct MinePageUserSimpleInfoUI { | ||
| 75 | 76 | ||
| 76 | Stack(){ | 77 | Stack(){ |
| 77 | Image($r('app.media.mine_grade_bg')) | 78 | Image($r('app.media.mine_grade_bg')) |
| 78 | - .width('84lpx') | ||
| 79 | - .height('29lpx') | 79 | + .width(`${this.calcHeight(84)}lpx`) |
| 80 | + .height(`${this.calcHeight(29)}lpx`) | ||
| 80 | .objectFit(ImageFit.Auto) | 81 | .objectFit(ImageFit.Auto) |
| 81 | Text(`等级${this.levelId}`) | 82 | Text(`等级${this.levelId}`) |
| 82 | .textAlign(TextAlign.Center) | 83 | .textAlign(TextAlign.Center) |
| 83 | .fontColor($r('app.color.white')) | 84 | .fontColor($r('app.color.white')) |
| 84 | - .fontSize('19lpx') | ||
| 85 | - .width('50lpx') | ||
| 86 | - .height('29lpx') | ||
| 87 | - }.margin({top:'15lpx'}) | 85 | + .fontSize(`${this.calcHeight(19)}lpx`) |
| 86 | + .width(`${this.calcHeight(50)}lpx`) | ||
| 87 | + .height(`${this.calcHeight(29)}lpx`) | ||
| 88 | + }.margin({top:'`${this.calcHeight(15)}lpx`'}) | ||
| 88 | }.alignItems(HorizontalAlign.Start) | 89 | }.alignItems(HorizontalAlign.Start) |
| 89 | - .margin({top:'12lpx',left:'23lpx'}) | ||
| 90 | - .width('352lpx') | 90 | + .margin({top:`${this.calcHeight(12)}lpx`,left:`${this.calcHeight(23)}lpx`}) |
| 91 | + .width(`${this.calcHeight(352)}lpx`) | ||
| 91 | }else{ | 92 | }else{ |
| 92 | Row(){ | 93 | Row(){ |
| 93 | Text("登录注册") | 94 | Text("登录注册") |
| 94 | .fontColor($r('app.color.color_222222')) | 95 | .fontColor($r('app.color.color_222222')) |
| 95 | - .fontSize('38lpx') | ||
| 96 | - .lineHeight("46lpx") | 96 | + .fontSize(`${this.calcHeight(38)}lpx`) |
| 97 | + .lineHeight(`${this.calcHeight(46)}lpx`) | ||
| 97 | .fontWeight(600) | 98 | .fontWeight(600) |
| 98 | 99 | ||
| 99 | Image($r('app.media.mine_user_edit')) | 100 | Image($r('app.media.mine_user_edit')) |
| 100 | - .width('11lpx') | ||
| 101 | - .height('20lpx') | ||
| 102 | - .margin({left:'15lpx'}) | 101 | + .width(`${this.calcHeight(11)}lpx`) |
| 102 | + .height(`${this.calcHeight(20)}lpx`) | ||
| 103 | + .margin({left:`${this.calcHeight(15)}lpx`}) | ||
| 103 | .objectFit(ImageFit.Cover) | 104 | .objectFit(ImageFit.Cover) |
| 104 | Blank() | 105 | Blank() |
| 105 | }.onClick(()=>{ | 106 | }.onClick(()=>{ |
| 106 | this.jumpLogin() | 107 | this.jumpLogin() |
| 107 | trackButtonClick("myPageUserLogin") | 108 | trackButtonClick("myPageUserLogin") |
| 108 | }) | 109 | }) |
| 109 | - .margin({top:'11lpx',left:'23lpx'}) | ||
| 110 | - .width('352lpx') | 110 | + .margin({top:`${this.calcHeight(11)}lpx`,left:`${this.calcHeight(23)}lpx`}) |
| 111 | + .width(`${this.calcHeight(352)}lpx`) | ||
| 111 | } | 112 | } |
| 112 | 113 | ||
| 113 | Blank() | 114 | Blank() |
| @@ -116,15 +117,15 @@ export default struct MinePageUserSimpleInfoUI { | @@ -116,15 +117,15 @@ export default struct MinePageUserSimpleInfoUI { | ||
| 116 | Text("签到") | 117 | Text("签到") |
| 117 | .textAlign(TextAlign.Start) | 118 | .textAlign(TextAlign.Start) |
| 118 | .width('108lpx') | 119 | .width('108lpx') |
| 119 | - .height('46lpx') | 120 | + .height(`${this.calcHeight(46)}lpx`) |
| 120 | .fontColor($r('app.color.color_AD6000')) | 121 | .fontColor($r('app.color.color_AD6000')) |
| 121 | .backgroundColor($r('app.color.color_FFC460')) | 122 | .backgroundColor($r('app.color.color_FFC460')) |
| 122 | .fontWeight(500) | 123 | .fontWeight(500) |
| 123 | .position({x:'23lpx'}) | 124 | .position({x:'23lpx'}) |
| 124 | .padding({left:'35lpx'}) | 125 | .padding({left:'35lpx'}) |
| 125 | Image($r("app.media.mine_sign_icon")) | 126 | Image($r("app.media.mine_sign_icon")) |
| 126 | - .width('50lpx') | ||
| 127 | - .height('50lpx') | 127 | + .width(`${this.calcHeight(50)}lpx`) |
| 128 | + .height(`${this.calcHeight(50)}lpx`) | ||
| 128 | }.width('131lpx') | 129 | }.width('131lpx') |
| 129 | .visibility(Visibility.Hidden) | 130 | .visibility(Visibility.Hidden) |
| 130 | }.backgroundColor($r('app.color.white')) | 131 | }.backgroundColor($r('app.color.white')) |
| @@ -201,6 +202,10 @@ export default struct MinePageUserSimpleInfoUI { | @@ -201,6 +202,10 @@ export default struct MinePageUserSimpleInfoUI { | ||
| 201 | WDRouterRule.jumpWithPage(WDRouterPage.mineHomePage) | 202 | WDRouterRule.jumpWithPage(WDRouterPage.mineHomePage) |
| 202 | } | 203 | } |
| 203 | } | 204 | } |
| 205 | + | ||
| 206 | + calcHeight(value:number): number{ | ||
| 207 | + return value * this.percent | ||
| 208 | + } | ||
| 204 | } | 209 | } |
| 205 | 210 | ||
| 206 | function trackButtonClick(buttonName: string){ | 211 | function trackButtonClick(buttonName: string){ |
| @@ -4,6 +4,7 @@ import MinePagePersonalFunctionsItem from '../../viewmodel/MinePagePersonalFunct | @@ -4,6 +4,7 @@ import MinePagePersonalFunctionsItem from '../../viewmodel/MinePagePersonalFunct | ||
| 4 | export struct PagePersonFunction{ | 4 | export struct PagePersonFunction{ |
| 5 | @ObjectLink item: MinePagePersonalFunctionsItem | 5 | @ObjectLink item: MinePagePersonalFunctionsItem |
| 6 | @State noDivider:boolean = false | 6 | @State noDivider:boolean = false |
| 7 | + @Link percent:number | ||
| 7 | 8 | ||
| 8 | build() { | 9 | build() { |
| 9 | Row(){ | 10 | Row(){ |
| @@ -15,18 +16,18 @@ export struct PagePersonFunction{ | @@ -15,18 +16,18 @@ export struct PagePersonFunction{ | ||
| 15 | if (this.item.isShowRedPoint) { | 16 | if (this.item.isShowRedPoint) { |
| 16 | Button() | 17 | Button() |
| 17 | .type(ButtonType.Circle) | 18 | .type(ButtonType.Circle) |
| 18 | - .width("12lpx") | ||
| 19 | - .height("12lpx") | 19 | + .width(`${this.calcHeight(12)}lpx`) |
| 20 | + .height(`${this.calcHeight(12)}lpx`) | ||
| 20 | .backgroundColor($r('app.color.color_ED2800')) | 21 | .backgroundColor($r('app.color.color_ED2800')) |
| 21 | } | 22 | } |
| 22 | - }.width('46lpx') | ||
| 23 | - .height('46lpx') | 23 | + }.width(`${this.calcHeight(46)}lpx`) |
| 24 | + .height(`${this.calcHeight(46)}lpx`) | ||
| 24 | 25 | ||
| 25 | Text(`${this.item.msg}`) | 26 | Text(`${this.item.msg}`) |
| 26 | - .margin({top:'8lpx'}) | ||
| 27 | - .height('23lpx') | 27 | + .margin({top:`${this.calcHeight(8)}lpx`}) |
| 28 | + .height(`${this.calcHeight(23)}lpx`) | ||
| 28 | .fontColor($r('app.color.color_222222')) | 29 | .fontColor($r('app.color.color_222222')) |
| 29 | - .fontSize('23lpx') | 30 | + .fontSize(`${this.calcHeight(23)}lpx`) |
| 30 | } | 31 | } |
| 31 | .alignItems(HorizontalAlign.Center) | 32 | .alignItems(HorizontalAlign.Center) |
| 32 | .width('100%') | 33 | .width('100%') |
| @@ -35,10 +36,13 @@ export struct PagePersonFunction{ | @@ -35,10 +36,13 @@ export struct PagePersonFunction{ | ||
| 35 | if(!this.noDivider){ | 36 | if(!this.noDivider){ |
| 36 | Text().backgroundColor($r('app.color.color_222222')) | 37 | Text().backgroundColor($r('app.color.color_222222')) |
| 37 | .opacity(0.1) | 38 | .opacity(0.1) |
| 38 | - .width('2lpx') | ||
| 39 | - .height('29lpx') | 39 | + .width(`${this.calcHeight(2)}lpx`) |
| 40 | + .height(`${this.calcHeight(29)}lpx`) | ||
| 40 | } | 41 | } |
| 41 | } | 42 | } |
| 42 | } | 43 | } |
| 43 | 44 | ||
| 45 | + calcHeight(value:number): number{ | ||
| 46 | + return value * this.percent | ||
| 47 | + } | ||
| 44 | } | 48 | } |
| @@ -82,6 +82,7 @@ export struct FollowChildComponent{ | @@ -82,6 +82,7 @@ export struct FollowChildComponent{ | ||
| 82 | .justifyContent(FlexAlign.Center) | 82 | .justifyContent(FlexAlign.Center) |
| 83 | .width('100lpx') | 83 | .width('100lpx') |
| 84 | .backgroundColor($r("app.color.color_F5F5F5")) | 84 | .backgroundColor($r("app.color.color_F5F5F5")) |
| 85 | + .borderRadius("6lpx") | ||
| 85 | .height('46lpx') | 86 | .height('46lpx') |
| 86 | .onClick(()=>{ | 87 | .onClick(()=>{ |
| 87 | this.followOperation() | 88 | this.followOperation() |
| @@ -198,6 +199,7 @@ export struct FollowChildComponent{ | @@ -198,6 +199,7 @@ export struct FollowChildComponent{ | ||
| 198 | } | 199 | } |
| 199 | .backgroundColor($r("app.color.color_F5F5F5")) | 200 | .backgroundColor($r("app.color.color_F5F5F5")) |
| 200 | .justifyContent(FlexAlign.Center) | 201 | .justifyContent(FlexAlign.Center) |
| 202 | + .borderRadius("6lpx") | ||
| 201 | .width('100lpx') | 203 | .width('100lpx') |
| 202 | .height('46lpx') | 204 | .height('46lpx') |
| 203 | .onClick(()=>{ | 205 | .onClick(()=>{ |
| @@ -10,7 +10,10 @@ const TAG = "FollowFirstTabsComponent" | @@ -10,7 +10,10 @@ const TAG = "FollowFirstTabsComponent" | ||
| 10 | export struct FollowFirstTabsComponent{ | 10 | export struct FollowFirstTabsComponent{ |
| 11 | @State currentIndex: number = 0 | 11 | @State currentIndex: number = 0 |
| 12 | @Prop changeIndex: number | 12 | @Prop changeIndex: number |
| 13 | - private controller: TabsController = new TabsController() | 13 | + |
| 14 | + private swiperController: SwiperController = new SwiperController() | ||
| 15 | + private listScroller: Scroller = new Scroller() | ||
| 16 | + | ||
| 14 | @State data:FollowListItem[] = [] | 17 | @State data:FollowListItem[] = [] |
| 15 | fontColor: string = '#999999' | 18 | fontColor: string = '#999999' |
| 16 | selectedFontColor: string = '#000000' | 19 | selectedFontColor: string = '#000000' |
| @@ -20,7 +23,7 @@ export struct FollowFirstTabsComponent{ | @@ -20,7 +23,7 @@ export struct FollowFirstTabsComponent{ | ||
| 20 | this.getFollowTabList() | 23 | this.getFollowTabList() |
| 21 | 24 | ||
| 22 | EmitterUtils.receiveEvent(EmitterEventId.MY_FOLLOW_EMPTY, (() => { | 25 | EmitterUtils.receiveEvent(EmitterEventId.MY_FOLLOW_EMPTY, (() => { |
| 23 | - if(this.controller != null && this.data.length>1 ){ | 26 | + if(this.swiperController != null && this.data.length>1 ){ |
| 24 | this.jumpFollowNextPage() | 27 | this.jumpFollowNextPage() |
| 25 | } | 28 | } |
| 26 | })) | 29 | })) |
| @@ -33,7 +36,7 @@ export struct FollowFirstTabsComponent{ | @@ -33,7 +36,7 @@ export struct FollowFirstTabsComponent{ | ||
| 33 | this.data.push(element) | 36 | this.data.push(element) |
| 34 | }) | 37 | }) |
| 35 | 38 | ||
| 36 | - if(this.controller != null && this.data.length>1 && this.changeIndex === 1){ | 39 | + if(this.swiperController != null && this.data.length>1 && this.changeIndex === 1){ |
| 37 | this.jumpFollowNextPage() | 40 | this.jumpFollowNextPage() |
| 38 | } | 41 | } |
| 39 | }).catch((err:Error)=>{ | 42 | }).catch((err:Error)=>{ |
| @@ -45,7 +48,7 @@ export struct FollowFirstTabsComponent{ | @@ -45,7 +48,7 @@ export struct FollowFirstTabsComponent{ | ||
| 45 | //个人主页 跳转 关注页 tab 2 | 48 | //个人主页 跳转 关注页 tab 2 |
| 46 | let intervalID = setInterval(() => { | 49 | let intervalID = setInterval(() => { |
| 47 | this.currentIndex = 1 | 50 | this.currentIndex = 1 |
| 48 | - this.controller.changeIndex(this.currentIndex) | 51 | + this.swiperController.changeIndex(this.currentIndex) |
| 49 | clearInterval(intervalID); | 52 | clearInterval(intervalID); |
| 50 | }, 500); | 53 | }, 500); |
| 51 | } | 54 | } |
| @@ -70,7 +73,8 @@ export struct FollowFirstTabsComponent{ | @@ -70,7 +73,8 @@ export struct FollowFirstTabsComponent{ | ||
| 70 | } | 73 | } |
| 71 | }.onClick(()=>{ | 74 | }.onClick(()=>{ |
| 72 | this.currentIndex = index | 75 | this.currentIndex = index |
| 73 | - this.controller.changeIndex(this.currentIndex) | 76 | + this.swiperController.changeIndex(this.currentIndex) |
| 77 | + this.listScroller.scrollToIndex(index, true, ScrollAlign.CENTER) | ||
| 74 | trackTabFirstClick(item.directoryName) | 78 | trackTabFirstClick(item.directoryName) |
| 75 | }) | 79 | }) |
| 76 | .height('100%') | 80 | .height('100%') |
| @@ -90,28 +94,38 @@ export struct FollowFirstTabsComponent{ | @@ -90,28 +94,38 @@ export struct FollowFirstTabsComponent{ | ||
| 90 | .layoutWeight(1) | 94 | .layoutWeight(1) |
| 91 | .width('100%') | 95 | .width('100%') |
| 92 | }else{ | 96 | }else{ |
| 93 | - Tabs({ barPosition: BarPosition.Start, controller: this.controller }) { | ||
| 94 | - ForEach(this.data, (item: FollowListItem, index: number ) => { | ||
| 95 | - TabContent(){ | 97 | + Column(){ |
| 98 | + List({ scroller: this.listScroller }){ | ||
| 99 | + ForEach(this.data, (item: FollowListItem, index: number ) => { | ||
| 100 | + ListItem(){ | ||
| 101 | + this.TabBuilder(index,item) | ||
| 102 | + } | ||
| 103 | + }, (item: FollowListItem, index: number) => index.toString()) | ||
| 104 | + }.listDirection(Axis.Horizontal) | ||
| 105 | + .backgroundColor($r('app.color.white')) | ||
| 106 | + .width("100%") | ||
| 107 | + .height("84lpx") | ||
| 108 | + .edgeEffect(EdgeEffect.None) | ||
| 109 | + .scrollBar(BarState.Off) | ||
| 110 | + | ||
| 111 | + Swiper(this.swiperController){ | ||
| 112 | + ForEach(this.data, (item: FollowListItem, index: number ) => { | ||
| 96 | FollowSecondTabsComponent({data:$data,firstIndex:index}) | 113 | FollowSecondTabsComponent({data:$data,firstIndex:index}) |
| 97 | - }.tabBar(this.TabBuilder(index,item)) | ||
| 98 | - .backgroundColor($r('app.color.white')) | ||
| 99 | - .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM]) | ||
| 100 | - }, (item: FollowListItem, index: number) => index.toString()) | ||
| 101 | - } | ||
| 102 | - .vertical(false) | ||
| 103 | - .barMode(BarMode.Scrollable) | ||
| 104 | - .barWidth('100%') | ||
| 105 | - .barBackgroundColor($r('app.color.white')) | ||
| 106 | - .barHeight('84lpx') | ||
| 107 | - .animationDuration(0) | ||
| 108 | - .onChange((index: number) => { | ||
| 109 | - this.currentIndex = index | ||
| 110 | - trackTabFirstClick(this.data[index].directoryName) | ||
| 111 | - }) | ||
| 112 | - .width('100%') | ||
| 113 | - .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM]) | ||
| 114 | - .layoutWeight(1) | 114 | + .backgroundColor($r('app.color.white')) |
| 115 | + }, (item: FollowListItem, index: number) => index.toString()) | ||
| 116 | + } | ||
| 117 | + .onChange((index: number) => { | ||
| 118 | + this.currentIndex = index | ||
| 119 | + trackTabFirstClick(this.data[index].directoryName) | ||
| 120 | + this.listScroller.scrollToIndex(index, true, ScrollAlign.CENTER) | ||
| 121 | + }) | ||
| 122 | + .width('100%') | ||
| 123 | + .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM]) | ||
| 124 | + .layoutWeight(1) | ||
| 125 | + .loop(false) | ||
| 126 | + .indicator(false) | ||
| 127 | + .effectMode(EdgeEffect.None) | ||
| 128 | + }.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM]) | ||
| 115 | } | 129 | } |
| 116 | }.width('100%') | 130 | }.width('100%') |
| 117 | .height("100%") | 131 | .height("100%") |
| @@ -98,6 +98,7 @@ export struct FollowListDetailUI { | @@ -98,6 +98,7 @@ export struct FollowListDetailUI { | ||
| 98 | ListItem() { | 98 | ListItem() { |
| 99 | ListHasNoMoreDataUI() | 99 | ListHasNoMoreDataUI() |
| 100 | } | 100 | } |
| 101 | + .margin({bottom:"40lpx"}) | ||
| 101 | } | 102 | } |
| 102 | } | 103 | } |
| 103 | .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM]) | 104 | .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM]) |
sight_harmony/features/wdComponent/src/main/ets/components/mine/follow/FollowSecondTabsComponent.ets
| @@ -7,7 +7,7 @@ export struct FollowSecondTabsComponent{ | @@ -7,7 +7,7 @@ export struct FollowSecondTabsComponent{ | ||
| 7 | @Link data:FollowListItem[] | 7 | @Link data:FollowListItem[] |
| 8 | @State firstIndex:number = 0 | 8 | @State firstIndex:number = 0 |
| 9 | @State currentIndex: number = 0 | 9 | @State currentIndex: number = 0 |
| 10 | - private controller: TabsController = new TabsController() | 10 | + private swiperController: SwiperController = new SwiperController() |
| 11 | fontColor: string = '#000000' | 11 | fontColor: string = '#000000' |
| 12 | selectedFontColor: string = '#ED2800' | 12 | selectedFontColor: string = '#ED2800' |
| 13 | 13 | ||
| @@ -77,20 +77,16 @@ export struct FollowSecondTabsComponent{ | @@ -77,20 +77,16 @@ export struct FollowSecondTabsComponent{ | ||
| 77 | .alignItems(VerticalAlign.Top) | 77 | .alignItems(VerticalAlign.Top) |
| 78 | .height('100%') | 78 | .height('100%') |
| 79 | 79 | ||
| 80 | - Tabs({ barPosition: BarPosition.Start, controller: this.controller }) { | 80 | + Swiper(this.swiperController ) { |
| 81 | ForEach(this.data[this.firstIndex].children, (item: FollowSecondListItem, index: number ) => { | 81 | ForEach(this.data[this.firstIndex].children, (item: FollowSecondListItem, index: number ) => { |
| 82 | - TabContent(){ | ||
| 83 | - FollowThirdTabsComponent({data:$data,firstIndex:$firstIndex,secondIndex:index}) | ||
| 84 | - }.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM]) | 82 | + FollowThirdTabsComponent({data:$data,firstIndex:$firstIndex,secondIndex:index}) |
| 85 | }, (item: FollowListItem, index: number) => index.toString()) | 83 | }, (item: FollowListItem, index: number) => index.toString()) |
| 86 | } | 84 | } |
| 85 | + .loop(false) | ||
| 87 | .vertical(true) | 86 | .vertical(true) |
| 88 | - .barMode(BarMode.Scrollable) | ||
| 89 | - .animationDuration(0) | ||
| 90 | - .onChange((index: number) => { | ||
| 91 | - this.currentIndex = index | ||
| 92 | - }) | ||
| 93 | - .barWidth(0) | 87 | + .indicator(false) |
| 88 | + .disableSwipe(true) | ||
| 89 | + .effectMode(EdgeEffect.None) | ||
| 94 | .height('100%') | 90 | .height('100%') |
| 95 | .layoutWeight(1) | 91 | .layoutWeight(1) |
| 96 | .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM]) | 92 | .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM]) |
| @@ -110,7 +106,7 @@ export struct FollowSecondTabsComponent{ | @@ -110,7 +106,7 @@ export struct FollowSecondTabsComponent{ | ||
| 110 | } | 106 | } |
| 111 | .onClick(()=>{ | 107 | .onClick(()=>{ |
| 112 | this.currentIndex = index | 108 | this.currentIndex = index |
| 113 | - this.controller.changeIndex(this.currentIndex) | 109 | + this.swiperController.changeIndex(this.currentIndex) |
| 114 | }) | 110 | }) |
| 115 | .justifyContent(FlexAlign.Center) | 111 | .justifyContent(FlexAlign.Center) |
| 116 | .height('84lpx') | 112 | .height('84lpx') |
| @@ -10,8 +10,8 @@ export struct FollowThirdTabsComponent{ | @@ -10,8 +10,8 @@ export struct FollowThirdTabsComponent{ | ||
| 10 | @Link firstIndex: number | 10 | @Link firstIndex: number |
| 11 | @State secondIndex:number = -1 | 11 | @State secondIndex:number = -1 |
| 12 | 12 | ||
| 13 | - | ||
| 14 | - private controller: TabsController = new TabsController() | 13 | + private swiperController: SwiperController = new SwiperController() |
| 14 | + private listScroller: Scroller = new Scroller() | ||
| 15 | fontColor: string = '#666666' | 15 | fontColor: string = '#666666' |
| 16 | selectedFontColor: string = '#222222' | 16 | selectedFontColor: string = '#222222' |
| 17 | 17 | ||
| @@ -50,7 +50,8 @@ export struct FollowThirdTabsComponent{ | @@ -50,7 +50,8 @@ export struct FollowThirdTabsComponent{ | ||
| 50 | } | 50 | } |
| 51 | .onClick(()=>{ | 51 | .onClick(()=>{ |
| 52 | this.currentIndex = index | 52 | this.currentIndex = index |
| 53 | - this.controller.changeIndex(this.currentIndex) | 53 | + this.swiperController.changeIndex(this.currentIndex) |
| 54 | + this.listScroller.scrollToIndex(index, true, ScrollAlign.CENTER) | ||
| 54 | }) | 55 | }) |
| 55 | .offset({x:index === 0?"0lpx":"-5lpx"}) | 56 | .offset({x:index === 0?"0lpx":"-5lpx"}) |
| 56 | .height('80lpx') | 57 | .height('80lpx') |
| @@ -62,31 +63,47 @@ export struct FollowThirdTabsComponent{ | @@ -62,31 +63,47 @@ export struct FollowThirdTabsComponent{ | ||
| 62 | @Builder FollowThirdUI(){ | 63 | @Builder FollowThirdUI(){ |
| 63 | 64 | ||
| 64 | Column(){ | 65 | Column(){ |
| 65 | - Column() { | ||
| 66 | - // 页签 | ||
| 67 | - Row() { | ||
| 68 | - Scroll() { | ||
| 69 | - Row() { | ||
| 70 | - ForEach(this.data[this.firstIndex].children[this.secondIndex].children, (item: FollowThirdListItem, index: number ) => { | ||
| 71 | - this.TabBuilder(index,item) | ||
| 72 | - }) | ||
| 73 | - } | ||
| 74 | - .justifyContent(FlexAlign.Start) | 66 | + |
| 67 | + List({ scroller: this.listScroller }){ | ||
| 68 | + ForEach(this.data[this.firstIndex].children[this.secondIndex].children, (item: FollowThirdListItem, index: number ) => { | ||
| 69 | + ListItem(){ | ||
| 70 | + this.TabBuilder(index,item) | ||
| 75 | } | 71 | } |
| 76 | - .align(Alignment.Start) | ||
| 77 | - .scrollable(ScrollDirection.Horizontal) | ||
| 78 | - .scrollBar(BarState.Off) | ||
| 79 | - .width('100%') | ||
| 80 | - .padding({left:'31lpx',right:'48lpx'}) | ||
| 81 | - } | ||
| 82 | - .alignItems(VerticalAlign.Bottom) | ||
| 83 | - .width('100%') | 72 | + }) |
| 84 | } | 73 | } |
| 85 | .backgroundColor($r('app.color.white')) | 74 | .backgroundColor($r('app.color.white')) |
| 86 | - .alignItems(HorizontalAlign.Start) | 75 | + .edgeEffect(EdgeEffect.None) |
| 76 | + .scrollBar(BarState.Off) | ||
| 77 | + .listDirection(Axis.Horizontal) | ||
| 87 | .width('100%') | 78 | .width('100%') |
| 79 | + .height("84lpx") | ||
| 80 | + .padding({left:'31lpx',right:'48lpx'}) | ||
| 81 | + | ||
| 82 | + // Column() { | ||
| 83 | + // // 页签 | ||
| 84 | + // Row() { | ||
| 85 | + // Scroll() { | ||
| 86 | + // Row() { | ||
| 87 | + // ForEach(this.data[this.firstIndex].children[this.secondIndex].children, (item: FollowThirdListItem, index: number ) => { | ||
| 88 | + // this.TabBuilder(index,item) | ||
| 89 | + // }) | ||
| 90 | + // } | ||
| 91 | + // .justifyContent(FlexAlign.Start) | ||
| 92 | + // } | ||
| 93 | + // .align(Alignment.Start) | ||
| 94 | + // .scrollable(ScrollDirection.Horizontal) | ||
| 95 | + // .scrollBar(BarState.Off) | ||
| 96 | + // .width('100%') | ||
| 97 | + // .padding({left:'31lpx',right:'48lpx'}) | ||
| 98 | + // } | ||
| 99 | + // .alignItems(VerticalAlign.Bottom) | ||
| 100 | + // .width('100%') | ||
| 101 | + // } | ||
| 102 | + // .backgroundColor($r('app.color.white')) | ||
| 103 | + // .alignItems(HorizontalAlign.Start) | ||
| 104 | + // .width('100%') | ||
| 88 | 105 | ||
| 89 | - Tabs({ barPosition: BarPosition.Start, controller: this.controller }) { | 106 | + Swiper(this.swiperController ) { |
| 90 | ForEach(this.data[this.firstIndex].children[this.secondIndex].children, (item: FollowThirdListItem, index: number ) => { | 107 | ForEach(this.data[this.firstIndex].children[this.secondIndex].children, (item: FollowThirdListItem, index: number ) => { |
| 91 | TabContent(){ | 108 | TabContent(){ |
| 92 | Column(){ | 109 | Column(){ |
| @@ -96,12 +113,12 @@ export struct FollowThirdTabsComponent{ | @@ -96,12 +113,12 @@ export struct FollowThirdTabsComponent{ | ||
| 96 | .backgroundColor($r('app.color.white')) | 113 | .backgroundColor($r('app.color.white')) |
| 97 | }, (item: FollowListItem, index: number) => index.toString()) | 114 | }, (item: FollowListItem, index: number) => index.toString()) |
| 98 | } | 115 | } |
| 99 | - .barHeight(0) | ||
| 100 | - .vertical(false) | ||
| 101 | - .barMode(BarMode.Scrollable) | ||
| 102 | - .animationDuration(0) | 116 | + .loop(false) |
| 117 | + .indicator(false) | ||
| 118 | + .disableSwipe(true) | ||
| 119 | + .effectMode(EdgeEffect.None) | ||
| 103 | .onChange((index: number) => { | 120 | .onChange((index: number) => { |
| 104 | - this.currentIndex = index | 121 | + // this.currentIndex = index |
| 105 | }) | 122 | }) |
| 106 | .width('100%') | 123 | .width('100%') |
| 107 | .layoutWeight(1) | 124 | .layoutWeight(1) |
| @@ -5,7 +5,7 @@ import MinePageDatasModel from '../../model/MinePageDatasModel' | @@ -5,7 +5,7 @@ import MinePageDatasModel from '../../model/MinePageDatasModel' | ||
| 5 | import MinePageUserSimpleInfoUI from '../mine/MinePageUserSimpleInfoUI' | 5 | import MinePageUserSimpleInfoUI from '../mine/MinePageUserSimpleInfoUI' |
| 6 | import MinePagePersonFunctionUI from '../mine/MinePagePersonFunctionUI' | 6 | import MinePagePersonFunctionUI from '../mine/MinePagePersonFunctionUI' |
| 7 | import MinePageMoreFunctionUI from '../mine/MinePageMoreFunctionUI' | 7 | import MinePageMoreFunctionUI from '../mine/MinePageMoreFunctionUI' |
| 8 | -import { DateTimeUtils, SPHelper, StringUtils } from 'wdKit' | 8 | +import { BreakpointSystem, DateTimeUtils, SPHelper, StringUtils } from 'wdKit' |
| 9 | import { SpConstants } from 'wdConstant' | 9 | import { SpConstants } from 'wdConstant' |
| 10 | import dataPreferences from '@ohos.data.preferences'; | 10 | import dataPreferences from '@ohos.data.preferences'; |
| 11 | import { MergeRecordDialog } from '../../dialog/MergeRecordDialog' | 11 | import { MergeRecordDialog } from '../../dialog/MergeRecordDialog' |
| @@ -59,6 +59,20 @@ export struct MinePageComponent { | @@ -59,6 +59,20 @@ export struct MinePageComponent { | ||
| 59 | pageHideTime:number = 0; | 59 | pageHideTime:number = 0; |
| 60 | pageFirstCreateTime:number = 0; | 60 | pageFirstCreateTime:number = 0; |
| 61 | @Prop isMinePage:boolean = false; | 61 | @Prop isMinePage:boolean = false; |
| 62 | + @StorageProp('currentBreakpoint') @Watch("currentChanged")currentBreakpoint: string = 'sm'; | ||
| 63 | + private breakpointSystem = new BreakpointSystem(); | ||
| 64 | + @State percent:number = 1 | ||
| 65 | + | ||
| 66 | + currentChanged(){ | ||
| 67 | + if(this.currentBreakpoint == "md" || this.currentBreakpoint == "lg"){ | ||
| 68 | + //大屏幕 折叠屏 或者ipad | ||
| 69 | + this.percent = 0.7 | ||
| 70 | + }else { | ||
| 71 | + this.percent = 1 | ||
| 72 | + } | ||
| 73 | + console.log(TAG,"currentBreakpoint==>"+this.percent) | ||
| 74 | + } | ||
| 75 | + | ||
| 62 | 76 | ||
| 63 | //第一次还没创建时候 pageShow 接收不到监听 | 77 | //第一次还没创建时候 pageShow 接收不到监听 |
| 64 | async pageShowForUpdateData() { | 78 | async pageShowForUpdateData() { |
| @@ -85,11 +99,14 @@ export struct MinePageComponent { | @@ -85,11 +99,14 @@ export struct MinePageComponent { | ||
| 85 | } | 99 | } |
| 86 | 100 | ||
| 87 | aboutToAppear(){ | 101 | aboutToAppear(){ |
| 102 | + this.breakpointSystem.register(); | ||
| 88 | this.pageFirstCreateTime = DateTimeUtils.getTimeStamp() | 103 | this.pageFirstCreateTime = DateTimeUtils.getTimeStamp() |
| 89 | 104 | ||
| 90 | this.getFunctionData() | 105 | this.getFunctionData() |
| 91 | this.getUserLogin() | 106 | this.getUserLogin() |
| 92 | this.addLoginStatusObserver() | 107 | this.addLoginStatusObserver() |
| 108 | + console.log(TAG,"currentBreakpoint==>"+this.currentBreakpoint) | ||
| 109 | + this.currentChanged() | ||
| 93 | } | 110 | } |
| 94 | 111 | ||
| 95 | getMessageData(){ | 112 | getMessageData(){ |
| @@ -119,6 +136,7 @@ export struct MinePageComponent { | @@ -119,6 +136,7 @@ export struct MinePageComponent { | ||
| 119 | } | 136 | } |
| 120 | 137 | ||
| 121 | aboutToDisappear(): void { | 138 | aboutToDisappear(): void { |
| 139 | + this.breakpointSystem.unregister(); | ||
| 122 | if(this.preferences){ | 140 | if(this.preferences){ |
| 123 | this.preferences.off('change', this.observer); | 141 | this.preferences.off('change', this.observer); |
| 124 | } | 142 | } |
| @@ -139,7 +157,7 @@ export struct MinePageComponent { | @@ -139,7 +157,7 @@ export struct MinePageComponent { | ||
| 139 | Stack(){ | 157 | Stack(){ |
| 140 | Image($r('app.media.mine_head_bg')) | 158 | Image($r('app.media.mine_head_bg')) |
| 141 | .width('100%') | 159 | .width('100%') |
| 142 | - .height('657lpx') | 160 | + .height(`${657 * this.percent}lpx`) |
| 143 | .objectFit(ImageFit.Auto) | 161 | .objectFit(ImageFit.Auto) |
| 144 | this.MinePageUI() | 162 | this.MinePageUI() |
| 145 | } | 163 | } |
| @@ -155,16 +173,16 @@ export struct MinePageComponent { | @@ -155,16 +173,16 @@ export struct MinePageComponent { | ||
| 155 | @Builder MinePageUI(){ | 173 | @Builder MinePageUI(){ |
| 156 | Column(){ | 174 | Column(){ |
| 157 | //头像层 | 175 | //头像层 |
| 158 | - MinePageUserSimpleInfoUI({isLogin:this.isLogin}) | 176 | + MinePageUserSimpleInfoUI({isLogin:this.isLogin,percent:$percent}) |
| 159 | //Grid 区域 | 177 | //Grid 区域 |
| 160 | - MinePagePersonFunctionUI({personalData:$personalData,isLogin:this.isLogin}) | 178 | + MinePagePersonFunctionUI({personalData:$personalData,isLogin:this.isLogin,percent:$percent}) |
| 161 | //Card | 179 | //Card |
| 162 | //MinePageCardUI() | 180 | //MinePageCardUI() |
| 163 | //创作者区域 | 181 | //创作者区域 |
| 164 | 182 | ||
| 165 | //MinePageCreatorFunctionUI({creatorData:$creatorData}) | 183 | //MinePageCreatorFunctionUI({creatorData:$creatorData}) |
| 166 | //更多功能 | 184 | //更多功能 |
| 167 | - MinePageMoreFunctionUI({moreData:$moreData}) | 185 | + MinePageMoreFunctionUI({moreData:$moreData,percent:$percent}) |
| 168 | }.width('100%') | 186 | }.width('100%') |
| 169 | .height('100%') | 187 | .height('100%') |
| 170 | .justifyContent(FlexAlign.Start) | 188 | .justifyContent(FlexAlign.Start) |
sight_harmony/features/wdComponent/src/main/ets/components/page/TopNavigationComponent.ets
deleted
100644 → 0
| 1 | -import { BottomNavDTO, CompDTO, TopNavDTO } from 'wdBean'; | ||
| 2 | -import { SpConstants } from 'wdConstant'; | ||
| 3 | -import { DisplayUtils, LazyDataSource, Logger, NetworkUtil, SPHelper, ToastUtils } from 'wdKit'; | ||
| 4 | -import { ProcessUtils, WDRouterPage, WDRouterRule } from 'wdRouter'; | ||
| 5 | -import { PageComponent } from './PageComponent'; | ||
| 6 | -import { ChannelSubscriptionLayout } from './ChannelSubscriptionLayout'; | ||
| 7 | -import { FirstTabTopSearchComponent } from '../search/FirstTabTopSearchComponent'; | ||
| 8 | -import { AssignChannelParam } from 'wdRouter/src/main/ets/utils/HomeChannelUtils'; | ||
| 9 | -import { PeopleShipMainComponent } from '../peopleShip/PeopleShipMainComponent'; | ||
| 10 | -import { channelSkeleton } from '../skeleton/channelSkeleton'; | ||
| 11 | -import { TrackingButton, TrackConstants } from 'wdTracking/Index'; | ||
| 12 | - | ||
| 13 | -const TAG = 'TopNavigationComponent'; | ||
| 14 | - | ||
| 15 | -PersistentStorage.persistProp('channelIds', ''); | ||
| 16 | -PersistentStorage.persistProp('indexSettingChannelId', 2002); | ||
| 17 | - | ||
| 18 | -const storage = LocalStorage.getShared(); | ||
| 19 | - | ||
| 20 | -/** | ||
| 21 | - * 顶部页签导航栏/顶导 | ||
| 22 | - */ | ||
| 23 | -@Entry(storage) | ||
| 24 | -@Component | ||
| 25 | -export struct TopNavigationComponent { | ||
| 26 | - private groupId: number = 0 | ||
| 27 | - private currentBottomNavName: string = '' | ||
| 28 | - private tabsController: TabsController = new TabsController() | ||
| 29 | - @Consume isLayoutFullScreen: boolean | ||
| 30 | - @Consume bottomRectHeight: number | ||
| 31 | - @Consume topRectHeight: number | ||
| 32 | - @Consume currentBottomNavInfo: BottomNavDTO // 当前底导信息 | ||
| 33 | - @Consume barBackgroundColor: Color | ||
| 34 | - @State bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') || 0 | ||
| 35 | - @State topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0 | ||
| 36 | - @Link _currentNavIndex?: number; | ||
| 37 | - // 顶导当前选中/焦点下标 | ||
| 38 | - @State currentTopNavSelectedIndex: number = 0; | ||
| 39 | - /** | ||
| 40 | - * @deprecated TODO,没地方用到,是否弃用 | ||
| 41 | - */ | ||
| 42 | - @State currentTopNavName: string = ''; | ||
| 43 | - @State currentTopNavItem: TopNavDTO = {} as TopNavDTO | ||
| 44 | - // 顶导数据 | ||
| 45 | - @State @Watch('onTopNavigationDataUpdated') topNavList: TopNavDTO[] = [] | ||
| 46 | - @State compList: LazyDataSource<CompDTO> = new LazyDataSource(); | ||
| 47 | - @StorageProp('indexSettingChannelId') indexSettingChannelId: number = 2002 | ||
| 48 | - //我的频道id列表 | ||
| 49 | - @State channelIds: number[] = [] | ||
| 50 | - //本地缓存频道id列表 | ||
| 51 | - @StorageProp('channelIds') storageChannelIds: string = '' | ||
| 52 | - @State homeChannelList: TopNavDTO[] = [] | ||
| 53 | - // 我的频道列表 | ||
| 54 | - @State myChannelList: TopNavDTO[] = [] | ||
| 55 | - // 更多频道列表 | ||
| 56 | - @State moreChannelList: TopNavDTO[] = [] | ||
| 57 | - // 地方频道列表 | ||
| 58 | - @State localChannelList: TopNavDTO[] = [] | ||
| 59 | - readonly MAX_LINE: number = 1; | ||
| 60 | - @ObjectLink @Watch('onAssignChannelChange') assignChannel: AssignChannelParam | ||
| 61 | - // 底导传递过来的自动刷新通知 | ||
| 62 | - @Prop @Watch('onAutoRefresh') autoRefresh: number = 0 | ||
| 63 | - // 传递给page的自动刷新通知 | ||
| 64 | - @State autoRefresh2Page: number = 0 | ||
| 65 | - // 当前底导index | ||
| 66 | - @State navIndex: number = 0 | ||
| 67 | - @State animationDuration: number = 0 | ||
| 68 | - @State indicatorLeftMargin: number = 0 | ||
| 69 | - @State indicatorWidth: number = 0 | ||
| 70 | - private tabsWidth: number = 0 | ||
| 71 | - // 标识,是否为点击触发的tab切换,临时变量 | ||
| 72 | - private changeByClick: boolean = false | ||
| 73 | - | ||
| 74 | - //处理新闻tab顶导频道数据 | ||
| 75 | - topNavListHandle() { | ||
| 76 | - let cityName = SPHelper.default.getSync(SpConstants.LOCATION_CITY_NAME, '') as string | ||
| 77 | - | ||
| 78 | - let _channelIds: number [] = [] | ||
| 79 | - let _myChannelList: TopNavDTO [] = [] | ||
| 80 | - let _storageChannelIds: string [] = [] //list1 | ||
| 81 | - let defaultMyChannelList: TopNavDTO[] = [] | ||
| 82 | - let defaultList = [...this.topNavList] | ||
| 83 | - defaultList.sort((a, b) => { | ||
| 84 | - return a.num - b.num; | ||
| 85 | - }); | ||
| 86 | - | ||
| 87 | - //defaultMyChannelList | ||
| 88 | - defaultList.forEach(item => { | ||
| 89 | - if (item.defaultPermitted === 1 || item.movePermitted === 0 || item.delPermitted === 0 || | ||
| 90 | - item.headlinesOn === 1) { | ||
| 91 | - defaultMyChannelList.push(item); | ||
| 92 | - } | ||
| 93 | - if (item.defaultPermitted === 1) { | ||
| 94 | - this.homeChannelList.push(item) | ||
| 95 | - } | ||
| 96 | - }) | ||
| 97 | - | ||
| 98 | - //有缓存频道id | ||
| 99 | - if (this.storageChannelIds) { | ||
| 100 | - _storageChannelIds = this.storageChannelIds.split(',') | ||
| 101 | - } | ||
| 102 | - | ||
| 103 | - defaultMyChannelList.forEach(item => { | ||
| 104 | - item.myChannel = '1' | ||
| 105 | - if (item.defaultPermitted === 1) { | ||
| 106 | - item.homeChannel = '1' | ||
| 107 | - } | ||
| 108 | - let index = defaultList.findIndex(_item => _item.channelId === item.channelId) | ||
| 109 | - if (index !== -1) { | ||
| 110 | - defaultList.splice(index, 1) | ||
| 111 | - } | ||
| 112 | - }) | ||
| 113 | - defaultList.unshift(...defaultMyChannelList) | ||
| 114 | - | ||
| 115 | - defaultList.forEach((item, index) => { | ||
| 116 | - if (this.storageChannelIds && _storageChannelIds.includes(String(item.channelId))) { | ||
| 117 | - item.myChannel = '1' | ||
| 118 | - } | ||
| 119 | - if (item.channelType === 2) { | ||
| 120 | - if (cityName.includes(item.name)) { | ||
| 121 | - item.myChannel = '1' | ||
| 122 | - } | ||
| 123 | - item.localChannel = '1' | ||
| 124 | - } | ||
| 125 | - if (index >= 11) { | ||
| 126 | - if (item.channelType === 1) { | ||
| 127 | - item.moreChannel = '1' | ||
| 128 | - } | ||
| 129 | - } else { | ||
| 130 | - if (item.channelType === 1 && item.myChannel !== '1') { | ||
| 131 | - item.moreChannel = '1' | ||
| 132 | - } | ||
| 133 | - } | ||
| 134 | - | ||
| 135 | - //频道分类 | ||
| 136 | - if (item.name !== '播报') { //暂时隐藏播报 | ||
| 137 | - if (item.myChannel === '1') { | ||
| 138 | - _myChannelList.push(item) | ||
| 139 | - _channelIds.push(item.channelId) | ||
| 140 | - } else if (item.moreChannel === '1') { | ||
| 141 | - this.moreChannelList.push(item) | ||
| 142 | - } else if (item.localChannel === '1' && item.myChannel !== '1') { | ||
| 143 | - this.localChannelList.push(item) | ||
| 144 | - } | ||
| 145 | - } | ||
| 146 | - | ||
| 147 | - }) | ||
| 148 | - | ||
| 149 | - if (cityName) { | ||
| 150 | - let index = _myChannelList.findIndex(ele => cityName.includes(ele.name)) | ||
| 151 | - const localChannelitem = _myChannelList.splice(index, 1)[0]; | ||
| 152 | - // 将当前地区频道插入到第四个 | ||
| 153 | - _myChannelList.splice(3, 0, localChannelitem); | ||
| 154 | - } | ||
| 155 | - | ||
| 156 | - this.channelIds = _channelIds | ||
| 157 | - this.myChannelList = _myChannelList | ||
| 158 | - | ||
| 159 | - // 崩溃 | ||
| 160 | - // this.currentTopNavName = this._currentNavIndex === 0 ? this.myChannelList[0].name : this.topNavList[0].name | ||
| 161 | - if (this._currentNavIndex === 0 && this.myChannelList && this.myChannelList.length > 0 && this.myChannelList[0] && | ||
| 162 | - this.myChannelList[0].name) { | ||
| 163 | - this.currentTopNavName = this.myChannelList[0].name | ||
| 164 | - } else if (this._currentNavIndex != 0 && this.topNavList && this.topNavList.length > 0 && this.topNavList[0].name) { | ||
| 165 | - this.currentTopNavName = this.topNavList[0].name | ||
| 166 | - } | ||
| 167 | - | ||
| 168 | - //缓存首页频道 | ||
| 169 | - let index = this.myChannelList.findIndex(_item => _item?.channelId === this.indexSettingChannelId) | ||
| 170 | - if (index > -1) { | ||
| 171 | - this.currentTopNavSelectedIndex = index | ||
| 172 | - this.currentTopNavName = this.myChannelList[index].name | ||
| 173 | - } | ||
| 174 | - this.currentTopNavItem = this.myChannelList[this.currentTopNavSelectedIndex] | ||
| 175 | - } | ||
| 176 | - | ||
| 177 | - isBroadcast(item?: TopNavDTO) { | ||
| 178 | - // TODO 用id channelId = '2066' | ||
| 179 | - return item?.name === '播报' | ||
| 180 | - } | ||
| 181 | - | ||
| 182 | - isLayout(item?: TopNavDTO) { | ||
| 183 | - // TODO 用id channelId = '2006' | ||
| 184 | - return item?.name === '版面' | ||
| 185 | - } | ||
| 186 | - | ||
| 187 | - isSpecialChannel(item?: TopNavDTO) { | ||
| 188 | - // 版面、播报,可以用这个判断 | ||
| 189 | - return item?.channelType === 3 | ||
| 190 | - } | ||
| 191 | - | ||
| 192 | - | ||
| 193 | - build() { | ||
| 194 | - Column() { | ||
| 195 | - // 顶部搜索、日报logo、早晚报 | ||
| 196 | - Column() { | ||
| 197 | - Row() { | ||
| 198 | - FirstTabTopSearchComponent() | ||
| 199 | - | ||
| 200 | - Image($r('app.media.icon_ren_min_ri_bao')) | ||
| 201 | - .width(72) | ||
| 202 | - .height(29) | ||
| 203 | - .onClick(() => { | ||
| 204 | - ProcessUtils.gotoENewsPaper() | ||
| 205 | - }) | ||
| 206 | - Stack({ alignContent: Alignment.Center }) { | ||
| 207 | - Image($r('app.media.background_read_paper_home')) | ||
| 208 | - .width('100%') | ||
| 209 | - .height('100%') | ||
| 210 | - .objectFit(ImageFit.Contain) | ||
| 211 | - Row() { | ||
| 212 | - Image($r('app.media.icon_read_paper_home')) | ||
| 213 | - .width(18) | ||
| 214 | - .height(18) | ||
| 215 | - Text('早晚报') | ||
| 216 | - .fontColor("#666666") | ||
| 217 | - .fontSize($r('app.float.font_size_13')) | ||
| 218 | - } | ||
| 219 | - .alignItems(VerticalAlign.Center) | ||
| 220 | - .justifyContent(FlexAlign.Center) | ||
| 221 | - } | ||
| 222 | - .height(30) | ||
| 223 | - .width(124) | ||
| 224 | - .onClick(() => { | ||
| 225 | - if (NetworkUtil.isNetConnected()) { | ||
| 226 | - ProcessUtils.gotoMorningEveningPaper() | ||
| 227 | - } else { | ||
| 228 | - ToastUtils.showToast('网络出小差了,请检查网络后重试', 1000) | ||
| 229 | - } | ||
| 230 | - }) | ||
| 231 | - }.width('100%') | ||
| 232 | - .justifyContent(FlexAlign.SpaceBetween) | ||
| 233 | - } | ||
| 234 | - .width('100%') | ||
| 235 | - .height(40) | ||
| 236 | - .padding({ top: 10 }) | ||
| 237 | - .backgroundColor($r('app.color.white')) | ||
| 238 | - .visibility(this._currentNavIndex == 0 ? Visibility.Visible : Visibility.None) | ||
| 239 | - | ||
| 240 | - // 频道分类list | ||
| 241 | - Stack({ alignContent: Alignment.TopEnd }) { | ||
| 242 | - Tabs({ index: this.currentTopNavSelectedIndex, controller: this.tabsController }) { | ||
| 243 | - ForEach(this.currentBottomNavName === '新闻' ? this.myChannelList : this.topNavList, | ||
| 244 | - (navItem: TopNavDTO, index: number) => { | ||
| 245 | - TabContent() { | ||
| 246 | - if (this.currentBottomNavName === '人民号' && navItem.name === '关注') { | ||
| 247 | - PeopleShipMainComponent({ | ||
| 248 | - currentTopNavSelectedIndex: $currentTopNavSelectedIndex, | ||
| 249 | - navIndex: index, | ||
| 250 | - pageId: navItem.pageId + '', | ||
| 251 | - channelId: navItem.channelId + '', | ||
| 252 | - }) | ||
| 253 | - } else | ||
| 254 | - if (!this.isBroadcast(navItem) && !this.isLayout(navItem)) { | ||
| 255 | - PageComponent({ | ||
| 256 | - currentTopNavSelectedIndex: $currentTopNavSelectedIndex, | ||
| 257 | - navIndex: index, | ||
| 258 | - pageId: navItem.pageId + '', | ||
| 259 | - channelId: navItem.channelId + '', | ||
| 260 | - autoRefresh: this.autoRefresh2Page | ||
| 261 | - }) | ||
| 262 | - } else { | ||
| 263 | - channelSkeleton() | ||
| 264 | - } | ||
| 265 | - } | ||
| 266 | - .tabBar(this.tabBarBuilder(navItem, index)) | ||
| 267 | - | ||
| 268 | - }, (navItem: TopNavDTO) => JSON.stringify(navItem)); | ||
| 269 | - } | ||
| 270 | - .barHeight($r('app.float.top_tab_bar_height')) | ||
| 271 | - .height(this._currentNavIndex == 0 ? DisplayUtils.getDeviceHeight() - vp2px(48.3) : | ||
| 272 | - '100%') | ||
| 273 | - .barMode(BarMode.Scrollable) | ||
| 274 | - .vertical(false) | ||
| 275 | - .barBackgroundColor(this.barBackgroundColor) | ||
| 276 | - .onAreaChange((oldValue: Area, newValue: Area) => { | ||
| 277 | - let width = Number.parseFloat(newValue.width.toString()) | ||
| 278 | - this.tabsWidth = Number.isNaN(width) ? 0 : width | ||
| 279 | - }) | ||
| 280 | - .onChange((index: number) => { | ||
| 281 | - this.currentTopNavName = | ||
| 282 | - this._currentNavIndex === 0 ? this.myChannelList[index].name : this.topNavList[index].name | ||
| 283 | - Logger.info(TAG, `onChange index : ${index}`); | ||
| 284 | - if (!this.isBroadcast(this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index]) && | ||
| 285 | - !this.isLayout(this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index]) | ||
| 286 | - ) { | ||
| 287 | - //在 tab 切换之前意图共享 | ||
| 288 | - // this.topNavInsightIntentShare(this.currentTopNavItem) | ||
| 289 | - | ||
| 290 | - this.currentTopNavSelectedIndex = index; | ||
| 291 | - this.currentTopNavItem = this.myChannelList[index] | ||
| 292 | - } | ||
| 293 | - if (this.isBroadcast(this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index])) { | ||
| 294 | - // 跳转到播报页面 | ||
| 295 | - ProcessUtils.gotoBroadcastPage(this.myChannelList[index].pageId) | ||
| 296 | - this.tabsController.changeIndex(this.currentTopNavSelectedIndex) | ||
| 297 | - } | ||
| 298 | - if (this.isLayout(this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index])) { | ||
| 299 | - ProcessUtils.gotoENewsPaper() | ||
| 300 | - if (!this.changeByClick) { | ||
| 301 | - // 识别左滑右滑,跳过版面,到下一个 | ||
| 302 | - let nextIndex = this.currentTopNavSelectedIndex > index ? index - 1 : index + 1 | ||
| 303 | - this.tabsController.changeIndex(nextIndex) | ||
| 304 | - } else { | ||
| 305 | - this.tabsController.changeIndex(this.currentTopNavSelectedIndex) | ||
| 306 | - // 重置标识 | ||
| 307 | - this.changeByClick = false | ||
| 308 | - } | ||
| 309 | - } | ||
| 310 | - }) | ||
| 311 | - // .onAnimationStart((index: number, targetIndex: number, event: TabsAnimationEvent) => { | ||
| 312 | - // if (!this.isBroadcast(this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index]) && | ||
| 313 | - // !this.isLayout(this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index]) | ||
| 314 | - // ) { | ||
| 315 | - // return | ||
| 316 | - // } | ||
| 317 | - // this.currentTopNavSelectedIndex = targetIndex | ||
| 318 | - // // 切换动画开始时触发该回调。下划线跟着页面一起滑动,同时宽度渐变。 | ||
| 319 | - // let targetIndexInfo = this.getTextInfo(targetIndex) | ||
| 320 | - // this.startAnimateTo(this.animationDuration, targetIndexInfo.left, targetIndexInfo.width) | ||
| 321 | - // }) | ||
| 322 | - // .onAnimationEnd((index: number, event: TabsAnimationEvent) => { | ||
| 323 | - // if (!this.isBroadcast(this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index]) && | ||
| 324 | - // !this.isLayout(this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index]) | ||
| 325 | - // ) { | ||
| 326 | - // return | ||
| 327 | - // } | ||
| 328 | - // // 切换动画结束时触发该回调。下划线动画停止。 | ||
| 329 | - // let currentIndicatorInfo = this.getCurrentIndicatorInfo(index, event) | ||
| 330 | - // this.startAnimateTo(0, currentIndicatorInfo.left, currentIndicatorInfo.width) | ||
| 331 | - // }) | ||
| 332 | - // .onGestureSwipe((index: number, event: TabsAnimationEvent) => { | ||
| 333 | - // if (!this.isBroadcast(this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index]) && | ||
| 334 | - // !this.isLayout(this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index]) | ||
| 335 | - // ) { | ||
| 336 | - // return | ||
| 337 | - // } | ||
| 338 | - // // 在页面跟手滑动过程中,逐帧触发该回调。 | ||
| 339 | - // let currentIndicatorInfo = this.getCurrentIndicatorInfo(index, event) | ||
| 340 | - // this.currentTopNavSelectedIndex = currentIndicatorInfo.index | ||
| 341 | - // this.indicatorLeftMargin = currentIndicatorInfo.left | ||
| 342 | - // this.indicatorWidth = currentIndicatorInfo.width | ||
| 343 | - // }) | ||
| 344 | - | ||
| 345 | - // 分类列表最右侧频道设置 | ||
| 346 | - if (this._currentNavIndex === 0) { | ||
| 347 | - ChannelSubscriptionLayout({ | ||
| 348 | - currentTopNavSelectedIndex: $currentTopNavSelectedIndex, | ||
| 349 | - indexSettingChannelId: this.indexSettingChannelId, | ||
| 350 | - homeChannelList: this.homeChannelList, | ||
| 351 | - myChannelList: $myChannelList, | ||
| 352 | - moreChannelList: $moreChannelList, | ||
| 353 | - localChannelList: $localChannelList, | ||
| 354 | - channelIds: $channelIds, | ||
| 355 | - changeTab: (index) => { | ||
| 356 | - this.tabsController.changeIndex(index) | ||
| 357 | - } | ||
| 358 | - }) | ||
| 359 | - } else { | ||
| 360 | - Row() { | ||
| 361 | - Image($r('app.media.icon_search')) | ||
| 362 | - .width('24vp') | ||
| 363 | - .height('24vp') | ||
| 364 | - } | ||
| 365 | - .height('40vp') | ||
| 366 | - .width('40vp') | ||
| 367 | - .margin({ right: 10 }) | ||
| 368 | - .alignItems(VerticalAlign.Center) | ||
| 369 | - .justifyContent(FlexAlign.Center) | ||
| 370 | - .onClick(() => { | ||
| 371 | - WDRouterRule.jumpWithPage(WDRouterPage.searchPage) | ||
| 372 | - }) | ||
| 373 | - } | ||
| 374 | - } | ||
| 375 | - } | ||
| 376 | - } | ||
| 377 | - | ||
| 378 | - @Builder | ||
| 379 | - tabBarBuilder(item: TopNavDTO, index: number) { | ||
| 380 | - Column() { | ||
| 381 | - Text(item?.name) | ||
| 382 | - .fontSize($r('app.float.selected_text_size')) | ||
| 383 | - .fontWeight(this.currentTopNavSelectedIndex === index ? FontWeight.Bold : FontWeight.Normal) | ||
| 384 | - .fontColor(this.currentTopNavSelectedIndex === index ? Color.Black : "#999999") | ||
| 385 | - .padding({ top: $r('app.float.top_tab_item_padding_top'), bottom: $r('app.float.top_tab_item_padding_bottom') }) | ||
| 386 | - .maxLines(this.MAX_LINE) | ||
| 387 | - .id(index.toString()) | ||
| 388 | - .onAreaChange((oldValue: Area, newValue: Area) => { | ||
| 389 | - if (this.currentTopNavSelectedIndex === index && | ||
| 390 | - (this.indicatorLeftMargin === 0 || this.indicatorWidth === 0)) { | ||
| 391 | - if (newValue.position.x != undefined) { | ||
| 392 | - let positionX = Number.parseFloat(newValue.position.x.toString()) | ||
| 393 | - this.indicatorLeftMargin = Number.isNaN(positionX) ? 0 : positionX | ||
| 394 | - } | ||
| 395 | - let width = Number.parseFloat(newValue.width.toString()) | ||
| 396 | - this.indicatorWidth = Number.isNaN(width) ? 0 : width | ||
| 397 | - } | ||
| 398 | - }) | ||
| 399 | - // .backgroundImage(this.currentTopNavSelectedIndex === index ? item.iconCUrl : item.iconUrl) | ||
| 400 | - if (this.currentTopNavSelectedIndex === index) { | ||
| 401 | - Row() | ||
| 402 | - .width(20) | ||
| 403 | - .height(3) | ||
| 404 | - .backgroundImage($r('app.media.icon_channel_active'), ImageRepeat.NoRepeat) | ||
| 405 | - .backgroundImageSize(ImageSize.Contain) | ||
| 406 | - } | ||
| 407 | - } | ||
| 408 | - .hoverEffect(HoverEffect.Highlight) | ||
| 409 | - .constraintSize({ | ||
| 410 | - minWidth: $r('app.float.top_tab_item_min_width'), | ||
| 411 | - maxWidth: $r('app.float.top_tab_item_max_width') | ||
| 412 | - }) | ||
| 413 | - // .backgroundColor(Color.Transparent) | ||
| 414 | - .padding({ | ||
| 415 | - left: $r('app.float.top_tab_item_padding_horizontal'), | ||
| 416 | - right: $r('app.float.top_tab_item_padding_horizontal'), | ||
| 417 | - }) | ||
| 418 | - .id(`col_tabBar${index}`) | ||
| 419 | - .margin({ right: this.myChannelList.length === index + 1 ? 36 : 0 }) | ||
| 420 | - .onClick(() => { | ||
| 421 | - Logger.debug(TAG, `onClick, index: ${index}`); | ||
| 422 | - if (this.currentTopNavSelectedIndex === index) { | ||
| 423 | - // 当前tab,单击事件 | ||
| 424 | - this.doAutoRefresh() | ||
| 425 | - } else { | ||
| 426 | - this.changeByClick = true | ||
| 427 | - this.tabsController.changeIndex(index) | ||
| 428 | - } | ||
| 429 | - | ||
| 430 | - }) | ||
| 431 | - } | ||
| 432 | - | ||
| 433 | - | ||
| 434 | - aboutToAppear() { | ||
| 435 | - //处理新闻tab顶导频道数据 | ||
| 436 | - this.topNavListHandle() | ||
| 437 | - } | ||
| 438 | - | ||
| 439 | - aboutToDisappear() { | ||
| 440 | - AppStorage.set('channelIds', this.channelIds.join(',')) | ||
| 441 | - } | ||
| 442 | - | ||
| 443 | - onTopNavigationDataUpdated() { | ||
| 444 | - Logger.info(TAG, | ||
| 445 | - `onTopNavigationDataUpdated currentTopNavIndex: ${this.currentTopNavSelectedIndex},topNavList.length:${this.topNavList.length}`); | ||
| 446 | - } | ||
| 447 | - | ||
| 448 | - onAutoRefresh() { | ||
| 449 | - if (this.navIndex != this._currentNavIndex) { | ||
| 450 | - return | ||
| 451 | - } | ||
| 452 | - // 通知page刷新 | ||
| 453 | - this.autoRefresh2Page++ | ||
| 454 | - } | ||
| 455 | - | ||
| 456 | - private doAutoRefresh() { | ||
| 457 | - // 通知page刷新 | ||
| 458 | - this.autoRefresh2Page++ | ||
| 459 | - } | ||
| 460 | - | ||
| 461 | - /** | ||
| 462 | - * 判断是否当前页面处理逻辑,如消息通知,只需要切换到当前底导的处理,过滤掉非当前。 | ||
| 463 | - */ | ||
| 464 | - private isCurrentPage(): boolean { | ||
| 465 | - return this._currentNavIndex === this.navIndex | ||
| 466 | - } | ||
| 467 | - | ||
| 468 | - /** | ||
| 469 | - * 频道id变化,即指定频道跳转场景 | ||
| 470 | - */ | ||
| 471 | - onAssignChannelChange() { | ||
| 472 | - if (!this.isCurrentPage()) { | ||
| 473 | - return | ||
| 474 | - } | ||
| 475 | - let channelId = this.assignChannel.channelId | ||
| 476 | - let index = -1 | ||
| 477 | - if (this._currentNavIndex === 0) { | ||
| 478 | - // 第一个,新闻,先拿我的,再拿其他 | ||
| 479 | - index = this.getChannelByMine(channelId) | ||
| 480 | - if (index == -1) { | ||
| 481 | - // 不在我的里,需要临时新增频道展示 | ||
| 482 | - let channel = this.getChannelByOthers(channelId) | ||
| 483 | - if (channel) { | ||
| 484 | - this.myChannelList.push(channel) | ||
| 485 | - setTimeout(() => { | ||
| 486 | - this.tabsController.changeIndex(this.myChannelList.length - 1) | ||
| 487 | - }, 20) | ||
| 488 | - } | ||
| 489 | - } else { | ||
| 490 | - // 直接切换 | ||
| 491 | - this.tabsController.changeIndex(index) | ||
| 492 | - } | ||
| 493 | - } else { | ||
| 494 | - index = this.getChannelByTopNav(channelId) | ||
| 495 | - if (index > -1) { | ||
| 496 | - // 找到了,直接切换,否则不处理 | ||
| 497 | - this.tabsController.changeIndex(index) | ||
| 498 | - } | ||
| 499 | - } | ||
| 500 | - | ||
| 501 | - } | ||
| 502 | - | ||
| 503 | - /** | ||
| 504 | - * 非新闻,从topNav里拿数据 | ||
| 505 | - */ | ||
| 506 | - private getChannelByTopNav(channelId: string) { | ||
| 507 | - for (let i = 0; i < this.topNavList.length; i++) { | ||
| 508 | - let topNavDTO: TopNavDTO = this.topNavList[i] | ||
| 509 | - if (topNavDTO.channelId.toString() === channelId) { | ||
| 510 | - return i | ||
| 511 | - } | ||
| 512 | - } | ||
| 513 | - return -1 | ||
| 514 | - } | ||
| 515 | - | ||
| 516 | - /** | ||
| 517 | - * 新闻,从myChannelList里拿数据 | ||
| 518 | - */ | ||
| 519 | - private getChannelByMine(channelId: string) { | ||
| 520 | - for (let i = 0; i < this.myChannelList.length; i++) { | ||
| 521 | - let topNavDTO: TopNavDTO = this.myChannelList[i] | ||
| 522 | - if (topNavDTO.channelId.toString() === channelId) { | ||
| 523 | - return i | ||
| 524 | - } | ||
| 525 | - } | ||
| 526 | - return -1 | ||
| 527 | - } | ||
| 528 | - | ||
| 529 | - /** | ||
| 530 | - * 新闻,从其他里拿数据 | ||
| 531 | - */ | ||
| 532 | - private getChannelByOthers(channelId: string) { | ||
| 533 | - for (let i = 0; i < this.moreChannelList.length; i++) { | ||
| 534 | - let topNavDTO: TopNavDTO = this.moreChannelList[i] | ||
| 535 | - if (topNavDTO.channelId.toString() === channelId) { | ||
| 536 | - return topNavDTO | ||
| 537 | - } | ||
| 538 | - } | ||
| 539 | - for (let j = 0; j < this.localChannelList.length; j++) { | ||
| 540 | - let topNavDTO: TopNavDTO = this.localChannelList[j] | ||
| 541 | - if (topNavDTO.channelId.toString() === channelId) { | ||
| 542 | - return topNavDTO | ||
| 543 | - } | ||
| 544 | - } | ||
| 545 | - return null | ||
| 546 | - } | ||
| 547 | - | ||
| 548 | - // private getTextInfo(index: number): Record<string, number> { | ||
| 549 | - // let strJson = getInspectorByKey(index.toString()) | ||
| 550 | - // try { | ||
| 551 | - // let obj: Record<string, string> = JSON.parse(strJson) | ||
| 552 | - // let rectInfo: number[][] = JSON.parse('[' + obj.$rect + ']') | ||
| 553 | - // return { 'left': px2vp(rectInfo[0][0]), 'width': px2vp(rectInfo[1][0] - rectInfo[0][0]) } | ||
| 554 | - // } catch (error) { | ||
| 555 | - // return { 'left': 0, 'width': 0 } | ||
| 556 | - // } | ||
| 557 | - // } | ||
| 558 | - // | ||
| 559 | - // private getCurrentIndicatorInfo(index: number, event: TabsAnimationEvent): Record<string, number> { | ||
| 560 | - // let nextIndex = index | ||
| 561 | - // if (index > 0 && event.currentOffset > 0) { | ||
| 562 | - // nextIndex-- | ||
| 563 | - // } else if (index < 3 && event.currentOffset < 0) { | ||
| 564 | - // nextIndex++ | ||
| 565 | - // } | ||
| 566 | - // let indexInfo = this.getTextInfo(index) | ||
| 567 | - // let nextIndexInfo = this.getTextInfo(nextIndex) | ||
| 568 | - // let swipeRatio = Math.abs(event.currentOffset / this.tabsWidth) | ||
| 569 | - // let currentIndex = swipeRatio > 0.5 ? nextIndex : index // 页面滑动超过一半,tabBar切换到下一页。 | ||
| 570 | - // let currentLeft = indexInfo.left + (nextIndexInfo.left - indexInfo.left) * swipeRatio | ||
| 571 | - // let currentWidth = indexInfo.width + (nextIndexInfo.width - indexInfo.width) * swipeRatio | ||
| 572 | - // return { 'index': currentIndex, 'left': currentLeft, 'width': currentWidth } | ||
| 573 | - // } | ||
| 574 | - | ||
| 575 | - // private startAnimateTo(duration: number, leftMargin: number, width: number) { | ||
| 576 | - // animateTo({ | ||
| 577 | - // duration: duration, // 动画时长 | ||
| 578 | - // curve: Curve.Linear, // 动画曲线 | ||
| 579 | - // iterations: 1, // 播放次数 | ||
| 580 | - // playMode: PlayMode.Normal, // 动画模式 | ||
| 581 | - // onFinish: () => { | ||
| 582 | - // console.info('play end') | ||
| 583 | - // } | ||
| 584 | - // }, () => { | ||
| 585 | - // this.indicatorLeftMargin = leftMargin | ||
| 586 | - // this.indicatorWidth = width | ||
| 587 | - // }) | ||
| 588 | - // } | ||
| 589 | -} |
| @@ -10,6 +10,7 @@ import { PeopleShipMainComponent } from '../peopleShip/PeopleShipMainComponent'; | @@ -10,6 +10,7 @@ import { PeopleShipMainComponent } from '../peopleShip/PeopleShipMainComponent'; | ||
| 10 | import { channelSkeleton } from '../skeleton/channelSkeleton'; | 10 | import { channelSkeleton } from '../skeleton/channelSkeleton'; |
| 11 | import { TrackConstants, TrackingButton } from 'wdTracking/Index'; | 11 | import { TrackConstants, TrackingButton } from 'wdTracking/Index'; |
| 12 | import DailyPaperTopicModel from '../../model/DailyPaperTopicModel' | 12 | import DailyPaperTopicModel from '../../model/DailyPaperTopicModel' |
| 13 | +import { ParamType, Tracking } from 'wdTracking/Index'; | ||
| 13 | 14 | ||
| 14 | const TAG = 'TopNavigationComponent'; | 15 | const TAG = 'TopNavigationComponent'; |
| 15 | 16 | ||
| @@ -29,6 +30,8 @@ export struct TopNavigationComponentNew { | @@ -29,6 +30,8 @@ export struct TopNavigationComponentNew { | ||
| 29 | * @deprecated TODO type判断 | 30 | * @deprecated TODO type判断 |
| 30 | */ | 31 | */ |
| 31 | private currentBottomNavName: string = '' | 32 | private currentBottomNavName: string = '' |
| 33 | + private pageName: string = '' | ||
| 34 | + private pageId: number = 0 | ||
| 32 | private swiperController: SwiperController = new SwiperController() | 35 | private swiperController: SwiperController = new SwiperController() |
| 33 | private listScroller: Scroller = new Scroller() | 36 | private listScroller: Scroller = new Scroller() |
| 34 | @Consume barBackgroundColor: Color | 37 | @Consume barBackgroundColor: Color |
| @@ -110,6 +113,21 @@ export struct TopNavigationComponentNew { | @@ -110,6 +113,21 @@ export struct TopNavigationComponentNew { | ||
| 110 | }) | 113 | }) |
| 111 | .onChange((index) => { | 114 | .onChange((index) => { |
| 112 | Logger.info(TAG, `onChange index : ${index}`); | 115 | Logger.info(TAG, `onChange index : ${index}`); |
| 116 | + | ||
| 117 | + // 顶部tab埋点 | ||
| 118 | + if(this.currentBottomNavName === '新闻') { | ||
| 119 | + const tab = this.myChannelList[index] | ||
| 120 | + Logger.info(TAG, `顶部tab : ${JSON.stringify(tab)}`); | ||
| 121 | + | ||
| 122 | + const params: ParamType = { | ||
| 123 | + "pageName": tab.name, | ||
| 124 | + "tabName": tab.name, | ||
| 125 | + "pageId": tab.pageId, | ||
| 126 | + } | ||
| 127 | + Tracking.event("home_page_tab_click ", params) | ||
| 128 | + } | ||
| 129 | + | ||
| 130 | + | ||
| 113 | if (this.isBroadcastByIndex(index)) { | 131 | if (this.isBroadcastByIndex(index)) { |
| 114 | // 跳转到播报页面 | 132 | // 跳转到播报页面 |
| 115 | ProcessUtils.gotoBroadcastPage(this.myChannelList[index].pageId) | 133 | ProcessUtils.gotoBroadcastPage(this.myChannelList[index].pageId) |
| @@ -166,6 +184,14 @@ export struct TopNavigationComponentNew { | @@ -166,6 +184,14 @@ export struct TopNavigationComponentNew { | ||
| 166 | .height(30) | 184 | .height(30) |
| 167 | .width(124) | 185 | .width(124) |
| 168 | .onClick(() => { | 186 | .onClick(() => { |
| 187 | + | ||
| 188 | + // 早晚报埋点 | ||
| 189 | + const params: ParamType = { | ||
| 190 | + "pageName": this.pageName, | ||
| 191 | + "pageId": this.pageId, | ||
| 192 | + } | ||
| 193 | + Tracking.event("morning_evening_news_click", params) | ||
| 194 | + | ||
| 169 | this.clickMorningEveningPaper() | 195 | this.clickMorningEveningPaper() |
| 170 | }) | 196 | }) |
| 171 | }.width('100%') | 197 | }.width('100%') |
| 1 | import { Action, CompDTO, ContentDTO, Params } from 'wdBean' | 1 | import { Action, CompDTO, ContentDTO, Params } from 'wdBean' |
| 2 | -import { WDRouterRule } from 'wdRouter/Index' | 2 | +import { ProcessUtils, WDRouterRule } from 'wdRouter/Index' |
| 3 | import { Logger } from 'wdKit/Index' | 3 | import { Logger } from 'wdKit/Index' |
| 4 | import { ExtraDTO } from 'wdBean/src/main/ets/bean/component/extra/ExtraDTO' | 4 | import { ExtraDTO } from 'wdBean/src/main/ets/bean/component/extra/ExtraDTO' |
| 5 | import { LiveModel } from '../../viewmodel/LiveModel' | 5 | import { LiveModel } from '../../viewmodel/LiveModel' |
| @@ -69,24 +69,9 @@ export struct HorizontalStrokeCardThreeTwoRadioForOneComponent { | @@ -69,24 +69,9 @@ export struct HorizontalStrokeCardThreeTwoRadioForOneComponent { | ||
| 69 | .onClick(() => { | 69 | .onClick(() => { |
| 70 | InfomationCardClick.track(this.compDTO, this.compDTO.operDataList[0], this.pageId, this.pageName) | 70 | InfomationCardClick.track(this.compDTO, this.compDTO.operDataList[0], this.pageId, this.pageName) |
| 71 | this.clicked = true; | 71 | this.clicked = true; |
| 72 | - this.gotoLive(this.compDTO?.operDataList[0]) | 72 | + ProcessUtils.gotoLive(this.compDTO?.operDataList[0]) |
| 73 | }) | 73 | }) |
| 74 | } | 74 | } |
| 75 | 75 | ||
| 76 | - async gotoLive(content: ContentDTO) { | ||
| 77 | 76 | ||
| 78 | - let taskAction: Action = { | ||
| 79 | - type: 'JUMP_DETAIL_PAGE', | ||
| 80 | - params: { | ||
| 81 | - detailPageType: 2, | ||
| 82 | - contentID: content?.objectId, | ||
| 83 | - extra: { | ||
| 84 | - relType: content?.relType, | ||
| 85 | - relId: content?.relId, | ||
| 86 | - } as ExtraDTO | ||
| 87 | - } as Params, | ||
| 88 | - }; | ||
| 89 | - WDRouterRule.jumpWithAction(taskAction) | ||
| 90 | - // Logger.debug(TAG, `gotoLive, ${content.objectId}`); | ||
| 91 | - } | ||
| 92 | } | 77 | } |
| @@ -5,7 +5,7 @@ import { CommonConstants } from 'wdConstant' | @@ -5,7 +5,7 @@ import { CommonConstants } from 'wdConstant' | ||
| 5 | import { StringUtils } from 'wdKit/Index' | 5 | import { StringUtils } from 'wdKit/Index' |
| 6 | import { CardMediaInfo } from '../cardCommon/CardMediaInfo' | 6 | import { CardMediaInfo } from '../cardCommon/CardMediaInfo' |
| 7 | import { ExtraDTO } from 'wdBean/src/main/ets/bean/component/extra/ExtraDTO' | 7 | import { ExtraDTO } from 'wdBean/src/main/ets/bean/component/extra/ExtraDTO' |
| 8 | -import { WDRouterPage, WDRouterRule } from 'wdRouter/Index' | 8 | +import { ProcessUtils, WDRouterPage, WDRouterRule } from 'wdRouter/Index' |
| 9 | 9 | ||
| 10 | @Component | 10 | @Component |
| 11 | export struct LiveHorizontalReservationComponent { | 11 | export struct LiveHorizontalReservationComponent { |
| @@ -76,7 +76,7 @@ export struct LiveHorizontalReservationComponent { | @@ -76,7 +76,7 @@ export struct LiveHorizontalReservationComponent { | ||
| 76 | .onClick(() => { | 76 | .onClick(() => { |
| 77 | if (item.objectType != '0') { | 77 | if (item.objectType != '0') { |
| 78 | console.log(item.objectId) | 78 | console.log(item.objectId) |
| 79 | - this.gotoLive(item) | 79 | + ProcessUtils.gotoLive(item) |
| 80 | } | 80 | } |
| 81 | }) | 81 | }) |
| 82 | }) | 82 | }) |
| @@ -107,20 +107,5 @@ export struct LiveHorizontalReservationComponent { | @@ -107,20 +107,5 @@ export struct LiveHorizontalReservationComponent { | ||
| 107 | WDRouterRule.jumpWithPage(WDRouterPage.reserveMorePage) | 107 | WDRouterRule.jumpWithPage(WDRouterPage.reserveMorePage) |
| 108 | } | 108 | } |
| 109 | 109 | ||
| 110 | - async gotoLive(content: ContentDTO) { | ||
| 111 | 110 | ||
| 112 | - let taskAction: Action = { | ||
| 113 | - type: 'JUMP_DETAIL_PAGE', | ||
| 114 | - params: { | ||
| 115 | - detailPageType: 2, | ||
| 116 | - contentID: content?.objectId, | ||
| 117 | - extra: { | ||
| 118 | - relType: content?.relType, | ||
| 119 | - relId: content?.relId, | ||
| 120 | - } as ExtraDTO | ||
| 121 | - } as Params, | ||
| 122 | - }; | ||
| 123 | - WDRouterRule.jumpWithAction(taskAction) | ||
| 124 | - // Logger.debug(TAG, `gotoLive, ${content.objectId}`); | ||
| 125 | - } | ||
| 126 | } | 111 | } |
| @@ -15,6 +15,7 @@ | @@ -15,6 +15,7 @@ | ||
| 15 | "wdBean": "file:../../features/wdBean", | 15 | "wdBean": "file:../../features/wdBean", |
| 16 | "wdConstant": "file:../../commons/wdConstant", | 16 | "wdConstant": "file:../../commons/wdConstant", |
| 17 | "wdDetailPlayApi": "file:../../features/wdDetailPlayApi", | 17 | "wdDetailPlayApi": "file:../../features/wdDetailPlayApi", |
| 18 | - "wdRouter": "file:../../commons/wdRouter" | 18 | + "wdRouter": "file:../../commons/wdRouter", |
| 19 | + "wdTracking": "file:../../features/wdTracking" | ||
| 19 | } | 20 | } |
| 20 | } | 21 | } |
| @@ -4,8 +4,10 @@ import router from '@ohos.router'; | @@ -4,8 +4,10 @@ import router from '@ohos.router'; | ||
| 4 | 4 | ||
| 5 | import { DetailPlayLivePage } from './DetailPlayLivePage'; | 5 | import { DetailPlayLivePage } from './DetailPlayLivePage'; |
| 6 | import { DetailPlayVLivePage } from './DetailPlayVLivePage'; | 6 | import { DetailPlayVLivePage } from './DetailPlayVLivePage'; |
| 7 | -import { Logger, ToastUtils } from 'wdKit/Index'; | 7 | +import { DateTimeUtils, Logger, ToastUtils } from 'wdKit/Index'; |
| 8 | import { publishCommentModel } from 'wdComponent/src/main/ets/components/comment/model/PublishCommentModel'; | 8 | import { publishCommentModel } from 'wdComponent/src/main/ets/components/comment/model/PublishCommentModel'; |
| 9 | +import { PictureLoading } from '../widgets/vertical/PictureLoading'; | ||
| 10 | +import { TrackConstants, TrackingButton, TrackingPageBrowse } from 'wdTracking/Index'; | ||
| 9 | 11 | ||
| 10 | const TAG = 'DetailPlayLiveCommon' | 12 | const TAG = 'DetailPlayLiveCommon' |
| 11 | 13 | ||
| @@ -21,6 +23,7 @@ const TAG = 'DetailPlayLiveCommon' | @@ -21,6 +23,7 @@ const TAG = 'DetailPlayLiveCommon' | ||
| 21 | @Component | 23 | @Component |
| 22 | export struct DetailPlayLiveCommon { | 24 | export struct DetailPlayLiveCommon { |
| 23 | private liveViewModel: LiveViewModel = new LiveViewModel() | 25 | private liveViewModel: LiveViewModel = new LiveViewModel() |
| 26 | + pageShowTime:number = 0; | ||
| 24 | @Provide relId: string = '' | 27 | @Provide relId: string = '' |
| 25 | @Provide contentId: string = '' | 28 | @Provide contentId: string = '' |
| 26 | @Provide relType: string = '' | 29 | @Provide relType: string = '' |
| @@ -36,6 +39,8 @@ export struct DetailPlayLiveCommon { | @@ -36,6 +39,8 @@ export struct DetailPlayLiveCommon { | ||
| 36 | // 横屏或竖屏 general-竖屏,news-横屏 | 39 | // 横屏或竖屏 general-竖屏,news-横屏 |
| 37 | @State liveLandscape: string = '' | 40 | @State liveLandscape: string = '' |
| 38 | 41 | ||
| 42 | + @State isLoading: boolean = false | ||
| 43 | + | ||
| 39 | async aboutToAppear(): Promise<void> { | 44 | async aboutToAppear(): Promise<void> { |
| 40 | const par: Action = router.getParams() as Action; | 45 | const par: Action = router.getParams() as Action; |
| 41 | const params = par?.params; | 46 | const params = par?.params; |
| @@ -46,6 +51,12 @@ export struct DetailPlayLiveCommon { | @@ -46,6 +51,12 @@ export struct DetailPlayLiveCommon { | ||
| 46 | 51 | ||
| 47 | } | 52 | } |
| 48 | 53 | ||
| 54 | + aboutToDisappear(): void { | ||
| 55 | + console.error("XXXXZZZZ", '---aboutToDisappear------------') | ||
| 56 | + | ||
| 57 | + } | ||
| 58 | + | ||
| 59 | + | ||
| 49 | build() { | 60 | build() { |
| 50 | Column() { | 61 | Column() { |
| 51 | // 直播预约或横屏直播统一进横屏直播 | 62 | // 直播预约或横屏直播统一进横屏直播 |
| @@ -55,6 +66,8 @@ export struct DetailPlayLiveCommon { | @@ -55,6 +66,8 @@ export struct DetailPlayLiveCommon { | ||
| 55 | } else if (this.liveLandscape === 'general') { | 66 | } else if (this.liveLandscape === 'general') { |
| 56 | // 沉浸式直播 | 67 | // 沉浸式直播 |
| 57 | DetailPlayVLivePage() | 68 | DetailPlayVLivePage() |
| 69 | + }else { | ||
| 70 | + PictureLoading().visibility(this.isLoading ? Visibility.None : Visibility.Visible) | ||
| 58 | } | 71 | } |
| 59 | } | 72 | } |
| 60 | .height('100%') | 73 | .height('100%') |
| @@ -115,12 +128,13 @@ export struct DetailPlayLiveCommon { | @@ -115,12 +128,13 @@ export struct DetailPlayLiveCommon { | ||
| 115 | this.playUrl = detailData.liveInfo.vlive[0].replayUri | 128 | this.playUrl = detailData.liveInfo.vlive[0].replayUri |
| 116 | } | 129 | } |
| 117 | 130 | ||
| 118 | - | ||
| 119 | } else { | 131 | } else { |
| 132 | + this.isLoading | ||
| 120 | ToastUtils.shortToast('内容不存在') | 133 | ToastUtils.shortToast('内容不存在') |
| 121 | router.back() | 134 | router.back() |
| 122 | } | 135 | } |
| 123 | },()=>{ | 136 | },()=>{ |
| 137 | + this.isLoading | ||
| 124 | ToastUtils.shortToast('内容不存在') | 138 | ToastUtils.shortToast('内容不存在') |
| 125 | router.back() | 139 | router.back() |
| 126 | 140 | ||
| @@ -132,11 +146,17 @@ export struct DetailPlayLiveCommon { | @@ -132,11 +146,17 @@ export struct DetailPlayLiveCommon { | ||
| 132 | onPageShow() { | 146 | onPageShow() { |
| 133 | this.pageShow = Math.random() | 147 | this.pageShow = Math.random() |
| 134 | Logger.info(TAG, 'onPageShow') | 148 | Logger.info(TAG, 'onPageShow') |
| 149 | + this.pageShowTime = DateTimeUtils.getTimeStamp() | ||
| 135 | } | 150 | } |
| 136 | 151 | ||
| 137 | onPageHide() { | 152 | onPageHide() { |
| 138 | this.pageHide = Math.random() | 153 | this.pageHide = Math.random() |
| 139 | Logger.info(TAG, 'onPageHide') | 154 | Logger.info(TAG, 'onPageHide') |
| 155 | + console.error("XXXXZZZZ", '---onPageHide------------') | ||
| 156 | + //页面浏览 | ||
| 157 | + TrackingPageBrowse.trackCommonPageExposureEnd(TrackConstants.PageName.Live_Detail,TrackConstants.PageName.Live_Detail | ||
| 158 | + ,Math.floor((DateTimeUtils.getTimeStamp() - this.pageShowTime)/1000)) | ||
| 159 | + | ||
| 140 | } | 160 | } |
| 141 | 161 | ||
| 142 | onBackPress(): boolean | void { | 162 | onBackPress(): boolean | void { |
| @@ -10,6 +10,7 @@ import { SpConstants } from 'wdConstant/Index'; | @@ -10,6 +10,7 @@ import { SpConstants } from 'wdConstant/Index'; | ||
| 10 | const TAG = 'LiveModel' | 10 | const TAG = 'LiveModel' |
| 11 | 11 | ||
| 12 | export class LiveModel { | 12 | export class LiveModel { |
| 13 | + | ||
| 13 | getContentDetail(contentId: string, relId: string, relType: string) { | 14 | getContentDetail(contentId: string, relId: string, relType: string) { |
| 14 | return new Promise<Array<ContentDetailDTO>>((success, fail) => { | 15 | return new Promise<Array<ContentDetailDTO>>((success, fail) => { |
| 15 | ContentDetailRequest.getContentDetail({ | 16 | ContentDetailRequest.getContentDetail({ |
| @@ -19,9 +20,14 @@ export class LiveModel { | @@ -19,9 +20,14 @@ export class LiveModel { | ||
| 19 | }).then(async (resDTO: ResponseDTO<ContentDetailDTO[]>) => { | 20 | }).then(async (resDTO: ResponseDTO<ContentDetailDTO[]>) => { |
| 20 | console.log(TAG, 'getContentDetail:', JSON.stringify(resDTO.data)) | 21 | console.log(TAG, 'getContentDetail:', JSON.stringify(resDTO.data)) |
| 21 | if (resDTO.data) { | 22 | if (resDTO.data) { |
| 23 | + //console.error("XXXXZZZZ", '---getContentDetail-0---1------------') | ||
| 22 | success(resDTO.data) | 24 | success(resDTO.data) |
| 25 | + }else { | ||
| 26 | + // console.error("XXXXZZZZ", '---getContentDetail-0--2----1--------') | ||
| 27 | + fail("数据为空") | ||
| 23 | } | 28 | } |
| 24 | }).catch(() => { | 29 | }).catch(() => { |
| 30 | + // console.error("XXXXZZZZ", '---getContentDetail-0--2----2--------') | ||
| 25 | fail("数据为空") | 31 | fail("数据为空") |
| 26 | }) | 32 | }) |
| 27 | 33 |
| @@ -22,8 +22,10 @@ export class LiveViewModel { | @@ -22,8 +22,10 @@ export class LiveViewModel { | ||
| 22 | getContentDetail(contentId: string, relId: string, relType: string) { | 22 | getContentDetail(contentId: string, relId: string, relType: string) { |
| 23 | return new Promise<Array<ContentDetailDTO>>((success, fail) => { | 23 | return new Promise<Array<ContentDetailDTO>>((success, fail) => { |
| 24 | this.liveModel.getContentDetail(contentId, relId, relType).then((data) => { | 24 | this.liveModel.getContentDetail(contentId, relId, relType).then((data) => { |
| 25 | + //console.error("XXXXZZZZ", '---getContentDetail---1------------') | ||
| 25 | success(data) | 26 | success(data) |
| 26 | }).catch((message: string) => { | 27 | }).catch((message: string) => { |
| 28 | + // console.error("XXXXZZZZ", '----getContentDetail--2------------') | ||
| 27 | fail(message) | 29 | fail(message) |
| 28 | }) | 30 | }) |
| 29 | }) | 31 | }) |
| @@ -12,56 +12,33 @@ export struct TabComponent { | @@ -12,56 +12,33 @@ export struct TabComponent { | ||
| 12 | @State fontColor: string = '#999999' | 12 | @State fontColor: string = '#999999' |
| 13 | @State selectedFontColor: string = '#222222' | 13 | @State selectedFontColor: string = '#222222' |
| 14 | @State currentIndex: number = 0 | 14 | @State currentIndex: number = 0 |
| 15 | - private controller: TabsController = new TabsController() | 15 | + // private controller: TabsController = new TabsController() |
| 16 | + private swiperController: SwiperController = new SwiperController() | ||
| 16 | @Prop tabs: string[] = [] | 17 | @Prop tabs: string[] = [] |
| 17 | - @Prop lastInputedLiveComment: LiveRoomItemBean // 上次输入的直播间消息 | ||
| 18 | - @Prop lastInputedChatComment: LiveRoomItemBean // 上次输入的大家聊消息 | 18 | + @Prop lastInputedLiveComment: LiveRoomItemBean // 上次输入的直播间消息 |
| 19 | + @Prop lastInputedChatComment: LiveRoomItemBean // 上次输入的大家聊消息 | ||
| 19 | 20 | ||
| 20 | aboutToAppear(): void { | 21 | aboutToAppear(): void { |
| 21 | 22 | ||
| 22 | } | 23 | } |
| 24 | + | ||
| 23 | /** | 25 | /** |
| 24 | * 评论切换到大家聊 | 26 | * 评论切换到大家聊 |
| 25 | */ | 27 | */ |
| 26 | changeToChart() { | 28 | changeToChart() { |
| 27 | const index = this.tabs.findIndex(item => item === '大家聊') | 29 | const index = this.tabs.findIndex(item => item === '大家聊') |
| 28 | if (index !== -1) { | 30 | if (index !== -1) { |
| 29 | - this.controller.changeIndex(index) | 31 | + this.swiperController.changeIndex(index) |
| 30 | } | 32 | } |
| 31 | } | 33 | } |
| 32 | 34 | ||
| 33 | build() { | 35 | build() { |
| 34 | - Stack({alignContent: Alignment.TopStart}) { | ||
| 35 | - Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.controller }) { | ||
| 36 | - ForEach(this.tabs, (item: string, index: number) => { | ||
| 37 | - TabContent() { | ||
| 38 | - if ('简介' === item) { | ||
| 39 | - TabInfoComponent() | ||
| 40 | - } else if ('直播间' === item) { | ||
| 41 | - TabLiveComponent({lastInputedComment: this.lastInputedLiveComment}) | ||
| 42 | - } else if ('大家聊' === item) { | ||
| 43 | - TabChatComponent({lastInputedComment: this.lastInputedChatComment}) | ||
| 44 | - } | ||
| 45 | - } | ||
| 46 | - .backgroundColor('#F5F5F5') | ||
| 47 | - }, (item: string, index: number) => { | ||
| 48 | - return item + index | ||
| 49 | - }) | ||
| 50 | - } | ||
| 51 | - .layoutWeight(1) | ||
| 52 | - .vertical(false) | ||
| 53 | - .barMode(BarMode.Fixed) | ||
| 54 | - .barHeight(48) | ||
| 55 | - .animationDuration(100) | ||
| 56 | - .onChange((index: number) => { | ||
| 57 | - this.currentIndex = index | ||
| 58 | - }) | ||
| 59 | - .backgroundColor(Color.White) | 36 | + Column() { |
| 60 | 37 | ||
| 61 | // 页签 | 38 | // 页签 |
| 62 | Row() { | 39 | Row() { |
| 63 | Scroll() { | 40 | Scroll() { |
| 64 | - Row({space: '24vp'}) { | 41 | + Row({ space: '24vp' }) { |
| 65 | ForEach(this.tabs, (item: string, index: number) => { | 42 | ForEach(this.tabs, (item: string, index: number) => { |
| 66 | this.tabBuilder(index, item) | 43 | this.tabBuilder(index, item) |
| 67 | }) | 44 | }) |
| @@ -79,8 +56,33 @@ export struct TabComponent { | @@ -79,8 +56,33 @@ export struct TabComponent { | ||
| 79 | .height('48vp') | 56 | .height('48vp') |
| 80 | .alignItems(VerticalAlign.Bottom) | 57 | .alignItems(VerticalAlign.Bottom) |
| 81 | .width('100%') | 58 | .width('100%') |
| 82 | - }.layoutWeight(1) | ||
| 83 | 59 | ||
| 60 | + Swiper(this.swiperController) { | ||
| 61 | + ForEach(this.tabs, (item: string, index: number) => { | ||
| 62 | + if ('简介' === item) { | ||
| 63 | + TabInfoComponent().backgroundColor('#F5F5F5') | ||
| 64 | + } else if ('直播间' === item) { | ||
| 65 | + TabLiveComponent({ lastInputedComment: this.lastInputedLiveComment }).backgroundColor('#F5F5F5') | ||
| 66 | + } else if ('大家聊' === item) { | ||
| 67 | + TabChatComponent({ lastInputedComment: this.lastInputedChatComment }).backgroundColor('#F5F5F5') | ||
| 68 | + } | ||
| 69 | + | ||
| 70 | + }, (item: string, index: number) => { | ||
| 71 | + return item + index | ||
| 72 | + }) | ||
| 73 | + } | ||
| 74 | + .layoutWeight(1) | ||
| 75 | + .vertical(false) | ||
| 76 | + .indicator(false) | ||
| 77 | + .loop(false) | ||
| 78 | + .alignSelf(ItemAlign.Start) | ||
| 79 | + .effectMode(EdgeEffect.None) | ||
| 80 | + .onChange((index: number) => { | ||
| 81 | + this.currentIndex = index | ||
| 82 | + }) | ||
| 83 | + .backgroundColor(Color.White) | ||
| 84 | + | ||
| 85 | + }.layoutWeight(1) | ||
| 84 | 86 | ||
| 85 | } | 87 | } |
| 86 | 88 | ||
| @@ -102,7 +104,7 @@ export struct TabComponent { | @@ -102,7 +104,7 @@ export struct TabComponent { | ||
| 102 | .constraintSize({ minWidth: 35 }) | 104 | .constraintSize({ minWidth: 35 }) |
| 103 | .height('48vp') | 105 | .height('48vp') |
| 104 | .onClick(() => { | 106 | .onClick(() => { |
| 105 | - this.controller.changeIndex(index) | 107 | + this.swiperController.changeIndex(index) |
| 106 | this.currentIndex = index | 108 | this.currentIndex = index |
| 107 | }) | 109 | }) |
| 108 | } | 110 | } |
| @@ -3,6 +3,7 @@ import { Logger, StringUtils } from 'wdKit/Index'; | @@ -3,6 +3,7 @@ import { Logger, StringUtils } from 'wdKit/Index'; | ||
| 3 | import { PlayerConstants, WDAliPlayerController, WDPlayerRenderLiveView } from 'wdPlayer/Index'; | 3 | import { PlayerConstants, WDAliPlayerController, WDPlayerRenderLiveView } from 'wdPlayer/Index'; |
| 4 | import { PlayUIComponent } from './PlayUIComponent'; | 4 | import { PlayUIComponent } from './PlayUIComponent'; |
| 5 | import { PictureLoading } from '../../vertical/PictureLoading'; | 5 | import { PictureLoading } from '../../vertical/PictureLoading'; |
| 6 | +import { ParamType, TrackConstants } from 'wdTracking/Index'; | ||
| 6 | 7 | ||
| 7 | const TAG: string = 'TopPlayComponent' | 8 | const TAG: string = 'TopPlayComponent' |
| 8 | 9 | ||
| @@ -31,11 +32,11 @@ export struct TopPlayComponent { | @@ -31,11 +32,11 @@ export struct TopPlayComponent { | ||
| 31 | @Provide playSourceState: number = 0 | 32 | @Provide playSourceState: number = 0 |
| 32 | private playUrl: string = "" | 33 | private playUrl: string = "" |
| 33 | private xComponentIsLoaded: boolean = false | 34 | private xComponentIsLoaded: boolean = false |
| 35 | + pageParam: ParamType = {} | ||
| 34 | 36 | ||
| 35 | aboutToAppear(): void { | 37 | aboutToAppear(): void { |
| 36 | if (this.playerController) { | 38 | if (this.playerController) { |
| 37 | this.playerController.onCanplay = () => { | 39 | this.playerController.onCanplay = () => { |
| 38 | - Logger.debug(TAG, 'onCanplay==>') | ||
| 39 | this.isCanPlay = true | 40 | this.isCanPlay = true |
| 40 | this.isLoading = true | 41 | this.isLoading = true |
| 41 | this.playerController?.play() | 42 | this.playerController?.play() |
| @@ -98,7 +99,7 @@ export struct TopPlayComponent { | @@ -98,7 +99,7 @@ export struct TopPlayComponent { | ||
| 98 | this.isEnd = this.contentDetailData?.liveInfo?.liveState === 'end' && | 99 | this.isEnd = this.contentDetailData?.liveInfo?.liveState === 'end' && |
| 99 | StringUtils.isEmpty(this.contentDetailData?.liveInfo?.vlive[0]?.replayUri) | 100 | StringUtils.isEmpty(this.contentDetailData?.liveInfo?.vlive[0]?.replayUri) |
| 100 | 101 | ||
| 101 | - // Logger.debug(TAG, `---0------>` + this.isWait + ' ->' + this.isLoading + ' ->' + this.isEnd) | 102 | + // Logger.debug(TAG, `---0------>` + this.isWait + ' ->' + this.isLoading + ' ->' + this.isEnd) |
| 102 | if (!this.isWait) { | 103 | if (!this.isWait) { |
| 103 | if (this.contentDetailData.liveInfo && this.contentDetailData.liveInfo.vlive.length > 0) { | 104 | if (this.contentDetailData.liveInfo && this.contentDetailData.liveInfo.vlive.length > 0) { |
| 104 | let playUrl = '' | 105 | let playUrl = '' |
| @@ -147,7 +148,16 @@ export struct TopPlayComponent { | @@ -147,7 +148,16 @@ export struct TopPlayComponent { | ||
| 147 | Logger.debug(TAG, "播放地址为空") | 148 | Logger.debug(TAG, "播放地址为空") |
| 148 | return | 149 | return |
| 149 | } | 150 | } |
| 150 | - this.playerController?.firstPlay(this.playUrl); | 151 | + this.contentTrackingDict() |
| 152 | + this.playerController?.firstPlay(this.playUrl, TrackConstants.PageName.Live_Detail, this.pageParam); | ||
| 153 | + } | ||
| 154 | + | ||
| 155 | + contentTrackingDict() { | ||
| 156 | + this.pageParam = { | ||
| 157 | + 'contentType': `${this.contentDetailData.newsType}`, | ||
| 158 | + 'contentId': `${this.contentDetailData.newsId}`, | ||
| 159 | + 'contentName': `${this.contentDetailData.newsTitle || ''}`, | ||
| 160 | + } | ||
| 151 | } | 161 | } |
| 152 | 162 | ||
| 153 | build() { | 163 | build() { |
| 1 | import { ContentDetailDTO } from 'wdBean/Index'; | 1 | import { ContentDetailDTO } from 'wdBean/Index'; |
| 2 | import { AliPlayerRenderView, WDAliPlayerController, WDPlayerRenderVLiveView } from 'wdPlayer/Index'; | 2 | import { AliPlayerRenderView, WDAliPlayerController, WDPlayerRenderVLiveView } from 'wdPlayer/Index'; |
| 3 | +import { ParamType, TrackConstants } from 'wdTracking/Index'; | ||
| 3 | import { PictureLoading } from './PictureLoading'; | 4 | import { PictureLoading } from './PictureLoading'; |
| 4 | 5 | ||
| 5 | const TAG = 'PlayerComponent' | 6 | const TAG = 'PlayerComponent' |
| 6 | 7 | ||
| 7 | @Component | 8 | @Component |
| 8 | export struct PlayerComponent { | 9 | export struct PlayerComponent { |
| 9 | - | ||
| 10 | private playerController?: WDAliPlayerController | 10 | private playerController?: WDAliPlayerController |
| 11 | @Consume @Watch('updateData') contentDetailData: ContentDetailDTO | 11 | @Consume @Watch('updateData') contentDetailData: ContentDetailDTO |
| 12 | @Consume @Watch('pageShowChange') pageShow: number | 12 | @Consume @Watch('pageShowChange') pageShow: number |
| @@ -21,6 +21,7 @@ export struct PlayerComponent { | @@ -21,6 +21,7 @@ export struct PlayerComponent { | ||
| 21 | @State liveStreamType: number | null = -1 | 21 | @State liveStreamType: number | null = -1 |
| 22 | @State playUrl: string = '' | 22 | @State playUrl: string = '' |
| 23 | @State isCanplay: boolean = false | 23 | @State isCanplay: boolean = false |
| 24 | + pageParam: ParamType = {} | ||
| 24 | 25 | ||
| 25 | pageShowChange() { | 26 | pageShowChange() { |
| 26 | this.playerController?.play() | 27 | this.playerController?.play() |
| @@ -76,8 +77,8 @@ export struct PlayerComponent { | @@ -76,8 +77,8 @@ export struct PlayerComponent { | ||
| 76 | playerController: this.playerController, | 77 | playerController: this.playerController, |
| 77 | onLoad: () => { | 78 | onLoad: () => { |
| 78 | this.isCanplay = true | 79 | this.isCanplay = true |
| 79 | - console.error("XXXXZZZZ", '------2------------') | ||
| 80 | - this.playerController?.firstPlay(this.playUrl); | 80 | + this.contentTrackingDict() |
| 81 | + this.playerController?.firstPlay(this.playUrl, TrackConstants.PageName.Live_Detail, this.pageParam); | ||
| 81 | } | 82 | } |
| 82 | }) | 83 | }) |
| 83 | } else if (this.liveStreamType == 0) { | 84 | } else if (this.liveStreamType == 0) { |
| @@ -85,8 +86,8 @@ export struct PlayerComponent { | @@ -85,8 +86,8 @@ export struct PlayerComponent { | ||
| 85 | playerController: this.playerController, | 86 | playerController: this.playerController, |
| 86 | onLoad: () => { | 87 | onLoad: () => { |
| 87 | this.isCanplay = true | 88 | this.isCanplay = true |
| 88 | - console.error('XXXXZZZZ', '------1------------') | ||
| 89 | - this.playerController?.firstPlay(this.playUrl); | 89 | + this.contentTrackingDict() |
| 90 | + this.playerController?.firstPlay(this.playUrl, TrackConstants.PageName.Live_Detail, this.pageParam); | ||
| 90 | } | 91 | } |
| 91 | }).margin({ top: 195 }).height(211) | 92 | }).margin({ top: 195 }).height(211) |
| 92 | } | 93 | } |
| @@ -108,4 +109,12 @@ export struct PlayerComponent { | @@ -108,4 +109,12 @@ export struct PlayerComponent { | ||
| 108 | .height('100%') | 109 | .height('100%') |
| 109 | .width('100%') | 110 | .width('100%') |
| 110 | } | 111 | } |
| 112 | + | ||
| 113 | + contentTrackingDict() { | ||
| 114 | + this.pageParam = { | ||
| 115 | + 'contentType': `${this.contentDetailData.newsType}`, | ||
| 116 | + 'contentId': `${this.contentDetailData.newsId}`, | ||
| 117 | + 'contentName': `${this.contentDetailData.newsTitle || ''}`, | ||
| 118 | + } | ||
| 119 | + } | ||
| 111 | } | 120 | } |
| @@ -13,7 +13,8 @@ import { | @@ -13,7 +13,8 @@ import { | ||
| 13 | import { initGlobalPlayerSettings, setupPlayerConfig } from '../utils/GlobalSetting'; | 13 | import { initGlobalPlayerSettings, setupPlayerConfig } from '../utils/GlobalSetting'; |
| 14 | import prompt from '@ohos.promptAction'; | 14 | import prompt from '@ohos.promptAction'; |
| 15 | import { PlayerConstants, AVPlayerStatus, Events } from '../constants/PlayerConstants'; | 15 | import { PlayerConstants, AVPlayerStatus, Events } from '../constants/PlayerConstants'; |
| 16 | -import { Logger, StringUtils } from 'wdKit/Index'; | 16 | +import { DateTimeUtils, Logger, StringUtils } from 'wdKit/Index'; |
| 17 | +import { ParamType, TrackingPlay } from 'wdTracking/Index'; | ||
| 17 | 18 | ||
| 18 | const TAG = "WDAliPlayerController" | 19 | const TAG = "WDAliPlayerController" |
| 19 | 20 | ||
| @@ -50,6 +51,11 @@ export class WDAliPlayerController { | @@ -50,6 +51,11 @@ export class WDAliPlayerController { | ||
| 50 | public onCanplay?: () => void; | 51 | public onCanplay?: () => void; |
| 51 | public onStatusChange?: (status: number) => void; | 52 | public onStatusChange?: (status: number) => void; |
| 52 | public onFirstFrameDisplay?: () => void | 53 | public onFirstFrameDisplay?: () => void |
| 54 | + // 埋点字段 | ||
| 55 | + private creatStartTime: number = 0; //开始加载时间 | ||
| 56 | + private creatEndTime: number = 0; //加载完成时间 | ||
| 57 | + private pageParam: ParamType = {} | ||
| 58 | + private pageName: string = '' | ||
| 53 | 59 | ||
| 54 | constructor() { | 60 | constructor() { |
| 55 | Logger.info(TAG, "初始化") | 61 | Logger.info(TAG, "初始化") |
| @@ -102,11 +108,29 @@ export class WDAliPlayerController { | @@ -102,11 +108,29 @@ export class WDAliPlayerController { | ||
| 102 | if (this.onFirstFrameDisplay) { | 108 | if (this.onFirstFrameDisplay) { |
| 103 | this.onFirstFrameDisplay() | 109 | this.onFirstFrameDisplay() |
| 104 | } | 110 | } |
| 111 | + | ||
| 112 | + | ||
| 113 | + if (this.pageParam) { | ||
| 114 | + console.log('播放视频pageParam', JSON.stringify(this.pageParam)) | ||
| 115 | + // 播放埋点 | ||
| 116 | + TrackingPlay.videoPositivePlay(Math.floor((DateTimeUtils.getTimeStamp() - this.creatStartTime) / 1000), | ||
| 117 | + this.pageName, this.pageName, this.pageParam) | ||
| 118 | + } | ||
| 119 | + | ||
| 105 | } | 120 | } |
| 106 | }); | 121 | }); |
| 107 | this.avPlayer?.setOnCompletionListener({ | 122 | this.avPlayer?.setOnCompletionListener({ |
| 108 | onCompletion: () => { | 123 | onCompletion: () => { |
| 109 | Logger.debug(TAG, "播放完成") | 124 | Logger.debug(TAG, "播放完成") |
| 125 | + | ||
| 126 | + if (this.pageParam) { | ||
| 127 | + let initDuration = Math.floor(Number(this.duration) / 1000) | ||
| 128 | + let currentPlayTime: number = Math.floor((DateTimeUtils.getTimeStamp() - this.creatStartTime) / 1000) //当前播放时间 | ||
| 129 | + console.log('播放结束') | ||
| 130 | + // 播放结束埋点 | ||
| 131 | + TrackingPlay.videoPlayEnd(currentPlayTime, initDuration, currentPlayTime, this.pageName, this.pageName, | ||
| 132 | + this.pageParam) | ||
| 133 | + } | ||
| 110 | } | 134 | } |
| 111 | }); | 135 | }); |
| 112 | this.avPlayer?.setOnInfoListener({ | 136 | this.avPlayer?.setOnInfoListener({ |
| @@ -197,6 +221,9 @@ export class WDAliPlayerController { | @@ -197,6 +221,9 @@ export class WDAliPlayerController { | ||
| 197 | this.errorMesage = errorInfo.getMsg() | 221 | this.errorMesage = errorInfo.getMsg() |
| 198 | this.status = PlayerConstants.STATUS_ERROR; | 222 | this.status = PlayerConstants.STATUS_ERROR; |
| 199 | this.watchStatus(); | 223 | this.watchStatus(); |
| 224 | + | ||
| 225 | + console.log('播放错误',JSON.stringify(error)) | ||
| 226 | + TrackingPlay.videoPlayError(errorInfo.getMsg(), this.pageName, this.pageName, this.pageParam) | ||
| 200 | } | 227 | } |
| 201 | }); | 228 | }); |
| 202 | this.avPlayer?.setOnLoadingStatusListener({ | 229 | this.avPlayer?.setOnLoadingStatusListener({ |
| @@ -265,12 +292,20 @@ export class WDAliPlayerController { | @@ -265,12 +292,20 @@ export class WDAliPlayerController { | ||
| 265 | } | 292 | } |
| 266 | } | 293 | } |
| 267 | 294 | ||
| 268 | - async firstPlay(url: string) { | 295 | + async firstPlay(url: string, pageName?: string, pageParam?: ParamType) { |
| 269 | if (StringUtils.isEmpty(url)) { | 296 | if (StringUtils.isEmpty(url)) { |
| 270 | Logger.error(TAG, "播放链接为空") | 297 | Logger.error(TAG, "播放链接为空") |
| 271 | return | 298 | return |
| 272 | } | 299 | } |
| 273 | 300 | ||
| 301 | + this.creatStartTime = DateTimeUtils.getTimeStamp() | ||
| 302 | + if (pageName) { | ||
| 303 | + this.pageName = pageName | ||
| 304 | + } | ||
| 305 | + if (pageParam) { | ||
| 306 | + this.pageParam = pageParam | ||
| 307 | + } | ||
| 308 | + | ||
| 274 | this.url = url; | 309 | this.url = url; |
| 275 | if (this.avPlayer == null) { | 310 | if (this.avPlayer == null) { |
| 276 | Logger.info(TAG, "等待播放器初始化") | 311 | Logger.info(TAG, "等待播放器初始化") |
| @@ -457,11 +492,7 @@ export class WDAliPlayerController { | @@ -457,11 +492,7 @@ export class WDAliPlayerController { | ||
| 457 | if (this.onStatusChange) { | 492 | if (this.onStatusChange) { |
| 458 | this.onStatusChange(this.status) | 493 | this.onStatusChange(this.status) |
| 459 | } | 494 | } |
| 460 | - // if (this.status === PlayConstants.STATUS_START) { | ||
| 461 | - // globalThis.windowClass.setWindowKeepScreenOn(true); | ||
| 462 | - // } else { | ||
| 463 | - // globalThis.windowClass.setWindowKeepScreenOn(false); | ||
| 464 | - // } | 495 | + |
| 465 | } | 496 | } |
| 466 | 497 | ||
| 467 | playError(msg?: string) { | 498 | playError(msg?: string) { |
| @@ -4,10 +4,11 @@ import { EmitterEventId, EmitterUtils, Logger, StringUtils } from 'wdKit'; | @@ -4,10 +4,11 @@ import { EmitterEventId, EmitterUtils, Logger, StringUtils } from 'wdKit'; | ||
| 4 | import { HttpUtils } from 'wdNetwork/Index'; | 4 | import { HttpUtils } from 'wdNetwork/Index'; |
| 5 | import HomeChannelUtils, { AssignChannelParam } from 'wdRouter/Index'; | 5 | import HomeChannelUtils, { AssignChannelParam } from 'wdRouter/Index'; |
| 6 | import { MinePageComponent } from 'wdComponent/src/main/ets/components/page/MinePageComponent'; | 6 | import { MinePageComponent } from 'wdComponent/src/main/ets/components/page/MinePageComponent'; |
| 7 | -import { CompUtils, TopNavigationComponent, TopNavigationComponentNew } from 'wdComponent/Index'; | 7 | +import { CompUtils, TopNavigationComponentNew } from 'wdComponent/Index'; |
| 8 | import { VideoChannelPage } from './VideoChannelPage'; | 8 | import { VideoChannelPage } from './VideoChannelPage'; |
| 9 | import ChannelViewModel from 'wdComponent/src/main/ets/viewmodel/ChannelViewModel'; | 9 | import ChannelViewModel from 'wdComponent/src/main/ets/viewmodel/ChannelViewModel'; |
| 10 | import { ALL, ImageKnifeComponent, ImageKnifeOption, NONE } from '@ohos/imageknife'; | 10 | import { ALL, ImageKnifeComponent, ImageKnifeOption, NONE } from '@ohos/imageknife'; |
| 11 | +import { ParamType, Tracking } from 'wdTracking/Index'; | ||
| 11 | 12 | ||
| 12 | const TAG = 'BottomNavigationComponent'; | 13 | const TAG = 'BottomNavigationComponent'; |
| 13 | PersistentStorage.persistProp('channelIds', ''); | 14 | PersistentStorage.persistProp('channelIds', ''); |
| @@ -21,7 +22,6 @@ let storage = LocalStorage.getShared(); | @@ -21,7 +22,6 @@ let storage = LocalStorage.getShared(); | ||
| 21 | @Entry(storage) | 22 | @Entry(storage) |
| 22 | @Component | 23 | @Component |
| 23 | export struct BottomNavigationComponent { | 24 | export struct BottomNavigationComponent { |
| 24 | - private isNewTopPage = true // TODO 顶导重构页面开关,false,则用原来的顶导 | ||
| 25 | @Provide bottomRectHeight: number = 0 | 25 | @Provide bottomRectHeight: number = 0 |
| 26 | @Provide topRectHeight: number = 0 | 26 | @Provide topRectHeight: number = 0 |
| 27 | @Provide isLayoutFullScreen: boolean = false | 27 | @Provide isLayoutFullScreen: boolean = false |
| @@ -87,28 +87,15 @@ export struct BottomNavigationComponent { | @@ -87,28 +87,15 @@ export struct BottomNavigationComponent { | ||
| 87 | autoRefresh: this.autoRefresh | 87 | autoRefresh: this.autoRefresh |
| 88 | }) | 88 | }) |
| 89 | } else { | 89 | } else { |
| 90 | - if (this.isNewTopPage) { | ||
| 91 | - TopNavigationComponentNew({ | ||
| 92 | - groupId: navItem.id, | ||
| 93 | - topNavList: navItem.topNavChannelList.filter(item => item.channelId != 2073), | ||
| 94 | - _currentNavIndex: $currentNavIndex, | ||
| 95 | - bottomNavIndex: index, | ||
| 96 | - currentBottomNavName: navItem.name, | ||
| 97 | - assignChannel: this.assignChannel, | ||
| 98 | - autoRefresh: this.autoRefresh | ||
| 99 | - }) | ||
| 100 | - } else { | ||
| 101 | - TopNavigationComponent({ | ||
| 102 | - groupId: navItem.id, | ||
| 103 | - topNavList: navItem.topNavChannelList.filter(item => item.channelId != 2073), | ||
| 104 | - _currentNavIndex: $currentNavIndex, | ||
| 105 | - navIndex: index, | ||
| 106 | - currentBottomNavName: navItem.name, | ||
| 107 | - assignChannel: this.assignChannel, | ||
| 108 | - autoRefresh: this.autoRefresh | ||
| 109 | - }) | ||
| 110 | - } | ||
| 111 | - | 90 | + TopNavigationComponentNew({ |
| 91 | + groupId: navItem.id, | ||
| 92 | + topNavList: navItem.topNavChannelList.filter(item => item.channelId != 2073), | ||
| 93 | + _currentNavIndex: $currentNavIndex, | ||
| 94 | + bottomNavIndex: index, | ||
| 95 | + currentBottomNavName: navItem.name, | ||
| 96 | + assignChannel: this.assignChannel, | ||
| 97 | + autoRefresh: this.autoRefresh | ||
| 98 | + }) | ||
| 112 | } | 99 | } |
| 113 | } | 100 | } |
| 114 | .tabBar(this.tabBarBuilder(navItem, index)) | 101 | .tabBar(this.tabBarBuilder(navItem, index)) |
| @@ -171,6 +158,14 @@ export struct BottomNavigationComponent { | @@ -171,6 +158,14 @@ export struct BottomNavigationComponent { | ||
| 171 | // .hitTestBehavior(HitTestMode.Block) | 158 | // .hitTestBehavior(HitTestMode.Block) |
| 172 | .onClick(() => { | 159 | .onClick(() => { |
| 173 | Logger.info(TAG, `onChange, index: ${index}`); | 160 | Logger.info(TAG, `onChange, index: ${index}`); |
| 161 | + Logger.info(TAG, `onChange, navItem: ${JSON.stringify(navItem)}`); | ||
| 162 | + // 底部bar埋点 | ||
| 163 | + const params: ParamType = { | ||
| 164 | + "pageName": navItem.pageName, | ||
| 165 | + "pageId": navItem.id, | ||
| 166 | + } | ||
| 167 | + Tracking.event("bar_click", params) | ||
| 168 | + | ||
| 174 | this.onBottomNavigationIndexChange(navItem, index) | 169 | this.onBottomNavigationIndexChange(navItem, index) |
| 175 | }) | 170 | }) |
| 176 | 171 | ||
| @@ -368,6 +363,15 @@ export struct BottomNavigationComponent { | @@ -368,6 +363,15 @@ export struct BottomNavigationComponent { | ||
| 368 | Logger.info(TAG, `setData, bottomNav.length: ${list.length}`); | 363 | Logger.info(TAG, `setData, bottomNav.length: ${list.length}`); |
| 369 | // 使用filter方法移除name为'服务'的项 | 364 | // 使用filter方法移除name为'服务'的项 |
| 370 | list = list.filter(item => item.name !== '服务'); | 365 | list = list.filter(item => item.name !== '服务'); |
| 366 | + list.forEach(item => { | ||
| 367 | + switch (item.name) { | ||
| 368 | + case '新闻': item.pageName = 'NEWS'; break; | ||
| 369 | + case '人民号': item.pageName = 'PEOPLE'; break; | ||
| 370 | + case '视频': item.pageName = 'VIDEOS'; break; | ||
| 371 | + case '我的': item.pageName = 'MY'; break; | ||
| 372 | + default : item.pageName = 'NEWS'; break; | ||
| 373 | + } | ||
| 374 | + }) | ||
| 371 | this.bottomNavList = list | 375 | this.bottomNavList = list |
| 372 | } | 376 | } |
| 373 | } | 377 | } |
| @@ -169,7 +169,6 @@ export struct VideoChannelPage { | @@ -169,7 +169,6 @@ export struct VideoChannelPage { | ||
| 169 | }, (item: TopNavDTO) => item.channelId + '') | 169 | }, (item: TopNavDTO) => item.channelId + '') |
| 170 | } | 170 | } |
| 171 | .indicator(false) | 171 | .indicator(false) |
| 172 | - .disableSwipe(true) | ||
| 173 | .loop(false) | 172 | .loop(false) |
| 174 | .width('100%') | 173 | .width('100%') |
| 175 | .height('100%') | 174 | .height('100%') |
| @@ -17,7 +17,7 @@ | @@ -17,7 +17,7 @@ | ||
| 17 | "name": "EntryAbility", // 这里不能改动,和后台推送有绑定 | 17 | "name": "EntryAbility", // 这里不能改动,和后台推送有绑定 |
| 18 | "srcEntry": "./ets/entryability/EntryAbility.ets", | 18 | "srcEntry": "./ets/entryability/EntryAbility.ets", |
| 19 | "description": "$string:EntryAbility_desc", | 19 | "description": "$string:EntryAbility_desc", |
| 20 | - "icon": "$media:app_icon", | 20 | + "icon": "$media:app_icon_layer", |
| 21 | "label": "$string:EntryAbility_label", | 21 | "label": "$string:EntryAbility_label", |
| 22 | "startWindowIcon": "$media:app_icon", | 22 | "startWindowIcon": "$media:app_icon", |
| 23 | "startWindowBackground": "$color:start_window_background", | 23 | "startWindowBackground": "$color:start_window_background", |
1015 Bytes
7.3 KB
-
Please register or login to post a comment