developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
guochunsong
8b7a97d6 1 parent 94aa5e26

新增appstyle:2

Inline Side-by-side
Showing 5 changed files with 151 additions and 28 deletions
@@ -45,11 +45,13 @@ export interface ContentDTO { @@ -45,11 +45,13 @@ export interface ContentDTO {
45 relId: string; 45 relId: string;
46 relType: string; 46 relType: string;
47 47
48 - //单图卡/2行标题/3行标题  
49 - newsTitle:string; 48 +
  49 + newsTitle:string;//单图卡/2行标题/3行标题
50 publishTime:string; 50 publishTime:string;
51 visitorComment:number; 51 visitorComment:number;
52 fullColumnImgUrls:FullColumnImgUrlDTO[]; 52 fullColumnImgUrls:FullColumnImgUrlDTO[];
53 liveInfo?: LiveInfoDTO; // 直播新闻信息【BFF聚合】 53 liveInfo?: LiveInfoDTO; // 直播新闻信息【BFF聚合】
54 videoInfo?: VideoInfoDTO; // 视频新闻信息【BFF聚合】，视频非原片+清晰度最高的 54 videoInfo?: VideoInfoDTO; // 视频新闻信息【BFF聚合】，视频非原片+清晰度最高的
  55 +
  56 + newsSummary: string; //appstyle:2 ,新闻详情
55 } 57 }
  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 +}
@@ -39,7 +39,7 @@ export struct SingleImageCardAppComponent { @@ -39,7 +39,7 @@ export struct SingleImageCardAppComponent {
39 .textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出的部分显示省略号。 39 .textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出的部分显示省略号。
40 Image(this.compDTO.operDataList[0].coverUrl) 40 Image(this.compDTO.operDataList[0].coverUrl)
41 .borderRadius(5) 41 .borderRadius(5)
42 - .aspectRatio(3 / 2) 42 + .aspectRatio(16 / 9)
43 .padding({ top: 10 }) 43 .padding({ top: 10 })
44 Image($r('app.media.icon_share')) 44 Image($r('app.media.icon_share'))
45 .width(16) 45 .width(16)
@@ -12,14 +12,14 @@ const FULL_PARENT: string = '100%'; @@ -12,14 +12,14 @@ const FULL_PARENT: string = '100%';
12 * ImageCard-03 12 * ImageCard-03
13 * 重磅推荐/精选/电视剧/电影/综艺/短剧/更多>/ 13 * 重磅推荐/精选/电视剧/电影/综艺/短剧/更多>/
14 */ 14 */
15 -@Entry 15 +
16 @Component 16 @Component
17 export struct SingleImageCardComponent { 17 export struct SingleImageCardComponent {
18 @State compDTO: CompDTO = {} as CompDTO 18 @State compDTO: CompDTO = {} as CompDTO
19 @State titleNumber: number = 3 //标题行数 19 @State titleNumber: number = 3 //标题行数
20 20
21 aboutToAppear() { 21 aboutToAppear() {
22 - Logger.debug(TAG + "" + JSON.stringify(this.compDTO.operDataList)); 22 + // Logger.debug(TAG + "" + JSON.stringify(this.compDTO.operDataList));
23 if(this.compDTO.operDataList[0].newsTitle.length > 26){ 23 if(this.compDTO.operDataList[0].newsTitle.length > 26){
24 this.titleNumber = 3; 24 this.titleNumber = 3;
25 } else { 25 } else {
@@ -5,6 +5,7 @@ import { WDRouterRule } from 'wdRouter'; @@ -5,6 +5,7 @@ import { WDRouterRule } from 'wdRouter';
5 5
6 const TAG = 'Zh_Grid_Layout-03'; 6 const TAG = 'Zh_Grid_Layout-03';
7 const FULL_PARENT: string = '100%'; 7 const FULL_PARENT: string = '100%';
  8 +let listSize: number = 4;
8 9
9 /** 10 /**
10 * 金刚卡位 11 * 金刚卡位
@@ -12,40 +13,93 @@ const FULL_PARENT: string = '100%'; @@ -12,40 +13,93 @@ const FULL_PARENT: string = '100%';
12 * Zh_Grid_Layout-03 13 * Zh_Grid_Layout-03
13 * 14 *
14 */ 15 */
15 -@Entry 16 +
16 @Component 17 @Component
17 export struct ZhGridLayoutComponent { 18 export struct ZhGridLayoutComponent {
18 @State compDTO: CompDTO = {} as CompDTO 19 @State compDTO: CompDTO = {} as CompDTO
  20 + // @State compDTO: CompDTO = {
  21 + // operDataList: [
  22 + // {
  23 + // newsTitle: '健康专栏',
  24 + // description: "description0",
  25 + // coverUrl: 'https://uatjdcdnphoto.aikan.pdnews.cn/sjbj-20231208/image/display/d4496925a1264a749975ae9b01a4ef46.png?x-oss-process=image/resize,w_550/quality,q_90/format,jpg'
  26 + // } as ContentDTO,
  27 + // {
  28 + // newsTitle: '金刚栏位22233',
  29 + // description: "description1",
  30 + // coverUrl: "https://uatjdcdnphoto.aikan.pdnews.cn/sjbj-20240104/image/display/c4a9b526e0994d1bbd3ac8450f5cfc6c.jpg?x-oss-process=image/resize,w_550/quality,q_90/format,jpg",
  31 + // } as ContentDTO,
  32 + // {
  33 + // newsTitle: '体育专栏2',
  34 + // description: "description2",
  35 + // coverUrl: "https://cdnjdphoto.aikan.pdnews.cn/sjbj-20231206/image/live/bbe6d821e92b48919d90c7dadfd1f05a.jpg?x-oss-process=image/resize,l_850/auto-orient,1/quality,q_95/format,jpg",
  36 + // } as ContentDTO,
  37 + // {
  38 + // newsTitle: '农业',
  39 + // description: "description3",
  40 + // coverUrl: 'https://cdnjdphoto.aikan.pdnews.cn/sjbj-20231109/image/live/102e6eb9356b4ef19405b04c1f6ff875.png?x-oss-process=image/resize,l_850/auto-orient,1/quality,q_95/format,jpg'
  41 + // } as ContentDTO,
  42 + // {
  43 + // newsTitle: '民生铭记',
  44 + // description: "description4",
  45 + // coverUrl: "https://uatjdcdnphoto.aikan.pdnews.cn/sjbj-20231218/image/display/62bdbbb35dbd45689e00790c81f04c4b.png?x-oss-process=image/resize,w_550/quality,q_90/format,jpg",
  46 + // } as ContentDTO,
  47 + // {
  48 + // newsTitle: '春节大欢乐',
  49 + // description: "description5",
  50 + // coverUrl: "https://uatjdcdnphoto.aikan.pdnews.cn/sjbj-20231218/image/display/f79bbaa5a33b4bd88176071c4f797ff6.png?x-oss-process=image/resize,w_550/quality,q_90/format,jpg",
  51 + // } as ContentDTO,
  52 + // {
  53 + // newsTitle: '春节大欢乐',
  54 + // description: "description6",
  55 + // coverUrl: "https://uatjdcdnphoto.aikan.pdnews.cn/sjbj-20231218/image/display/2c1d917009584ce2bb4a35cbb3a860a0.png?x-oss-process=image/resize,w_550/quality,q_90/format,jpg",
  56 + // } as ContentDTO,
  57 + // {
  58 + // newsTitle: '旅游',
  59 + // description: "description7",
  60 + // coverUrl: "https://uatjdcdnphoto.aikan.pdnews.cn/sjbj-20231222/image/display/117dc516ca5c42d5843c0d32050c9fc6.jpeg?x-oss-process=image/resize,w_240/quality,q_90/format,jpg",
  61 + // } as ContentDTO
  62 + // ]
  63 + // } as CompDTO
19 64
20 aboutToAppear() { 65 aboutToAppear() {
21 - // Logger.info(TAG + ' comp:'+ JSON.stringify(this.compDTO)) 66 + if (this.compDTO.operDataList) {
  67 + listSize = this.compDTO.operDataList.length > 5 ? 4 : this.compDTO.operDataList.length;
  68 + }
22 } 69 }
23 70
24 build() { 71 build() {
25 - Column() {  
26 - Flex({ wrap: FlexWrap.Wrap,  
27 - justifyContent: FlexAlign.SpaceEvenly,  
28 - alignItems: ItemAlign.End }) {  
29 - ForEach(this.compDTO.operDataList, (item: ContentDTO) => {  
30 - Column() {  
31 - Image(item.coverUrl)  
32 - .width(44)  
33 - .borderRadius(5)  
34 - .aspectRatio(1 / 1)  
35 - .autoResize(true)  
36 - Text(item.newsTitle)  
37 - .fontSize(13)  
38 - .padding({ top: 8 })  
39 - }.height(68).width(75)  
40 - }, (item: ContentDTO) => JSON.stringify(item))  
41 - }  
42 - .backgroundColor(Color.White)  
43 - .padding({  
44 - top: 14,  
45 - bottom: 14 72 + GridRow({
  73 + columns: { sm: listSize, md: 8 },
  74 + breakpoints: { value: ['320vp', '520vp', '840vp'] }
  75 + }) {
  76 + ForEach(this.compDTO.operDataList, (item: ContentDTO, index: number) => {
  77 + GridCol() {
  78 + this.buildItemCard(this.compDTO.operDataList[index]);
  79 + }
46 }) 80 })
47 } 81 }
48 } 82 }
  83 +
  84 + /**
  85 + * 组件项
  86 + *
  87 + * @param programmeBean item 组件项, 上面icon,下面标题
  88 + */
  89 + @Builder
  90 + buildItemCard(item: ContentDTO) {
  91 + Column() {
  92 + Image(item.coverUrl)
  93 + .borderRadius(5)
  94 + .aspectRatio(1 / 1)
  95 + .margin(16)
  96 + Text(item.newsTitle)
  97 + .fontSize(13)
  98 + .maxLines(1)
  99 + .textOverflow({ overflow: TextOverflow.Ellipsis })
  100 + }
  101 + .width('100%')
  102 + }
49 } 103 }
50 104
51 105