Card6Component.ets 4.4 KB
import { CompDTO, ContentDTO } from 'wdBean';
import { CommonConstants, CompStyle } from 'wdConstant';
import { ProcessUtils } from 'wdRouter';
import { CardSourceInfo } from '../cardCommon/CardSourceInfo';
import { CardMediaInfo } from '../cardCommon/CardMediaInfo';
import { Notes } from './notes';
import { onlyWifiLoadImg } from '../../utils/lazyloadImg';
import { Logger } from 'wdKit/Index';

const TAG: string = 'Card6Component-Card13Component';

/**
 * 卡片样式:"appStyle":"6"以及13--- 小视频卡
 */
@Component
export struct Card6Component {
  @State loadImg: boolean = false;
  @State clicked: boolean = false;
  @State titleMarked: boolean = false;
  @State str01: string = '';
  @State str02: string = '';
  @State str03: string = '';
  @ObjectLink compDTO: CompDTO
  @State contentDTO: ContentDTO = new ContentDTO();

  async aboutToAppear(): Promise<void> {
    this.titleInit();
    this.loadImg = await onlyWifiLoadImg();
    // this.clicked = hasClicked(this.contentDTO.objectId)
  }

  titleInit() {
    if (this.contentDTO.title?.includes('<em>') && this.contentDTO.title?.includes('</em>')) {
      this.titleMarked = true;
      this.str01 = this.contentDTO.title?.split('<em>')[0] || '';
      this.str02 = this.contentDTO.title?.split('<em>')[1].split('</em>')[0] || '';
      this.str03 = this.contentDTO.title?.split('<em>')[1].split('</em>')[1] || '';
    }
  }

  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 })
          // }
          Stack() {
            if (this.contentDTO.newTags) {
              Notes({ newTags: this.contentDTO.newTags }).height(27).align(Alignment.Center)
            } else if (this.contentDTO.objectType == '5') {
              Notes({ objectType: this.contentDTO.objectType }).height(27).align(Alignment.Center)
            }

            Text() {
              if (this.titleMarked) {
                Span(this.str01)
                Span(this.str02)
                  .fontColor(0xED2800)
                Span(this.str03)
              } else {
                Span(this.contentDTO.newsTitle)
              }
            }
            .fontColor(this.clicked ? 0x848484 : 0x222222)
            .fontSize(18)
            .lineHeight(27)
            .fontWeight(FontWeight.Normal)
            .maxLines(3)
            .alignSelf(ItemAlign.Start)
            .textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出的部分显示省略号。
            .textIndent(this.contentDTO?.newTags?.length < 5 && this.contentDTO?.newTags?.length > 2 ? 58 :
              (this.contentDTO.newTags?.length != 0 && this.contentDTO.newTags?.length) ||
                this.contentDTO.objectType == '5' ? 35 : 0)
          }.alignContent(Alignment.TopStart)

        }
        .justifyContent(FlexAlign.Start)


        //bottom 评论等信息
        CardSourceInfo({ compDTO: this.compDTO, contentDTO: this.contentDTO })
      }
      .alignItems(HorizontalAlign.Start)
      .justifyContent(FlexAlign.Start)
      .width('64%')

      Stack() {
        Image(this.loadImg ? this.contentDTO.coverUrl : '')
          .backgroundColor(this.loadImg ? $r('app.color.color_B0B0B0') : 0xf5f5f5)
          .borderRadius(5)
          .aspectRatio(this.contentDTO.appStyle === CompStyle.Card_13 ? 3 / 2 : 3 / 4)
          .height(this.contentDTO.appStyle === CompStyle.Card_13 ? 78 : 156)
        CardMediaInfo({ contentDTO: this.contentDTO })
      }
      .alignContent(Alignment.BottomEnd)
    }
    .onClick((event: ClickEvent) => {
      this.clicked = true;
      // persistentStorage(this.contentDTO.objectId);
      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 ? 107 : 217)
    .justifyContent(FlexAlign.SpaceBetween)
  }
}