developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
liyubing
a04f9b3f 1 parent 943aece3

feat(广告)：绘制广告小图卡

Inline Side-by-side
Showing 13 changed files with 122 additions and 107 deletions
... ... @@ -67,15 +67,15 @@ export const enum CompStyle {
Card_Adv_4 = 4, //4：轮播图 5：三图广告 6：小图广告 7：长通栏广告 8：大图广告 9：视频广告 10：展会广告 11：冠名广告 12：顶部长通栏广告
Card_Adv_5 = 5,
Card_Adv_6 = 5,
Card_Adv_7 = 7,
Card_Adv_8 = 8,
Card_Adv_9 = 9,
Card_Adv_10 = 10,
Card_Adv_11 = 11,
Card_Adv_12 = 12,
Card_Adv_4 = 4, //4：轮播图
Card_Adv_5 = 5, // 5：三图广告
Card_Adv_6 = 6, // 6：小图广告
Card_Adv_7 = 7, // 7：长通栏广告
Card_Adv_8 = 8, // 8：大图广告
Card_Adv_9 = 9, // 9：视频广告
Card_Adv_10 = 10, // 10：展会广告
Card_Adv_11 = 11, // 11：冠名广告
Card_Adv_12 = 12, // 12：顶部长通栏广告
/**
* 本地稿件和组件样式
... ...
... ... @@ -17,7 +17,7 @@ const TAG = 'ProcessUtils';
*/
export class ProcessUtils {
/**
* 广告中心的业务广告跳转方法（ 现用在挂角广告）
* 广告中心的业务广告跳转方法（ 现用在挂角广告、信息流页面广告）
* @param advContent
*/
static openAdvDetail(matInfo: CompAdvMatInfoBean) {
... ...
... ... @@ -23,7 +23,6 @@ import { ZhGridLayout02 } from './compview/ZhGridLayout02';
import { Card2Component } from './cardview/Card2Component';
import { Card5Component } from './cardview/Card5Component';
import { WDRouterPage, WDRouterRule } from 'wdRouter/Index';
import { CardAdvComponent } from './cardViewAdv/CardAdvComponent';
import { AdvCardParser } from './cardViewAdv/AdvCardParser';
/**
... ...
import { CompStyle } from 'wdConstant';
import { CompDTO } from 'wdBean';
import { CardAdvComponent } from './CardAdvComponent';
import { CardAdvThreeImageComponent } from './CardAdvThreeImageComponent';
import { CardAdvSmallImageComponent } from './CardAdvSmallImageComponent';
import { CardAdvLongImageComponent } from './CardAdvLongImageComponent';
... ...
... ... @@ -22,12 +22,12 @@ export struct CardAdvBigImageComponent {
aboutToAppear(): void {
console.error('ZZZXXXXX', '--------aboutToAppear-----')
console.error('ZZZXXXXX', '----大图卡----aboutToAppear-----')
}
aboutToDisappear(): void {
console.error('ZZZXXXXX', '--------aboutToDisappear-----')
console.error('ZZZXXXXX', '---大图卡-----aboutToDisappear-----')
}
build() {
... ...
//全标题 "appStyle":"2",
import { CompDTO, ContentDTO } from 'wdBean';
import { CommonConstants } from 'wdConstant/Index';
import { ProcessUtils } from 'wdRouter';
import { CardMediaInfo } from '../cardCommon/CardMediaInfo'
import { CardSourceInfo } from '../cardCommon/CardSourceInfo'
const TAG: string = 'Card2Component';
/**
* @Description: 类描述
* @Author:
* @Email: liyubing@wondertek.com.cn
* @CreateDate:
* @UpdateRemark: 更新说明
* @Version: 1.0
*/
@Component
export struct CardAdvComponent {
@State compDTO: CompDTO = {} as CompDTO
aboutToAppear(): void {
console.error('ZZZXXXXX', '--------aboutToAppear-----')
}
aboutToDisappear(): void {
console.error('ZZZXXXXX', '--------aboutToDisappear-----')
}
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)
}
.width(CommonConstants.FULL_WIDTH)
.padding({
left: $r('app.float.card_comp_pagePadding_lf'),
right: $r('app.float.card_comp_pagePadding_lf'),
top: $r('app.float.card_comp_pagePadding_tb'),
bottom: $r('app.float.card_comp_pagePadding_tb')
})
.onClick((event: ClickEvent) => {
//ProcessUtils.processPage(this.contentDTO)
})
}
}
@Extend(Text)
function bottomTextStyle() {
.fontSize(12)
.fontColor('#B0B0B0')
}
\ No newline at end of file
... ... @@ -22,12 +22,12 @@ export struct CardAdvGanMiComponent {
aboutToAppear(): void {
console.error('ZZZXXXXX', '--------aboutToAppear-----')
console.error('ZZZXXXXX', '--冠名广告------aboutToAppear-----')
}
aboutToDisappear(): void {
console.error('ZZZXXXXX', '--------aboutToDisappear-----')
console.error('ZZZXXXXX', '--冠名广告------aboutToDisappear-----')
}
build() {
... ...
... ... @@ -22,12 +22,12 @@ export struct CardAdvLongImageComponent {
aboutToAppear(): void {
console.error('ZZZXXXXX', '--------aboutToAppear-----')
console.error('ZZZXXXXX', '--长通栏广告 和 顶部长通栏广告------aboutToAppear-----')
}
aboutToDisappear(): void {
console.error('ZZZXXXXX', '--------aboutToDisappear-----')
console.error('ZZZXXXXX', '--长通栏广告 和 顶部长通栏广告------aboutToDisappear-----')
}
build() {
... ...
//全标题 "appStyle":"2",
import { CompDTO, ContentDTO } from 'wdBean';
import { CommonConstants } from 'wdConstant/Index';
import { CompDTO } from 'wdBean';
import { ProcessUtils } from 'wdRouter';
import { CardMediaInfo } from '../cardCommon/CardMediaInfo'
import { CardSourceInfo } from '../cardCommon/CardSourceInfo'
const TAG: string = 'Card2Component';
/**
* @Description: 广告---小图卡
* @Author:
* @Email: liyubing@wondertek.com.cn
* @CreateDate:
* @UpdateRemark: 更新说明
* @Version: 1.0
import measure from '@ohos.measure';
import { DisplayUtils } from 'wdKit/Index';
const TAG: string = 'CardAdvSmallImageComponent';
/**
* @Description: 广告---小图卡
* @Author:
* @Email: liyubing@wondertek.com.cn
* @CreateDate:
* @UpdateRemark: 更新说明
* @Version: 1.0
*/
@Component
export struct CardAdvSmallImageComponent {
@State compDTO: CompDTO = {} as CompDTO
@State isBigThreeLine: boolean = false // 标题的行数大于等于3行 是true
aboutToAppear(): void {
console.error('ZZZXXXXX', '--------aboutToAppear-----')
console.error('ZZZXXXXX', '----小图卡----aboutToAppear-----')
// 计算标题文本行数
let screenWith = DisplayUtils.getDeviceWidth();
screenWith = screenWith * 0.62
let titleNameLineNum = this.getTextLineNum(this.compDTO.matInfo.advTitle, screenWith, 25, 18)
this.isBigThreeLine = titleNameLineNum >= 3;
}
aboutToDisappear(): void {
console.error('ZZZXXXXX', '--------aboutToDisappear-----')
console.error('ZZZXXXXX', '---小图卡-----aboutToDisappear-----')
}
build() {
Column() {
RelativeContainer() {
// 广告标题
Text(this.compDTO.matInfo.advTitle)
.fontSize($r('app.float.font_size_17'))
.fontSize('18fp')
.fontColor($r('app.color.color_222222'))
.maxLines(3)
.lineHeight(25)
.textOverflow({ overflow: TextOverflow.Ellipsis })// 超出的部分显示省略号。
.align(Alignment.Start)
.width('62%')
.alignRules({
top: { anchor: '__container__', align: VerticalAlign.Top },
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')
.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({
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({
right: this.isBigThreeLine ? 0 : 12,
top: this.isBigThreeLine ? 8 : 0,
})
}
.width(CommonConstants.FULL_WIDTH)
.width("100%")
.height(this.isBigThreeLine ? 127 : 106)
.padding({
left: $r('app.float.card_comp_pagePadding_lf'),
right: $r('app.float.card_comp_pagePadding_lf'),
... ... @@ -48,13 +107,31 @@ export struct CardAdvSmallImageComponent {
bottom: $r('app.float.card_comp_pagePadding_tb')
})
.onClick((event: ClickEvent) => {
//ProcessUtils.processPage(this.contentDTO)
ProcessUtils.openAdvDetail(this.compDTO.matInfo)
})
}
// 获取文本几行
private getTextLineNum(text: string, constraintWidth: number, lineHeight: number, fontSize: number | string | Resource) {
let size = this.topMeasureText(text, constraintWidth, lineHeight, fontSize)
let height: number = Number(size.height)
return Math.ceil(px2vp(height) / lineHeight)
}
private topMeasureText(text: string, constraintWidth: number, lineHeight: number, fontSize: number | string | Resource) {
return measure.measureTextSize({
textContent: text,
fontSize: fontSize,
lineHeight: lineHeight,
constraintWidth: constraintWidth,
})
}
}
@Extend(Text)
function bottomTextStyle() {
.fontSize(12)
.fontColor('#B0B0B0')
}
\ No newline at end of file
}
... ...
... ... @@ -22,12 +22,12 @@ export struct CardAdvThreeImageComponent {
aboutToAppear(): void {
console.error('ZZZXXXXX', '--------aboutToAppear-----')
console.error('ZZZXXXXX', '---三图卡-----aboutToAppear-----')
}
aboutToDisappear(): void {
console.error('ZZZXXXXX', '--------aboutToDisappear-----')
console.error('ZZZXXXXX', '----三图卡----aboutToDisappear-----')
}
build() {
... ...
... ... @@ -22,12 +22,12 @@ export struct CardAdvVideoComponent {
aboutToAppear(): void {
console.error('ZZZXXXXX', '--------aboutToAppear-----')
console.error('ZZZXXXXX', '--视频广告------aboutToAppear-----')
}
aboutToDisappear(): void {
console.error('ZZZXXXXX', '--------aboutToDisappear-----')
console.error('ZZZXXXXX', '---视频广告-----aboutToDisappear-----')
}
build() {
... ...
... ... @@ -22,12 +22,12 @@ export struct CardAdvVideoExComponent {
aboutToAppear(): void {
console.error('ZZZXXXXX', '--------aboutToAppear-----')
console.error('ZZZXXXXX', '--冠名广告------aboutToAppear-----')
}
aboutToDisappear(): void {
console.error('ZZZXXXXX', '--------aboutToDisappear-----')
console.error('ZZZXXXXX', '----冠名广告----aboutToDisappear-----')
}
build() {
... ...