视频评论弹窗调试

zhenghy
Commit 5f7d4ae0dc0f3fd7b4d8640a08a36fa0d18310e0 5f7d4ae0 1 parent a88eb374
Showing 4 changed files with 68 additions and 41 deletions
sight_harmony/features/wdComponent/src/main/ets/components/comment/view/CommentComponent.ets
sight_harmony/features/wdComponent/src/main/ets/components/view/OperRowListView.ets
sight_harmony/features/wdDetailPlayShortVideo/src/main/ets/view/CommentComponentPage.ets → sight_harmony/features/wdDetailPlayShortVideo/src/main/ets/view/CommentDialogView.ets
sight_harmony/features/wdDetailPlayShortVideo/src/main/resources/base/media/close_button.png
--- a/sight_harmony/features/wdComponent/src/main/ets/components/comment/view/CommentComponent.ets
View file @5f7d4ae
+++ b/sight_harmony/features/wdComponent/src/main/ets/components/comment/view/CommentComponent.ets
View file @5f7d4ae
@@ -19,6 +19,9 @@ const testString = '因为读书的人\n是低着头向上看的人\n身处一
 @Preview
 @Component
 export struct CommentComponent {
+  private onCloseClick = () => {
+  }
+  @Prop showCloseIcon?: boolean = false
   @State hasMore: boolean = true;
   @State currentPage: number = 1;
   @State isComments: boolean = true
@@ -29,13 +32,12 @@ export struct CommentComponent {
   historyOffset: number = 0; // 上次浏览到列表距离顶端的偏移量offset
   @State allDatas: LazyDataSource<commentItemModel> = new LazyDataSource();
   @State dialogController: CustomDialogController | null = null;
-
   // @State private browSingModel: commentListModel = new commentListModel()
   // 是否为固定高度模式。true时，里面上拉加载更多生效，外层不能包Scroll。
   // false时，外层实现加载更多，并通过reachEndIncreament通知开发加载更多，reachEndLoadMoreFinish 通知上层加载更多完成
   fixedHeightMode: boolean = false
-  @Prop @Watch("parentOnReachEnd") reachEndIncreament : number = 0
+  @Prop @Watch("parentOnReachEnd") reachEndIncreament: number = 0
   reachEndLoadMoreFinish?: () => void
   // 在自定义组件即将析构销毁时将dialogControlle置空
@@ -102,6 +104,7 @@ export struct CommentComponent {
   /*标题：全部评论*/
   @Builder
   titleHeader() {
+
     Row() {
       Row() {
         Image($r('app.media.redLine'))
@@ -112,18 +115,30 @@ export struct CommentComponent {
           .fontColor($r('app.color.color_222222'))
           .fontWeight(FontWeight.Medium)
           .margin({ left: 5 })
-
       }
       .margin({ left: 16 })
-      .onClick(() => {
-        // this.allDatas.push(new commentItemModel())
-        // this.allDatas.addFirstItem(new commentItemModel())
-        // this.allDatas.reloadData();
-      })
-    }.height(44)
+      Row() {
+        Image($r('app.media.close_button'))
+          .height(16)
+          .width(3)
+          .margin({ right: 16 })
+          .visibility(this.showCloseIcon ? Visibility.Visible : Visibility.Hidden)
+          .onClick(() => {
+            this.onCloseClick()
+          })
+      }
+
+    }
+    .height(44)
     .width('100%')
-    .justifyContent(FlexAlign.SpaceBetween);
+    .justifyContent(FlexAlign.SpaceBetween)
+    .onClick(() => {
+      // this.allDatas.push(new commentItemModel())
+      // this.allDatas.addFirstItem(new commentItemModel())
+      // this.allDatas.reloadData();
+    })
+
   }
   /*1级评论作为titleHeader*/
@@ -200,7 +215,7 @@ export struct CommentComponent {
           }
         }
       }
-      .margin({bottom: 10})
+      .margin({ bottom: 10 })
       .onReachEnd(() => {
         if (!this.fixedHeightMode) {
           return
@@ -209,7 +224,8 @@ export struct CommentComponent {
           this.getData()
         }
       })
-      .enableScrollInteraction(this.fixedHeightMode ? true: false)
+      .enableScrollInteraction(this.fixedHeightMode ? true : false)
+
       // .nestedScroll({
       //   scrollForward: NestedScrollMode.PARENT_FIRST,
       //   scrollBackward: NestedScrollMode.SELF_FIRST
--- a/sight_harmony/features/wdComponent/src/main/ets/components/view/OperRowListView.ets
View file @5f7d4ae
+++ b/sight_harmony/features/wdComponent/src/main/ets/components/view/OperRowListView.ets
View file @5f7d4ae
@@ -46,11 +46,11 @@ const TAG = 'OperRowListView';
 @Preview
 @Component
 export struct OperRowListView {
-  private onBack: () => void = () => {
+  private onBack = () => {
   }
-  private onCommentFocus: () => void = () => {
+  private onCommentFocus = () => {
   }
-  private onCommentIconClick: () => void = () => {
+  private onCommentIconClick = () => {
   }
   @Prop @Watch('onDetailUpdated') contentDetailData: ContentDetailDTO // 稿件详情
   /**
@@ -64,7 +64,12 @@ export struct OperRowListView {
    * 7：图集详情页
    */
   @Prop componentType: number = 1 //1: 底部栏目样式    2: 新闻页中间位置样式  3:动态Tab内容下的互动入口
-  @Prop pageComponentType?: number = -1 //1:视频详情页  2：竖屏直播页 3：图集 4： 横屏直播页
+  /**
+   * 用于区分页面类型，在哪个页面嵌套就传相应的值
+   * 1:视频详情页  2：竖屏直播页 3：图集 4：横屏直播页
+   */
+  @Prop pageComponentType?: number = -1
+  @Prop showBackIcon?: boolean = true
   @State likesStyle: number = this.contentDetailData.likesStyle // 赞样式 1红心(点赞) 2大拇指(祈福) 3蜡烛(默哀) 4置空
   @Prop operationButtonList?: string[] = ['comment', 'collect', 'share'] // 组件展示条件
   @State needLike: boolean = true
@@ -131,12 +136,11 @@ export struct OperRowListView {
   build() {
     // 视频详情页
-
     Column() {
       Image($r('app.media.ic_news_detail_division'))
         .width('100%')
         .height($r('app.float.margin_1'))
-        .margin({bottom: -2})
+        .margin({ bottom: -2 })
       Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
         // AudioDialog()
@@ -149,14 +153,16 @@ export struct OperRowListView {
               .aspectRatio(1)
               .interpolation(ImageInterpolation.High)
           }
+          .width(48)
           .hoverEffect(HoverEffect.Scale)
+          .visibility(this.showBackIcon ? Visibility.Visible : Visibility.None)
           .onClick(() => {
             if (this.onBack) {
               this.onBack()
             }
             router.back();
           })
-          .width(48)
+
           if (this.contentDetailData?.newsId) {
             ForEach(this.operationButtonList, (item: string, index: number) => {
--- a/sight_harmony/features/wdDetailPlayShortVideo/src/main/ets/view/CommentComponentPage.ets → sight_harmony/features/wdDetailPlayShortVideo/src/main/ets/view/CommentDialogView.ets
View file @5f7d4ae
+++ b/sight_harmony/features/wdDetailPlayShortVideo/src/main/ets/view/CommentComponentPage.ets → sight_harmony/features/wdDetailPlayShortVideo/src/main/ets/view/CommentDialogView.ets
View file @5f7d4ae
@@ -4,12 +4,19 @@ import {
   publishCommentModel
 } from '../../../../../wdComponent/src/main/ets/components/comment/model/PublishCommentModel'
 import { CommentComponent } from '../../../../../wdComponent/src/main/ets/components/comment/view/CommentComponent'
-
 import { OperRowListView } from '../../../../../wdComponent/src/main/ets/components/view/OperRowListView'
 @Component
-export struct CommentComponentPage {
-  scroller: Scroller = new Scroller()
+export struct CommentDialogView {
+  private dialogController: CustomDialogController = new CustomDialogController({
+    builder: this.commentBuilder(),
+    autoCancel: true,
+    customStyle: true,
+    alignment: DialogAlignment.Bottom,
+    height: (this.windowHeight - this.windowWidth / 16 / 9) + 'px' as Dimension
+  })
+  @Provide windowWidth: number = AppStorage.get<number>('windowWidth') || 0
+  @Provide windowHeight: number = AppStorage.get<number>('windowHeight') || 0
   @Consume contentDetailData: ContentDetailDTO
   @Consume showCommentList: boolean
   @State publishCommentModel: publishCommentModel = new publishCommentModel()
@@ -24,31 +31,25 @@ export struct CommentComponentPage {
     this.publishCommentModel.keyArticle = String(this.contentDetailData?.keyArticle || '')
     this.publishCommentModel.targetType = String(this.contentDetailData?.newsType || '')
     this.publishCommentModel.visitorComment = String(this.contentDetailData?.visitorComment || '')
+
+    this.dialogController.open()
   }
-  build() {
+  @Builder
+  commentBuilder() {
     Column() {
-      Scroll(this.scroller) {
-        Stack() {
-          CommentComponent({
-            publishCommentModel: this.publishCommentModel
-          })
-          Image($r("app.media.ic_close_black"))
-            .width(20)
-            .height(20)
-            .onClick(() => {
-              this.showCommentList = false
-            })
-            .margin({ top: 10, right: 30 })
-            .position({ x: '100%' })
-            .markAnchor({ x: '100%' })
-
+      CommentComponent({
+        publishCommentModel: this.publishCommentModel,
+        showCloseIcon: true,
+        onCloseClick: () => {
+          this.dialogController.close()
+          this.showCommentList = false
         }
-      }
-      .layoutWeight(1)
-
+      })
+        .layoutWeight(1)
       OperRowListView({
         componentType: 1,
+        showBackIcon: false,
         operationButtonList: ['comment', 'like', 'collect', 'share'],
         contentDetailData: this.contentDetailData,
         publishCommentModel: this.publishCommentModel,
@@ -62,6 +63,10 @@ export struct CommentComponentPage {
     .zIndex(1000)
     .backgroundColor(Color.White)
     .height('60%')
+  }
+
+  build() {
+
   }
 }
--- a/sight_harmony/features/wdDetailPlayShortVideo/src/main/resources/base/media/close_button.png 0 → 100644
View file @5f7d4ae
+++ b/sight_harmony/features/wdDetailPlayShortVideo/src/main/resources/base/media/close_button.png 0 → 100644
View file @5f7d4ae