Showing
3 changed files
with
86 additions
and
18 deletions
| @@ -3,6 +3,7 @@ export interface FullColumnImgUrlDTO { | @@ -3,6 +3,7 @@ export interface FullColumnImgUrlDTO { | ||
| 3 | height: number; | 3 | height: number; |
| 4 | landscape: number; | 4 | landscape: number; |
| 5 | size: number | null; | 5 | size: number | null; |
| 6 | - url: string; | 6 | + url: string; // 图片地址--列表显示 |
| 7 | weight: number; | 7 | weight: number; |
| 8 | + fullUrl: string; // 图片地址--预览地址使用;【人民号动态卡预览】 | ||
| 8 | } | 9 | } |
| @@ -48,6 +48,8 @@ export struct CardParser { | @@ -48,6 +48,8 @@ export struct CardParser { | ||
| 48 | Card11Component({ contentDTO }) | 48 | Card11Component({ contentDTO }) |
| 49 | } else if (contentDTO.appStyle === CompStyle.Card_17) { | 49 | } else if (contentDTO.appStyle === CompStyle.Card_17) { |
| 50 | Card17Component({ contentDTO }) | 50 | Card17Component({ contentDTO }) |
| 51 | + } else if (contentDTO.appStyle === CompStyle.Card_19) { | ||
| 52 | + Card19Component({ contentDTO }) | ||
| 51 | } else if (contentDTO.appStyle === CompStyle.Card_20) { | 53 | } else if (contentDTO.appStyle === CompStyle.Card_20) { |
| 52 | Card20Component({ contentDTO }) | 54 | Card20Component({ contentDTO }) |
| 53 | } | 55 | } |
| 1 | -import { ArticleListDTO, appStyleImagesDTO } from 'wdBean'; | 1 | +import { ContentDTO, FullColumnImgUrlDTO } from 'wdBean'; |
| 2 | import { RmhTitle } from '../cardCommon/RmhTitle' | 2 | import { RmhTitle } from '../cardCommon/RmhTitle' |
| 3 | 3 | ||
| 4 | const TAG = 'Card19Component'; | 4 | const TAG = 'Card19Component'; |
| @@ -9,7 +9,66 @@ const TAG = 'Card19Component'; | @@ -9,7 +9,66 @@ const TAG = 'Card19Component'; | ||
| 9 | @Entry | 9 | @Entry |
| 10 | @Component | 10 | @Component |
| 11 | export struct Card19Component { | 11 | export struct Card19Component { |
| 12 | - @State articleListItem: ArticleListDTO = {} as ArticleListDTO | 12 | + @State contentDTO: ContentDTO = { |
| 13 | + // appStyle: '19', | ||
| 14 | + // coverUrl: 'https://rmrbcmsonline.peopleapp.com/upload/ueditor/image/20240323/a_955994160362418176.png?x-oss-process=image/resize,w_550/quality,q_90/format,jpg', | ||
| 15 | + // fullColumnImgUrls: [ | ||
| 16 | + // { | ||
| 17 | + // fullUrl: 'https://rmrbcmsonline.peopleapp.com/upload/ueditor/image/20240323/a_955994160362418176.png?x-oss-process=image/quality,q_90/auto-orient,1', | ||
| 18 | + // height: 1500, | ||
| 19 | + // landscape: 1, | ||
| 20 | + // size: 1, | ||
| 21 | + // url: 'https://rmrbcmsonline.peopleapp.com/upload/ueditor/image/20240323/a_955994160362418176.png?x-oss-process=image/resize,w_550/quality,q_90/format,jpg', | ||
| 22 | + // weight: 2000 | ||
| 23 | + // }, | ||
| 24 | + // { | ||
| 25 | + // fullUrl: 'https://rmrbcmsonline.peopleapp.com/upload/ueditor/image/20240323/a_955994155727712256.png?x-oss-process=image/quality,q_90/auto-orient,1', | ||
| 26 | + // height: 1500, | ||
| 27 | + // landscape: 1, | ||
| 28 | + // size: 1, | ||
| 29 | + // url: 'https://rmrbcmsonline.peopleapp.com/upload/ueditor/image/20240323/a_955994155727712256.png?x-oss-process=image/resize,w_550/quality,q_90/format,jpg', | ||
| 30 | + // weight: 2000 | ||
| 31 | + // }, | ||
| 32 | + // { | ||
| 33 | + // fullUrl: 'https://rmrbcmsonline.peopleapp.com/upload/ueditor/image/20240323/a_955994132109586432.png?x-oss-process=image/quality,q_90/auto-orient,1', | ||
| 34 | + // height: 1280, | ||
| 35 | + // landscape: 1, | ||
| 36 | + // size: 1, | ||
| 37 | + // url: 'https://rmrbcmsonline.peopleapp.com/upload/ueditor/image/20240323/a_955994132109586432.png?x-oss-process=image/resize,w_550/quality,q_90/format,jpg', | ||
| 38 | + // weight: 1707 | ||
| 39 | + // }, | ||
| 40 | + // { | ||
| 41 | + // fullUrl: 'https://rmrbcmsonline.peopleapp.com/upload/ueditor/image/20240323/a_955994132109586432.png?x-oss-process=image/quality,q_90/auto-orient,1', | ||
| 42 | + // height: 1280, | ||
| 43 | + // landscape: 1, | ||
| 44 | + // size: 1, | ||
| 45 | + // url: 'https://rmrbcmsonline.peopleapp.com/upload/ueditor/image/20240323/a_955994132109586432.png?x-oss-process=image/resize,w_550/quality,q_90/format,jpg', | ||
| 46 | + // weight: 1707 | ||
| 47 | + // } | ||
| 48 | + // ], | ||
| 49 | + // newsSummary: '#平安建设双提升#【进工地,送安全】3月21日下午,@合肥交警 包河大队走进辖区建筑工地为驾驶员、安全员们开展春季交通安全主题宣传活动。活动中,交警结合涉工程运输车、渣土车交通事故案例,详细讲解行驶注意事项,并普及了“一盔一带”“右转必停”等安全常识,要求驾驶员牢固树立交通安全意识,自觉遵守交通法律法规,确保出行安全。', | ||
| 50 | + // newsTitle: '#平安建设双提升#【进工地,送安全】3月21日下午,@合肥交警 包河大队走进辖区建筑工地为驾驶员、安全员们开展春季交通安全主题宣传活动。活动中,交警结合涉工程运输车、渣土车交通事故案例,详细讲解行驶注意事项,并普及了“一盔一带”“右转必停”等安全常识,要求驾驶员牢固树立交通安全意识,自觉遵守交通法律法规,确保出行安全。', | ||
| 51 | + // publishTime: '1711185754000', | ||
| 52 | + // relType: '1', | ||
| 53 | + // rmhInfo: { | ||
| 54 | + // authIcon: '', | ||
| 55 | + // authTitle: '', | ||
| 56 | + // authTitle2: '', | ||
| 57 | + // banControl: 0, | ||
| 58 | + // cnIsAttention: 1, | ||
| 59 | + // cnIsComment: 1, | ||
| 60 | + // cnIsLike: 1, | ||
| 61 | + // cnMainControl: 1, | ||
| 62 | + // cnShareControl: 1, | ||
| 63 | + // posterShareControl: 1, | ||
| 64 | + // rmhDesc: '合肥市公安局官方人民号', | ||
| 65 | + // 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', | ||
| 66 | + // rmhId: '4255290', | ||
| 67 | + // rmhName: '合肥警方', | ||
| 68 | + // userId: '513697181730757', | ||
| 69 | + // userType: '2' | ||
| 70 | + // } | ||
| 71 | + } as ContentDTO | ||
| 13 | 72 | ||
| 14 | aboutToAppear(): void { | 73 | aboutToAppear(): void { |
| 15 | } | 74 | } |
| @@ -17,17 +76,17 @@ export struct Card19Component { | @@ -17,17 +76,17 @@ export struct Card19Component { | ||
| 17 | build() { | 76 | build() { |
| 18 | Column() { | 77 | Column() { |
| 19 | // rmh信息 | 78 | // rmh信息 |
| 20 | - // RmhTitle() | 79 | + RmhTitle({ rmhInfo: this.contentDTO.rmhInfo }) |
| 21 | // 标题 | 80 | // 标题 |
| 22 | - if (this.articleListItem.title) { | ||
| 23 | - Text(this.articleListItem.title) | 81 | + if (this.contentDTO.newsTitle) { |
| 82 | + Text(this.contentDTO.newsTitle) | ||
| 24 | .fontSize($r('app.float.font_size_17')) | 83 | .fontSize($r('app.float.font_size_17')) |
| 25 | .fontColor($r('app.color.color_222222')) | 84 | .fontColor($r('app.color.color_222222')) |
| 26 | .textOverflowStyle(2) | 85 | .textOverflowStyle(2) |
| 27 | .margin({ bottom: 8 }) | 86 | .margin({ bottom: 8 }) |
| 28 | } | 87 | } |
| 29 | // 图片-从无图到9图展示 | 88 | // 图片-从无图到9图展示 |
| 30 | - createArticleListItem({ appStyleImages: this.articleListItem.appStyleImages }) | 89 | + createImg({ fullColumnImgUrls: this.contentDTO.fullColumnImgUrls }) |
| 31 | //TODO 底部的:分享、评论、点赞 功能;需要引用一个公共组件 | 90 | //TODO 底部的:分享、评论、点赞 功能;需要引用一个公共组件 |
| 32 | } | 91 | } |
| 33 | .padding({ | 92 | .padding({ |
| @@ -47,9 +106,15 @@ interface radiusType { | @@ -47,9 +106,15 @@ interface radiusType { | ||
| 47 | } | 106 | } |
| 48 | 107 | ||
| 49 | @Component | 108 | @Component |
| 50 | -struct createArticleListItem { | ||
| 51 | - @Prop appStyleImages: appStyleImagesDTO[] | ||
| 52 | - | 109 | +struct createImg { |
| 110 | + @Prop fullColumnImgUrls: FullColumnImgUrlDTO[] | ||
| 111 | + aboutToAppear(): void { | ||
| 112 | + if(this.fullColumnImgUrls.length === 4) { // 为了使用栅格布局以便于占用三分之二的宽度,加一个占位 | ||
| 113 | + this.fullColumnImgUrls.splice(2,0, { | ||
| 114 | + fullUrl: '' | ||
| 115 | + } as FullColumnImgUrlDTO) | ||
| 116 | + } | ||
| 117 | + } | ||
| 53 | caclImageRadius(index: number) { | 118 | caclImageRadius(index: number) { |
| 54 | let radius: radiusType = { | 119 | let radius: radiusType = { |
| 55 | topLeft: index === 0 ? $r('app.float.image_border_radius') : 0, | 120 | topLeft: index === 0 ? $r('app.float.image_border_radius') : 0, |
| @@ -57,14 +122,14 @@ struct createArticleListItem { | @@ -57,14 +122,14 @@ struct createArticleListItem { | ||
| 57 | bottomLeft: 0, | 122 | bottomLeft: 0, |
| 58 | bottomRight: 0, | 123 | bottomRight: 0, |
| 59 | } | 124 | } |
| 60 | - if (this.appStyleImages.length === 1) { | 125 | + if (this.fullColumnImgUrls.length === 1) { |
| 61 | radius.topRight = index === 0 ? $r('app.float.image_border_radius') : 0 | 126 | radius.topRight = index === 0 ? $r('app.float.image_border_radius') : 0 |
| 62 | radius.bottomLeft = index === 0 ? $r('app.float.image_border_radius') : 0 | 127 | radius.bottomLeft = index === 0 ? $r('app.float.image_border_radius') : 0 |
| 63 | radius.bottomRight = index === 0 ? $r('app.float.image_border_radius') : 0 | 128 | radius.bottomRight = index === 0 ? $r('app.float.image_border_radius') : 0 |
| 64 | - } else if (this.appStyleImages.length === 4) { | 129 | + } else if (this.fullColumnImgUrls.length === 5 && !this.fullColumnImgUrls[2].fullUrl) { |
| 65 | radius.topRight = index === 1 ? $r('app.float.image_border_radius') : 0 | 130 | radius.topRight = index === 1 ? $r('app.float.image_border_radius') : 0 |
| 66 | - radius.bottomLeft = index === 2 ? $r('app.float.image_border_radius') : 0 | ||
| 67 | - radius.bottomRight = index === 3 ? $r('app.float.image_border_radius') : 0 | 131 | + radius.bottomLeft = index === 3 ? $r('app.float.image_border_radius') : 0 |
| 132 | + radius.bottomRight = index === 4 ? $r('app.float.image_border_radius') : 0 | ||
| 68 | } else { | 133 | } else { |
| 69 | radius.topRight = index === 2 ? $r('app.float.image_border_radius') : 0 | 134 | radius.topRight = index === 2 ? $r('app.float.image_border_radius') : 0 |
| 70 | radius.bottomLeft = index === 6 ? $r('app.float.image_border_radius') : 0 | 135 | radius.bottomLeft = index === 6 ? $r('app.float.image_border_radius') : 0 |
| @@ -77,8 +142,8 @@ struct createArticleListItem { | @@ -77,8 +142,8 @@ struct createArticleListItem { | ||
| 77 | GridRow({ | 142 | GridRow({ |
| 78 | gutter: { x: 2, y: 2 } | 143 | gutter: { x: 2, y: 2 } |
| 79 | }) { | 144 | }) { |
| 80 | - ForEach(this.appStyleImages, (item: appStyleImagesDTO, index: number) => { | ||
| 81 | - if (this.appStyleImages.length === 1) { | 145 | + ForEach(this.fullColumnImgUrls, (item: FullColumnImgUrlDTO, index: number) => { |
| 146 | + if (this.fullColumnImgUrls.length === 1) { | ||
| 82 | GridCol({ | 147 | GridCol({ |
| 83 | span: { xs: 8 } | 148 | span: { xs: 8 } |
| 84 | }) { | 149 | }) { |
| @@ -86,9 +151,9 @@ struct createArticleListItem { | @@ -86,9 +151,9 @@ struct createArticleListItem { | ||
| 86 | .width('100%') | 151 | .width('100%') |
| 87 | .borderRadius(this.caclImageRadius(index)) | 152 | .borderRadius(this.caclImageRadius(index)) |
| 88 | } | 153 | } |
| 89 | - } else if (this.appStyleImages.length === 4) { | 154 | + } else if (this.fullColumnImgUrls.length === 4) { |
| 90 | GridCol({ | 155 | GridCol({ |
| 91 | - span: { xs: 5 } | 156 | + span: { xs: 4 } |
| 92 | }) { | 157 | }) { |
| 93 | Image(item.fullUrl) | 158 | Image(item.fullUrl) |
| 94 | .aspectRatio(1) | 159 | .aspectRatio(1) |
-
Please register or login to post a comment