liyubing

feat(广告):绘制广告三图卡

import { CompDTO } from 'wdBean/Index';
/**
* @Description: 广告稿件 底部标签+删除按钮
* @Author:
* @Email: liyubing@wondertek.com.cn
* @CreateDate:
* @UpdateRemark: 更新说明
* @Version: 1.0
*/
@Component
export struct CardAdvBottom {
@State compDTO: CompDTO = {} as CompDTO;
build() {
Row() {
Text($r('app.string.comp_advertisement')).fontSize('12fp').fontColor($r('app.color.color_B0B0B0'))
Blank()
Stack() {
Image($r('app.media.comp_adv_close'))
.width(9)
.height(9)
.borderRadius({
topLeft: '4vp',
topRight: '4vp',
bottomLeft: '4vp',
bottomRight: '4vp'
})
}
.width(18)
.height(14)
.borderWidth(0.5)
.borderColor($r('app.color.color_EDEDED'))
.borderRadius(4)
}.width('100%')
}
}
\ No newline at end of file
... ...
... ... @@ -4,6 +4,7 @@ import { ProcessUtils } from 'wdRouter';
import measure from '@ohos.measure';
import { DisplayUtils } from 'wdKit/Index';
import { CardAdvBottom } from './CardAdvBottom';
const TAG: string = 'CardAdvSmallImageComponent';
... ... @@ -52,51 +53,32 @@ export struct CardAdvSmallImageComponent {
left: { anchor: '__container__', align: HorizontalAlign.Start },
})
.id("title_name")
// 广告图
Image(this.compDTO.matInfo.matImageUrl[0])
.width('34%')
.aspectRatio(3 / 2)
.borderRadius(4)
.id('adv_imag')
.borderWidth(0.5)
.borderColor($r('app.color.color_0D000000'))
.borderRadius(4)
.alignRules({
top: { anchor: 'title_name', align: VerticalAlign.Top },
left: { anchor: 'title_name', align: HorizontalAlign.End },
})
.margin({ left: 12 })
Row() {
Text($r('app.string.comp_advertisement')).fontSize('12fp').fontColor($r('app.color.color_B0B0B0'))
Blank()
Stack() {
Image($r('app.media.comp_adv_close'))
.width(9)
.height(9)
.borderRadius({
topLeft: '4vp',
topRight: '4vp',
bottomLeft: '4vp',
bottomRight: '4vp'
})
}
.width(18)
.height(14)
.borderWidth(0.5)
.borderColor($r('app.color.color_EDEDED'))
.borderRadius(4)
}.width('62%').alignRules({
CardAdvBottom().width('62%').id('bottom_adv').alignRules({
bottom: { anchor: this.isBigThreeLine ? '' : 'adv_imag', align: VerticalAlign.Bottom },
right: { anchor: this.isBigThreeLine ? '' : 'adv_imag', align: HorizontalAlign.Start },
top: { anchor: this.isBigThreeLine ? 'title_name' : '', align: VerticalAlign.Bottom },
left: { anchor: this.isBigThreeLine ? 'title_name' : '', align: HorizontalAlign.Start },
}).id('bottom_adv').margin({
}).margin({
right: this.isBigThreeLine ? 0 : 12,
top: this.isBigThreeLine ? 8 : 0,
})
}
.width("100%")
.height(this.isBigThreeLine ? 127 : 106)
... ...
... ... @@ -4,20 +4,20 @@ import { CommonConstants } from 'wdConstant/Index';
import { ProcessUtils } from 'wdRouter';
import { CardMediaInfo } from '../cardCommon/CardMediaInfo'
import { CardSourceInfo } from '../cardCommon/CardSourceInfo'
import { CardAdvBottom } from './CardAdvBottom';
const TAG: string = 'Card2Component';
/**
* @Description: 广告---三图卡
* @Author:
* @Email: liyubing@wondertek.com.cn
* @CreateDate:
* @UpdateRemark: 更新说明
* @Version: 1.0
/**
* @Description: 广告---三图卡
* @Author:
* @Email: liyubing@wondertek.com.cn
* @CreateDate:
* @UpdateRemark: 更新说明
* @Version: 1.0
*/
@Component
export struct CardAdvThreeImageComponent {
@State compDTO: CompDTO = {} as CompDTO
aboutToAppear(): void {
... ... @@ -31,14 +31,49 @@ export struct CardAdvThreeImageComponent {
}
build() {
Column() {
Text(this.compDTO.matInfo.advTitle)
.fontSize($r('app.float.font_size_17'))
.fontColor($r('app.color.color_222222'))
.maxLines(3)
.textOverflow({ overflow: TextOverflow.Ellipsis })// 超出的部分显示省略号。
.align(Alignment.Start)
//body
Column() {
//新闻标题
Text(this.compDTO.matInfo.advTitle)
.fontSize($r('app.float.font_size_18'))
.fontColor($r('app.color.color_222222'))
.maxLines(3)
.textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出的部分显示省略号。
//三图
Row() {
GridRow({ gutter: 2 }) {
ForEach(this.compDTO.matInfo.matImageUrl, (url: string, index: number) => {
if (index < 3) {
GridCol({ span: { xs: 4 } }) {
Image(url)
.width('100%')
.aspectRatio(113 / 75)
.borderRadius({
topLeft: index === 0 ? $r('app.float.image_border_radius') : 0,
topRight: index === 2 ? $r('app.float.image_border_radius') : 0,
bottomLeft: index === 0 ? $r('app.float.image_border_radius') : 0,
bottomRight: index === 2 ? $r('app.float.image_border_radius') : 0,
})
.borderColor($r('app.color.color_0D000000'))
}
}
})
}
}
.width(CommonConstants.FULL_PARENT)
.margin({ top: 8 })
// 广告工具组件
CardAdvBottom().width('100%').margin({ top: 8 })
}
.width('100%')
.justifyContent(FlexAlign.Start)
.alignItems(HorizontalAlign.Start)
.onClick((event: ClickEvent) => {
ProcessUtils.openAdvDetail(this.compDTO.matInfo)
})
}
.width(CommonConstants.FULL_WIDTH)
.padding({
... ... @@ -47,9 +82,6 @@ export struct CardAdvThreeImageComponent {
top: $r('app.float.card_comp_pagePadding_tb'),
bottom: $r('app.float.card_comp_pagePadding_tb')
})
.onClick((event: ClickEvent) => {
//ProcessUtils.processPage(this.contentDTO)
})
}
}
... ...