developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
wangyong_wd
c9902c8e 1 parent c1a39dbc

样式卡及组件配置更新

Inline Side-by-side
Showing 11 changed files with 732 additions and 123 deletions
/**
* 组件Style/展示样式
*/
export const enum CompStyle {
Label_03 = 'Label-03', // 标题卡：icon+文字
Carousel_Layout_01 = 'Zh_Carousel_Layout-01', // 通用轮播卡：视频、直播、活动、专题、榜单、外链
Carousel_Layout_02 = 'Carousel_Layout-02', // 直播轮播卡：直播
Single_Row_01 = 'Zh_Single_Row-01', // 三格方形小卡（排名）：专题、活动
Zh_Single_Row_01 = 'Zh_Single_Row-01', // 横划卡 imageScale-封面图比例 1-4:3, 2-16:9, 3-3:2
Single_Row_02 = 'Zh_Single_Row-02', // 通用横划卡：视频、直播、专题
Single_Row_03 = 'Single_Row-03', // 直播横划卡：直播
Single_Row_04 = 'Single_Row-04', // 三格方形小卡：专题、活动
... ... @@ -17,17 +15,52 @@ export const enum CompStyle {
Single_Column_04 = 'Single_Column-04', // 大卡横屏（带背景）：视频、直播
Single_Column_05 = 'Single_Column-05', // 海报图卡：/
Single_Column_06 = 'Single_Column-06', // 留言板卡：/
Zh_Single_Column_02 = 'Zh_Single_Column-02', // 头图卡
Grid_Layout_01 = 'Grid_Layout-01', // 横屏宫格卡:视频、直播
Grid_Layout_02 = 'Grid_Layout-02', // 竖屏宫格卡:视频、直播、榜单
Masonry_Layout_01 = 'Masonry_Layout-01', // 双列瀑布流/瀑布流卡：视频、直播、专题、活动
Title_Abbr_01 = '11', // 标题缩略
Title_All_01 = '3', // 全标题
Single_ImageCard_03 = '13',//单图卡：3行标题
Single_ImageCard_01 = '6',//单图卡，竖图
ZhGrid_Layout_03 = 'Zh_Grid_Layout-03', //金刚位卡
Album_Card_01 = '17', //图卡集
Zh_Single_Row_04 = 'Zh_Single_Row-04', // 地方精选卡
CompStyle_09 = '9', // 时间链卡
CompStyle_10 = '10', // 大专题卡
Zh_Carousel_Layout_01 = 'Zh_Carousel_Layout-01', //1 轮播图卡---1
Zh_Single_Row_01 = 'Zh_Single_Row-01', //2 横划卡 imageScale-封面图比例 1-4:3, 2-16:9, 3-3:2---1
Zh_Single_Row_02 = 'Zh_Single_Row-02', //3 小视频横划卡---1
Zh_Single_Row_03 = 'Zh_Single_Row-03', //6 直播预约卡
Zh_Single_Row_04 = 'Zh_Single_Row-04', // 地方精选卡---2
Zh_Single_Row_05 = 'Zh_Single_Row-05', //15 人民号横划卡---1
Zh_Single_Row_06 = 'Zh_Single_Row-06', //20 热门评论卡--精选评论卡-1
Zh_Single_Column_01 = 'Zh_Single_Column-01', //5 专题时间链卡
Zh_Single_Column_02 = 'Zh_Single_Column-02', //10 头图卡---2
Zh_Single_Column_03 = 'Zh_Single_Column-03', //9 直播大图卡
Zh_Single_Column_04 = 'Zh_Single_Column-04', //17 人民号主题卡---1
Zh_Single_Column_05 = 'Zh_Single_Column-05', //16 人民号入驻卡---1
Zh_Single_Column_06 = 'Zh_Single_Column-06', //12 本地问政卡
Zh_Single_Column_07 = 'Zh_Single_Column-07', //14 热门留言卡
Zh_Single_Column_08 = 'Zh_Single_Column-08', //12 问政提问卡
Zh_Single_Column_10 = 'Zh_Single_Column-10', //18 服务组合卡
Zh_Single_Column_11 = 'Zh_Single_Column-11', //19 问政组合卡
Zh_Grid_Layout_01 = 'Zh_Grid_Layout-01', //4 信息流组合卡
Zh_Grid_Layout_02 = 'Zh_Grid_Layout-02', //7 双列流小视频,一行两图卡---1
Zh_Grid_Layout_03 = 'Zh_Grid_Layout-03', //11 金刚位卡---2
Card_01 = '1', // 小图卡
Card_02 = '2', // 大图卡---2
Card_03 = '3', // 无图卡(全标题)---2
Card_04 = '4', // 三图卡---2
Card_05 = '5', // 头图卡---2
Card_06 = '6', // 小视频卡---2
Card_07 = '7', // 作者卡
Card_08 = '8', // 财经快讯卡
Card_09 = '9', // 时间轴卡---2
Card_10 = '10', // 大专题卡---2
Card_11 = '11', // 无图卡(标题省略)---2
Card_12 = '12', // 无图卡人民号---1
Card_13 = '13', // 单图卡---2--同6
Card_14 = '14', // 单图卡人民号---1
Card_15 = '15', // 大图卡人民号---1
Card_16 = '16', // 三图卡人民号---1
Card_17 = '17', // 图卡集---2
Card_18 = '18', // 图卡集人民号
Card_19 = '19', // 动态图文卡人民号---1
Card_20 = '20', // 动态视频卡人民号---1
Card_21 = '21', // 小视频卡人民号---1
Card_22 = '22', // 时间链
Card_23 = '23', // 问政卡
}
... ...
import { CommonConstants } from 'wdConstant';
import { Card3Component } from './cardview/Card3Component';
import { CommonConstants, CompStyle } from 'wdConstant';
import { ContentDTO } from 'wdBean';
import { Card2Component } from './cardview/Card2Component';
import { Card3Component } from './cardview/Card3Component';
import { Card4Component } from './cardview/Card4Component';
import { ContentDTO } from 'wdBean';
import { Card5Component } from './cardview/Card5Component';
import { Card6Component } from './cardview/Card6Component';
import { Card9Component } from './cardview/Card9Component';
import { Card10Component } from './cardview/Card10Component';
import { Card11Component } from './cardview/Card11Component';
import { Card17Component } from './cardview/Card17Component';
/**
* card适配器，卡片样式汇总，依据ContentDTO#appStyle
... ... @@ -20,16 +24,25 @@ export struct CardParser {
@Builder
contentBuilder(contentDTO: ContentDTO) {
if (contentDTO.appStyle === '2') {
if (contentDTO.appStyle === CompStyle.Card_02) {
Card2Component({ contentDTO })
} else if (contentDTO.appStyle === '3') {
} else if (contentDTO.appStyle === CompStyle.Card_03) {
Card3Component({ contentDTO })
} else if (contentDTO.appStyle === "4") {
} else if (contentDTO.appStyle === CompStyle.Card_04) {
Card4Component({ contentDTO })
} else if (contentDTO.appStyle === "5") {
} else if (contentDTO.appStyle === CompStyle.Card_05) {
Card5Component({ contentDTO })
} else if (contentDTO.appStyle === "6") {
} else if (contentDTO.appStyle === CompStyle.Card_06 || contentDTO.appStyle === CompStyle
.Card_13) {
Card6Component({ contentDTO })
} else if (contentDTO.appStyle === CompStyle.Card_09) {
Card9Component({ contentDTO })
} else if (contentDTO.appStyle === CompStyle.Card_10) {
Card10Component({ contentDTO })
} else if (contentDTO.appStyle === CompStyle.Card_11) {
Card11Component({ contentDTO })
} else if (contentDTO.appStyle === CompStyle.Card_17) {
Card17Component({ contentDTO })
}
else {
// todo:组件未实现 / Component Not Implemented
... ...
import { CompDTO, ContentDTO , slideShows} from 'wdBean';
import { CompDTO} from 'wdBean';
import { CommonConstants, CompStyle } from 'wdConstant';
import { BannerComponent } from './view/BannerComponent';
import { LabelComponent } from './view/LabelComponent';
import { TitleAbbrComponent } from './view/TitleAbbrComponent';
import { TitleAllComponent } from './view/TitleAllComponent';
import { SingleImageCardComponent } from './view/SingleImageCardComponent';
import { BigPicCardComponent } from './view/BigPicCardComponent';
import { TriPicCardComponent } from './view/TriPicCardComponent';
import { LiveHorizontalCardComponent } from './view/LiveHorizontalCardComponent';
import { HeadPictureCardComponent } from './view/HeadPictureCardComponent';
import { ZhGridLayoutComponent } from './view/ZhGridLayoutComponent';
import {
HorizontalStrokeCardThreeTwoRadioForMoreComponent
... ... @@ -16,11 +10,9 @@ import {
import {
HorizontalStrokeCardThreeTwoRadioForOneComponent
} from './view/HorizontalStrokeCardThreeTwoRadioForOneComponent';
import { AlbumCardComponent } from './view/AlbumCardComponent';
import { ZhSingleRow04 } from './view/ZhSingleRow04'
import { CompStyle_09 } from './view/CompStyle_09'
import { CompStyle_10 } from './view/CompStyle_10'
import { ZhSingleRow04 } from './compview/ZhSingleRow04'
import { ZhGridLayout03 } from './compview/ZhGridLayout03'
import { CardParser } from './CardParser';
/**
* comp适配器.
* 首页楼层comp解析器.
... ... @@ -28,67 +20,7 @@ import { CompStyle_10 } from './view/CompStyle_10'
@Preview
@Component
export struct CompParser {
@State compDTO: CompDTO = {
compStyle: '17',
imageScale: 3,
operDataList: [
{
title: 'title0',
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',
fullColumnImgUrls: [{
url: "https://uatjdcdnphoto.aikan.pdnews.cn/sjbj-20240104/image/display/c4a9b526e0994d1bbd3ac8450f5cfc6c.jpg?x-oss-process=image/resize,w_550/quality,q_90/format,jpg",
},{
url:'https://uatjdcdnphoto.aikan.pdnews' +
'.cn/sjbj-20231208/image/display/d4496925a1264a749975ae9b01a4ef46.png?x-oss-process=image/resize,w_550/quality,q_90/format,jpg',
},{
url: '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,
{
title: 'title1 title1 title1 title1 title1 title1 title1 title1 title1',
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,
{
title: 'title2',
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,
{
title: 'title3',
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,
{
title: 'title4',
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,
{
title: 'title5',
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,
{
title: 'title6',
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,
{
title: 'title7',
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,
{
title: 'title8',
description: "description8",
coverUrl: "https://uatjdcdnphoto.aikan.pdnews.cn/sjbj-20231228/image/display/90a2db4077d44a1f887f068fc659d977.jpeg?x-oss-process=image/resize,w_550/quality,q_90/format,jpg",
} as ContentDTO
]
} as CompDTO
@State compDTO: CompDTO = {} as CompDTO
compIndex: number = 0;
build() {
... ... @@ -99,19 +31,8 @@ export struct CompParser {
componentBuilder(compDTO: CompDTO, compIndex: number) {
if (compDTO.compStyle === CompStyle.Label_03) {
LabelComponent({ compDTO: compDTO })
} else if (compDTO.compStyle === CompStyle.Title_Abbr_01) {
TitleAbbrComponent({ compDTO: compDTO })
} else if (compDTO.compStyle === CompStyle.Title_All_01) {
TitleAllComponent({ compDTO: compDTO })
} else if (compDTO.compStyle === CompStyle.Carousel_Layout_01) {
} else if (compDTO.compStyle === CompStyle.Zh_Carousel_Layout_01) {
BannerComponent({ compDTO: compDTO })
} else if (compDTO.compStyle === CompStyle.Single_ImageCard_03
|| compDTO.compStyle === CompStyle.Single_ImageCard_01) {
SingleImageCardComponent({ compDTO: compDTO })
} else if (compDTO.compStyle === "2") {
BigPicCardComponent({ compDTO: compDTO })
} else if (compDTO.compStyle === "4") {
TriPicCardComponent({ compDTO: compDTO })
} else if (compDTO.compStyle === CompStyle.Zh_Single_Row_01 && compDTO.imageScale === 2) {
LiveHorizontalCardComponent({ compDTO: compDTO })
} else if (compDTO.compStyle === CompStyle.Zh_Single_Row_01 && compDTO.imageScale === 3) {
... ... @@ -120,19 +41,12 @@ export struct CompParser {
} else {
HorizontalStrokeCardThreeTwoRadioForOneComponent({ compDTO: compDTO })
}
} else if (compDTO.compStyle === CompStyle.Zh_Single_Column_02
|| compDTO.compStyle === '5') {
HeadPictureCardComponent({ compDTO: compDTO })
} else if (compDTO.compStyle === CompStyle.ZhGrid_Layout_03) {
ZhGridLayoutComponent({ compDTO: compDTO })
} else if (compDTO.compStyle === CompStyle.Album_Card_01) {
AlbumCardComponent({ compDTO: compDTO })
} else if (compDTO.compStyle === CompStyle.Zh_Grid_Layout_03) {
ZhGridLayout03({ compDTO: compDTO })
} else if (compDTO.compStyle === CompStyle.Zh_Single_Row_04) {
ZhSingleRow04({ compDTO: compDTO})
} else if (compDTO.compStyle === CompStyle.CompStyle_09) {
CompStyle_09({ compDTO: compDTO})
} else if (compDTO.compStyle === CompStyle.CompStyle_10) {
CompStyle_10({ compDTO: compDTO})
} else if (!isNaN(Number(compDTO.compStyle))) {
CardParser({ contentDTO: compDTO.operDataList[0]});
}
else {
// todo:组件未实现 / Component Not Implemented
... ...
import { ContentDTO, slideShows } from 'wdBean';
import { CommonConstants } from 'wdConstant'
import { DateTimeUtils } from 'wdKit';
import { ProcessUtils } from '../../utils/ProcessUtils';
/**
* 大专题卡--CompStyle: 10
*/
const TAG: string = 'Card10Component';
@Component
export struct Card10Component {
@State contentDTO: ContentDTO = {} as ContentDTO;
build() {
Column() {
// 顶部标题，最多两行
if (this.contentDTO.newsTitle) {
Text(this.contentDTO.newsTitle)
.width(CommonConstants.FULL_WIDTH)
.fontSize($r('app.float.font_size_17'))
.fontWeight(600)
.maxLines(2)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.margin({ bottom: 19 })
}
// 大图
Stack() {
Image(this.contentDTO && this.contentDTO.coverUrl)
.width('100%')
.borderRadius({
topLeft: $r('app.float.image_border_radius'),
topRight: $r('app.float.image_border_radius')
})
.onClick((event: ClickEvent) => {
ProcessUtils.processPage(this.contentDTO)
})
Text('专题')
.fontSize($r('app.float.font_size_12'))
.padding({ left: 8, right: 8, top: 3, bottom: 3 })
.backgroundColor(Color.Red)
.fontColor(Color.White)
.borderRadius($r('app.float.button_border_radius'))
.margin({ left: 5, bottom: 5 })
}.alignContent(Alignment.BottomStart)
// 专题列表--后端返回三个，
Column() {
ForEach(this.contentDTO.slideShows, (item: slideShows, index: number) => {
this.timelineItem(item, index)
})
}
// 底部-查看更多。根据接口返回的isMore判断是否显示查看更多
if (this.contentDTO.hasMore == 1) {
Row() {
Text("查看更多")
.fontSize($r("app.float.font_size_14"))
.fontColor($r("app.color.color_222222"))
.margin({ right: 1 })
Image($r("app.media.more"))
.width(14)
.height(14)
}
.backgroundColor($r('app.color.color_F5F5F5'))
.width(CommonConstants.FULL_WIDTH)
.height(40)
.borderRadius($r('app.float.button_border_radius'))
.justifyContent(FlexAlign.Center)
.margin({ top: 5 })
.onClick((event: ClickEvent) => {
ProcessUtils.processPage(this.contentDTO)
})
}
}
.width(CommonConstants.FULL_WIDTH)
.padding({
top: 14,
left: 16,
right: 16,
bottom: 14
})
.backgroundColor($r("app.color.white"))
.margin({ bottom: 8 })
}
@Builder
timelineItem(item: slideShows, index: number) {
Row() {
Column() {
Text(item.newsTitle)
.fontSize($r('app.float.font_size_17'))
.fontWeight(400)
.fontColor($r('app.color.color_222222'))
.maxLines(2)
.textOverflow({ overflow: TextOverflow.Ellipsis })
Row() {
// 展示发稿人
if (item.source) {
Text(item.source)
.fontSize($r('app.float.font_size_12'))
.fontColor($r('app.color.color_B0B0B0'))
.textOverflow({ overflow: TextOverflow.Ellipsis })
.maxLines(1)
.width(item.source.length > 10 ? '60%' : '')
Image($r('app.media.point'))
.width(16)
.height(16)
}
Text(DateTimeUtils.getCommentTime(Number.parseFloat(String(item.publishTime))))
.fontSize($r("app.float.font_size_12"))
.fontColor($r("app.color.color_B0B0B0"))
}
.margin({ top: 12 })
}
.layoutWeight(1)
.alignItems(HorizontalAlign.Start)
// 右侧图片
if (item.fullColumnImgUrls[0] && item.fullColumnImgUrls[0].url) {
Image(item.fullColumnImgUrls[0].url)
.width(117)
.height(78)
.objectFit(ImageFit.Cover)
.borderRadius($r('app.float.image_border_radius'))
.margin({ left: 12 })
}
}
.padding({ top: 10, bottom: 10 })
.onClick((event: ClickEvent) => {
const str: string = JSON.stringify(this.contentDTO);
const data: ContentDTO = JSON.parse(str)
data.objectId = item.newsId
data.relId = item.relId
data.objectType = String(item.objectType)
ProcessUtils.processPage(data)
})
}
}
\ No newline at end of file
... ...
//缩略标题
import { CommonConstants } from 'wdConstant'
import { ContentDTO } from 'wdBean'
import { DateTimeUtils } from 'wdKit'
const TAG = 'Card11Component';
/**
* 无图卡(标题省略)
*/
@Component
export struct Card11Component {
@State contentDTO: ContentDTO = {} as ContentDTO;
build() {
Column() {
Text(this.contentDTO.newsTitle)
.fontSize($r("app.float.font_size_16"))
.fontColor($r("app.color.color_222222"))
.maxLines(3)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.width(CommonConstants.FULL_WIDTH)
Row() {
Text("锐评")
.fontSize($r("app.float.font_size_12"))
.fontColor($r("app.color.color_ED2800"))
Text(this.contentDTO.source)
.fontSize($r("app.float.font_size_12"))
.fontColor($r("app.color.color_B0B0B0"))
.margin({ left: 6 })
Image($r("app.media.point"))
.width(16)
.height(16)
Text(DateTimeUtils.formatDate(Number.parseFloat(this.contentDTO.publishTime)))
.fontSize($r("app.float.font_size_12"))
.fontColor($r("app.color.color_B0B0B0"))
}.width(CommonConstants.FULL_WIDTH)
.justifyContent(FlexAlign.Start)
.margin({ top: 8 })
}.width(CommonConstants.FULL_WIDTH)
.padding({
top: 14,
left: 16,
right: 16,
bottom: 14
})
.backgroundColor($r("app.color.white"))
.margin({ bottom: 8 })
}
}
\ No newline at end of file
... ...
import { Action, CompDTO, ContentDTO, Params } from 'wdBean';
import { ExtraDTO } from 'wdBean/src/main/ets/bean/component/extra/ExtraDTO';
import { CommonConstants } from 'wdConstant/Index';
import { DateTimeUtils } from 'wdKit';
import { WDRouterRule } from 'wdRouter';
const TAG = 'Card17Component';
/**
* 图卡集---2
*/
@Component
export struct Card17Component {
@State compDTO: CompDTO = {} as CompDTO
@State contentDTO: ContentDTO = {} as ContentDTO;
build() {
Column({ space: 8 }) {
Text(this.contentDTO.newsTitle)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.fontSize(17)
.fontColor(0x222222)
.lineHeight(25)
.maxLines(3)
.width(CommonConstants.FULL_WIDTH)
RelativeContainer() {
Image(this.contentDTO.fullColumnImgUrls[0].url)
.width('66.6%')
.aspectRatio(16 / 9)
.alignRules({
top: { anchor: "__container__", align: VerticalAlign.Top },
left: { anchor: "__container__", align: HorizontalAlign.Start }
})
.id('mainImage')
Image(this.contentDTO.fullColumnImgUrls[1].url)
.width('33%')
.aspectRatio(16 / 9)
.alignRules({
top: { anchor: "__container__", align: VerticalAlign.Top },
right: { anchor: "__container__", align: HorizontalAlign.End }
})
.id('subTopImage')
Image(this.contentDTO.fullColumnImgUrls[2].url)
.width('33%')
.aspectRatio(16 / 9)
.alignRules({
right: { anchor: "__container__", align: HorizontalAlign.End },
bottom: { anchor: "__container__", align: VerticalAlign.Bottom }
})
.id('subBottomImage')
// 下面是渲染右下角图标
Shape() {
Rect().width(33).height(18)
}
.fill(0x000000)
.fillOpacity(0.3)
.strokeLineCap(LineCapStyle.Round)
.strokeLineJoin(LineJoinStyle.Round)
.antiAlias(true)
.id('shape')
.alignRules({
right: { anchor: "__container__", align: HorizontalAlign.End },
bottom: { anchor: "__container__", align: VerticalAlign.Bottom }
})
.margin({
right: 4,
bottom: 4
})
Image($r('app.media.album_card_shape'))
.width(22)
.height(18)
.alignRules({
left: { anchor: "shape", align: HorizontalAlign.Start },
top: { anchor: "shape", align: VerticalAlign.Top }
})
.id('shapeSubImage')
Text(this.contentDTO.fullColumnImgUrls.length + '')
.fontSize(13)
.fontColor(0xFFFFFF)
.id('pageIndex')
.alignRules({
right: { anchor: "shape", align: HorizontalAlign.End },
top: { anchor: "shape", align: VerticalAlign.Top }
})
.margin({ right: 2 })
.textAlign(TextAlign.Center)
.width(17)
.height(17)
}
.width(CommonConstants.FULL_WIDTH)
.aspectRatio(24 / 9)
.onClick((event: ClickEvent) => {
let taskAction: Action = {
type: 'JUMP_DETAIL_PAGE',
params: {
detailPageType: 17,
contentID: this.contentDTO.objectId,
extra: {
relType: this.contentDTO.relType,
relId: `${this.contentDTO.relId}`,
} as ExtraDTO
} as Params,
};
WDRouterRule.jumpWithAction(taskAction)
})
Row() {
if (this.contentDTO.source) {
Text(this.contentDTO.source)
.fontSize(13)
.fontColor(0xB0B0B0)
Image($r('app.media.point'))
.width(16)
.height(16)
}
if (this.contentDTO.publishTime && this.contentDTO.publishTime.length === 13) {
Text(DateTimeUtils.getCommentTime(Number.parseFloat(this.contentDTO.publishTime)))
.fontSize(13)
.fontColor(0xB0B0B0)
}
Text('328评')
.fontSize(13)
.fontColor(0xB0B0B0)
.margin({
left: 6
})
}
.width(CommonConstants.FULL_WIDTH)
.height(16)
.id('label')
}
.width(CommonConstants.FULL_WIDTH)
.padding({
top: 14,
left: 16,
right: 16,
bottom: 14
})
}
}
\ No newline at end of file
... ...
... ... @@ -62,8 +62,8 @@ export struct Card6Component {
Stack() {
Image(this.contentDTO.coverUrl)
.borderRadius(5)
.aspectRatio(this.contentDTO.appStyle === CompStyle.Single_ImageCard_03 ? 3 / 2 : 3 / 4)
.height(this.contentDTO.appStyle === CompStyle.Single_ImageCard_03 ? 90 : 180)
.aspectRatio(this.contentDTO.appStyle === CompStyle.Card_13 ? 3 / 2 : 3 / 4)
.height(this.contentDTO.appStyle === CompStyle.Card_13 ? 90 : 180)
if (this.contentDTO.videoInfo) {
Row() {
Image($r('app.media.iv_card_play_yellow_flag'))
... ... @@ -111,7 +111,7 @@ export struct Card6Component {
.padding(
{ top: 16, bottom: 16, left: 14, right: 14 })
.width(FULL_PARENT)
.height(this.contentDTO.appStyle === CompStyle.Single_ImageCard_03 ? 127 : 217)
.height(this.contentDTO.appStyle === CompStyle.Card_13 ? 127 : 217)
.justifyContent(FlexAlign.SpaceBetween)
}
... ...
import { ContentDTO, slideShows } from 'wdBean';
import { CommonConstants } from 'wdConstant'
import { DateTimeUtils } from 'wdKit';
import { ProcessUtils } from '../../utils/ProcessUtils';
/**
* 时间链卡--CompStyle: 09
*/
const TAG: string = 'Card9Component';
@Component
export struct Card9Component {
@State contentDTO: ContentDTO = {} as ContentDTO;
build() {
Column() {
// 顶部标题，最多两行
if (this.contentDTO.newsTitle) {
Text(this.contentDTO.newsTitle)
.width(CommonConstants.FULL_WIDTH)
.fontSize($r('app.float.font_size_17'))
.fontWeight(600)
.maxLines(2)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.margin({ bottom: 19 })
}
// 大图
Stack() {
Image(this.contentDTO.coverUrl)
.width('100%')
.borderRadius({
topLeft: $r('app.float.image_border_radius'),
topRight: $r('app.float.image_border_radius')
})
Text('专题')
.fontSize($r('app.float.font_size_12'))
.padding({ left: 8, right: 8, top: 3, bottom: 3 })
.backgroundColor(Color.Red)
.fontColor(Color.White)
.borderRadius($r('app.float.button_border_radius'))
.margin({ left: 5, bottom: 5 })
}.alignContent(Alignment.BottomStart)
// 时间线--后端返回三个，
Column() {
ForEach(this.contentDTO.slideShows, (item: slideShows, index: number) => {
this.timelineItem(item, index)
})
}
// 底部-查看更多。根据接口返回的isMore判断是否显示查看更多
if (this.contentDTO.hasMore == 1) {
Row() {
Text("查看更多")
.fontSize($r("app.float.font_size_14"))
.fontColor($r("app.color.color_222222"))
.margin({ right: 1 })
Image($r("app.media.more"))
.width(14)
.height(14)
}
.backgroundColor($r('app.color.color_F5F5F5'))
.width(CommonConstants.FULL_WIDTH)
.height(40)
.borderRadius($r('app.float.button_border_radius'))
.justifyContent(FlexAlign.Center)
.margin({ top: 5 })
}
}
.width(CommonConstants.FULL_WIDTH)
.padding({
top: 14,
left: 16,
right: 16,
bottom: 14
})
.backgroundColor($r("app.color.white"))
.margin({ bottom: 8 })
.onClick((event: ClickEvent) => {
ProcessUtils.processPage(this.contentDTO)
})
}
@Builder
timelineItem(item: slideShows, index: number) {
Column() {
Stack() {
if (index < this.contentDTO.slideShows.length - 1) {
Divider()
.vertical(true)
.color($r('app.color.color_EDEDED'))
.strokeWidth(1)
.margin({ top: index > 0 ? 0 : 16, left: 4 })
}
if (index > 0 && index == this.contentDTO.slideShows.length - 1) {
Divider()
.vertical(true)
.color($r('app.color.color_EDEDED'))
.strokeWidth(1)
.height(16)
.margin({ left: 4 })
}
Column() {
Row() {
// 标题
Image($r("app.media.point_icon"))
.width(9)
.height(9)
.margin({ right: 5 })
Text(DateTimeUtils.formatDate(item.publishTime, "MM月dd日 HH:mm"))
.fontSize($r('app.float.font_size_12'))
.fontColor($r('app.color.color_222222'))
.fontWeight(600)
}
.width(CommonConstants.FULL_WIDTH)
.height(32)
.alignItems(VerticalAlign.Center)
Row() {
Text(item.newsTitle)
.fontSize($r('app.float.font_size_17'))
.fontWeight(400)
.fontColor($r('app.color.color_222222'))
.layoutWeight(1)
.maxLines(2)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.alignSelf(ItemAlign.Center)
.margin({ left: 12 })
if (item.fullColumnImgUrls[0] && item.fullColumnImgUrls[0].url) {
Image(item.fullColumnImgUrls[0].url)
.width(90)
.height(60)
.borderRadius($r('app.float.image_border_radius'))
}
}
}
}
.alignContent(Alignment.TopStart)
}
.height(item.fullColumnImgUrls[0] && item.fullColumnImgUrls[0].url ? 100 : 78)
.alignItems(HorizontalAlign.Start)
}
}
\ 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';
import { ProcessUtils } from '../../utils/ProcessUtils';
const TAG = 'Zh_Grid_Layout-03';
const FULL_PARENT: string = '100%';
let listSize: number = 4;
/**
* 金刚卡位
* 枚举值Zh_Grid_Layout-03
* Zh_Grid_Layout-03
*
*/
@Preview
@Component
export struct ZhGridLayout03 {
@State compDTO: CompDTO = {} as CompDTO
aboutToAppear() {
if (this.compDTO.operDataList) {
listSize = this.compDTO.operDataList.length > 5 ? 4 : this.compDTO.operDataList.length;
}
}
build() {
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)
.aspectRatio(1 / 1)
.margin(16)
Text(item.newsTitle)
.fontSize(13)
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
}
.width('100%')
}
}
... ...
import { CompDTO, ContentDTO } from 'wdBean';
import { CommonConstants } from 'wdConstant';
import { DateTimeUtils } from 'wdKit';
import { ProcessUtils } from '../../utils/ProcessUtils';
/**
* 本地精选卡
* ZhSingleRow04
*/
@Component
export struct ZhSingleRow04 {
@State compDTO: CompDTO = {} as CompDTO
aboutToAppear() {}
build() {
Column(){
//顶部
Row(){
Row() {
Image($r("app.media.local_selection"))
.width(24)
.height(24)
.margin({ right: 4 })
Text(this.compDTO.objectTitle)
.fontSize($r("app.float.font_size_17"))
.fontColor($r("app.color.color_222222"))
.fontWeight(600)
}
Row() {
Text("更多")
.fontSize($r("app.float.font_size_14"))
.fontColor($r("app.color.color_999999"))
.margin({ right: 1 })
Image($r("app.media.more"))
.width(14)
.height(14)
}
}
.justifyContent(FlexAlign.SpaceBetween)
.margin({ top: 8, bottom: 8 })
.width('100%')
// 列表内容
List({ space: 12 }) {
ForEach(this.compDTO.operDataList, (item: ContentDTO) => {
ListItem() {
Row(){
if(item.coverUrl) {
Image(item.coverUrl)
.width(84)
.height(56)
.borderRadius(3)
.objectFit(ImageFit.Cover)
.padding({right: 6})
}
Column(){
Text(item.newsTitle)
.fontSize($r("app.float.font_size_16"))
.fontColor($r("app.color.color_212228"))
.fontWeight(400)
.maxLines(2)
.textOverflow({ overflow: TextOverflow.Ellipsis })// 超出的部分显示省略号。
.margin({ top: 8 })
Row(){
Text(item.source)
.fontSize($r('app.float.font_size_12'))
.fontColor($r('app.color.color_B0B0B0'))
.textOverflow({overflow: TextOverflow.Ellipsis})
.maxLines(1)
.width(item.source.length > 10 ? '60%' : '')
Image($r("app.media.point"))
.width(16)
.height(16)
Text(DateTimeUtils.getCommentTime(Number.parseFloat(this.compDTO.operDataList[0].publishTime)))
.fontSize($r("app.float.font_size_12"))
.fontColor($r("app.color.color_B0B0B0"))
}
.width('100%')
}
.width(200)
}
// .margin({right: 18})
.onClick(() =>{
ProcessUtils.processPage(item)
})
}
})
}
.listDirection(Axis.Horizontal)
.width('100%')
}
.width(CommonConstants.FULL_WIDTH)
.padding({
top: 14,
left: 16,
right: 16,
bottom: 14
})
.backgroundColor($r("app.color.white"))
.margin({ bottom: 8 })
}
}
\ No newline at end of file
... ...
... ... @@ -73,8 +73,8 @@ export struct SingleImageCardComponent {
Stack() {
Image(this.compDTO.operDataList[0].coverUrl)
.borderRadius(5)
.aspectRatio(this.compDTO.compStyle === CompStyle.Single_ImageCard_03 ? 3 / 2 : 3 / 4)
.height(this.compDTO.compStyle === CompStyle.Single_ImageCard_03 ? 90 : 180)
.aspectRatio(this.compDTO.compStyle === CompStyle.Card_13 ? 3 / 2 : 3 / 4)
.height(this.compDTO.compStyle === CompStyle.Card_13 ? 90 : 180)
if (this.compDTO.operDataList[0].videoInfo) {
Row() {
Image($r('app.media.iv_card_play_yellow_flag'))
... ... @@ -122,7 +122,7 @@ export struct SingleImageCardComponent {
.padding(
{ top: 16, bottom: 16, left: 14, right: 14 })
.width(FULL_PARENT)
.height(this.compDTO.compStyle === CompStyle.Single_ImageCard_03 ? 127 : 217)
.height(this.compDTO.compStyle === CompStyle.Card_13 ? 127 : 217)
.justifyContent(FlexAlign.SpaceBetween)
}
}
\ No newline at end of file
... ...