developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
王士厅
2b52b895 1 parent a90ccd38

cms视频详情页缺少来源、详情信息，见截图

Inline Side-by-side
Showing 2 changed files with 95 additions and 2 deletions
... ... @@ -3,6 +3,7 @@ import { ContentDetailDTO } from 'wdBean/Index'
import { DetailDialog } from './DetailDialog'
import { componentUtils } from '@kit.ArkUI'
const TAG = 'PlayerTitleView';
@Preview
@Component
export struct PlayerTitleView {
... ... @@ -11,6 +12,9 @@ export struct PlayerTitleView {
@Consume isOpenDetail: boolean
@Consume isDragging: boolean
@State titleHeight: number = 0
@State rmhPlatform: number = 0 // 1是人民号
@State isOverLines: boolean = false
@State summary: string = ''
dialogController: CustomDialogController = new CustomDialogController({
builder: DetailDialog({
name: this.getName(),
... ... @@ -26,8 +30,12 @@ export struct PlayerTitleView {
getName(): string {
// authTitle
if (this.rmhPlatform == 0) {
return this.contentDetailData?.newsSourceName || ''
} else {
return this.contentDetailData?.rmhInfo?.rmhName || ''
}
}
getIcon(): string {
return this.contentDetailData?.rmhInfo?.authIcon || ''
... ... @@ -41,7 +49,45 @@ export struct PlayerTitleView {
return this.contentDetailData?.newIntroduction || ''
}
/**
* 截断文本
* @author liuzhendong(猩猩G)
* @param {string} str 要截断的文本 '啊啊啊啊啊'
* @param {number} fontSize 字体大小(px)
* @param {number} maxLines 最大行数 3
* @param {number} textWidth 文本宽度(px) vp 需要转换vp2px()
* @returns {string} clipStr 截断后的文本 '啊啊'
*/
clipText(str: string, fontSize: number, maxLines: number, textWidth: number): string {
let strArr: string[] = str.split("")
let truncateContent: string = '啊啊啊啊啊啊' // ...比正常文字宽度更小，这里使用啊啊啊(任意三个文字)代替计算
let measureTruncateWidth: number = measure.measureText({
textContent: truncateContent,
fontSize: fontSize,
fontWeight: 400,
lineHeight: 20,
wordBreak:WordBreak.BREAK_ALL
})
let clipStr: string = ''
for (let i = 0; i < strArr.length; i++) {
if (measure.measureText({
textContent: clipStr,
fontSize: fontSize,
fontWeight: 400,
lineHeight: 20,
wordBreak:WordBreak.BREAK_ALL
}) >= textWidth * maxLines - measureTruncateWidth) {
this.isOverLines = true
break;
}
clipStr += strArr[i]
}
console.log(TAG, 'clipStr:', clipStr)
return clipStr
}
aboutToAppear(): void {
this.rmhPlatform = this.contentDetailData?.rmhPlatform || 0
const info = measure.measureTextSize({
textContent: this.getTitle(),
fontSize: 15,
... ... @@ -52,6 +98,8 @@ export struct PlayerTitleView {
})
this.titleHeight = info?.height as number || 0
console.log('titleHeight:', this.titleHeight,)
console.log(TAG, 'this.contentDetailData:', JSON.stringify(this.contentDetailData))
this.summary = this.getSummary()
}
build() {
... ... @@ -64,7 +112,7 @@ export struct PlayerTitleView {
.maxLines(1)
.lineHeight(25)
.fontWeight(600)
.fontFamily('PingFang SC-Regular')
.fontFamily('PingFang SC-Semibold')
.textOverflow({ overflow: TextOverflow.Ellipsis })
if (this.getIcon()) {
... ... @@ -87,7 +135,8 @@ export struct PlayerTitleView {
/**
* 标题大于三行或存在简介显示查看详情按钮
*/
if (this.titleHeight > 200 || this.getSummary()) {
if (this.rmhPlatform == 1) {
if (this.titleHeight > 200 || this.summary) {
Text('查看详情 > ')
.padding({
left: 6,
... ... @@ -108,6 +157,49 @@ export struct PlayerTitleView {
this.dialogController?.open()
})
}
} else {
if(this.summary) {
Text() {
Span(this.clipText(this.summary, 14, 2, this.windowWidth - 150 - vp2px(50)))
.fontSize(14)
.fontColor(Color.White)
.lineHeight(21)
.fontWeight(400)
.fontFamily('PingFang SC-Regular')
if (this.isOverLines) {
Span('... 全文')
.fontColor('#888888')
.fontWeight(400)
.fontFamily('PingFang SC-Regular')
.fontSize(12)
.onClick(() => {
this.isOpenDetail = true
this.dialogController?.open()
})
ImageSpan($r('app.media.comment_unfold_svg'))
.width(14)
.height(14)
.objectFit(ImageFit.Fill)
.verticalAlign(ImageSpanAlignment.CENTER)
.padding({
bottom: 4
})
.onClick(() => {
this.isOpenDetail = true
this.dialogController?.open()
})
}
}
.padding({
left: 6,
right: 6,
top: 4,
bottom: 4
})
.margin({ bottom: 8 })
}
}
}
.width(this.windowWidth - 150 + 'px')
... ...
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><g transform="matrix(0,-1,1,0,-16,16)"><g><path d="M10.303455641479491,17.960819560243227L4.363755241479492,23.900515460243227Q4.324434578479492,23.939835460243224,4.324704443879492,23.995445460243225Q4.324434578479492,24.051055460243226,4.363755241479492,24.090375460243223L10.303455641479491,30.030075460243225Q10.342505641479491,30.069075460243226,10.397735641479493,30.069075460243226Q10.452965641479492,30.069075460243226,10.492015641479492,30.030075460243225L11.387685641479493,29.134375460243227Q11.406435641479492,29.115675460243224,11.416585641479493,29.091175460243225Q11.426735641479493,29.066675460243225,11.426735641479493,29.040075460243223Q11.426735641479493,29.013575460243224,11.416585641479493,28.989075460243225Q11.406435641479492,28.964575460243225,11.387685641479493,28.945875460243226L6.437285641479493,23.995445460243225L11.387685641479493,19.045045460243227Q11.406435641479492,19.026295460243226,11.416585641479493,19.001795460243226Q11.426735641479493,18.977295460243226,11.426735641479493,18.950765460243225Q11.426735641479493,18.924245460243224,11.416585641479493,18.899744460243227Q11.406435641479492,18.875241460243224,11.387685641479493,18.856488460243224L10.492015641479492,17.960819560243227Q10.452965641479492,17.921767119783226,10.397735641479493,17.921767119783226Q10.342505641479491,17.921767119783226,10.303455641479491,17.960819560243227Z" fill-rule="evenodd" fill="#888888" fill-opacity="1"/></g></g></svg>
\ No newline at end of file
... ...