稿件底部评论点赞组件封装完善

@@ -12,71 +12,47 @@ import {
 import router from '@ohos.router';
 import inputMethod from '@ohos.inputMethod';
 import { MultiPictureDetailViewModel } from '../../viewmodel/MultiPictureDetailViewModel';
-import {  LikeComponent } from './LikeComponent';
-import {  CommentTabComponent, CommentIconComponent,  } from '../comment/view/CommentTabComponent';
+import { LikeComponent } from './LikeComponent';
+import { CommentTabComponent, CommentIconComponent, } from '../comment/view/CommentTabComponent';
 import { publishCommentModel } from '../comment/model/PublishCommentModel'
-
-// import {  CommentCustomDialog } from '../comment/view/CommentCustomDialog';
 import { HttpUrlUtils } from 'wdNetwork/Index';
 import { WDRouterPage, WDRouterRule } from 'wdRouter/Index';
 import { PageRepository } from '../../repository/PageRepository';
 import { SpConstants } from 'wdConstant/Index';
 
-export interface OperationItem {
-  icon: Resource;
-  icon_check?: Resource;
-  text: string | Resource;
-  num?: number; // 个数
-}
-
 const TAG = 'OperRowListView';
 
-// @Preview
-@Entry
+/**
+ * 稿件详情底部通栏组件：包含返回、评论、点赞、收藏、分享
+ * 上层传值：
+ * 1、（必传）    contentDetailData---稿件详情
+ * 2、（非必传）  operationButtonList---组件展示条件，['comment', 'like', 'collect', 'share']，需要展示什么传什么
+ * comment--评论；like--点赞；collect--收藏；share--分享；
+ *
+ * 传值示例：
+   OperRowListView({
+     contentDetailData: this.contentDetailData[0],
+     operationButtonList: ['comment', 'like', 'collect', 'share']
+   })
+ */
+@Preview
 @Component
 export struct OperRowListView {
-  // private contentDetailData: ContentDetailDTO  = {} as ContentDetailDTO
-  // @Prop contentDetailData: ContentDetailDTO
-  @State contentDetailData: ContentDetailDTO = {} as ContentDetailDTO
-  @State interactData: InteractDataDTO  = {} as InteractDataDTO
+  @Prop contentDetailData: ContentDetailDTO // 稿件详情
+  @State operationButtonList: string[] = ['comment', 'like', 'collect', 'share'] // 组件展示条件
+  // @State contentDetailData: ContentDetailDTO = {} as ContentDetailDTO
+  @State interactData: InteractDataDTO = {} as InteractDataDTO
   @State newsStatusOfUser: batchLikeAndCollectResult | undefined = undefined // 点赞、收藏状态
   @State likeBean: Record<string, string> = {}
   @State publishCommentModel: publishCommentModel = new publishCommentModel()
 
-  @State operationList: OperationItem[] = [
-    {
-      icon: $r('app.media.ic_comment'),
-      text: "评论",
-    },
-    {
-      icon: $r('app.media.ic_like_uncheck'),
-      icon_check: $r('app.media.ic_like_check'),
-      text: "点赞",
-    },
-    {
-      icon: $r('app.media.ic_collect_uncheck'),
-      icon_check: $r('app.media.ic_collect_check'),
-      text: "收藏",
-    },
-    {
-      icon: $r('app.media.ic_share'),
-      text: "分享"
-    }
-  ]
-
   async aboutToAppear() {
     const user_id = await SPHelper.default.get(SpConstants.USER_ID, '')
     if (user_id) {
       this.getInteractDataStatus()
     }
-    this.queryContentInteractCount()
+    await this.queryContentInteractCount()
     // 点赞需要数据
-    // this.data['userName'] = '人民日报网友2kD2xW'
-    // this.data['contentType'] = '8'  //必须
-    // this.data['title'] = '开创两校交流先河！克罗地亚教育代表团访问同济大学'
-    // this.data['userHeaderUrl'] = ""
-    // this.data['channelId'] = "2059"  //必须
-    // this.data['status'] = "1"  //必须
     this.likeBean['contentId'] = this.contentDetailData.newsId + ''
     this.likeBean['userName'] = this.contentDetailData.userInfo?.userName + ''
     this.likeBean['contentType'] = this.contentDetailData.newsType + ''
@@ -86,294 +62,137 @@ export struct OperRowListView {
     console.info(TAG, 'contentDetailData----', JSON.stringify(this.contentDetailData))
     console.info(TAG, 'likeBean----', JSON.stringify(this.likeBean))
     // 评论需要数据
-    this.publishCommentModel.targetId  = this.contentDetailData.newsId + ''
-    this.publishCommentModel.targetRelId  =  this.contentDetailData.reLInfo?.relId + ''
-    this.publishCommentModel.targetTitle  = this.contentDetailData.newsTitle + ''
-    this.publishCommentModel.targetRelType  = this.contentDetailData.reLInfo?.relType + ''
-    this.publishCommentModel.targetRelObjectId  = this.contentDetailData.reLInfo?.relObjectId + ''
-    this.publishCommentModel.keyArticle  = this.contentDetailData.keyArticle + ''
-    this.publishCommentModel.targetType  = this.contentDetailData.newsType + ''
-    this.publishCommentModel.totalCommentNumer  = '10'
+    this.publishCommentModel.targetId = this.contentDetailData.newsId + ''
+    this.publishCommentModel.targetRelId = this.contentDetailData.reLInfo?.relId + ''
+    this.publishCommentModel.targetTitle = this.contentDetailData.newsTitle + ''
+    this.publishCommentModel.targetRelType = this.contentDetailData.reLInfo?.relType + ''
+    this.publishCommentModel.targetRelObjectId = this.contentDetailData.reLInfo?.relObjectId + ''
+    this.publishCommentModel.keyArticle = this.contentDetailData.keyArticle + ''
+    this.publishCommentModel.targetType = this.contentDetailData.newsType + ''
   }
 
   build() {
-    Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems:ItemAlign.Center }){
+    Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
       Row() {
         Column() {
-          // Image($r('app.media.icon_arrow_left_white'))
           Image($r('app.media.icon_arrow_left'))
             .width(24)
             .height(24)
             .aspectRatio(1)
             .interpolation(ImageInterpolation.High)
         }
-        .margin({
-          top: 0,
-          left: 8,
-          right: 8,
-          bottom: 0
-        })
-        .alignItems(HorizontalAlign.Center)
         .hoverEffect(HoverEffect.Scale)
         .onClick(() => {
           router.back();
         })
-        Column() {
-          /*评论组件*/
-        /*  CommentCustomDialog({
-            placeHolderText: '说两句'
-          })*/
-          if (this.publishCommentModel?.targetId) {
-            CommentTabComponent({publishCommentModel: this.publishCommentModel})
-            CommentIconComponent({publishCommentModel: this.publishCommentModel})
+        .width(42)
+
+        ForEach(this.operationButtonList, (item: string, index: number) => {
+          if (item == 'comment') {
+            this.builderComment()
+          } else if (item == 'like') {
+            this.builderLike()
+          } else if (item == 'collect') {
+            this.builderCollect()
+          } else if (item == 'share') {
+            this.builderShare()
+          } else {
           }
-        }
-        /*TextInput({placeholder:'说两句...'})
-          .placeholderColor('#999999')
-          .placeholderFont(
-            {
-              size: 12,
-              weight: 400,
-              family: 'PingFang SC-Regular'
-            }
-          )
-          .caretColor('#1A1A1A')
-          .backgroundColor('#1A1A1A')
-          .width('61.5%')
-          .height(30)
-          .borderRadius(0)
-          .onClick(() => {
-            this.buildInputMethod()
-          })*/
+        })
       }
-      // .width('45.5%')
-      .alignItems(VerticalAlign.Center)
+      .width('100%')
       .justifyContent(FlexAlign.Start)
-      Flex({ justifyContent: FlexAlign.SpaceAround, alignItems:ItemAlign.Center }) {
-        ForEach(this.operationList, (item: OperationItem, index: number) => {
-          this.buildOperationItem(item, index)
-        }, (item: OperationItem) => JSON.stringify(item))
-      }
-      .width('54.5%')
     }
     .width('100%')
-    .height(50)
-    // .backgroundColor(Color.Black)
     .backgroundColor(Color.White)
-    .margin({
-      bottom: 20
+    .padding({
+      top: 10,
+      bottom: 50
     })
   }
+
   /**
-   * 组件项
-   *
-   * @param programmeBean item 组件项
+   * 评论组件
    */
   @Builder
-  buildOperationItem(item: OperationItem, index: number) {
+  builderComment() {
     Column() {
-      if (item.text === '点赞') {
-        /*点赞组件*/
-        if (this.likeBean?.contentId) {
-          LikeComponent({
-            data: this.likeBean
-          })
-        }
-
-      /*  RelativeContainer()  {
-          Row() {
-            Image(this.newsStatusOfUser?.likeStatus == '1' ? item.icon_check : item.icon)
-              .width(24)
-              .height(24)
-              .aspectRatio(1)
-              .interpolation(ImageInterpolation.High)
-              .onClick(() => {
-                this.toggleLikeStatus()
-                console.log('点赞_111', JSON.stringify(this.contentDetailData))
-              })
-          }
-          .alignRules({
-            center: { anchor: '__container__', align: VerticalAlign.Center },
-            middle: { anchor: '__container__', align: HorizontalAlign.Center }
-          })
-          .id(`e_row1_${index}`)
-          if(this.interactData?.likeNum > 0) {
-            Row() {
-              Image($r('app.media.corner_mark'))
-                .width(25)
-                .height(12)
-                .interpolation(ImageInterpolation.High)
-            }
-            .alignRules({
-              top: { anchor: `e_row1_${index}`, align: VerticalAlign.Top },
-              left: { anchor: `e_row1_${index}`, align: HorizontalAlign.Center }
-            })
-            .id(`e_row2_${index}`)
-
-            Row() {
-              Text(`${this.interactData?.likeNum}`)
-                .fontSize(8)
-                .textAlign(TextAlign.Center)
-                .fontColor(Color.White)
-                .lineHeight(12)
-            }
-            .alignRules({
-              top: { anchor: `e_row2_${index}`, align: VerticalAlign.Top },
-              middle: { anchor: `e_row2_${index}`, align: HorizontalAlign.Center }
-            })
-            .id(`e_row3_${index}`)
-          }
-        }
-        .id(`e_icon_${index}`)*/
-      } else if (item.text === '收藏') {
-
-        RelativeContainer()  {
-          Row() {
-            Image(this.newsStatusOfUser?.collectStatus == 1 ? item.icon_check : item.icon)
-              .width(24)
-              .height(24)
-              .aspectRatio(1)
-              .interpolation(ImageInterpolation.High)
-              .onClick(() => {
-                this.toggleCollectStatus()
-              })
-          }
-          .alignRules({
-            center: { anchor: '__container__', align: VerticalAlign.Center },
-            middle: { anchor: '__container__', align: HorizontalAlign.Center }
-          })
-          .id(`e_row1_${index}`)
-          if(this.interactData?.collectNum > 0) {
-            Row() {
-              Image($r('app.media.corner_mark'))
-                .width(25)
-                .height(12)
-                .interpolation(ImageInterpolation.High)
-            }
-            .alignRules({
-              top: { anchor: `e_row1_${index}`, align: VerticalAlign.Top },
-              left: { anchor: `e_row1_${index}`, align: HorizontalAlign.Center }
-            })
-            .id(`e_row2_${index}`)
-
-            Row() {
-              Text(`${this.interactData?.collectNum}`)
-                .fontSize(8)
-                .textAlign(TextAlign.Center)
-                .fontColor(Color.White)
-                .lineHeight(12)
-            }
-            .alignRules({
-              top: { anchor: `e_row2_${index}`, align: VerticalAlign.Top },
-              middle: { anchor: `e_row2_${index}`, align: HorizontalAlign.Center }
-            })
-            .id(`e_row3_${index}`)
-          }
-        }
-        .id(`e_icon_${index}`)
-      }  else if (item.text === '评论') {
-       /* RelativeContainer()  {
-          Row() {
-            Image(item.icon)
-              .width(24)
-              .height(24)
-              .aspectRatio(1)
-              .interpolation(ImageInterpolation.High)
-              .onClick((event: ClickEvent) => {
-                ToastUtils.showToast('评论为公共方法，待开发', 1000);
-              })
-          }
-          .alignRules({
-            center: { anchor: '__container__', align: VerticalAlign.Center },
-            middle: { anchor: '__container__', align: HorizontalAlign.Center }
-          })
-          .id(`e_row1_${index}`)
-          if(this.interactData?.commentNum > 0) {
-            Row() {
-              Image($r('app.media.corner_mark'))
-                .width(25)
-                .height(12)
-                .interpolation(ImageInterpolation.High)
-            }
-            .alignRules({
-              top: { anchor: `e_row1_${index}`, align: VerticalAlign.Top },
-              left: { anchor: `e_row1_${index}`, align: HorizontalAlign.Center }
-            })
-            .id(`e_row2_${index}`)
-
-            Row() {
-              Text(`${this.interactData?.commentNum}`)
-                .fontSize(8)
-                .textAlign(TextAlign.Center)
-                .fontColor(Color.White)
-                .lineHeight(12)
-            }
-            .alignRules({
-              top: { anchor: `e_row2_${index}`, align: VerticalAlign.Top },
-              middle: { anchor: `e_row2_${index}`, align: HorizontalAlign.Center }
-            })
-            .id(`e_row3_${index}`)
-          }
-        }
-        .id(`e_icon_${index}`)*/
-      } else {
-        RelativeContainer()  {
-          Row() {
-            Image(item.icon)
-              .width(24)
-              .height(24)
-              .aspectRatio(1)
-              .interpolation(ImageInterpolation.High)
-              .onClick((event: ClickEvent) => {
-                ToastUtils.showToast('分享为公共方法，待开发', 1000);
-              })
-          }
-          .alignRules({
-            center: { anchor: '__container__', align: VerticalAlign.Center },
-            middle: { anchor: '__container__', align: HorizontalAlign.Center }
-          })
-          .id(`e_row1_${index}`)
-        }
-        .id(`e_icon_${index}`)
+      if (this.publishCommentModel?.targetId) {
+        CommentTabComponent({ publishCommentModel: this.publishCommentModel })
       }
+    }
+    .flexGrow(1)
 
+    Column() {
+      if (this.publishCommentModel?.targetId) {
+        CommentIconComponent({ publishCommentModel: this.publishCommentModel })
+      }
     }
-    .margin(5)
-    .alignItems(HorizontalAlign.Center)
-    .hoverEffect(HoverEffect.Scale)
+    .width(46)
   }
 
   /**
-   * 输入法
+   * 点赞组件
    */
+  @Builder
+  builderLike() {
+    Column() {
+      if (this.likeBean?.contentId) {
+        LikeComponent({
+          data: this.likeBean
+        })
+      }
+    }
+    .width(42)
+  }
 
-  private buildInputMethod() {
-    let im = inputMethod.getCurrentInputMethod();
-    let prop: InputMethodProperty = {
-      packageName: im.packageName,
-      methodId: im.methodId,
-      name: im.name,
-      id: im.id,
-      extra: {}
+  /**
+   * 收藏组件
+   */
+  @Builder
+  builderCollect() {
+    Column() {
+      Stack({ alignContent: Alignment.TopEnd }) {
+        Image(this.newsStatusOfUser?.collectStatus == 1 ? $r('app.media.ic_collect_check') : $r('app.media.iv_live_comment_collect_un'))
+          .width(24)
+          .height(24)
+          .interpolation(ImageInterpolation.High)
+        /*Text(`${this.interactData?.collectNum}`)
+          .fontSize(8)
+          .fontColor(Color.White)
+          .height(12)
+          .margin({ left: 6 })
+          .backgroundImage($r('app.media.comment_icon_number'))
+          .offset({
+            x: 12
+          })*/
+      }
+      .onClick(() => {
+        this.toggleCollectStatus()
+      })
     }
-    try{
-      inputMethod.switchInputMethod(prop, (err, result) => {
-        if (err !== undefined) {
-          console.error('Failed to switchInputMethod: ' + JSON.stringify(err));
-          return;
-        }
-        if (result) {
-          console.info('Succeeded in switching inputmethod.');
-        } else {
-          console.error('Failed to switchInputMethod.');
-        }
-      });
-    } catch(err) {
-      console.error('Failed to switchInputMethod: ' + JSON.stringify(err));
+    .width(42)
+  }
+
+  /**
+   * 分享组件
+   */
+  @Builder
+  builderShare() {
+    Column() {
+      Image($r('app.media.iv_live_comment_share'))
+        .width(24)
+        .height(24)
+        .aspectRatio(1)
+        .interpolation(ImageInterpolation.High)
+        .onClick((event: ClickEvent) => {
+          ToastUtils.showToast('分享为公共方法，待开发', 1000);
+        })
     }
+    .width(42)
   }
 
-  // 已登录->查询用户对作品点赞、收藏状态
+  // 已登录->查询用户对作品收藏状态
   private async getInteractDataStatus() {
     try {
       const params: batchLikeAndCollectParams = {
@@ -384,44 +203,20 @@ export struct OperRowListView {
           }
         ]
       }
-      console.error(TAG, JSON.stringify(this.contentDetailData))
+      // console.info(TAG, '查询用户对作品收藏11', JSON.stringify(params))
       let data = await MultiPictureDetailViewModel.getInteractDataStatus(params)
-      console.error(TAG, '查询用户对作品点赞、收藏状态', JSON.stringify(data))
+      // console.info(TAG, '查询用户对作品收藏22', JSON.stringify(data))
       this.newsStatusOfUser = data[0];
-      Logger.info(TAG, `newsStatusOfUser：${JSON.stringify(this.newsStatusOfUser)}`)
     } catch (exception) {
-      console.error(TAG, JSON.stringify(exception))
+      // console.error(TAG, JSON.stringify(exception))
     }
   }
 
   /**
-   * 点赞、取消点赞
-   */
-  async toggleLikeStatus() {
-    // 未登录，跳转登录
-    const user_id = await SPHelper.default.get(SpConstants.USER_ID, '')
-    if (!user_id) {
-      WDRouterRule.jumpWithPage(WDRouterPage.loginPage)
-      return
-    }
-    const params: postExecuteLikeParams = {
-      status: this.newsStatusOfUser?.likeStatus === '1' ? '0' : '1',
-      contentId: this.contentDetailData?.newsId + '',
-      contentType: this.contentDetailData?.newsType + '',
-    }
-    PageRepository.postExecuteLike(params).then(res => {
-      console.log(TAG, '点赞、取消点赞', 'toggleLikeStatus==',)
-      if (this.newsStatusOfUser) {
-        this.newsStatusOfUser.likeStatus = this.newsStatusOfUser?.likeStatus === '1' ? '0' : '1'
-        this.queryContentInteractCount()
-      }
-
-    })
-  }
-  /**
    * 收藏、取消收藏
    */
   async toggleCollectStatus() {
+    // console.log(TAG, '收藏--')
     // 未登录，跳转登录
     const user_id = await SPHelper.default.get(SpConstants.USER_ID, '')
     if (!user_id) {
@@ -437,7 +232,7 @@ export struct OperRowListView {
 
     }
     PageRepository.postExecuteCollectRecord(params).then(res => {
-      console.log(TAG, '收藏、取消收藏','toggleLikeStatus==',)
+      // console.log(TAG, '收藏、取消收藏', 'toggleLikeStatus==',)
       if (this.newsStatusOfUser) {
         this.newsStatusOfUser.collectStatus = this.newsStatusOfUser?.collectStatus === 1 ? 0 : 1
         this.queryContentInteractCount()
@@ -450,7 +245,7 @@ export struct OperRowListView {
    * 查询点赞、收藏数量
    */
   queryContentInteractCount() {
-    console.error(TAG,'contentDetailData2222', JSON.stringify(this.contentDetailData))
+    // console.error(TAG, 'contentDetailData2222', JSON.stringify(this.contentDetailData))
     const params: contentListParams = {
       contentList: [{
         contentId: this.contentDetailData?.newsId + '',
@@ -462,8 +257,10 @@ export struct OperRowListView {
         this.interactData.likeNum = NumberFormatterUtils.formatNumberWithWan(res.data[0]?.likeNum)
         this.interactData.collectNum = NumberFormatterUtils.formatNumberWithWan(res.data[0]?.collectNum)
         this.interactData.commentNum = NumberFormatterUtils.formatNumberWithWan(res.data[0]?.commentNum)
+        // 评论组件需要数据
+        this.publishCommentModel.totalCommentNumer = this.interactData.commentNum + '' || '0'
       }
-      console.log(TAG, '获取互动点赞等数据===', JSON.stringify(res))
+      // console.log(TAG, '获取互动点赞等数据===', JSON.stringify(res))
       console.log(TAG, 'this.interactData', JSON.stringify(this.interactData))
     })
   }