陈剑华

人民号单图卡ui

  1 +import { ContentDTO } from 'wdBean';
  2 +import { RmhTitle } from '../cardCommon/RmhTitle'
  3 +import { CardMediaInfo } from '../cardCommon/CardMediaInfo'
  4 +import { CommonConstants } from 'wdConstant/Index';
  5 +
  6 +const TAG = 'Card12Component';
  7 +
  8 +/**
  9 + * 人民号-动态---12:人民号无图卡;
  10 + */
  11 +@Entry
  12 +@Component
  13 +export struct Card12Component {
  14 + @State contentDTO: ContentDTO = {
  15 + appStyle: '20',
  16 + coverType: 1,
  17 + coverUrl: 'https://rmrbcmsonline.peopleapp.com/upload/user_app/gov_dynamic/video/default_image/202105/rmrb_default_image_4GdWrgSw1622451312.jpg?x-oss-process=image/resize,m_fill,h_480,w_360/quality,q_90',
  18 + fullColumnImgUrls: [
  19 + {
  20 + landscape: 1,
  21 + size: 1,
  22 + url: 'https://rmrbcmsonline.peopleapp.com/upload/user_app/gov_dynamic/video/default_image/202105/rmrb_default_image_4GdWrgSw1622451312.jpg?x-oss-process=image/resize,m_fill,h_480,w_360/quality,q_90',
  23 + weight: 1600
  24 + }
  25 + ],
  26 + newsTitle: '好玩!》10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人',
  27 + rmhInfo: {
  28 + authIcon:
  29 + 'https://cdnjdphoto.aikan.pdnews.cn/creator-category/icon/auth/yellow.png',
  30 + authTitle: '10后音乐人王烁然个人人民号',
  31 + authTitle2: '10后音乐人王烁然个人人民号',
  32 + banControl: 0,
  33 + cnIsAttention: 1,
  34 + rmhDesc: '10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人',
  35 + rmhHeadUrl: 'https://cdnjdphoto.aikan.pdnews.cn/image/creator/rmh/20221031/3d3419e86a.jpeg?x-oss-process=image/resize,l_100/auto-orient,1/quality,q_90/format,jpg',
  36 + rmhName: '王烁然',
  37 + userId: '522435359667845',
  38 + userType: '2'
  39 + },
  40 + objectType: '1',
  41 + videoInfo: {
  42 + firstFrameImageUri: '',
  43 + videoDuration: 37,
  44 + videoUrl: 'https://rmrbcmsonline.peopleapp.com/upload/user_app/gov_dynamic/video/mp4/202105/rmrb_GSNARt6P1622451310.mp4'
  45 + }
  46 + } as ContentDTO;
  47 +
  48 + aboutToAppear(): void {
  49 + }
  50 +
  51 + build() {
  52 + Column() {
  53 + // rmh信息
  54 + RmhTitle({ rmhInfo: this.contentDTO.rmhInfo })
  55 + // 左标题,右图
  56 + Flex({ direction: FlexDirection.Row }) {
  57 +
  58 + Text(this.contentDTO.newsTitle)
  59 + .fontSize($r('app.float.font_size_17'))
  60 + .fontColor($r('app.color.color_222222'))
  61 + .textOverflowStyle(3)
  62 + .lineHeight(25)
  63 + .fontFamily('PingFang SC-Regular')
  64 + .textAlign(TextAlign.Start)
  65 + .flexBasis('auto')
  66 + .margin({right: 12})
  67 +
  68 + Image(this.contentDTO.coverUrl)
  69 + .flexBasis(174)
  70 + .height(75)
  71 + .borderRadius($r('app.float.image_border_radius'))
  72 + // .flexBasis(160)
  73 + .backgroundImageSize(ImageSize.Auto)
  74 +
  75 + }
  76 + .width(CommonConstants.FULL_WIDTH)
  77 + .margin({ bottom: 8 })
  78 + .height(75)
  79 +
  80 +
  81 + //TODO 底部的:分享、评论、点赞 功能;需要引用一个公共组件
  82 + }
  83 + .padding({
  84 + left: $r('app.float.card_comp_pagePadding_lf'),
  85 + right: $r('app.float.card_comp_pagePadding_lf'),
  86 + top: $r('app.float.card_comp_pagePadding_tb'),
  87 + bottom: $r('app.float.card_comp_pagePadding_tb')
  88 + })
  89 + }
  90 +}
  91 +
  92 +interface radiusType {
  93 + topLeft: number | Resource;
  94 + topRight: number | Resource;
  95 + bottomLeft: number | Resource;
  96 + bottomRight: number | Resource;
  97 +}
  98 +
  99 +@Extend(Text)
  100 +function textOverflowStyle(maxLine: number) {
  101 + .maxLines(maxLine)
  102 + .textOverflow({ overflow: TextOverflow.Ellipsis })
  103 +}