SingleImageCardComponent.ets 4.51 KB
import { Action, CompDTO, Params } from 'wdBean';
import { ExtraDTO } from 'wdBean/src/main/ets/bean/component/extra/ExtraDTO';
import { CompStyle } from 'wdConstant';
import { Logger, DateTimeUtils } from 'wdKit';
import { WDRouterRule } from 'wdRouter';
import { ProcessUtils } from '../../utils/ProcessUtils';

const TAG = 'SingleImageCardComponent';
const FULL_PARENT: string = '100%';

/**
 * 单图卡-3行标题/2行标题
 * 枚举值13
 * ImageCard-03
 * 重磅推荐/精选/电视剧/电影/综艺/短剧/更多>/
 */

@Component
export struct SingleImageCardComponent {
  @State compDTO: CompDTO = {} as CompDTO

  aboutToAppear() {
    //Logger.debug(TAG + "" + JSON.stringify(this.compDTO.operDataList));

  }

  build() {
    Row() {
      Column() {
        Column() {
          Text(this.compDTO.operDataList[0].newsTitle)
            .fontSize(16)
            .fontWeight(FontWeight.Normal)
            .maxLines(3)//
            .alignSelf(ItemAlign.Start)
            .textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出的部分显示省略号。
        }.height("80%")
        .justifyContent(FlexAlign.Start)

        Row() {
          if (this.compDTO.operDataList[0].source) {
            Text(this.compDTO.operDataList[0].source)
              .fontSize($r('app.float.font_size_12'))
              .fontColor(Color.Gray)
              .maxLines(1)
              .textOverflow({ overflow: TextOverflow.Ellipsis })// 超出的部分显示省略号。
              .width(this.compDTO.operDataList[0].source.length > 8 ? '50%' : '')
            Image($r('app.media.point'))
              .width(16)
              .height(16)
          }
          if (this.compDTO.operDataList[0].publishTime && this.compDTO.operDataList[0].publishTime.length === 13) {
            Text(DateTimeUtils.getCommentTime(Number.parseFloat(this.compDTO.operDataList[0].publishTime)))
              .fontSize($r('app.float.font_size_12'))
              .fontColor(Color.Gray)
          }
          Text(this.compDTO.operDataList[0].visitorComment + '评')
            .fontSize($r('app.float.font_size_12'))
            .fontColor(Color.Gray)
            .padding({
              left: 5
            })
        }.alignSelf(ItemAlign.Start)
        .height("20%")
        .justifyContent(FlexAlign.Start)
      }
      .alignItems(HorizontalAlign.Start)
      .justifyContent(FlexAlign.Start)
      .width('58%')

      Blank(16)
      if (this.compDTO.operDataList[0].coverUrl) {
        Stack() {
          Image(this.compDTO.operDataList[0].coverUrl)
            .borderRadius(5)
            .aspectRatio(this.compDTO.compStyle === CompStyle.Single_ImageCard_03 ? 3 / 2 : 3 / 4)
            .height(this.compDTO.compStyle === CompStyle.Single_ImageCard_03 ? 90 : 180)
          if (this.compDTO.operDataList[0].videoInfo) {
            Row() {
              Image($r('app.media.iv_card_play_yellow_flag'))
                .width(22)
                .height(18)
              Text(DateTimeUtils.getFormattedDuration(this.compDTO.operDataList[0].videoInfo.videoDuration * 1000))
                .fontSize($r('app.float.font_size_13'))
                .fontWeight(400)
                .fontColor($r('app.color.color_fff'))
            }
            .alignItems(VerticalAlign.Bottom)
            .height(18)
            .padding({ right: 4 })
            .margin({
              right: 4,
              bottom: 4
            })
            .backgroundColor($r('app.color.color_4d000000'))
          } else if(this.compDTO.operDataList[0].voiceInfo) {
            Row() {
              Image($r('app.media.icon_listen'))
                .width(22)
                .height(18)
              Text(DateTimeUtils.getFormattedDuration(this.compDTO.operDataList[0].voiceInfo
                .voiceDuration * 1000))
                .fontSize($r('app.float.font_size_13'))
                .fontWeight(400)
                .fontColor($r('app.color.color_fff'))
            }
            .alignItems(VerticalAlign.Bottom)
            .height(18)
            .padding({ right: 4 })
            .margin({
              right: 4,
              bottom: 4
            })
            .backgroundColor($r('app.color.color_4d000000'))
          }
        }.alignContent(Alignment.BottomEnd)
      }
    }
    .onClick((event: ClickEvent) => {
      ProcessUtils.processPage(this.compDTO?.operDataList[0])
    })
    .padding(
      { top: 16, bottom: 16, left: 14, right: 14 })
    .width(FULL_PARENT)
    .height(this.compDTO.compStyle === CompStyle.Single_ImageCard_03 ? 127 : 217)
    .justifyContent(FlexAlign.SpaceBetween)
  }
}