Card6Component.ets 2.5 KB
import { ContentDTO } from 'wdBean';
import { CommonConstants, CompStyle } from 'wdConstant';
import { DateTimeUtils } from 'wdKit';
import { ProcessUtils } from '../../utils/ProcessUtils';
import { CardSourceInfo } from '../cardCommon/CardSourceInfo'
import { CardMediaInfo } from '../cardCommon/CardMediaInfo'
const TAG: string = 'Card6Component-Card13Component';
const FULL_PARENT: string = '100%';

/**
 * 卡片样式:"appStyle":"6"以及13--- 小视频卡
 */
@Component
export struct Card6Component {
  @State contentDTO: ContentDTO = {} as ContentDTO;

  build() {
    Row() {
      Column() {
        Column() {
          // TODO 这个tag涉及样式问题。待优化。
          // if (this.contentDTO.newTags) {
          //   Text(this.contentDTO.newTags)
          //     .backgroundColor($r('app.color.color_ED2800'))
          //     .borderRadius($r('app.float.button_border_radius'))
          //     .fontColor($r('app.color.color_fff'))
          //     .fontSize($r('app.float.font_size_12'))
          //     .padding(2)
          //     .margin({ right: 2 })
          // }
          Text(`${this.contentDTO.newsTitle}`)
            .fontSize(16)
            .fontWeight(FontWeight.Normal)
            .maxLines(3)//
            .alignSelf(ItemAlign.Start)
            .textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出的部分显示省略号。
        }.height("80%")
        .justifyContent(FlexAlign.Start)


        //bottom 评论等信息
        CardSourceInfo({ contentDTO: this.contentDTO })
      }
      .alignItems(HorizontalAlign.Start)
      .justifyContent(FlexAlign.Start)
      .width('58%')
      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)
          CardMediaInfo({ contentDTO: this.contentDTO })
        }
        .alignContent(Alignment.BottomEnd)
      }
    }
    .onClick((event: ClickEvent) => {
      ProcessUtils.processPage(this.contentDTO)
    })
    .padding({
      left: $r('app.float.card_comp_pagePadding_lf'),
      right: $r('app.float.card_comp_pagePadding_lf'),
      top: $r('app.float.card_comp_pagePadding_tb'),
      bottom: $r('app.float.card_comp_pagePadding_tb')
    })
    .width(CommonConstants.FULL_WIDTH)
    .height(this.contentDTO.appStyle === CompStyle.Card_13 ? 127 : 217)
    .justifyContent(FlexAlign.SpaceBetween)
  }
}