Card6Component.ets 5.34 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';
import { persistentStorage, hasClicked } from '../../utils/persistentStorage';
import { InfomationCardClick } from '../../utils/infomationCardClick'
import { SearchShowRed, titleInitRes, textItem } from '../../utils/searchShowRed';
import router from '@ohos.router'

const TAG: string = 'Card6Component-Card13Component';

/**
 * 卡片样式:"appStyle":"6"以及13--- 小视频卡
 */
@Component
export struct Card6Component {
  @State pageId: string = '';
  @State textHeight: number = 0 ; //获取文本的高度
  @State pageName: string = '';
  @State loadImg: boolean = false;
  @State clicked: boolean = false;
  @State titleMarked: boolean = false;
  @State textArr: textItem[] = []
  @ObjectLink compDTO: CompDTO
  @State contentDTO: ContentDTO = new ContentDTO();

  async aboutToAppear(): Promise<void> {
    this.titleInit();
    this.loadImg = await onlyWifiLoadImg();
    const curRouter = router.getState().name;
    this.clicked = hasClicked(this.contentDTO.objectId, curRouter)
  }
  titleInit() {
    const titleInitRes:titleInitRes = SearchShowRed.titleInit(this.contentDTO.title);
    this.titleMarked = titleInitRes.titleMarked;
    this.textArr = titleInitRes.textArr;
  }

  build() {
    Row() {
      Column() {
        Column() {
          Stack() {
            if(this.contentDTO.objectType == '5'){
              Notes({ objectType: this.contentDTO.objectType,objectLevel:this.contentDTO.objectLevel }).height(28).align(Alignment.Center)
            } else {
              if (this.contentDTO.seoTags) {
                Notes({ newTags: this.contentDTO.seoTags }).height(28).align(Alignment.Center)
              }
              if (this.contentDTO.newTags) {
                Notes({ newTags: this.contentDTO.newTags }).height(28).align(Alignment.Center)
              }
              if (this.contentDTO.top === 1) {
                Notes({ newTags: '置顶' }).height(28).align(Alignment.Center)
              }
            }

            Text()
            {
              if (this.titleMarked) {
                ForEach(this.textArr, (textItem: textItem) => {
                  if (textItem.isRed) {
                    Span(textItem.content)
                      .fontColor(0xED2800)
                  } else {
                    Span(textItem.content)
                  }
                })
              } else {
                Span(this.contentDTO.newsTitle)
              }
            }
            .fontColor(this.clicked ? 0x848484 : 0x222222)
            .fontSize(18)
            .lineHeight(27)
            .fontWeight(FontWeight.Normal)
            .maxLines(this.contentDTO.appStyle === '6' ? 4 :  3)
            .alignSelf(ItemAlign.Start)
            .textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出的部分显示省略号。
            .textIndent((this.contentDTO.newTags?.length || this.contentDTO.seoTags?.length) > 2 &&
              (this.contentDTO.newTags?.length || this.contentDTO.seoTags?.length) < 5 ? (12 + (this.contentDTO.newTags?.length || this.contentDTO.seoTags?.length) * 11) :
              ((this.contentDTO.newTags?.length > 0 || this.contentDTO.seoTags?.length > 0) || this.contentDTO.objectType == '5' || this.contentDTO.top === 1) ? 35 :
                0 )
            .width('100%')
          }
          .alignContent(Alignment.TopStart)
        }
        .justifyContent(FlexAlign.Start)
        Blank()
        //bottom 评论等信息
        CardSourceInfo({ compDTO: this.compDTO, contentDTO: this.contentDTO })

      }

      .alignItems(HorizontalAlign.Start)
      .height(this.contentDTO.appStyle === CompStyle.Card_13 ? '' : 156)
      .constraintSize({minHeight: 78})
      .justifyContent(FlexAlign.SpaceBetween)
      .width('64%')


      Stack({alignContent: Alignment.BottomEnd}) {
        Image(this.loadImg ? this.contentDTO.coverUrl || this.contentDTO.fullColumnImgUrls?.[0]?.url || this.contentDTO.fullColumnImgUrls?.[0]?.fullUrl : '')
          .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)
          .border({width: 1, color: 0xf5f5f5})
        CardMediaInfo({ contentDTO: this.contentDTO })
      }

    }
    .onClick((event: ClickEvent) => {
      InfomationCardClick.track(this.compDTO, this.contentDTO, this.pageId, this.pageName)
      if (router.getState().name !== 'MyCollectionListPage') {
        this.clicked = true;
      }
      persistentStorage(this.contentDTO.objectId);
      ProcessUtils.processPage(this.contentDTO)
    })
    .padding({
      left: 10,
      right: 10,
      top: $r('app.float.card_comp_pagePadding_tb'),
      bottom: $r('app.float.card_comp_pagePadding_tb')
    })
    .backgroundColor(0xffffff)
    .width(CommonConstants.FULL_WIDTH)
    .height(this.contentDTO.appStyle === CompStyle.Card_13 ? '' : 184)
    .justifyContent(FlexAlign.SpaceBetween)
    .alignItems(VerticalAlign.Top)
  }
}