Card5Component.ets 5.47 KB
import { ContentDTO, CompDTO } from 'wdBean';
import { ProcessUtils } from 'wdRouter';
import { onlyWifiLoadImg } from '../../utils/lazyloadImg';
import { Notes } from './notes';
import { getNotesContentWidth } from '../../utils/FuncUtils'
import { persistentStorage, hasClicked } from '../../utils/persistentStorage';
import { InfomationCardClick } from '../../utils/infomationCardClick'
import { SearchShowRed, titleInitRes, textItem } from '../../utils/searchShowRed';
import router from '@ohos.router';
import { CommonConstants, CompStyle } from 'wdConstant/Index';


const TAG: string = 'Card5Component';

/**
 * 卡片样式:"appStyle":"5" 头图卡
 */
@Component
export struct Card5Component {
  @State pageId: string = '';
  @State pageName: string = '';
  @State contentDTO: ContentDTO = new ContentDTO();
  @ObjectLink compDTO: CompDTO
  @Prop titleShowPolicy: number | string
  @State loadImg: boolean = false;
  @State clicked: boolean = false;
  @State titleMarked: boolean = false;
  @State textArr: textItem[] = []

  async aboutToAppear(): Promise<void> {
    console.log('Card2Component', JSON.stringify(this.compDTO),this.contentDTO.titleShow)
    const curRouter = router.getState().name;
    this.clicked = hasClicked(this.contentDTO.objectId, curRouter)
    this.loadImg = await onlyWifiLoadImg();

    this.titleInit();
  }

  titleInit() {
    const titleInitRes:titleInitRes = SearchShowRed.titleInit(this.contentDTO.title);
    this.titleMarked = titleInitRes.titleMarked;
    this.textArr = titleInitRes.textArr;
  }

  getCover() {
    if (this.compDTO.compStyle === CompStyle.Zh_Single_Column_02) {
      return this.contentDTO.coverUrl
    } else {
      return this.contentDTO.fullColumnImgUrls?.[0]?.url || this.contentDTO.fullColumnImgUrls?.[0]?.fullUrl
    }
  }

  build() {
    Stack() {
      Image(this.loadImg ?  this.getCover()  : '')
        .backgroundColor(0xf5f5f5)
        .width(CommonConstants.FULL_WIDTH)
        .borderRadius(
          {
            topLeft: $r('app.float.image_border_radius'),
            topRight: $r('app.float.image_border_radius'),
            bottomLeft: $r('app.float.image_border_radius'),
            bottomRight: $r('app.float.image_border_radius')
          }
        )
        .height(this.loadImg ? '' : 114)
        .autoResize(true)
      if (this.titleShowPolicy == 1) {
        Row()
          .borderRadius(
            {
              topLeft: $r('app.float.image_border_radius'),
              topRight: $r('app.float.image_border_radius'),
              bottomLeft: $r('app.float.image_border_radius'),
              bottomRight: $r('app.float.image_border_radius')
            }
          )
          .width(CommonConstants.FULL_WIDTH)
          .height(59)
          .linearGradient({
            colors: [
              ['rgba(0, 0, 0, 0.0)', 0.0], ['rgba(0, 0, 0, 0.3)', 1.0]
            ]
          })

        Row() {
          if (this.titleShowPolicy == 1 && this.contentDTO.newsTitle) {
            Stack() {
              if(this.contentDTO.objectType == '5'){
                Notes({ objectType: this.contentDTO.objectType,objectLevel:this.contentDTO.objectLevel }).height(20).align(Alignment.Center)
              } else {
                if (this.contentDTO.seoTags) {
                  Notes({ newTags: this.contentDTO.seoTags }).height(20).align(Alignment.Center)
                }
                if (this.contentDTO.newTags) {
                  Notes({ newTags: this.contentDTO.newTags }).height(20).align(Alignment.Center)
                }
                if (this.contentDTO.top === 1) {
                  Notes({ newTags: '置顶' }).height(20).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)
                }
              }
              .width(CommonConstants.FULL_WIDTH)
              .fontColor(Color.White)
              .fontSize($r('app.float.font_size_18'))
              .maxLines(2)
              .align(Alignment.TopStart)
              .textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出的部分显示省略号。
              .textIndent(
                getNotesContentWidth(
                  this.contentDTO.seoTags || this.contentDTO.newTags,
                  this.contentDTO.objectType,
                  this.contentDTO.objectLevel,
                  this.contentDTO.top
                )
              )
            }.alignContent(Alignment.TopStart)
          }
        }
        .justifyContent(FlexAlign.Start)
        .margin({ left: 12, bottom: 10, right: 12 })

      }
    }
    .alignContent(Alignment.Bottom)
    .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)
    .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)
    })

  }
}