developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
wangyong_wd
7b696830 1 parent cdcc28f9

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

Inline Side-by-side
Showing 3 changed files with 86 additions and 18 deletions
... ... @@ -3,6 +3,7 @@ export interface FullColumnImgUrlDTO {
height: number;
landscape: number;
size: number | null;
url: string;
url: string; // 图片地址--列表显示
weight: number;
fullUrl: string; // 图片地址--预览地址使用；【人民号动态卡预览】
}
... ...
... ... @@ -48,6 +48,8 @@ export struct CardParser {
Card11Component({ contentDTO })
} else if (contentDTO.appStyle === CompStyle.Card_17) {
Card17Component({ contentDTO })
} else if (contentDTO.appStyle === CompStyle.Card_19) {
Card19Component({ contentDTO })
} else if (contentDTO.appStyle === CompStyle.Card_20) {
Card20Component({ contentDTO })
}
... ...
import { ArticleListDTO, appStyleImagesDTO } from 'wdBean';
import { ContentDTO, FullColumnImgUrlDTO } from 'wdBean';
import { RmhTitle } from '../cardCommon/RmhTitle'
const TAG = 'Card19Component';
... ... @@ -9,7 +9,66 @@ const TAG = 'Card19Component';
@Entry
@Component
export struct Card19Component {
@State articleListItem: ArticleListDTO = {} as ArticleListDTO
@State contentDTO: ContentDTO = {
// appStyle: '19',
// coverUrl: 'https://rmrbcmsonline.peopleapp.com/upload/ueditor/image/20240323/a_955994160362418176.png?x-oss-process=image/resize,w_550/quality,q_90/format,jpg',
// fullColumnImgUrls: [
// {
// fullUrl: 'https://rmrbcmsonline.peopleapp.com/upload/ueditor/image/20240323/a_955994160362418176.png?x-oss-process=image/quality,q_90/auto-orient,1',
// height: 1500,
// landscape: 1,
// size: 1,
// url: 'https://rmrbcmsonline.peopleapp.com/upload/ueditor/image/20240323/a_955994160362418176.png?x-oss-process=image/resize,w_550/quality,q_90/format,jpg',
// weight: 2000
// },
// {
// fullUrl: 'https://rmrbcmsonline.peopleapp.com/upload/ueditor/image/20240323/a_955994155727712256.png?x-oss-process=image/quality,q_90/auto-orient,1',
// height: 1500,
// landscape: 1,
// size: 1,
// url: 'https://rmrbcmsonline.peopleapp.com/upload/ueditor/image/20240323/a_955994155727712256.png?x-oss-process=image/resize,w_550/quality,q_90/format,jpg',
// weight: 2000
// },
// {
// fullUrl: 'https://rmrbcmsonline.peopleapp.com/upload/ueditor/image/20240323/a_955994132109586432.png?x-oss-process=image/quality,q_90/auto-orient,1',
// height: 1280,
// landscape: 1,
// size: 1,
// url: 'https://rmrbcmsonline.peopleapp.com/upload/ueditor/image/20240323/a_955994132109586432.png?x-oss-process=image/resize,w_550/quality,q_90/format,jpg',
// weight: 1707
// },
// {
// fullUrl: 'https://rmrbcmsonline.peopleapp.com/upload/ueditor/image/20240323/a_955994132109586432.png?x-oss-process=image/quality,q_90/auto-orient,1',
// height: 1280,
// landscape: 1,
// size: 1,
// url: 'https://rmrbcmsonline.peopleapp.com/upload/ueditor/image/20240323/a_955994132109586432.png?x-oss-process=image/resize,w_550/quality,q_90/format,jpg',
// weight: 1707
// }
// ],
// newsSummary: '#平安建设双提升#【进工地，送安全】3月21日下午，@合肥交警 包河大队走进辖区建筑工地为驾驶员、安全员们开展春季交通安全主题宣传活动。活动中，交警结合涉工程运输车、渣土车交通事故案例，详细讲解行驶注意事项，并普及了“一盔一带”“右转必停”等安全常识，要求驾驶员牢固树立交通安全意识，自觉遵守交通法律法规，确保出行安全。',
// newsTitle: '#平安建设双提升#【进工地，送安全】3月21日下午，@合肥交警 包河大队走进辖区建筑工地为驾驶员、安全员们开展春季交通安全主题宣传活动。活动中，交警结合涉工程运输车、渣土车交通事故案例，详细讲解行驶注意事项，并普及了“一盔一带”“右转必停”等安全常识，要求驾驶员牢固树立交通安全意识，自觉遵守交通法律法规，确保出行安全。',
// publishTime: '1711185754000',
// relType: '1',
// rmhInfo: {
// authIcon: '',
// authTitle: '',
// authTitle2: '',
// banControl: 0,
// cnIsAttention: 1,
// cnIsComment: 1,
// cnIsLike: 1,
// cnMainControl: 1,
// cnShareControl: 1,
// posterShareControl: 1,
// rmhDesc: '合肥市公安局官方人民号',
// 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',
// rmhId: '4255290',
// rmhName: '合肥警方',
// userId: '513697181730757',
// userType: '2'
// }
} as ContentDTO
aboutToAppear(): void {
}
... ... @@ -17,17 +76,17 @@ export struct Card19Component {
build() {
Column() {
// rmh信息
// RmhTitle()
RmhTitle({ rmhInfo: this.contentDTO.rmhInfo })
// 标题
if (this.articleListItem.title) {
Text(this.articleListItem.title)
if (this.contentDTO.newsTitle) {
Text(this.contentDTO.newsTitle)
.fontSize($r('app.float.font_size_17'))
.fontColor($r('app.color.color_222222'))
.textOverflowStyle(2)
.margin({ bottom: 8 })
}
// 图片-从无图到9图展示
createArticleListItem({ appStyleImages: this.articleListItem.appStyleImages })
createImg({ fullColumnImgUrls: this.contentDTO.fullColumnImgUrls })
//TODO 底部的：分享、评论、点赞 功能；需要引用一个公共组件
}
.padding({
... ... @@ -47,9 +106,15 @@ interface radiusType {
}
@Component
struct createArticleListItem {
@Prop appStyleImages: appStyleImagesDTO[]
struct createImg {
@Prop fullColumnImgUrls: FullColumnImgUrlDTO[]
aboutToAppear(): void {
if(this.fullColumnImgUrls.length === 4) { // 为了使用栅格布局以便于占用三分之二的宽度，加一个占位
this.fullColumnImgUrls.splice(2,0, {
fullUrl: ''
} as FullColumnImgUrlDTO)
}
}
caclImageRadius(index: number) {
let radius: radiusType = {
topLeft: index === 0 ? $r('app.float.image_border_radius') : 0,
... ... @@ -57,14 +122,14 @@ struct createArticleListItem {
bottomLeft: 0,
bottomRight: 0,
}
if (this.appStyleImages.length === 1) {
if (this.fullColumnImgUrls.length === 1) {
radius.topRight = index === 0 ? $r('app.float.image_border_radius') : 0
radius.bottomLeft = index === 0 ? $r('app.float.image_border_radius') : 0
radius.bottomRight = index === 0 ? $r('app.float.image_border_radius') : 0
} else if (this.appStyleImages.length === 4) {
} else if (this.fullColumnImgUrls.length === 5 && !this.fullColumnImgUrls[2].fullUrl) {
radius.topRight = index === 1 ? $r('app.float.image_border_radius') : 0
radius.bottomLeft = index === 2 ? $r('app.float.image_border_radius') : 0
radius.bottomRight = index === 3 ? $r('app.float.image_border_radius') : 0
radius.bottomLeft = index === 3 ? $r('app.float.image_border_radius') : 0
radius.bottomRight = index === 4 ? $r('app.float.image_border_radius') : 0
} else {
radius.topRight = index === 2 ? $r('app.float.image_border_radius') : 0
radius.bottomLeft = index === 6 ? $r('app.float.image_border_radius') : 0
... ... @@ -77,8 +142,8 @@ struct createArticleListItem {
GridRow({
gutter: { x: 2, y: 2 }
}) {
ForEach(this.appStyleImages, (item: appStyleImagesDTO, index: number) => {
if (this.appStyleImages.length === 1) {
ForEach(this.fullColumnImgUrls, (item: FullColumnImgUrlDTO, index: number) => {
if (this.fullColumnImgUrls.length === 1) {
GridCol({
span: { xs: 8 }
}) {
... ... @@ -86,9 +151,9 @@ struct createArticleListItem {
.width('100%')
.borderRadius(this.caclImageRadius(index))
}
} else if (this.appStyleImages.length === 4) {
} else if (this.fullColumnImgUrls.length === 4) {
GridCol({
span: { xs: 5 }
span: { xs: 4 }
}) {
Image(item.fullUrl)
.aspectRatio(1)
... ...