CardMediaInfo.ets 7.82 KB
import { ContentDTO, joinPeopleNum } from 'wdBean/Index'
import { DateTimeUtils } from 'wdKit/Index'
import { LottieView } from '../../components/lottie/LottieView';
import { LiveModel } from '../../viewmodel/LiveModel'
import font from '@ohos.font';

/**
 * 这里是样式卡中,右下角显示的音视频信息
 * 目前已知:
 * 音频: 音频图标+时长
 * 视频:点播图标+时长;直播图标+'直播中'
 */
@Component
export struct CardMediaInfo {
  @State contentDTO: ContentDTO = new ContentDTO() // 如果有duraion,代表点播,显示时长;如果不传或者传0,显示直播中
  @State joinPeopleNum: number = 0;
  // objectType 0:不跳转 1:点播,2:直播,3:活动,4:广告,5:专题,6:链接,7:榜单,8:图文,9:组图,10:H5新闻,11:频道,12:组件,13:音频,
  // 14动态图文,15动态视频16问政;100人民号,101标签

  aboutToAppear(): void {
    this.getJoinPeopleNum();

    font.registerFont({
      familyName: 'BebasNeue',
      familySrc: $rawfile('font/BebasNeue.ttf')
    })
  }

  /**
   * 全域数字显示规则
   * 1、当数量为千位以內时,显示数字,不保留小数点,比如 4585
   * 2、当数量为万位~1亿时,显示xx 万,保留小数点后一位,比如1517.9w、2.9w
   * 3、当数量为1亿~千亿时,显示XX 亿,保留小数点后一位,比如1517.9亿、2.9亿
   * 4、不进行四舍五入
   * 5、0 和空 不显示
   */
  handlerNum(number: string) {
    const num = number??'0';
    if (Number.parseInt(num) <= 9999) {
      return Number.parseInt(num).toString()
    } else if (Number.parseInt(num) > 9999 && Number.parseInt(num) <= 99999999) {
      const num1: string = num.slice(0, -4); // 万
      const num2: string = num.slice(-4, -3); // 千
      return num2 === '0' ? num1 +'万' : num1 + '.' + num2 + '万'
    } else if (Number.parseInt(num) > 99999999) {
      const num1: string = num.slice(0, -8); // 亿
      const num2: string = num.slice(-8, -7);
      return num2 === '0' ? num1 +'亿' : num1 + '.' + num2 + '亿'
    }
    return num
  }

  //
  /**
   * 获取直播节目参与人数
   */
  async getJoinPeopleNum() {
    if (this.contentDTO.objectType !== '2') return;
    console.log('getJoinPeopleNum-ContentDTO',  JSON.stringify(this.contentDTO.objectId))
    let liveIdList: string = this.contentDTO.objectId
    let data: joinPeopleNum[] = await LiveModel.getJoinPeopleNum(liveIdList)
    this.joinPeopleNum = data[0].pv;
  }

  build() {
    Row() {
      if (this.contentDTO?.objectType === '1' || this.contentDTO?.objectType === '15') {
        // 点播、动态视频
        Row() {
          Image($r('app.media.card_play'))
            .mediaLogo()
          if (this.contentDTO.videoInfo != null) {
            Text(DateTimeUtils.getFormattedDuration(this.contentDTO.videoInfo.videoDuration * 1000))
              .mediaText()
              .fontFamily('BebasNeue')
          }
        }
      } else if (this.contentDTO.objectType === '2') {
        // liveInfo.liveState 直播新闻-直播状态 wait待开播running直播中end已结束cancel已取消paused暂停
        // 显示直播信息
        Row() {
          // 搜索接口没有返回liveInfo字段所以得做个区分
          if (this.contentDTO && this.contentDTO.liveInfo && JSON.stringify(this.contentDTO.liveInfo) === '{}') {
            //  当liveInfo不存在的时候
            if (this.contentDTO?.liveType === 'wait') {
              Image($r('app.media.card_wait'))
                .mediaLogo()
              Text('预约')
                .mediaText()
            } else if (this.contentDTO?.liveType === 'running') {
              LottieView({
                name: 'live_status_wait',
                path: "lottie/live_detail_living.json",
                lottieWidth: 14,
                lottieHeight: 14,
                autoplay: true,
                loop: true,
              })
                .margin({
                  right: '2vp'
                })
              // Image($r('app.media.card_live'))
              // .mediaLogo()
              Text('直播中')
                .mediaText()
            } else if (this.contentDTO?.liveType === 'end' && this.contentDTO?.linkUrl) {
              Image($r('app.media.card_play'))
                .mediaLogo()
              Text('回看')
                .mediaText()
            }else if(this.contentDTO?.liveInfo?.liveState === 'end' && !this.contentDTO?.linkUrl){
              Text('已结束')
                .mediaText()
            }
          }else {
            // 当liveInfo存在时后

            if (this.contentDTO?.liveInfo?.liveState === 'wait') {
              Image($r('app.media.card_wait'))
                .mediaLogo()
              Text('预约')
                .mediaText()
            } else if (this.contentDTO?.liveInfo?.liveState === 'running') {
              LottieView({
                name: 'live_status_wait',
                path: "lottie/live_detail_living.json",
                lottieWidth: 14,
                lottieHeight: 14,
                autoplay: true,
                loop: true,
              })
                .margin({
                  right: '2vp'
                })
              // Image($r('app.media.card_live'))
              // .mediaLogo()
              Text('直播中')
                .mediaText()
            } else if (this.contentDTO?.liveInfo?.liveState === 'end' && this.contentDTO?.liveInfo?.replayUri) {
              Image($r('app.media.card_play'))
                .mediaLogo()
              Text('回看')
                .mediaText()
            }else if(this.contentDTO?.liveInfo?.liveState === 'end' && !this.contentDTO?.liveInfo
            ?.replayUri){
              Text('已结束')
                .mediaText()
            }

          }
          if (!!this.joinPeopleNum) {
            Text(' | ')
              .mediaText()
            Text(`${this.handlerNum(this.joinPeopleNum.toString())}人参加`)
              .mediaText()
          }
          // } else if (this.contentDTO?.liveInfo?.liveState === 'end' && this.contentDTO?.liveInfo
          //   ?.replayUri) {
          //   // Image($r('app.media.card_live'))
          //   //   .mediaLogo()
          //   Text('直播结束')
          //     .mediaText()
          // }
        }
      } else if (this.contentDTO.objectType === '9') {
        // 显示组图;图片数量
        Row() {
          Image($r('app.media.card_image'))
            .mediaLogo()
          Text(`${this.contentDTO.photoNum}`)
            .mediaTextImgtype()
        }
        .margin({ left: 80,top: 55})

      } else if (this.contentDTO.objectType === '13') {
        // 显示音频信息
        Row() {
          Image($r('app.media.card_audio'))
            .mediaLogo()
          Text(DateTimeUtils.getFormattedDuration(this.contentDTO.voiceInfo.voiceDuration * 1000))
            .mediaText()
            .fontFamily('BebasNeue')
        }
      } else if (this.contentDTO.objectType === '4') {//广告标签
        Text($r('app.string.comp_advertisement'))
          .fontSize('10fp')
          .fontColor($r('app.color.white'))
          .width(28)
          .height(16)
          .backgroundColor('#4D000000')
          .borderRadius(3)
          .textAlign(TextAlign.Center)
      }
    }
    .margin(6)
  }

  @Styles
  mediaLogo() {
    .width(14)
    .height(14)
    .margin({ right: 3 })
  }
  @Styles
  mediaLogo2() {
    .width(14)
    .height(14)
    .margin({ top:5,right:5  })
  }

}



@Extend(Text)
function mediaText() {
  .fontColor($r('app.color.color_fff'))
  .fontSize($r('app.float.font_size_14'))
  .lineHeight(18)
  .textShadow({
    radius: 2,
    color: 'rgba(0,0,0,0.3)',
    offsetY: 2
  })
}
@Extend(Text)
function mediaTextImgtype() {
    .fontColor($r('app.color.color_fff'))
    .fontSize($r('app.float.font_size_13'))
    .lineHeight(18)
    .textShadow({
      radius: 2,
      color: 'rgba(0,0,0,0.3)',
      offsetY: 2
    })
}