CarderInteraction.ets 6.69 KB
import { SPHelper, Logger, ToastUtils, EmitterUtils, EmitterEventId } from 'wdKit';
import { ContentDetailDTO, Action, ContentDTO, batchLikeAndCollectResult } from 'wdBean';
import { ProcessUtils } from 'wdRouter';
import router from '@ohos.router';
import { batchLikeAndCollectParams } from 'wdDetailPlayApi/src/main/ets/request/ContentDetailRequest';
import { MultiPictureDetailViewModel } from '../viewmodel/MultiPictureDetailViewModel';
import { SpConstants } from 'wdConstant/Index';
import { WDShare } from 'wdShare/Index';
import { LikeComponent } from './view/LikeComponent'
import { TrackConstants } from 'wdTracking/Index';

const TAG = 'CarderInteraction'

interface parsedObj {
  contentId: string,
  likeStatus: string
}

/**
 * 卡片 分享、评论、点赞公用组件
 */
@Component
export struct CarderInteraction {
  @Prop contentDTO: ContentDTO
  @State contentId: string = ''
  @Provide contentDetailData: ContentDetailDTO = {} as ContentDetailDTO
  @State newsStatusOfUser: batchLikeAndCollectResult = {} as batchLikeAndCollectResult // 点赞、收藏状态
  @State likeBean: Record<string, string> = {}
  @State likesStyle: number | string = 1 // 赞样式 1红心(点赞) 2大拇指(祈福) 3蜡烛(默哀) 4置空
  @State openLikes: boolean = false // 是否可以点赞  1:可以 0:不可以
  @State isShowComment: boolean = false // 是否显示评论
  @State isShowLike: boolean = false // 是否显示点赞
  @Provide pageName: string = TrackConstants.PageName.DynamicDetail
  @Provide pageId: string = TrackConstants.PageName.DynamicDetail

  async aboutToAppear() {
    await this.getContentDetailData()
    // 点赞需要数据
    this.likeBean['contentId'] = this.contentDetailData.newsId + ''
    this.likeBean['userName'] = this.contentDetailData.userInfo?.userName + ''
    this.likeBean['contentType'] = this.contentDetailData.newsType + ''
    this.likeBean['title'] = this.contentDetailData.newsTitle + ''
    this.likeBean['userHeaderUrl'] = this.contentDetailData.userInfo?.headPhotoUrl + ''
    this.likeBean['channelId'] = this.contentDetailData.reLInfo?.channelId + ''
    this.contentDTO.shareFlag = this.contentDTO.shareFlag ? this.contentDTO.shareFlag : '1'
    Logger.debug(TAG, '是否显示分享',this.contentDTO.shareFlag)
    // 内容用 点赞样式 1红心(点赞) 2大拇指(祈福) 3蜡烛(默哀) 4置空
    this.likesStyle = this.contentDetailData.likesStyle
    this.openLikes = this.contentDetailData.openLikes == 1 ? true : false
    this.isShowComment = this.buildDisplayComment()
    this.isShowLike = this.buildDisplayLike()
    // console.log(TAG, 'this.isShowComment', this.isShowComment)
    // console.log(TAG, 'this.isShowLike', this.isShowLike)
    // console.log(TAG, 'router.getState().name', router.getState().name)
    EmitterUtils.receiveEvent(EmitterEventId.LIKE_CHANGE_STATUS, (val: string | undefined) => {
      // console.log(TAG,'val点赞', val)
      if (val === undefined) {
        console.error('Value is undefined');
        return;
      }

      try {
        const parsedVal: parsedObj = JSON.parse(val);
        if (parsedVal.contentId === this.contentDetailData.newsId + '') {
          // console.log(TAG,'params点赞状态', parsedVal.likeStatus)
          this.likeBean['likeStatus'] = parsedVal.likeStatus
          // console.log(TAG,'this.likeBean点赞状态', this.likeBean['likeStatus'])
        }
      } catch (error) {
        console.error('Error parsing JSON:', error);
      }
    });

  }


  build() {
    Row() {
      if(this.contentDetailData?.shareInfo?.shareOpen === 1){
        Row() {
          Image($r('app.media.CarderInteraction_share'))
            .width(18)
            .height(18)
          Text('分享')
            .margin({ left: 4 })
            .fontSize(14)
            .fontColor('#666666')
        }
        .justifyContent(FlexAlign.Center)
        .onClick(() => {
          WDShare.shareContent(this.contentDetailData)
        })
      }

      if(this.contentDetailData?.openComment == 1 || router.getState().name === 'PeopleShipHomePage'){
        if (this.isShowComment) {
          this.commentLayout()
        }
      }

      if(this.isShowLike) {
        this.builderLike()
      }
    }
    .width('100%')
    .margin({ top: 10 })
    // .padding({
    //   left: 21,
    //   right: 21
    // })
    .justifyContent(FlexAlign.SpaceAround)
    .alignItems(VerticalAlign.Center)
  }

  @Builder
  commentLayout() {
    Row() {
      Image($r('app.media.CarderInteraction_comment'))
        .width(18)
        .height(18);
      Text('评论')
        .margin({ left: 4 })
        .fontSize(14)
        .fontColor('#666666');
    }
    .justifyContent(FlexAlign.Center)
    .onClick(() => {
      this.contentDTO.customParamTargetLayout = "comment"
      ProcessUtils.processPage(this.contentDTO);
    })
  }

  /**
   * 点赞组件
   */
  @Builder
  builderLike() {
    Row() {
      LikeComponent({
        data: this.likeBean,
        componentType: 3
      })
    }
    .visibility(this.likesStyle == 4 || !this.openLikes ? Visibility.None : Visibility.Visible)
  }

  /**
   * 请求(动态)详情页数据
   * */
  private async getContentDetailData() {
    try {
      let data = await MultiPictureDetailViewModel.getDetailData(this.contentDTO.relId, this.contentDTO.objectId,
        this.contentDTO.relType)
      this.contentDetailData = data[0];
      // console.log(TAG, 'this.contentDetailData', JSON.stringify(this.contentDetailData))
      // console.log(TAG, 'this.contentDetailData.rmhInfo', JSON.stringify(this.contentDetailData.rmhInfo))
    } catch (exception) {
      console.log('请求失败', JSON.stringify(exception))
    }
  }

  ///是否展示评论
  buildDisplayComment(): boolean {
    // console.log(TAG, 'buildDisplayComment this.contentDetailData', JSON.stringify(this.contentDetailData))
    // console.log(TAG, 'buildDisplayComment this.contentDetailData.rmhInfo', JSON.stringify(this.contentDetailData.rmhInfo))
    const hasRmhInfo = this.contentDetailData && this.contentDetailData.rmhInfo;

    if (hasRmhInfo) {
      return this.contentDetailData?.rmhInfo!.cnlsComment === 1 && this.contentDetailData.openComment === 1;
    }

    return this.contentDetailData?.openComment === 1;
  }

  ///是否展示点赞
  buildDisplayLike(): boolean {
    // console.log(TAG, 'buildDisplayLike this.contentDetailData', JSON.stringify(this.contentDetailData))
    // console.log(TAG, 'buildDisplayLike this.contentDetailData.rmhInfo', JSON.stringify(this.contentDetailData.rmhInfo))
    const hasRmhInfo = this.contentDetailData && this.contentDetailData.rmhInfo;

    if (hasRmhInfo) {
      return this.contentDetailData?.rmhInfo!.cnlsLike === 1 && this.contentDetailData.openLikes === 1;
    }
    return this.contentDetailData?.openLikes === 1;
  }

}