zhenghy

修改评论弹窗能够挡住导航

@@ -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 }