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 146 additions and 23 deletions
... ... @@ -45,11 +45,13 @@ export interface ContentDTO {
relId: string;
relType: string;
//单图卡/2行标题/3行标题
newsTitle:string;
newsTitle:string;//单图卡/2行标题/3行标题
publishTime:string;
visitorComment:number;
fullColumnImgUrls:FullColumnImgUrlDTO[];
liveInfo?: LiveInfoDTO; // 直播新闻信息【BFF聚合】
videoInfo?: VideoInfoDTO; // 视频新闻信息【BFF聚合】，视频非原片+清晰度最高的
newsSummary: string; //appstyle:2 ,新闻详情
}
\ No newline at end of file
... ...
import { Action, CompDTO, ContentDTO, Params } from 'wdBean';
import { CompStyle } from 'wdConstant';
import { Logger } from 'wdKit';
import { WDRouterRule } from 'wdRouter';
const TAG = 'SingleImageCardApp2Component';
const FULL_PARENT: string = '100%';
/**
* 单图卡-3行标题/2行标题
* 枚举值13
*
* 重磅推荐/精选/电视剧/电影/综艺/短剧/更多>/
*/
@Entry
@Component
export struct SingleImageCardApp2Component {
@State compDTO: CompDTO = {} as CompDTO
// @State compDTO: CompDTO = {
// operDataList: [
// {
// coverSize: '660*371',
// coverType: 1,
// visitorComment: 10,
// coverUrl: 'https://cdnjdphoto.aikan.pdnews.cn/zhbj-20240116/image/content/a9028e7011bb440e94ba7c63d80b39b7.png?x-oss-process=image/resize,w_550/quality,q_90/format,jpg',
// newsTitle: '一条江豚的自述',
// newsSummary: '我是生活在长江里的一头江豚，是长江中唯一的水生哺乳动物，更是国家一级保护动物。但曾几何时，我和我的江中小伙伴出现了生存危机……直到有一天，我突然发现，打渔人变成护渔人，江水变清澈了，长江逐渐恢复了生机，我的家族数量上升到了1249头。当长江之水再一次悠悠流淌，我们相拥在清澈波光中起舞。长江，我的家园。'
// } as ContentDTO
// ]
// } as CompDTO
aboutToAppear() {
}
build() {
Column() {
Text(this.compDTO.operDataList[0].newsTitle)
.fontSize(16)
.fontWeight(FontWeight.Bold)
.alignSelf(ItemAlign.Start)
.maxLines(3)
.textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出的部分显示省略号。
Image(this.compDTO.operDataList[0].coverUrl)
.borderRadius(5)
.aspectRatio(16 / 9)
.padding({ top: 10 })
Text(this.compDTO.operDataList[0].newsSummary)
.fontSize(14)
.padding({ top: 10 })
.alignSelf(ItemAlign.Start)
.maxLines(3)
.textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出的部分显示省略号。
Row() {
Text(this.compDTO.operDataList[0].visitorComment + "评")
.fontSize(12)
.fontColor(Color.Gray)
Image($r('app.media.icon_share'))
.width(16)
.height(16)
.margin(10)
.backgroundColor(Color.Brown)
}.width(FULL_PARENT)
.justifyContent(FlexAlign.SpaceBetween)
}
.margin(16)
}
}
\ No newline at end of file
... ...
... ... @@ -39,7 +39,7 @@ export struct SingleImageCardAppComponent {
.textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出的部分显示省略号。
Image(this.compDTO.operDataList[0].coverUrl)
.borderRadius(5)
.aspectRatio(3 / 2)
.aspectRatio(16 / 9)
.padding({ top: 10 })
Image($r('app.media.icon_share'))
.width(16)
... ...
... ... @@ -12,14 +12,14 @@ const FULL_PARENT: string = '100%';
* ImageCard-03
* 重磅推荐/精选/电视剧/电影/综艺/短剧/更多>/
*/
@Entry
@Component
export struct SingleImageCardComponent {
@State compDTO: CompDTO = {} as CompDTO
@State titleNumber: number = 3 //标题行数
aboutToAppear() {
Logger.debug(TAG + "" + JSON.stringify(this.compDTO.operDataList));
// Logger.debug(TAG + "" + JSON.stringify(this.compDTO.operDataList));
if(this.compDTO.operDataList[0].newsTitle.length > 26){
this.titleNumber = 3;
} else {
... ...
... ... @@ -5,6 +5,7 @@ import { WDRouterRule } from 'wdRouter';
const TAG = 'Zh_Grid_Layout-03';
const FULL_PARENT: string = '100%';
let listSize: number = 4;
/**
* 金刚卡位
... ... @@ -12,39 +13,92 @@ const FULL_PARENT: string = '100%';
* Zh_Grid_Layout-03
*
*/
@Entry
@Component
export struct ZhGridLayoutComponent {
@State compDTO: CompDTO = {} as CompDTO
// @State compDTO: CompDTO = {
// operDataList: [
// {
// newsTitle: '健康专栏',
// description: "description0",
// coverUrl: 'https://uatjdcdnphoto.aikan.pdnews.cn/sjbj-20231208/image/display/d4496925a1264a749975ae9b01a4ef46.png?x-oss-process=image/resize,w_550/quality,q_90/format,jpg'
// } as ContentDTO,
// {
// newsTitle: '金刚栏位22233',
// description: "description1",
// coverUrl: "https://uatjdcdnphoto.aikan.pdnews.cn/sjbj-20240104/image/display/c4a9b526e0994d1bbd3ac8450f5cfc6c.jpg?x-oss-process=image/resize,w_550/quality,q_90/format,jpg",
// } as ContentDTO,
// {
// newsTitle: '体育专栏2',
// description: "description2",
// 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",
// } as ContentDTO,
// {
// newsTitle: '农业',
// description: "description3",
// 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'
// } as ContentDTO,
// {
// newsTitle: '民生铭记',
// description: "description4",
// coverUrl: "https://uatjdcdnphoto.aikan.pdnews.cn/sjbj-20231218/image/display/62bdbbb35dbd45689e00790c81f04c4b.png?x-oss-process=image/resize,w_550/quality,q_90/format,jpg",
// } as ContentDTO,
// {
// newsTitle: '春节大欢乐',
// description: "description5",
// coverUrl: "https://uatjdcdnphoto.aikan.pdnews.cn/sjbj-20231218/image/display/f79bbaa5a33b4bd88176071c4f797ff6.png?x-oss-process=image/resize,w_550/quality,q_90/format,jpg",
// } as ContentDTO,
// {
// newsTitle: '春节大欢乐',
// description: "description6",
// coverUrl: "https://uatjdcdnphoto.aikan.pdnews.cn/sjbj-20231218/image/display/2c1d917009584ce2bb4a35cbb3a860a0.png?x-oss-process=image/resize,w_550/quality,q_90/format,jpg",
// } as ContentDTO,
// {
// newsTitle: '旅游',
// description: "description7",
// coverUrl: "https://uatjdcdnphoto.aikan.pdnews.cn/sjbj-20231222/image/display/117dc516ca5c42d5843c0d32050c9fc6.jpeg?x-oss-process=image/resize,w_240/quality,q_90/format,jpg",
// } as ContentDTO
// ]
// } as CompDTO
aboutToAppear() {
// Logger.info(TAG + ' comp:'+ JSON.stringify(this.compDTO))
if (this.compDTO.operDataList) {
listSize = this.compDTO.operDataList.length > 5 ? 4 : this.compDTO.operDataList.length;
}
}
build() {
Column() {
Flex({ wrap: FlexWrap.Wrap,
justifyContent: FlexAlign.SpaceEvenly,
alignItems: ItemAlign.End }) {
ForEach(this.compDTO.operDataList, (item: ContentDTO) => {
GridRow({
columns: { sm: listSize, md: 8 },
breakpoints: { value: ['320vp', '520vp', '840vp'] }
}) {
ForEach(this.compDTO.operDataList, (item: ContentDTO, index: number) => {
GridCol() {
this.buildItemCard(this.compDTO.operDataList[index]);
}
})
}
}
/**
* 组件项
*
* @param programmeBean item 组件项, 上面icon,下面标题
*/
@Builder
buildItemCard(item: ContentDTO) {
Column() {
Image(item.coverUrl)
.width(44)
.borderRadius(5)
.aspectRatio(1 / 1)
.autoResize(true)
.margin(16)
Text(item.newsTitle)
.fontSize(13)
.padding({ top: 8 })
}.height(68).width(75)
}, (item: ContentDTO) => JSON.stringify(item))
}
.backgroundColor(Color.White)
.padding({
top: 14,
bottom: 14
})
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
}
.width('100%')
}
}
... ...