ZhGridLayout02NewsContent.ets 3.09 KB
import { CompDTO, ContentDTO, LiveRoomDataBean } from 'wdBean';
import { CommonConstants } from 'wdConstant/Index';
import { Logger } from 'wdKit/Index';
import { ProcessUtils } from 'wdRouter';
import PageViewModel from '../../viewmodel/PageViewModel';
import { onlyWifiLoadImg } from '../../utils/lazyloadImg';
import { InfomationCardClick } from '../../utils/infomationCardClick'

let listSize: number = 2;

/**
 * 双图卡 的标题组件
 *
 */
@Component
export struct ZhGridLayout02NewsContent {
  @State pageId: string = '';
  @State pageName: string = '';
  @ObjectLink compDTO: CompDTO
  @State operDataList: ContentDTO[] = []
  @State loadImg: boolean = false;

  async aboutToAppear(): Promise<void> {

    this.loadImg = await onlyWifiLoadImg();
  }

  build() {

    GridRow({
      gutter: { x: 9, y: 0 },
      columns: { sm: listSize, md: listSize },
      breakpoints: { value: ['320vp', '520vp', '840vp'] }
    }) {
      ForEach(this.operDataList, (item: ContentDTO, index: number) => {
        GridCol() {
          this.buildItemCard(item, index);
        }
      })
    }
    .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)

  }

  @Builder
  buildItemCard(item: ContentDTO, index: number) {
    Column() {
      Stack({ alignContent: Alignment.BottomEnd }) {
        Image(this.loadImg ? item == undefined ? '' : item.fullColumnImgUrls?.[0]?.url : '')
          .backgroundColor(0xf5f5f5)
          .width('100%')
          // .height(95)
          .aspectRatio(167 / 95)
          .borderWidth(0.5)
          .borderColor($r('app.color.color_0D000000'))
          .borderRadius(4)
        if (this.compDTO.operDataList[index].liveRoomDataBean != undefined
          && this.compDTO.operDataList[index].liveRoomDataBean?.pv != undefined) {
          Text(this.computeShowNum(this.compDTO.operDataList[index].liveRoomDataBean))
            .fontSize(12)
            .fontWeight(400)
            .fontColor(Color.White)
            .textShadow({
              radius: 2,
              color: 'rgba(0,0,0,0.3)',
              offsetX: 0,
              offsetY: 2
            })
            .margin({
              right: '5vp',
              bottom: '5vp'
            })
        }
      }

      Text(item.newsTitle)
        .margin({ top: 8, bottom: 14 })
        .fontSize(15)
        .maxLines(2)
        .lineHeight(21)
        .width('100%')
        .textAlign(TextAlign.Start)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
    }
    .width('100%')
    .onClick(() => {
      InfomationCardClick.track(this.compDTO, item, this.pageId, this.pageName)
      ProcessUtils.processPage(item)
    })
  }

  private computeShowNum(bean: LiveRoomDataBean): string {
    let count = bean.pv
    if (count >= 10000) {
      let num = (count / 10000).toFixed(1)
      if (Number(num.substring(num.length - 1)) == 0) {
        num = num.substring(0, num.length - 2)
      }
      return num + '万人参加'
    }
    return `${count}人参加`
  }
}