chenjun1_wd

19988 视频详情页,标题和摘要折行不正确,全文按钮不应折到下一行,省略号和全文按钮颜色不正确。

1 import measure from '@ohos.measure' 1 import measure from '@ohos.measure'
2 import { ContentDetailDTO } from 'wdBean/Index' 2 import { ContentDetailDTO } from 'wdBean/Index'
3 import { DetailDialog } from './DetailDialog' 3 import { DetailDialog } from './DetailDialog'
4 -import { componentUtils } from '@kit.ArkUI'  
5 import { DateTimeUtils } from 'wdKit' 4 import { DateTimeUtils } from 'wdKit'
6 5
7 const TAG = 'PlayerTitleView'; 6 const TAG = 'PlayerTitleView';
  7 +
8 @Preview 8 @Preview
9 @Component 9 @Component
10 export struct PlayerTitleView { 10 export struct PlayerTitleView {
@@ -17,11 +17,8 @@ export struct PlayerTitleView { @@ -17,11 +17,8 @@ export struct PlayerTitleView {
17 @State isOverLines: boolean = false 17 @State isOverLines: boolean = false
18 @State isTitleOverLines: boolean = false 18 @State isTitleOverLines: boolean = false
19 @State summary: string = '' 19 @State summary: string = ''
20 -  
21 @State private titleLines: number = 0 20 @State private titleLines: number = 0
22 @State private summaryLines: number = 0 21 @State private summaryLines: number = 0
23 -  
24 -  
25 dialogController: CustomDialogController = new CustomDialogController({ 22 dialogController: CustomDialogController = new CustomDialogController({
26 builder: DetailDialog({ 23 builder: DetailDialog({
27 name: this.getName(), 24 name: this.getName(),
@@ -30,7 +27,7 @@ export struct PlayerTitleView { @@ -30,7 +27,7 @@ export struct PlayerTitleView {
30 isOpenDetail: this.isOpenDetail 27 isOpenDetail: this.isOpenDetail
31 28
32 }), 29 }),
33 - cancel:()=>{ 30 + cancel: () => {
34 this.isOpenDetail = !this.isOpenDetail 31 this.isOpenDetail = !this.isOpenDetail
35 }, 32 },
36 customStyle: true, 33 customStyle: true,
@@ -74,7 +71,7 @@ export struct PlayerTitleView { @@ -74,7 +71,7 @@ export struct PlayerTitleView {
74 fontSize: fontSize, 71 fontSize: fontSize,
75 fontWeight: 400, 72 fontWeight: 400,
76 lineHeight: 20, 73 lineHeight: 20,
77 - wordBreak:WordBreak.BREAK_ALL 74 + wordBreak: WordBreak.BREAK_ALL
78 }) 75 })
79 let clipStr: string = '' 76 let clipStr: string = ''
80 for (let i = 0; i < strArr.length; i++) { 77 for (let i = 0; i < strArr.length; i++) {
@@ -83,7 +80,7 @@ export struct PlayerTitleView { @@ -83,7 +80,7 @@ export struct PlayerTitleView {
83 fontSize: fontSize, 80 fontSize: fontSize,
84 fontWeight: 400, 81 fontWeight: 400,
85 lineHeight: 20, 82 lineHeight: 20,
86 - wordBreak:WordBreak.BREAK_ALL 83 + wordBreak: WordBreak.BREAK_ALL
87 }) >= textWidth * maxLines - measureTruncateWidth) { 84 }) >= textWidth * maxLines - measureTruncateWidth) {
88 this.isOverLines = true 85 this.isOverLines = true
89 break; 86 break;
@@ -93,6 +90,7 @@ export struct PlayerTitleView { @@ -93,6 +90,7 @@ export struct PlayerTitleView {
93 console.log(TAG, 'clipStr:', clipStr) 90 console.log(TAG, 'clipStr:', clipStr)
94 return clipStr 91 return clipStr
95 } 92 }
  93 +
96 /** 94 /**
97 * 截断文本 95 * 截断文本
98 * @param {string} str 要截断的文本 '啊啊啊啊啊' 96 * @param {string} str 要截断的文本 '啊啊啊啊啊'
@@ -109,7 +107,7 @@ export struct PlayerTitleView { @@ -109,7 +107,7 @@ export struct PlayerTitleView {
109 fontSize: fontSize, 107 fontSize: fontSize,
110 fontWeight: 600, 108 fontWeight: 600,
111 lineHeight: 20, 109 lineHeight: 20,
112 - wordBreak:WordBreak.BREAK_ALL 110 + wordBreak: WordBreak.BREAK_ALL
113 }) 111 })
114 let clipStr: string = '' 112 let clipStr: string = ''
115 for (let i = 0; i < strArr.length; i++) { 113 for (let i = 0; i < strArr.length; i++) {
@@ -118,7 +116,7 @@ export struct PlayerTitleView { @@ -118,7 +116,7 @@ export struct PlayerTitleView {
118 fontSize: fontSize, 116 fontSize: fontSize,
119 fontWeight: 600, 117 fontWeight: 600,
120 lineHeight: 20, 118 lineHeight: 20,
121 - wordBreak:WordBreak.BREAK_ALL 119 + wordBreak: WordBreak.BREAK_ALL
122 }) >= textWidth * maxLines - measureTruncateWidth) { 120 }) >= textWidth * maxLines - measureTruncateWidth) {
123 this.isTitleOverLines = true 121 this.isTitleOverLines = true
124 break; 122 break;
@@ -145,14 +143,13 @@ export struct PlayerTitleView { @@ -145,14 +143,13 @@ export struct PlayerTitleView {
145 this.summary = this.getSummary() 143 this.summary = this.getSummary()
146 } 144 }
147 145
148 -  
149 private updateSummaryLines() { 146 private updateSummaryLines() {
150 this.summaryLines = Math.max(1, 4 - this.titleLines) 147 this.summaryLines = Math.max(1, 4 - this.titleLines)
151 // console.info(`cj2024 titleLines = ${this.titleLines}`) 148 // console.info(`cj2024 titleLines = ${this.titleLines}`)
152 - this.isOverLines = this.summary.length > this.clipText(this.summary, 14, this.summaryLines, this.windowWidth - 150 - vp2px(50)).length 149 + this.isOverLines = this.summary.length >
  150 + this.clipText(this.summary, 14, this.summaryLines, this.windowWidth - 150 - vp2px(50)).length
153 } 151 }
154 152
155 -  
156 build() { 153 build() {
157 Column() { 154 Column() {
158 if (this.getName()) { 155 if (this.getName()) {
@@ -212,7 +209,7 @@ export struct PlayerTitleView { @@ -212,7 +209,7 @@ export struct PlayerTitleView {
212 // }) 209 // })
213 // } 210 // }
214 // } else { 211 // } else {
215 - if(this.summary && this.titleLines < 4) { 212 + if (this.summary && this.titleLines < 4) {
216 Text() { 213 Text() {
217 Span(this.clipText(this.summary, 14, this.summaryLines, this.windowWidth - 150 - vp2px(50))) 214 Span(this.clipText(this.summary, 14, this.summaryLines, this.windowWidth - 150 - vp2px(50)))
218 .fontSize(14) 215 .fontSize(14)
@@ -235,8 +232,7 @@ export struct PlayerTitleView { @@ -235,8 +232,7 @@ export struct PlayerTitleView {
235 .height(14) 232 .height(14)
236 .objectFit(ImageFit.Fill) 233 .objectFit(ImageFit.Fill)
237 .verticalAlign(ImageSpanAlignment.BOTTOM) 234 .verticalAlign(ImageSpanAlignment.BOTTOM)
238 - .margin({bottom:1})  
239 - // .padding({ 235 + .margin({ bottom: 1 })// .padding({
240 // bottom: 4 236 // bottom: 4
241 // }) 237 // })
242 .onClick(() => { 238 .onClick(() => {
@@ -247,15 +243,16 @@ export struct PlayerTitleView { @@ -247,15 +243,16 @@ export struct PlayerTitleView {
247 } 243 }
248 } 244 }
249 .padding({ 245 .padding({
250 - left: 0,//6 246 + left: 0, //6
251 right: 6, 247 right: 6,
252 - top: 0,//4 248 + top: 0, //4
253 bottom: 4 249 bottom: 4
254 }) 250 })
255 251
256 } 252 }
257 // } 253 // }
258 - Text(DateTimeUtils.formatDate(new Date(this.contentDetailData?.publishTime).getTime(), DateTimeUtils.PATTERN_DATE_TIME_HYPHEN_MM)) 254 + Text(DateTimeUtils.formatDate(new Date(this.contentDetailData?.publishTime).getTime(),
  255 + DateTimeUtils.PATTERN_DATE_TIME_HYPHEN_MM))
259 .fontSize(12) 256 .fontSize(12)
260 .fontColor(Color.White) 257 .fontColor(Color.White)
261 .opacity(0.7) 258 .opacity(0.7)
@@ -274,7 +271,7 @@ export struct PlayerTitleView { @@ -274,7 +271,7 @@ export struct PlayerTitleView {
274 @Builder 271 @Builder
275 titleBuilder() { 272 titleBuilder() {
276 Text() { 273 Text() {
277 - Span(this.clipTitleText(this.getTitle(), 14, 4, this.windowWidth - 230 - vp2px(50))) 274 + Span(this.clipTitleText(this.getTitle(), 14, 4, this.windowWidth - 234 - vp2px(50)))
278 .fontSize(15) 275 .fontSize(15)
279 .fontColor(Color.White) 276 .fontColor(Color.White)
280 .lineHeight(20) 277 .lineHeight(20)
@@ -282,7 +279,7 @@ export struct PlayerTitleView { @@ -282,7 +279,7 @@ export struct PlayerTitleView {
282 .fontFamily('PingFang SC-Regular') 279 .fontFamily('PingFang SC-Regular')
283 if (this.isTitleOverLines) { 280 if (this.isTitleOverLines) {
284 Span('... 全文') 281 Span('... 全文')
285 - .fontColor('#888888') 282 + .fontColor(Color.White)
286 .fontWeight(600) 283 .fontWeight(600)
287 .fontFamily('PingFang SC-Regular') 284 .fontFamily('PingFang SC-Regular')
288 .fontSize(12) 285 .fontSize(12)
@@ -295,8 +292,7 @@ export struct PlayerTitleView { @@ -295,8 +292,7 @@ export struct PlayerTitleView {
295 .height(14) 292 .height(14)
296 .objectFit(ImageFit.Fill) 293 .objectFit(ImageFit.Fill)
297 .verticalAlign(ImageSpanAlignment.BOTTOM) 294 .verticalAlign(ImageSpanAlignment.BOTTOM)
298 - .margin({bottom:1})  
299 - // .padding({ 295 + .margin({ bottom: 1 })// .padding({
300 // bottom: 4 296 // bottom: 4
301 // }) 297 // })
302 .onClick(() => { 298 .onClick(() => {
@@ -308,14 +304,14 @@ export struct PlayerTitleView { @@ -308,14 +304,14 @@ export struct PlayerTitleView {
308 } 304 }
309 .onAreaChange((oldArea: Area, newArea: Area) => { 305 .onAreaChange((oldArea: Area, newArea: Area) => {
310 //console.info(`cj2024 titleLines = ${newArea.height as number} line = ${(newArea.height as number) / 20}`) 306 //console.info(`cj2024 titleLines = ${newArea.height as number} line = ${(newArea.height as number) / 20}`)
311 - this.titleLines = Math.floor((newArea.height as number) / 20)// 20是行高 307 + this.titleLines = Math.floor((newArea.height as number) / 20) // 20是行高
312 //console.info(`cj2024 titleLines = ${this.titleLines}`) 308 //console.info(`cj2024 titleLines = ${this.titleLines}`)
313 this.updateSummaryLines() 309 this.updateSummaryLines()
314 }) 310 })
315 .padding({ 311 .padding({
316 - left: 0,//6 312 + left: 0, //6
317 right: 6, 313 right: 6,
318 - top: 0,//4 314 + top: 0, //4
319 bottom: 4 315 bottom: 4
320 }) 316 })
321 } 317 }