developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
wangyong_wd
5ac72f09 1 parent 94a8ecde

新增：动态视频卡人民号

Inline Side-by-side
Showing 8 changed files with 235 additions and 49 deletions
@@ -5,6 +5,7 @@ @@ -5,6 +5,7 @@
5 * 人民号-动态tab下列表数据 5 * 人民号-动态tab下列表数据
6 */ 6 */
7 import { appStyleImagesDTO } from '../content/appStyleImagesDTO' 7 import { appStyleImagesDTO } from '../content/appStyleImagesDTO'
  8 +import {contentVideosDTO} from '../content/contentVideosDTO'
8 export interface ArticleListDTO { 9 export interface ArticleListDTO {
9 listTitle: string; 10 listTitle: string;
10 mainPicCount: string; 11 mainPicCount: string;
@@ -64,7 +65,7 @@ export interface ArticleListDTO { @@ -64,7 +65,7 @@ export interface ArticleListDTO {
64 contentShare: []; 65 contentShare: [];
65 contentLinkData: string; 66 contentLinkData: string;
66 contentExt: []; 67 contentExt: [];
67 - contentVideos: string; 68 + contentVideos: contentVideosDTO[];
68 contentPictures: []; 69 contentPictures: [];
69 contentPayments: string; 70 contentPayments: string;
70 contentPaymentStaffs: string; 71 contentPaymentStaffs: string;
  1 +export interface contentVideosDTO {
  2 + id: number;
  3 + contentId: number;
  4 + ossVideoId: string;
  5 + url: string;
  6 + fullUrl: string;
  7 + bucket: string;
  8 + duration: number;
  9 + clarity: number;
  10 + resolutionWidth: number;
  11 + resolutionHeight: number;
  12 + type: number;
  13 + original: number;
  14 + originalVideoId: string;
  15 + landscape: number;
  16 + size: number;
  17 + templateId: string;
  18 + deleted: number;
  19 + coverPictureId: string;
  20 + framePictureId: string;
  21 + createUser: string;
  22 + createTime: string;
  23 + updateUser: string;
  24 + updateTime: string;
  25 + bak1: string;
  26 + bak2: string;
  27 + bak3: string;
  28 + bak4: string;
  29 + videoType: number;
  30 + objectPosId: string;
  31 +}
@@ -3,11 +3,11 @@ export interface RmhInfoDTO { @@ -3,11 +3,11 @@ export interface RmhInfoDTO {
3 authTitle: string; 3 authTitle: string;
4 authTitle2: string; 4 authTitle2: string;
5 banControl: number; 5 banControl: number;
6 - cnAttention: number; 6 + cnIsAttention: number;
7 cnMainControl: number; 7 cnMainControl: number;
8 cnShareControl: number; 8 cnShareControl: number;
9 - cnlsComment: number;  
10 - cnlsLike: number; 9 + cnIsComment: number;
  10 + cnIsLike: number;
11 posterShareControl: number; 11 posterShareControl: number;
12 rmhDesc: string; 12 rmhDesc: string;
13 rmhHeadUrl: string; 13 rmhHeadUrl: string;
@@ -10,6 +10,8 @@ import { Card10Component } from './cardview/Card10Component'; @@ -10,6 +10,8 @@ import { Card10Component } from './cardview/Card10Component';
10 import { Card11Component } from './cardview/Card11Component'; 10 import { Card11Component } from './cardview/Card11Component';
11 import { Card17Component } from './cardview/Card17Component'; 11 import { Card17Component } from './cardview/Card17Component';
12 import { Card15Component } from './cardview/Card15Component'; 12 import { Card15Component } from './cardview/Card15Component';
  13 +import { Card19Component } from './cardview/Card19Component';
  14 +import { Card20Component } from './cardview/Card20Component';
13 15
14 /** 16 /**
15 * card适配器，卡片样式汇总，依据ContentDTO#appStyle 17 * card适配器，卡片样式汇总，依据ContentDTO#appStyle
@@ -46,6 +48,8 @@ export struct CardParser { @@ -46,6 +48,8 @@ export struct CardParser {
46 Card11Component({ contentDTO }) 48 Card11Component({ contentDTO })
47 } else if (contentDTO.appStyle === CompStyle.Card_17) { 49 } else if (contentDTO.appStyle === CompStyle.Card_17) {
48 Card17Component({ contentDTO }) 50 Card17Component({ contentDTO })
  51 + } else if (contentDTO.appStyle === CompStyle.Card_20) {
  52 + Card20Component({ contentDTO })
49 } 53 }
50 else { 54 else {
51 // todo:组件未实现 / Component Not Implemented 55 // todo:组件未实现 / Component Not Implemented
  1 +import { DateTimeUtils } from 'wdKit/Index'
  2 +
  3 +/**
  4 + * 这里是样式卡中，右下角显示的音视频信息
  5 + * 目前已知：
  6 + * 音频： 音频图标+时长
  7 + * 视频：点播图标+时长；直播图标+'直播中'
  8 + */
  9 +@Preview
  10 +@Component
  11 +export struct CardMediaInfo {
  12 + @State duration: number = 0 // 如果有duraion，代表点播，显示时长；如果不传或者传0，显示直播中
  13 + @State mediaType: string = 'video' // audio: 音频；video: 视频
  14 +
  15 + build() {
  16 + Row() {
  17 + if (this.mediaType === 'audio') {
  18 + Image($r('app.media.broadcast_listen'))
  19 + .height(14)
  20 + .borderRadius($r('app.float.button_border_radius'))
  21 + } else {
  22 + Image(this.duration ? $r('app.media.videoTypeIcon') : $r('app.media.icon_live'))
  23 + .width(22)
  24 + .height(18)
  25 + .borderRadius($r('app.float.button_border_radius'))
  26 + }
  27 +
  28 + Text(this.duration ? DateTimeUtils.getFormattedDuration(this.duration * 1000) : '直播中')
  29 + .fontColor($r('app.color.color_fff'))
  30 + .fontSize($r('app.float.font_size_12'))
  31 + .width(40)
  32 + .height(18)
  33 + .textAlign(TextAlign.Center)
  34 + .margin({ left: -3 })
  35 + }
  36 + .backgroundColor(this.mediaType === 'audio' ? '': '#4d000000')
  37 + .borderRadius($r('app.float.button_border_radius'))
  38 + .margin(6)
  39 + }
  40 +}
@@ -3,36 +3,16 @@ @@ -3,36 +3,16 @@
3 */ 3 */
4 import { RmhInfoDTO } from 'wdBean' 4 import { RmhInfoDTO } from 'wdBean'
5 import { CommonConstants } from 'wdConstant/Index'; 5 import { CommonConstants } from 'wdConstant/Index';
6 -import { DateTimeUtils } from 'wdKit/Index';  
7 -  
8 -interface RmhInfo extends RmhInfoDTO {  
9 - isSelected: boolean;  
10 - headPhotoUrl: string;  
11 - introduction: string;  
12 - userName: string;  
13 - publishTime: string;  
14 -}  
15 6
16 @Entry 7 @Entry
17 @Component 8 @Component
18 -export struct rmhTitle {  
19 - // TODO 这里需要传入rmh信息及是否显示关注，是否已关注  
20 - @State isAttentionShow: Boolean = true  
21 - @State rmhInfo: RmhInfo = {  
22 - authIcon: "https://cdnjdphoto.aikan.pdnews.cn/creator-category/icon/auth/blue.png",  
23 - authTitle: "四川农业大学",  
24 - headPhotoUrl: "https://cdnjdphoto.aikan.pdnews.cn//upload/ueditor/image/20221208/a_785146000057561088.png?x-oss-process=image/resize,l_100/auto-orient,1/quality,q_90/format,jpg",  
25 - introduction: "四川农业大学",  
26 - userId: "554708665557894",  
27 - userName: "四川农业大学",  
28 - userType: "2",  
29 - publishTime: '1712912775606'  
30 - } as RmhInfo 9 +export struct RmhTitle {
  10 + @Prop rmhInfo: RmhInfoDTO
31 11
32 build() { 12 build() {
33 - Row() { 13 + Flex() {
34 Stack() { 14 Stack() {
35 - Image(this.rmhInfo.headPhotoUrl) 15 + Image(this.rmhInfo.rmhHeadUrl)
36 .width(36) 16 .width(36)
37 .height(36).borderRadius(50) 17 .height(36).borderRadius(50)
38 Image(this.rmhInfo.authIcon) 18 Image(this.rmhInfo.authIcon)
@@ -42,31 +22,25 @@ export struct rmhTitle { @@ -42,31 +22,25 @@ export struct rmhTitle {
42 } 22 }
43 .margin({ right: 8 }) 23 .margin({ right: 8 })
44 .alignContent(Alignment.BottomEnd) 24 .alignContent(Alignment.BottomEnd)
  25 + .flexShrink(0)
  26 +
45 Column() { 27 Column() {
46 - Text(this.rmhInfo.userName) 28 + Text(this.rmhInfo.rmhName)
47 .fontSize($r('app.float.font_size_13')) 29 .fontSize($r('app.float.font_size_13'))
48 .fontColor($r('app.color.color_222222')) 30 .fontColor($r('app.color.color_222222'))
49 .fontWeight(600) 31 .fontWeight(600)
50 .alignSelf(ItemAlign.Start) 32 .alignSelf(ItemAlign.Start)
51 - Row() {  
52 - Text(DateTimeUtils.formatDate(Number.parseFloat(this.rmhInfo.publishTime)))  
53 - .fontSize($r("app.float.font_size_12"))  
54 - .fontColor($r("app.color.color_B0B0B0"))  
55 - Image($r("app.media.point"))  
56 - .width(16)  
57 - .height(16)  
58 - Text(this.rmhInfo.introduction)  
59 - .fontSize($r("app.float.font_size_12"))  
60 - .fontColor($r("app.color.color_B0B0B0"))  
61 - .margin({ left: 6 })  
62 - .maxLines(1)  
63 - .textOverflow({overflow: TextOverflow.Ellipsis})  
64 - } 33 + Text(this.rmhInfo.rmhDesc)
  34 + .fontSize($r("app.float.font_size_12"))
  35 + .fontColor($r("app.color.color_B0B0B0"))
  36 + .maxLines(1)
  37 + .alignSelf(ItemAlign.Start)
  38 + .textOverflow({ overflow: TextOverflow.Ellipsis })
65 } 39 }
66 - .align(Alignment.Start) 40 +
67 Blank() 41 Blank()
68 - if(this.isAttentionShow) {  
69 - Row(){ 42 + if (this.rmhInfo.cnIsAttention) {
  43 + Row() {
70 Image($r('app.media.rmh_follow')) 44 Image($r('app.media.rmh_follow'))
71 .width(16) 45 .width(16)
72 .height(16) 46 .height(16)
@@ -74,9 +48,14 @@ export struct rmhTitle { @@ -74,9 +48,14 @@ export struct rmhTitle {
74 .fontSize($r('app.float.font_size_13')) 48 .fontSize($r('app.float.font_size_13'))
75 .fontColor($r('app.color.color_ED2800')) 49 .fontColor($r('app.color.color_ED2800'))
76 } 50 }
  51 + .flexShrink(0)
  52 + .alignSelf(ItemAlign.Center)
  53 + .onClick(() => {
  54 + // TODO 调用关注接口
  55 + })
77 } 56 }
78 } 57 }
79 .width(CommonConstants.FULL_WIDTH) 58 .width(CommonConstants.FULL_WIDTH)
80 - .margin({bottom: 10}) 59 + .margin({ bottom: 10 })
81 } 60 }
82 } 61 }
1 import { ArticleListDTO, appStyleImagesDTO } from 'wdBean'; 1 import { ArticleListDTO, appStyleImagesDTO } from 'wdBean';
2 -import { rmhTitle } from './rmhTitle' 2 +import { RmhTitle } from '../cardCommon/RmhTitle'
3 3
4 const TAG = 'Card19Component'; 4 const TAG = 'Card19Component';
5 5
@@ -17,7 +17,7 @@ export struct Card19Component { @@ -17,7 +17,7 @@ export struct Card19Component {
17 build() { 17 build() {
18 Column() { 18 Column() {
19 // rmh信息 19 // rmh信息
20 - rmhTitle() 20 + // RmhTitle()
21 // 标题 21 // 标题
22 if (this.articleListItem.title) { 22 if (this.articleListItem.title) {
23 Text(this.articleListItem.title) 23 Text(this.articleListItem.title)
  1 +
  2 +import { ContentDTO } from 'wdBean';
  3 +import { RmhTitle } from '../cardCommon/RmhTitle'
  4 +import { CardMediaInfo } from '../cardCommon/CardMediaInfo'
  5 +import { CommonConstants } from 'wdConstant/Index';
  6 +
  7 +const TAG = 'Card20Component';
  8 +
  9 +/**
  10 + * 人民号-动态---20：动态视频卡人民号 分横屏和竖屏；
  11 + */
  12 +@Entry
  13 +@Component
  14 +export struct Card20Component {
  15 + @State contentDTO: ContentDTO = {
  16 + // appStyle: '20',
  17 + // coverType: 1,
  18 + // 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',
  19 + // fullColumnImgUrls: [
  20 + // {
  21 + // landscape: 1,
  22 + // size: 1,
  23 + // 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',
  24 + // weight: 1600
  25 + // }
  26 + // ],
  27 + // newsTitle: '好玩！》',
  28 + // rmhInfo: {
  29 + // authIcon:
  30 + // 'https://cdnjdphoto.aikan.pdnews.cn/creator-category/icon/auth/yellow.png',
  31 + // authTitle: '10后音乐人王烁然个人人民号',
  32 + // authTitle2: '10后音乐人王烁然个人人民号',
  33 + // banControl: 0,
  34 + // cnIsAttention: 1,
  35 + // rmhDesc: '10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人',
  36 + // 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',
  37 + // rmhName: '王烁然',
  38 + // userId: '522435359667845',
  39 + // userType: '2'
  40 + // },
  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 + build() {
  51 + Column() {
  52 + // rmh信息
  53 + RmhTitle({rmhInfo: this.contentDTO.rmhInfo})
  54 + // 标题
  55 + if (this.contentDTO.newsTitle) {
  56 + Text(this.contentDTO.newsTitle)
  57 + .fontSize($r('app.float.font_size_17'))
  58 + .fontColor($r('app.color.color_222222'))
  59 + .width(CommonConstants.FULL_WIDTH)
  60 + .textOverflowStyle(2)
  61 + .margin({ bottom: 8 })
  62 + }
  63 + if(this.contentDTO.fullColumnImgUrls[0]) {
  64 + createImg({ contentDTO: this.contentDTO })
  65 + }
  66 + //TODO 底部的：分享、评论、点赞 功能；需要引用一个公共组件
  67 + }
  68 + .padding({
  69 + left: $r('app.float.card_comp_pagePadding_lf'),
  70 + right: $r('app.float.card_comp_pagePadding_lf'),
  71 + top: $r('app.float.card_comp_pagePadding_tb'),
  72 + bottom: $r('app.float.card_comp_pagePadding_tb')
  73 + })
  74 + }
  75 +}
  76 +
  77 +interface radiusType {
  78 + topLeft: number | Resource;
  79 + topRight: number | Resource;
  80 + bottomLeft: number | Resource;
  81 + bottomRight: number | Resource;
  82 +}
  83 +
  84 +@Component
  85 +struct createImg {
  86 + @Prop contentDTO: ContentDTO
  87 +
  88 + build() {
  89 + GridRow() {
  90 + if (this.contentDTO.fullColumnImgUrls[0].landscape === 1) {
  91 + // 横屏
  92 + GridCol({
  93 + span: { xs: 12 }
  94 + }) {
  95 + Stack() {
  96 + Image(this.contentDTO.coverUrl)
  97 + .width(CommonConstants.FULL_WIDTH)
  98 + .aspectRatio(16/9)
  99 + .borderRadius($r('app.float.image_border_radius'))
  100 + CardMediaInfo({
  101 + duration: this.contentDTO.videoInfo.videoDuration, mediaType: 'video'
  102 + })
  103 + }
  104 + .align(Alignment.BottomEnd)
  105 + }
  106 + } else {
  107 + // 竖图显示，宽度占50%，高度自适应
  108 + GridCol({
  109 + span: { xs: 6 }
  110 + }) {
  111 + Stack() {
  112 + Image(this.contentDTO.coverUrl)
  113 + .width(CommonConstants.FULL_WIDTH)
  114 + .borderRadius($r('app.float.image_border_radius'))
  115 + CardMediaInfo({
  116 + duration: this.contentDTO.videoInfo.videoDuration, mediaType: 'video'
  117 + })
  118 + }
  119 + .align(Alignment.BottomEnd)
  120 + }
  121 + }
  122 + }
  123 + }
  124 +}
  125 +
  126 +
  127 +@Extend(Text)
  128 +function textOverflowStyle(maxLine: number) {
  129 + .maxLines(maxLine)
  130 + .textOverflow({ overflow: TextOverflow.Ellipsis })
  131 +}