guochunsong

appStyle: 2,13 做到一个

1 -import { Action, CompDTO, ContentDTO, Params } from 'wdBean';  
2 -import { CompStyle } from 'wdConstant';  
3 -import { Logger } from 'wdKit';  
4 -import { WDRouterRule } from 'wdRouter';  
5 -  
6 -const TAG = 'SingleImageCardApp2Component';  
7 -const FULL_PARENT: string = '100%';  
8 -  
9 -/**  
10 - * 单图卡-3行标题/2行标题  
11 - * 枚举值13  
12 - *  
13 - * 重磅推荐/精选/电视剧/电影/综艺/短剧/更多>/  
14 - */  
15 -@Entry  
16 -@Component  
17 -export struct SingleImageCardApp2Component {  
18 - @State compDTO: CompDTO = {} as CompDTO  
19 - // @State compDTO: CompDTO = {  
20 - // operDataList: [  
21 - // {  
22 - // coverSize: '660*371',  
23 - // coverType: 1,  
24 - // visitorComment: 10,  
25 - // coverUrl: 'https://cdnjdphoto.aikan.pdnews.cn/zhbj-20240116/image/content/a9028e7011bb440e94ba7c63d80b39b7.png?x-oss-process=image/resize,w_550/quality,q_90/format,jpg',  
26 - // newsTitle: '一条江豚的自述',  
27 - // newsSummary: '我是生活在长江里的一头江豚,是长江中唯一的水生哺乳动物,更是国家一级保护动物。但曾几何时,我和我的江中小伙伴出现了生存危机……直到有一天,我突然发现,打渔人变成护渔人,江水变清澈了,长江逐渐恢复了生机,我的家族数量上升到了1249头。当长江之水再一次悠悠流淌,我们相拥在清澈波光中起舞。长江,我的家园。'  
28 - // } as ContentDTO  
29 - // ]  
30 - // } as CompDTO  
31 -  
32 - aboutToAppear() {  
33 - }  
34 -  
35 - build() {  
36 - Column() {  
37 - Text(this.compDTO.operDataList[0].newsTitle)  
38 - .fontSize(16)  
39 - .fontWeight(FontWeight.Bold)  
40 - .alignSelf(ItemAlign.Start)  
41 - .maxLines(3)  
42 - .textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出的部分显示省略号。  
43 - Image(this.compDTO.operDataList[0].coverUrl)  
44 - .borderRadius(5)  
45 - .aspectRatio(16 / 9)  
46 - .padding({ top: 10 })  
47 - Text(this.compDTO.operDataList[0].newsSummary)  
48 - .fontSize(14)  
49 - .padding({ top: 10 })  
50 - .alignSelf(ItemAlign.Start)  
51 - .maxLines(3)  
52 - .textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出的部分显示省略号。  
53 - Row() {  
54 - Text(this.compDTO.operDataList[0].visitorComment + "评")  
55 - .fontSize(12)  
56 - .fontColor(Color.Gray)  
57 - Image($r('app.media.icon_share'))  
58 - .width(16)  
59 - .height(16)  
60 - .margin(10)  
61 - .backgroundColor(Color.Brown)  
62 - }.width(FULL_PARENT)  
63 - .justifyContent(FlexAlign.SpaceBetween)  
64 - }  
65 - .margin(16)  
66 - }  
67 -}  
@@ -3,7 +3,7 @@ import { CompStyle } from 'wdConstant'; @@ -3,7 +3,7 @@ import { CompStyle } from 'wdConstant';
3 import { Logger } from 'wdKit'; 3 import { Logger } from 'wdKit';
4 import { WDRouterRule } from 'wdRouter'; 4 import { WDRouterRule } from 'wdRouter';
5 5
6 -const TAG = 'SingleImageCardAppComponent'; 6 +const TAG = 'SingleImageCardApp2Component';
7 const FULL_PARENT: string = '100%'; 7 const FULL_PARENT: string = '100%';
8 8
9 /** 9 /**
@@ -15,17 +15,31 @@ const FULL_PARENT: string = '100%'; @@ -15,17 +15,31 @@ const FULL_PARENT: string = '100%';
15 @Entry 15 @Entry
16 @Component 16 @Component
17 export struct SingleImageCardAppComponent { 17 export struct SingleImageCardAppComponent {
18 - @State compDTO: CompDTO = {} as CompDTO  
19 - // @State compDTO: CompDTO = {  
20 - // operDataList: [  
21 - // {  
22 - // coverSize: '660*371',  
23 - // coverType: 1,  
24 - // coverUrl: 'https://cdnjdphoto.aikan.pdnews.cn/zhbj-20240116/image/content/a9028e7011bb440e94ba7c63d80b39b7.png?x-oss-process=image/resize,w_550/quality,q_90/format,jpg',  
25 - // newsTitle: '时政微观察丨从外贸“成绩单”看中国经济新亮色',  
26 - // } as ContentDTO  
27 - // ]  
28 - // } as CompDTO 18 + // @State compDTO: CompDTO = {} as CompDTO
  19 +
  20 + @State compDTO: CompDTO = {
  21 + operDataList: [
  22 + {
  23 + coverSize: '660*371',
  24 + coverType: 1,
  25 + visitorComment: 10,
  26 + coverUrl: 'https://cdnjdphoto.aikan.pdnews.cn/zhbj-20240116/image/content/a9028e7011bb440e94ba7c63d80b39b7.png?x-oss-process=image/resize,w_550/quality,q_90/format,jpg',
  27 + newsTitle: '一条江豚的自述',
  28 + newsSummary: '我是生活在长江里的一头江豚,是长江中唯一的水生哺乳动物,更是国家一级保护动物。但曾几何时,我和我的江中小伙伴出现了生存危机……直到有一天,我突然发现,打渔人变成护渔人,江水变清澈了,长江逐渐恢复了生机,我的家族数量上升到了1249头。当长江之水再一次悠悠流淌,我们相拥在清澈波光中起舞。长江,我的家园。',
  29 + videoInfo: {
  30 + // clarity: 1,
  31 + resolutionHeight: 20,
  32 + resolutionWidth: 20,
  33 + videoDuration: '229',
  34 + videoLandScape: 1,
  35 + videoType: 1,
  36 + videoUrl: "https://cdnjdout.aikan.pdnews.cn/zhbj-20240116/vod/content/output/c72f4170db2c4d34befa453f60d39a69_opt.mp4",
  37 + firstFrameImageUri: "", // 首帧图;【视频内容,contentPictures中】
  38 + },
  39 +
  40 + } as ContentDTO
  41 + ]
  42 + } as CompDTO
29 43
30 aboutToAppear() { 44 aboutToAppear() {
31 } 45 }
@@ -36,16 +50,47 @@ export struct SingleImageCardAppComponent { @@ -36,16 +50,47 @@ export struct SingleImageCardAppComponent {
36 .fontSize(16) 50 .fontSize(16)
37 .fontWeight(FontWeight.Bold) 51 .fontWeight(FontWeight.Bold)
38 .alignSelf(ItemAlign.Start) 52 .alignSelf(ItemAlign.Start)
  53 + .maxLines(3)
39 .textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出的部分显示省略号。 54 .textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出的部分显示省略号。
40 - Image(this.compDTO.operDataList[0].coverUrl)  
41 - .borderRadius(5)  
42 - .aspectRatio(16 / 9)  
43 - .padding({ top: 10 })  
44 - Image($r('app.media.icon_share'))  
45 - .width(16)  
46 - .height(16)  
47 - .margin(10)  
48 - }.alignItems(HorizontalAlign.End)  
49 - .margin(16) 55 + if (this.compDTO.operDataList[0].coverUrl) {
  56 + Stack() {
  57 + Image(this.compDTO.operDataList[0].coverUrl)
  58 + .borderRadius(5)
  59 + .aspectRatio(16 / 9)
  60 + .padding({ top: 10 })
  61 + if(this.compDTO.operDataList[0].videoInfo) {
  62 + Stack() {
  63 + Text(this.compDTO.operDataList[0].videoInfo.videoDuration)
  64 + .backgroundColor(Color.Black)
  65 + .opacity(0.6)
  66 + .width(FULL_PARENT)
  67 + .padding({left:40})
  68 + Image($r('app.media.iv_card_play_yellow_flag'))
  69 + .fitOriginalSize(true)
  70 + }.width(FULL_PARENT)
  71 + }
  72 + }
  73 + }
  74 + if (this.compDTO.operDataList[0].newsSummary) {
  75 + Text(this.compDTO.operDataList[0].newsSummary)
  76 + .fontSize(14)
  77 + .padding({ top: 10 })
  78 + .alignSelf(ItemAlign.Start)
  79 + .maxLines(3)
  80 + .textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出的部分显示省略号。
  81 + }
  82 + Row() {
  83 + Text(this.compDTO.operDataList[0].visitorComment + "评")
  84 + .fontSize(12)
  85 + .fontColor(Color.Gray)
  86 + Image($r('app.media.icon_share'))
  87 + .width(16)
  88 + .height(16)
  89 + .margin(10)
  90 + .backgroundColor(Color.Brown)
  91 + }.width(FULL_PARENT)
  92 + .justifyContent(FlexAlign.SpaceBetween)
  93 + }
  94 + .margin(22)
50 } 95 }
51 } 96 }