Showing
7 changed files
with
83 additions
and
60 deletions
| @@ -118,16 +118,15 @@ export struct CommentComponent { | @@ -118,16 +118,15 @@ export struct CommentComponent { | ||
| 118 | } | 118 | } |
| 119 | .margin({ left: 16 }) | 119 | .margin({ left: 16 }) |
| 120 | 120 | ||
| 121 | - Row() { | ||
| 122 | - Image($r('app.media.close_button')) | ||
| 123 | - .height(16) | ||
| 124 | - .width(3) | ||
| 125 | - .margin({ right: 16 }) | ||
| 126 | - .visibility(this.showCloseIcon ? Visibility.Visible : Visibility.Hidden) | ||
| 127 | - .onClick(() => { | ||
| 128 | - this.onCloseClick() | ||
| 129 | - }) | ||
| 130 | - } | 121 | + |
| 122 | + Image($r('app.media.close_button')) | ||
| 123 | + .height(16) | ||
| 124 | + .width(16) | ||
| 125 | + .margin({ right: 16 }) | ||
| 126 | + .visibility(this.showCloseIcon ? Visibility.Visible : Visibility.Hidden) | ||
| 127 | + .onClick(() => { | ||
| 128 | + this.onCloseClick() | ||
| 129 | + }) | ||
| 131 | 130 | ||
| 132 | } | 131 | } |
| 133 | .height(44) | 132 | .height(44) |
| @@ -213,7 +213,8 @@ export struct OperRowListView { | @@ -213,7 +213,8 @@ export struct OperRowListView { | ||
| 213 | } | 213 | } |
| 214 | .layoutWeight(1) | 214 | .layoutWeight(1) |
| 215 | .margin({ | 215 | .margin({ |
| 216 | - right: this.pageComponentType === 1 ? 22 : 0, | 216 | + right: this.pageComponentType === 1 ? 20 : 0, |
| 217 | + left: 16 | ||
| 217 | }) | 218 | }) |
| 218 | 219 | ||
| 219 | if (this.showCommentIcon) { | 220 | if (this.showCommentIcon) { |
| @@ -15,8 +15,7 @@ import { HttpUtils } from 'wdNetwork/Index'; | @@ -15,8 +15,7 @@ import { HttpUtils } from 'wdNetwork/Index'; | ||
| 15 | import { DateTimeUtils, WindowModel } from 'wdKit/Index'; | 15 | import { DateTimeUtils, WindowModel } from 'wdKit/Index'; |
| 16 | import { PlayerBottomView } from '../view/PlayerBottomView'; | 16 | import { PlayerBottomView } from '../view/PlayerBottomView'; |
| 17 | import { PlayerRightView } from '../view/PlayerRightView'; | 17 | import { PlayerRightView } from '../view/PlayerRightView'; |
| 18 | -import { CommentComponentPage } from '../view/CommentComponentPage'; | ||
| 19 | -import { window } from '@kit.ArkUI'; | 18 | +import { CommentDialogView } from '../view/CommentDialogView'; |
| 20 | import { DisplayDirection } from 'wdConstant/Index'; | 19 | import { DisplayDirection } from 'wdConstant/Index'; |
| 21 | 20 | ||
| 22 | const TAG = 'DetailPlayShortVideoPage'; | 21 | const TAG = 'DetailPlayShortVideoPage'; |
| @@ -39,7 +38,7 @@ export struct DetailPlayShortVideoPage { | @@ -39,7 +38,7 @@ export struct DetailPlayShortVideoPage { | ||
| 39 | @Provide followStatus: string = '0' // 关注状态 | 38 | @Provide followStatus: string = '0' // 关注状态 |
| 40 | @Provide isOpenDetail: boolean = false // 查看详情按钮点击 | 39 | @Provide isOpenDetail: boolean = false // 查看详情按钮点击 |
| 41 | @Provide isDragging: boolean = false // 拖动时间进度条 | 40 | @Provide isDragging: boolean = false // 拖动时间进度条 |
| 42 | - @Provide showCommentList: boolean = false | 41 | + @Consume showCommentList: boolean |
| 43 | @Consume displayDirection: DisplayDirection | 42 | @Consume displayDirection: DisplayDirection |
| 44 | @Consume @Watch('videoStatusChange') switchVideoStatus: boolean | 43 | @Consume @Watch('videoStatusChange') switchVideoStatus: boolean |
| 45 | @Consume @Watch('pageShowChange') pageShow: number | 44 | @Consume @Watch('pageShowChange') pageShow: number |
| @@ -225,15 +224,7 @@ export struct DetailPlayShortVideoPage { | @@ -225,15 +224,7 @@ export struct DetailPlayShortVideoPage { | ||
| 225 | .height('100%') | 224 | .height('100%') |
| 226 | .width('100%') | 225 | .width('100%') |
| 227 | 226 | ||
| 228 | - // .padding({ | ||
| 229 | - // top: this.displayDirection === DisplayDirection.VIDEO_HORIZONTAL ? 0 : this.topSafeHeight + 'px' | ||
| 230 | - // }) | ||
| 231 | - | ||
| 232 | - if (this.showCommentList) { | ||
| 233 | - CommentComponentPage({}) | ||
| 234 | - .position({ y: '100%' }) | ||
| 235 | - .markAnchor({ y: '100%' }) | ||
| 236 | - } | 227 | + CommentDialogView({ publishCommentModel: this.publishCommentModel }) |
| 237 | } | 228 | } |
| 238 | .height('100%') | 229 | .height('100%') |
| 239 | .width('100%') | 230 | .width('100%') |
| @@ -28,6 +28,7 @@ export struct DetailVideoListPage { | @@ -28,6 +28,7 @@ export struct DetailVideoListPage { | ||
| 28 | @Provide pageHide: number = -1 | 28 | @Provide pageHide: number = -1 |
| 29 | @Provide switchVideoStatus: boolean = true | 29 | @Provide switchVideoStatus: boolean = true |
| 30 | @Provide displayDirection: DisplayDirection = DisplayDirection.VERTICAL | 30 | @Provide displayDirection: DisplayDirection = DisplayDirection.VERTICAL |
| 31 | + @Provide showCommentList: boolean = false | ||
| 31 | @State data: ContentDetailDTO[] = [] | 32 | @State data: ContentDetailDTO[] = [] |
| 32 | @State currentIndex: number = 0 | 33 | @State currentIndex: number = 0 |
| 33 | @State netStatus: number | undefined = undefined // 存储网络状态用来展示缺省图 | 34 | @State netStatus: number | undefined = undefined // 存储网络状态用来展示缺省图 |
| @@ -184,8 +185,8 @@ export struct DetailVideoListPage { | @@ -184,8 +185,8 @@ export struct DetailVideoListPage { | ||
| 184 | center: { anchor: "__container__", align: VerticalAlign.Center }, | 185 | center: { anchor: "__container__", align: VerticalAlign.Center }, |
| 185 | middle: { anchor: "__container__", align: HorizontalAlign.Center } | 186 | middle: { anchor: "__container__", align: HorizontalAlign.Center } |
| 186 | }) | 187 | }) |
| 187 | - }else{ | ||
| 188 | - Column() { | 188 | + } else { |
| 189 | + Column() { | ||
| 189 | Swiper(this.swiperController) { | 190 | Swiper(this.swiperController) { |
| 190 | ForEach(this.data, (item: ContentDetailDTO, index: number) => { | 191 | ForEach(this.data, (item: ContentDetailDTO, index: number) => { |
| 191 | DetailPlayShortVideoPage({ | 192 | DetailPlayShortVideoPage({ |
| @@ -196,7 +197,8 @@ export struct DetailVideoListPage { | @@ -196,7 +197,8 @@ export struct DetailVideoListPage { | ||
| 196 | }) | 197 | }) |
| 197 | }, (item: ContentDetailDTO) => item.newsId + '') | 198 | }, (item: ContentDetailDTO) => item.newsId + '') |
| 198 | } | 199 | } |
| 199 | - .disableSwipe(this.displayDirection === DisplayDirection.VERTICAL || !this.showComment ? false : true) | 200 | + .disableSwipe(this.displayDirection === DisplayDirection.VERTICAL || this.showCommentList ? |
| 201 | + false : true) | ||
| 200 | .indicator(false) | 202 | .indicator(false) |
| 201 | .vertical(true) | 203 | .vertical(true) |
| 202 | .loop(false) | 204 | .loop(false) |
| @@ -219,8 +221,7 @@ export struct DetailVideoListPage { | @@ -219,8 +221,7 @@ export struct DetailVideoListPage { | ||
| 219 | // .padding({ | 221 | // .padding({ |
| 220 | // bottom: this.bottomSafeHeight + 'px' | 222 | // bottom: this.bottomSafeHeight + 'px' |
| 221 | // }) | 223 | // }) |
| 222 | - } | ||
| 223 | - | ||
| 224 | } | 224 | } |
| 225 | - | 225 | + |
| 226 | + } | ||
| 226 | } | 227 | } |
| @@ -45,13 +45,15 @@ export struct VideoChannelDetail { | @@ -45,13 +45,15 @@ export struct VideoChannelDetail { | ||
| 45 | @Consume barBackgroundColor: Color | 45 | @Consume barBackgroundColor: Color |
| 46 | private swiperController: SwiperController = new SwiperController() | 46 | private swiperController: SwiperController = new SwiperController() |
| 47 | @Provide showComment: boolean = false | 47 | @Provide showComment: boolean = false |
| 48 | - @Provide topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0 | ||
| 49 | @Provide windowWidth: number = AppStorage.get<number>('windowWidth') || 0 | 48 | @Provide windowWidth: number = AppStorage.get<number>('windowWidth') || 0 |
| 50 | @Provide windowHeight: number = AppStorage.get<number>('windowHeight') || 0 | 49 | @Provide windowHeight: number = AppStorage.get<number>('windowHeight') || 0 |
| 50 | + @Provide bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') || 0 | ||
| 51 | + @Provide topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0 | ||
| 51 | @Consume @Watch('pageShowChange') pageShow: number | 52 | @Consume @Watch('pageShowChange') pageShow: number |
| 52 | @Consume @Watch('pageHideChange') pageHide: number | 53 | @Consume @Watch('pageHideChange') pageHide: number |
| 53 | @Provide switchVideoStatus: boolean = true | 54 | @Provide switchVideoStatus: boolean = true |
| 54 | @Provide displayDirection: DisplayDirection = DisplayDirection.VERTICAL | 55 | @Provide displayDirection: DisplayDirection = DisplayDirection.VERTICAL |
| 56 | + @Provide showCommentList: boolean = false | ||
| 55 | @State data: ContentDetailDTO[] = [] | 57 | @State data: ContentDetailDTO[] = [] |
| 56 | @State currentIndex: number = 0 | 58 | @State currentIndex: number = 0 |
| 57 | @State interactDataList: InteractDataDTO[] = [] | 59 | @State interactDataList: InteractDataDTO[] = [] |
| @@ -267,8 +269,8 @@ export struct VideoChannelDetail { | @@ -267,8 +269,8 @@ export struct VideoChannelDetail { | ||
| 267 | }, (item: ContentDetailDTO) => item.newsId + '') | 269 | }, (item: ContentDetailDTO) => item.newsId + '') |
| 268 | } | 270 | } |
| 269 | .displayCount(1, true) | 271 | .displayCount(1, true) |
| 270 | - .disableSwipe(this.displayDirection === DisplayDirection.VERTICAL || !this.showComment ? false : true) | ||
| 271 | - .visibility(this.isMouted ? Visibility.Visible : Visibility.None) | 272 | + .disableSwipe(this.displayDirection === DisplayDirection.VERTICAL || this.showCommentList ? false : true) |
| 273 | + .visibility(this.isMouted ? Visibility.Visible : Visibility.Hidden) | ||
| 272 | .indicator(false) | 274 | .indicator(false) |
| 273 | .vertical(true) | 275 | .vertical(true) |
| 274 | .loop(false) | 276 | .loop(false) |
| @@ -6,44 +6,75 @@ import { | @@ -6,44 +6,75 @@ import { | ||
| 6 | import { CommentComponent } from '../../../../../wdComponent/src/main/ets/components/comment/view/CommentComponent' | 6 | import { CommentComponent } from '../../../../../wdComponent/src/main/ets/components/comment/view/CommentComponent' |
| 7 | import { OperRowListView } from '../../../../../wdComponent/src/main/ets/components/view/OperRowListView' | 7 | import { OperRowListView } from '../../../../../wdComponent/src/main/ets/components/view/OperRowListView' |
| 8 | 8 | ||
| 9 | + | ||
| 9 | @Component | 10 | @Component |
| 10 | export struct CommentDialogView { | 11 | export struct CommentDialogView { |
| 12 | + @Prop publishCommentModel: publishCommentModel | ||
| 13 | + @Consume windowWidth: number | ||
| 14 | + @Consume windowHeight: number | ||
| 15 | + @Consume bottomSafeHeight: number | ||
| 16 | + @Consume topSafeHeight: number | ||
| 17 | + @Consume contentDetailData: ContentDetailDTO | ||
| 18 | + @Consume @Watch('showCommentListChange') showCommentList: boolean | ||
| 19 | + @State dialogOffsetY: number = 0 // (this.windowHeight - this.windowWidth * 9 / 16) | ||
| 20 | + @State modifier: DrawModifier = new DrawModifier(); | ||
| 11 | private dialogController: CustomDialogController = new CustomDialogController({ | 21 | private dialogController: CustomDialogController = new CustomDialogController({ |
| 12 | - builder: this.commentBuilder(), | ||
| 13 | - autoCancel: true, | 22 | + builder: DetailDialog({ |
| 23 | + publishCommentModel: this.publishCommentModel, | ||
| 24 | + dialogOffsetY: $dialogOffsetY | ||
| 25 | + }), | ||
| 26 | + autoCancel: false, | ||
| 14 | customStyle: true, | 27 | customStyle: true, |
| 15 | alignment: DialogAlignment.Bottom, | 28 | alignment: DialogAlignment.Bottom, |
| 16 | - height: (this.windowHeight - this.windowWidth / 16 / 9) + 'px' as Dimension | 29 | + // onWillDismiss: (dismissDialogAction: DismissDialogAction) => { |
| 30 | + // this.showCommentList = false | ||
| 31 | + // dismissDialogAction.dismiss() | ||
| 32 | + // }, | ||
| 33 | + openAnimation: { duration: 0 }, | ||
| 34 | + closeAnimation: { duration: 0 }, | ||
| 17 | }) | 35 | }) |
| 18 | - @Provide windowWidth: number = AppStorage.get<number>('windowWidth') || 0 | ||
| 19 | - @Provide windowHeight: number = AppStorage.get<number>('windowHeight') || 0 | ||
| 20 | - @Consume contentDetailData: ContentDetailDTO | ||
| 21 | - @Consume showCommentList: boolean | ||
| 22 | - @State publishCommentModel: publishCommentModel = new publishCommentModel() | ||
| 23 | 36 | ||
| 24 | - aboutToAppear(): void { | 37 | + /** |
| 38 | + * 问题:弹窗从底部到上动画无法添加 | ||
| 39 | + */ | ||
| 25 | 40 | ||
| 26 | - this.publishCommentModel.targetId = String(this.contentDetailData?.newsId || '') | ||
| 27 | - this.publishCommentModel.targetRelId = String(this.contentDetailData?.reLInfo?.relId || '') | ||
| 28 | - this.publishCommentModel.targetTitle = this.contentDetailData?.newsTitle | ||
| 29 | - this.publishCommentModel.targetRelType = String(this.contentDetailData?.reLInfo?.relType || '') | ||
| 30 | - this.publishCommentModel.targetRelObjectId = String(this.contentDetailData?.reLInfo?.relObjectId || '') | ||
| 31 | - this.publishCommentModel.keyArticle = String(this.contentDetailData?.keyArticle || '') | ||
| 32 | - this.publishCommentModel.targetType = String(this.contentDetailData?.newsType || '') | ||
| 33 | - this.publishCommentModel.visitorComment = String(this.contentDetailData?.visitorComment || '') | 41 | + showCommentListChange(val: boolean) { |
| 42 | + if (this.showCommentList) { | ||
| 43 | + this.dialogController.open() | ||
| 44 | + console.log('open') | ||
| 45 | + // animateTo({ duration: 10000, expectedFrameRateRange: { min: 60, max: 60, expected: 60 } }, () => { | ||
| 46 | + // this.dialogOffsetY = 500 | ||
| 47 | + // this.modifier.invalidate() | ||
| 48 | + // }) | ||
| 49 | + } else { | ||
| 50 | + this.dialogController.close() | ||
| 51 | + console.log('close') | ||
| 52 | + } | ||
| 53 | + } | ||
| 34 | 54 | ||
| 35 | - this.dialogController.open() | 55 | + build() { |
| 36 | } | 56 | } |
| 57 | +} | ||
| 58 | + | ||
| 59 | +@CustomDialog | ||
| 60 | +export struct DetailDialog { | ||
| 61 | + controller: CustomDialogController | ||
| 62 | + @Prop publishCommentModel: publishCommentModel | ||
| 63 | + @Link dialogOffsetY: number | ||
| 64 | + @Consume contentDetailData: ContentDetailDTO | ||
| 65 | + @Consume showCommentList: boolean | ||
| 66 | + @Consume windowWidth: number | ||
| 67 | + @Consume windowHeight: number | ||
| 37 | 68 | ||
| 38 | - @Builder | ||
| 39 | - commentBuilder() { | 69 | + build() { |
| 40 | Column() { | 70 | Column() { |
| 41 | CommentComponent({ | 71 | CommentComponent({ |
| 42 | publishCommentModel: this.publishCommentModel, | 72 | publishCommentModel: this.publishCommentModel, |
| 43 | showCloseIcon: true, | 73 | showCloseIcon: true, |
| 44 | onCloseClick: () => { | 74 | onCloseClick: () => { |
| 45 | - this.dialogController.close() | 75 | + console.log('onCloseClick') |
| 46 | this.showCommentList = false | 76 | this.showCommentList = false |
| 77 | + this.controller.close() | ||
| 47 | } | 78 | } |
| 48 | }) | 79 | }) |
| 49 | .layoutWeight(1) | 80 | .layoutWeight(1) |
| @@ -60,13 +91,9 @@ export struct CommentDialogView { | @@ -60,13 +91,9 @@ export struct CommentDialogView { | ||
| 60 | } | 91 | } |
| 61 | }) | 92 | }) |
| 62 | } | 93 | } |
| 94 | + .height(this.windowHeight - this.windowWidth * 9 / 16 + 'px') | ||
| 95 | + // .margin({ top: this.dialogOffsetY + 'px' }) | ||
| 63 | .zIndex(1000) | 96 | .zIndex(1000) |
| 64 | .backgroundColor(Color.White) | 97 | .backgroundColor(Color.White) |
| 65 | - .height('60%') | ||
| 66 | - } | ||
| 67 | - | ||
| 68 | - build() { | ||
| 69 | - | ||
| 70 | - | ||
| 71 | } | 98 | } |
| 72 | } | 99 | } |
| @@ -68,6 +68,8 @@ export struct PlayerProgressView { | @@ -68,6 +68,8 @@ export struct PlayerProgressView { | ||
| 68 | console.log('slider onChange:', value, mode) | 68 | console.log('slider onChange:', value, mode) |
| 69 | 69 | ||
| 70 | }) | 70 | }) |
| 71 | - }.visibility(this.isOpenDetail ? Visibility.None : Visibility.Visible) | 71 | + } |
| 72 | + .margin({ top: 40 }) | ||
| 73 | + .visibility(this.isOpenDetail ? Visibility.None : Visibility.Visible) | ||
| 72 | } | 74 | } |
| 73 | } | 75 | } |
-
Please register or login to post a comment