wangyong_wd

动态图文卡人民号字段调试

@@ -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)