Card15Component.ets 3.64 KB
import { ContentDTO } from 'wdBean';
import { ProcessUtils } from 'wdRouter';
import { RmhTitle } from '../cardCommon/RmhTitle'
import { CardMediaInfo } from '../cardCommon/CardMediaInfo'
import { CommonConstants } from 'wdConstant/Index';

const TAG: string = 'Card15Component';

/**
 * 大图卡人民号:
 * compstyle:15
 * 卡片结构:上下结构
 * 卡片宽度:充满父窗口
 * 卡片高度,仅包含横板图片:图片高度由图片的宽度及宽高比决定,图片宽度占父窗口'100%',宽高比为16:9:
 */
@Component
export struct Card15Component {
  @State contentDTO: ContentDTO = {
    // appStyle: '15',
    // coverType: 1,
    // objectType: '9',
    // coverUrl: 'https://rmrbcmsonline.peopleapp.com/rb_recsys/img/2024/0413/VL20Z09ISBEKXZU_963672030241091584.jpeg?x-oss-process=image/resize,m_fill,h_450,w_800/quality,q_90',
    // fullColumnImgUrls: [
    //   {
    //     landscape: 2,
    //     size: 1,
    //     url: 'https://rmrbcmsonline.peopleapp.com/rb_recsys/img/2024/0413/VL20Z09ISBEKXZU_963672030241091584.jpeg?x-oss-process=image/resize,m_fill,h_450,w_800/quality,q_90',
    //     weight: 1170
    //   }
    // ],
    // newsTitle: '押解画面公开!被湖北民警从柬埔寨押解回国被湖北民警从柬埔寨押解回国的130名涉赌诈嫌疑人是他们被湖北民警从柬埔寨押解回国的130名涉赌诈嫌疑人是他们的130名涉赌诈嫌疑人是他们',
    // publishTime: '1712993333000',
    // rmhInfo: {
    //   authIcon: '',
    //   authTitle: '',
    //   authTitle2: '',
    //   banControl: 0,
    //   cnIsAttention: 1,
    //   rmhDesc: '中共武汉市委机关报长江日报官方人民号',
    //   rmhHeadUrl: 'https://uatjdcdnphoto.aikan.pdnews.cn/vod/content/202302/202302Sa121448724/TUw.png?x-oss-process=image/resize,l_100/auto-orient,1/quality,q_90/format,jpg',
    //   rmhId: '4255270',
    //   rmhName: '长江日报',
    //   userId: '513696944662469',
    //   userType: '3'
    // },
    // videoInfo: {
    //   firstFrameImageUri: '',
    //   videoDuration: 12,
    //   // videoLandscape: 2,
    //   videoUrl: 'https://rmrbcmsonline.peopleapp.com/rb_recsys/video/2024/0413/VL20Z09ISBEKXZU_963672027208609792.mp4'
    // },
    // photoNum: '9',
    // voiceInfo: {
    //   voiceDuration: 12
    // }
  } as ContentDTO;

  build() {
    Column() {
      // rmh信息
      RmhTitle({ rmhInfo: this.contentDTO.rmhInfo, publishTime: this.contentDTO.publishTime })
      //新闻标题
      if (this.contentDTO.newsTitle) {
        Text(this.contentDTO.newsTitle)
          .fontSize($r('app.float.font_size_17'))
          .fontColor($r('app.color.color_222222'))
          .width(CommonConstants.FULL_WIDTH)
          .textOverflowStyle(2)
          .margin({ bottom: 8 })
      }
      //大图
      Stack() {
        Image(this.contentDTO.coverUrl)
          .borderRadius($r('app.float.image_border_radius'))
        //播放状态+时长
        CardMediaInfo({
          contentDTO: this.contentDTO
        })
      }
      .width(CommonConstants.FULL_WIDTH)
      .aspectRatio(16 / 9)
      .alignContent(Alignment.BottomEnd)

      //TODO  底部的:分享、评论、点赞 功能;需要引用一个公共组件
    }
    .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')
    })
    .onClick((event: ClickEvent) => {
      ProcessUtils.processPage(this.contentDTO)
    })
  }
}


@Extend(Text)
function textOverflowStyle(maxLine: number) {
  .maxLines(maxLine)
  .textOverflow({ overflow: TextOverflow.Ellipsis })
}