Showing
2 changed files
with
95 additions
and
2 deletions
| @@ -3,6 +3,7 @@ import { ContentDetailDTO } from 'wdBean/Index' | @@ -3,6 +3,7 @@ import { ContentDetailDTO } from 'wdBean/Index' | ||
| 3 | import { DetailDialog } from './DetailDialog' | 3 | import { DetailDialog } from './DetailDialog' |
| 4 | import { componentUtils } from '@kit.ArkUI' | 4 | import { componentUtils } from '@kit.ArkUI' |
| 5 | 5 | ||
| 6 | +const TAG = 'PlayerTitleView'; | ||
| 6 | @Preview | 7 | @Preview |
| 7 | @Component | 8 | @Component |
| 8 | export struct PlayerTitleView { | 9 | export struct PlayerTitleView { |
| @@ -11,6 +12,9 @@ export struct PlayerTitleView { | @@ -11,6 +12,9 @@ export struct PlayerTitleView { | ||
| 11 | @Consume isOpenDetail: boolean | 12 | @Consume isOpenDetail: boolean |
| 12 | @Consume isDragging: boolean | 13 | @Consume isDragging: boolean |
| 13 | @State titleHeight: number = 0 | 14 | @State titleHeight: number = 0 |
| 15 | + @State rmhPlatform: number = 0 // 1是人民号 | ||
| 16 | + @State isOverLines: boolean = false | ||
| 17 | + @State summary: string = '' | ||
| 14 | dialogController: CustomDialogController = new CustomDialogController({ | 18 | dialogController: CustomDialogController = new CustomDialogController({ |
| 15 | builder: DetailDialog({ | 19 | builder: DetailDialog({ |
| 16 | name: this.getName(), | 20 | name: this.getName(), |
| @@ -26,8 +30,12 @@ export struct PlayerTitleView { | @@ -26,8 +30,12 @@ export struct PlayerTitleView { | ||
| 26 | 30 | ||
| 27 | getName(): string { | 31 | getName(): string { |
| 28 | // authTitle | 32 | // authTitle |
| 33 | + if (this.rmhPlatform == 0) { | ||
| 34 | + return this.contentDetailData?.newsSourceName || '' | ||
| 35 | + } else { | ||
| 29 | return this.contentDetailData?.rmhInfo?.rmhName || '' | 36 | return this.contentDetailData?.rmhInfo?.rmhName || '' |
| 30 | } | 37 | } |
| 38 | + } | ||
| 31 | 39 | ||
| 32 | getIcon(): string { | 40 | getIcon(): string { |
| 33 | return this.contentDetailData?.rmhInfo?.authIcon || '' | 41 | return this.contentDetailData?.rmhInfo?.authIcon || '' |
| @@ -41,7 +49,45 @@ export struct PlayerTitleView { | @@ -41,7 +49,45 @@ export struct PlayerTitleView { | ||
| 41 | return this.contentDetailData?.newIntroduction || '' | 49 | return this.contentDetailData?.newIntroduction || '' |
| 42 | } | 50 | } |
| 43 | 51 | ||
| 52 | + /** | ||
| 53 | + * 截断文本 | ||
| 54 | + * @author liuzhendong(猩猩G) | ||
| 55 | + * @param {string} str 要截断的文本 '啊啊啊啊啊' | ||
| 56 | + * @param {number} fontSize 字体大小(px) | ||
| 57 | + * @param {number} maxLines 最大行数 3 | ||
| 58 | + * @param {number} textWidth 文本宽度(px) vp 需要转换vp2px() | ||
| 59 | + * @returns {string} clipStr 截断后的文本 '啊啊' | ||
| 60 | + */ | ||
| 61 | + clipText(str: string, fontSize: number, maxLines: number, textWidth: number): string { | ||
| 62 | + let strArr: string[] = str.split("") | ||
| 63 | + let truncateContent: string = '啊啊啊啊啊啊' // ...比正常文字宽度更小,这里使用啊啊啊(任意三个文字)代替计算 | ||
| 64 | + let measureTruncateWidth: number = measure.measureText({ | ||
| 65 | + textContent: truncateContent, | ||
| 66 | + fontSize: fontSize, | ||
| 67 | + fontWeight: 400, | ||
| 68 | + lineHeight: 20, | ||
| 69 | + wordBreak:WordBreak.BREAK_ALL | ||
| 70 | + }) | ||
| 71 | + let clipStr: string = '' | ||
| 72 | + for (let i = 0; i < strArr.length; i++) { | ||
| 73 | + if (measure.measureText({ | ||
| 74 | + textContent: clipStr, | ||
| 75 | + fontSize: fontSize, | ||
| 76 | + fontWeight: 400, | ||
| 77 | + lineHeight: 20, | ||
| 78 | + wordBreak:WordBreak.BREAK_ALL | ||
| 79 | + }) >= textWidth * maxLines - measureTruncateWidth) { | ||
| 80 | + this.isOverLines = true | ||
| 81 | + break; | ||
| 82 | + } | ||
| 83 | + clipStr += strArr[i] | ||
| 84 | + } | ||
| 85 | + console.log(TAG, 'clipStr:', clipStr) | ||
| 86 | + return clipStr | ||
| 87 | + } | ||
| 88 | + | ||
| 44 | aboutToAppear(): void { | 89 | aboutToAppear(): void { |
| 90 | + this.rmhPlatform = this.contentDetailData?.rmhPlatform || 0 | ||
| 45 | const info = measure.measureTextSize({ | 91 | const info = measure.measureTextSize({ |
| 46 | textContent: this.getTitle(), | 92 | textContent: this.getTitle(), |
| 47 | fontSize: 15, | 93 | fontSize: 15, |
| @@ -52,6 +98,8 @@ export struct PlayerTitleView { | @@ -52,6 +98,8 @@ export struct PlayerTitleView { | ||
| 52 | }) | 98 | }) |
| 53 | this.titleHeight = info?.height as number || 0 | 99 | this.titleHeight = info?.height as number || 0 |
| 54 | console.log('titleHeight:', this.titleHeight,) | 100 | console.log('titleHeight:', this.titleHeight,) |
| 101 | + console.log(TAG, 'this.contentDetailData:', JSON.stringify(this.contentDetailData)) | ||
| 102 | + this.summary = this.getSummary() | ||
| 55 | } | 103 | } |
| 56 | 104 | ||
| 57 | build() { | 105 | build() { |
| @@ -64,7 +112,7 @@ export struct PlayerTitleView { | @@ -64,7 +112,7 @@ export struct PlayerTitleView { | ||
| 64 | .maxLines(1) | 112 | .maxLines(1) |
| 65 | .lineHeight(25) | 113 | .lineHeight(25) |
| 66 | .fontWeight(600) | 114 | .fontWeight(600) |
| 67 | - .fontFamily('PingFang SC-Regular') | 115 | + .fontFamily('PingFang SC-Semibold') |
| 68 | .textOverflow({ overflow: TextOverflow.Ellipsis }) | 116 | .textOverflow({ overflow: TextOverflow.Ellipsis }) |
| 69 | 117 | ||
| 70 | if (this.getIcon()) { | 118 | if (this.getIcon()) { |
| @@ -87,7 +135,8 @@ export struct PlayerTitleView { | @@ -87,7 +135,8 @@ export struct PlayerTitleView { | ||
| 87 | /** | 135 | /** |
| 88 | * 标题大于三行或存在简介显示查看详情按钮 | 136 | * 标题大于三行或存在简介显示查看详情按钮 |
| 89 | */ | 137 | */ |
| 90 | - if (this.titleHeight > 200 || this.getSummary()) { | 138 | + if (this.rmhPlatform == 1) { |
| 139 | + if (this.titleHeight > 200 || this.summary) { | ||
| 91 | Text('查看详情 > ') | 140 | Text('查看详情 > ') |
| 92 | .padding({ | 141 | .padding({ |
| 93 | left: 6, | 142 | left: 6, |
| @@ -108,6 +157,49 @@ export struct PlayerTitleView { | @@ -108,6 +157,49 @@ export struct PlayerTitleView { | ||
| 108 | this.dialogController?.open() | 157 | this.dialogController?.open() |
| 109 | }) | 158 | }) |
| 110 | } | 159 | } |
| 160 | + } else { | ||
| 161 | + if(this.summary) { | ||
| 162 | + Text() { | ||
| 163 | + Span(this.clipText(this.summary, 14, 2, this.windowWidth - 150 - vp2px(50))) | ||
| 164 | + .fontSize(14) | ||
| 165 | + .fontColor(Color.White) | ||
| 166 | + .lineHeight(21) | ||
| 167 | + .fontWeight(400) | ||
| 168 | + .fontFamily('PingFang SC-Regular') | ||
| 169 | + if (this.isOverLines) { | ||
| 170 | + Span('... 全文') | ||
| 171 | + .fontColor('#888888') | ||
| 172 | + .fontWeight(400) | ||
| 173 | + .fontFamily('PingFang SC-Regular') | ||
| 174 | + .fontSize(12) | ||
| 175 | + .onClick(() => { | ||
| 176 | + this.isOpenDetail = true | ||
| 177 | + this.dialogController?.open() | ||
| 178 | + }) | ||
| 179 | + ImageSpan($r('app.media.comment_unfold_svg')) | ||
| 180 | + .width(14) | ||
| 181 | + .height(14) | ||
| 182 | + .objectFit(ImageFit.Fill) | ||
| 183 | + .verticalAlign(ImageSpanAlignment.CENTER) | ||
| 184 | + .padding({ | ||
| 185 | + bottom: 4 | ||
| 186 | + }) | ||
| 187 | + .onClick(() => { | ||
| 188 | + this.isOpenDetail = true | ||
| 189 | + this.dialogController?.open() | ||
| 190 | + }) | ||
| 191 | + | ||
| 192 | + } | ||
| 193 | + } | ||
| 194 | + .padding({ | ||
| 195 | + left: 6, | ||
| 196 | + right: 6, | ||
| 197 | + top: 4, | ||
| 198 | + bottom: 4 | ||
| 199 | + }) | ||
| 200 | + .margin({ bottom: 8 }) | ||
| 201 | + } | ||
| 202 | + } | ||
| 111 | 203 | ||
| 112 | } | 204 | } |
| 113 | .width(this.windowWidth - 150 + 'px') | 205 | .width(this.windowWidth - 150 + 'px') |
sight_harmony/features/wdDetailPlayShortVideo/src/main/resources/base/media/comment_unfold_svg.svg
0 → 100644
| 1 | +<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> |
-
Please register or login to post a comment