Card6Component.ets 3.98 KB
import { ContentDTO } from 'wdBean';
import { CommonConstants, CompStyle } from 'wdConstant';
import { DateTimeUtils } from 'wdKit';
import { ProcessUtils } from '../../utils/ProcessUtils';

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

/**
 * 卡片样式:"appStyle":"6"
 */
@Component
export struct Card6Component {
  @State contentDTO: ContentDTO = {} as ContentDTO;

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

        Row() {
          if (this.contentDTO.source) {
            Text(this.contentDTO.source)
              .fontSize($r('app.float.font_size_12'))
              .fontColor(Color.Gray)
              .maxLines(1)
              .textOverflow({ overflow: TextOverflow.Ellipsis })// 超出的部分显示省略号。
              .width(this.contentDTO.source.length > 8 ? '50%' : '')
            Image($r('app.media.point'))
              .width(16)
              .height(16)
          }
          if (this.contentDTO.publishTime && this.contentDTO.publishTime.length === 13) {
            Text(DateTimeUtils.getCommentTime(Number.parseFloat(this.contentDTO.publishTime)))
              .fontSize($r('app.float.font_size_12'))
              .fontColor(Color.Gray)
          }
          Text(this.contentDTO.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.contentDTO.coverUrl) {
        Stack() {
          Image(this.contentDTO.coverUrl)
            .borderRadius(5)
            .aspectRatio(this.contentDTO.appStyle === CompStyle.Card_13 ? 3 / 2 : 3 / 4)
            .height(this.contentDTO.appStyle === CompStyle.Card_13 ? 90 : 180)
          if (this.contentDTO.videoInfo) {
            Row() {
              Image($r('app.media.iv_card_play_yellow_flag'))
                .width(22)
                .height(18)
              Text(DateTimeUtils.getFormattedDuration(this.contentDTO.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.contentDTO.voiceInfo) {
            Row() {
              Image($r('app.media.icon_listen'))
                .width(22)
                .height(18)
              Text(DateTimeUtils.getFormattedDuration(this.contentDTO.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.contentDTO)
    })
    .padding(
      { top: 16, bottom: 16, left: 14, right: 14 })
    .width(FULL_PARENT)
    .height(this.contentDTO.appStyle === CompStyle.Card_13 ? 127 : 217)
    .justifyContent(FlexAlign.SpaceBetween)

  }
}