DynamicDetailComponent.ets 6.75 KB
import { Logger } from 'wdKit';
import { MultiPictureDetailViewModel } from '../viewmodel/MultiPictureDetailViewModel';
import { ContentDetailDTO } from 'wdBean';
import media from '@ohos.multimedia.media';
import { OperRowListView } from './view/OperRowListView';
import { WDPlayerController } from 'wdPlayer/Index';

const TAG = 'DynamicDetailComponent'
@Preview
@Component
export struct DynamicDetailComponent {
  //入参
  private relId: string = ''
  private contentId: string = ''
  private relType: string = ''
  //出参
  @State contentDetailData: ContentDetailDTO = {} as ContentDetailDTO
  //变量
  /**
   * 默认未关注 点击去关注
   */
  private  followStatus: boolean = false;


  async aboutToAppear() {
    await this.getContentDetailData()
  }
  onPageHide() {

  }

  build() {
    Row() {
      Column(){
        //logo、日期
        Row() {
          Image($r('app.media.ic_article_rmh'))
            .width($r('app.float.margin_80'))
            .height($r('app.float.margin_28'))
            .margin({ left: $r('app.float.margin_16') })
          Blank()
          Text("2023年03月14日 08:16")
            .fontColor($r('app.color.color_B0B0B0'))
            .fontSize($r('app.float.font_size_12'))
            .lineHeight($r('app.float.margin_28'))
            .margin({ right: $r('app.float.margin_16') })
        }
        .height($r('app.float.margin_48'))
        .width('100%')
        //分割线
        Image($r('app.media.ic_news_detail_division'))
            .width('100%')
            .height($r('app.float.margin_7'))
            .margin({left: $r('app.float.margin_16'), right: $r('app.float.margin_16')} )
        //号主信息
        Row() {
          //头像
          Stack() {
            Image(this.contentDetailData.rmhInfo?.rmhHeadUrl)
              .alt(this.contentDetailData.rmhInfo?.userType=='1'?$r('app.media.default_head'):$r('app.media.icon_default_head_mater'))
              .width($r('app.float.margin_32'))
              .height($r('app.float.margin_32'))
              .objectFit(ImageFit.Cover)
              .borderRadius($r('app.float.margin_16'))
            Image($r('app.media.icon_border_test'))
              .width($r('app.float.margin_48'))
              .height($r('app.float.margin_48'))
              .objectFit(ImageFit.Cover)
              .borderRadius($r('app.float.margin_24'))
          }
          .width($r('app.float.margin_48'))
          .height($r('app.float.margin_48'))
          .alignContent(Alignment.Center)
          Column(){
            //昵称
            Text("this.contentDetailData.rmhInfo?.rmhName")
              .fontSize($r('app.float.font_size_14'))
              .fontColor($r('app.color.color_222222'))
              .fontWeight(FontWeight.Medium)
              .margin({ left: $r('app.float.margin_5') })
            //简介
            Text("this.contentDetailData.rmhInfo?.rmhDesc")
              .fontSize($r('app.float.font_size_14'))
              .fontColor($r('app.color.color_B0B0B0'))
              .fontWeight(FontWeight.Medium)
              .margin({ left: $r('app.float.margin_5') })
          }
          if (!this.followStatus) {
            Text('关注')
              .width(60)
              .height($r('app.float.margin_48'))
              .textAlign(TextAlign.Center)
              .fontSize($r('app.float.font_size_12'))
              .borderRadius($r('app.float.vp_3'))
              .backgroundColor($r('app.color.color_ED2800'))
              .fontColor($r('app.color.color_fff'))
              .onClick(() => {
                // this.handleAccention(this.item, 1)
              })
          } else {
            Text('已关注')
              .width($r('app.float.margin_60'))
              .height($r('app.float.margin_48'))
              .borderWidth(1)
              .textAlign(TextAlign.Center)
              .fontSize($r('app.float.font_size_12'))
              .borderRadius($r('app.float.vp_3'))
              .borderColor($r('app.color.color_CCCCCC'))
              .fontColor($r('app.color.color_CCCCCC'))
              .onClick(() => {
                // this.handleAccention(this.item, 0)
              })
          }
        }
        .width('100%')
        //内容
        Text("这里展示标题这里展示标题这里展示标题这里这里展示标题这里展示标题这里展示标题这里这里展示标题这里展示标题这里展示标题这里")
          .fontColor($r('app.color.color_222222'))
          .fontSize($r('app.float.font_size_18'))
          .lineHeight($r('app.float.margin_25'))
          .margin({ top: $r('app.float.margin_6')
          ,left: $r('app.float.margin_16')
          ,right: $r('app.float.margin_16') })
        //特别声明
        Text("特别声明:本文为人民日报新媒体平台“人民号”作者上传并发布,仅代表作者观点。人民日报仅提供信息发布平台。")
          .fontColor($r('app.color.color_CCCCCC'))
          .fontSize($r('app.float.font_size_12'))
          .lineHeight($r('app.float.margin_16'))
          .margin({ top: $r('app.float.margin_16')
          ,left: $r('app.float.margin_16')
          ,right: $r('app.float.margin_16') })
        //微信/朋友圈/微博
        Row(){
          Image($r('app.media.xxhdpi_pic_wechat'))
            .width($r('app.float.margin_116'))
            .height($r('app.float.margin_36'))
            .objectFit(ImageFit.Cover)
          Image($r('app.media.xxhdpi_pic_pyq'))
            .width($r('app.float.margin_116'))
            .height($r('app.float.margin_36'))
            .margin({ left: $r('app.float.margin_4_negative')})
            .objectFit(ImageFit.Cover)
          Image($r('app.media.xxhdpi_pic_wb'))
            .width($r('app.float.margin_116'))
            .height($r('app.float.margin_36'))
            .margin({ left: $r('app.float.margin_4_negative')})
            .objectFit(ImageFit.Cover)
        }
        .margin({ top: $r('app.float.margin_24')})
        //点赞
        Row(){
          Image($r('app.media.icon_like_selected_redheart'))
            .width($r('app.float.margin_24'))
            .height($r('app.float.margin_24'))
            .objectFit(ImageFit.Cover)
          Text("2.6万")
            .fontColor($r('app.color.color_999999'))
            .fontSize($r('app.float.font_size_16'))
            .lineHeight($r('app.float.margin_20'))
            .margin({ left: $r('app.float.margin_2')})
        }
        //评论组件/底部组件
      }
    }
    .backgroundColor('#FFFFFFFF')
  }
  private async getContentDetailData() {
    try {
      let data = await MultiPictureDetailViewModel.getDetailData(this.relId, this.contentId, this.relType)
      this.contentDetailData = data[0];
      console.log('动态详情',JSON.stringify(this.contentDetailData))
    } catch (exception) {
    console.log('请求失败',JSON.stringify(exception))
    }
  }
}