developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
yanlu
4556240f 1 parent 1f94c0ca

jira: desc:16768 【uat】号主页，号主信息和内容标签tab间距过大

Inline Side-by-side
Showing 3 changed files with 81 additions and 62 deletions
@@ -38,14 +38,17 @@ export struct PeopleShipHomeListComponent { @@ -38,14 +38,17 @@ export struct PeopleShipHomeListComponent {
38 } 38 }
39 .justifyContent(FlexAlign.Start) 39 .justifyContent(FlexAlign.Start)
40 } 40 }
  41 + .backgroundColor(Color.White)
41 .align(Alignment.Start) 42 .align(Alignment.Start)
42 .scrollable(ScrollDirection.Horizontal) 43 .scrollable(ScrollDirection.Horizontal)
43 .scrollBar(BarState.Off) 44 .scrollBar(BarState.Off)
44 .width('100%') 45 .width('100%')
45 } 46 }
  47 + .backgroundColor(Color.White)
46 .alignItems(VerticalAlign.Bottom) 48 .alignItems(VerticalAlign.Bottom)
47 .width('100%') 49 .width('100%')
48 } 50 }
  51 + .justifyContent(FlexAlign.Start)
49 .height('44vp') 52 .height('44vp')
50 .alignItems(HorizontalAlign.Start) 53 .alignItems(HorizontalAlign.Start)
51 .width('100%') 54 .width('100%')
@@ -5,7 +5,7 @@ export struct PeopleShipHomePageAttestationComponent { @@ -5,7 +5,7 @@ export struct PeopleShipHomePageAttestationComponent {
5 build() { 5 build() {
6 Row() { 6 Row() {
7 Text(this.name) 7 Text(this.name)
8 - .lineHeight('16vp') 8 + .lineHeight('18vp')
9 .fontColor($r('app.color.color_ED2800')) 9 .fontColor($r('app.color.color_ED2800'))
10 .fontSize($r('app.float.vp_11')) 10 .fontSize($r('app.float.vp_11'))
11 .backgroundColor($r('app.color.color_1AED2800')) 11 .backgroundColor($r('app.color.color_1AED2800'))
@@ -16,21 +16,27 @@ export struct PeopleShipHomePageAttestationComponent { @@ -16,21 +16,27 @@ export struct PeopleShipHomePageAttestationComponent {
16 left: '16vp', 16 left: '16vp',
17 }) 17 })
18 .padding({ 18 .padding({
19 - top: '3vp',  
20 - bottom: '3vp',  
21 - right: '6vp',  
22 - left: '6vp' 19 + top: '1vp',
  20 + bottom: '1vp',
  21 + right: '4vp',
  22 + left: '4vp'
23 }) 23 })
24 24
25 Text(this.content) 25 Text(this.content)
26 - .lineHeight('22vp') 26 + .lineHeight('18vp')
27 .fontSize($r('app.float.vp_12')) 27 .fontSize($r('app.float.vp_12'))
28 .layoutWeight(1) 28 .layoutWeight(1)
29 .fontColor($r('app.color.color_222222')) 29 .fontColor($r('app.color.color_222222'))
30 .textAlign(TextAlign.Start) 30 .textAlign(TextAlign.Start)
  31 + .align(Alignment.Center)
  32 + .padding(0)
31 .margin({ 33 .margin({
32 right: '16vp' 34 right: '16vp'
33 }) 35 })
  36 + .padding({
  37 + top: '1vp',
  38 + bottom: '1vp',
  39 + })
34 } 40 }
35 .width('100%') 41 .width('100%')
36 .alignItems(VerticalAlign.Top) 42 .alignItems(VerticalAlign.Top)
@@ -28,36 +28,37 @@ export struct PeopleShipHomePageTopComponent { @@ -28,36 +28,37 @@ export struct PeopleShipHomePageTopComponent {
28 @State collapseTxt: string = '…展开'; 28 @State collapseTxt: string = '…展开';
29 private subTxt: string = ''; 29 private subTxt: string = '';
30 @State content: string = '' 30 @State content: string = ''
31 - @State topFixedHeight: number = 320 31 + @State topFixedHeight: number = 286
32 @State lineInNum: number = 1 32 @State lineInNum: number = 1
33 @Link topHeight: number 33 @Link topHeight: number
34 @State provinceName: string = '' 34 @State provinceName: string = ''
  35 +
35 build() { 36 build() {
36 Column() { 37 Column() {
37 - Stack({ alignContent: Alignment.TopStart}) { 38 + Stack({ alignContent: Alignment.TopStart }) {
38 // 顶部图片 39 // 顶部图片
39 Image($r('app.media.home_page_bg')) 40 Image($r('app.media.home_page_bg'))
40 .width('100%') 41 .width('100%')
41 .height('120vp') 42 .height('120vp')
42 .objectFit(ImageFit.Fill) 43 .objectFit(ImageFit.Fill)
43 - .backgroundColor(Color.Black) 44 + .backgroundColor(Color.White)
44 // 头像和名称 45 // 头像和名称
45 Row() { 46 Row() {
46 // 头像 47 // 头像
47 PeopleShipHomePageHeadComponent({ 48 PeopleShipHomePageHeadComponent({
48 diameter: 80, 49 diameter: 80,
49 iconDiameter: 20, 50 iconDiameter: 20,
50 - headPhotoUrl:(this.detailModel.headPhotoUrl && this.detailModel.headPhotoUrl.length > 0) ? this.detailModel.headPhotoUrl : $r('app.media.WDAccountOwnerHedaerDefaultIcon') , 51 + headPhotoUrl: (this.detailModel.headPhotoUrl && this.detailModel.headPhotoUrl.length > 0) ? this.detailModel.headPhotoUrl : $r('app.media.WDAccountOwnerHedaerDefaultIcon'),
51 authIcon: this.detailModel.authIcon 52 authIcon: this.detailModel.authIcon
52 }).margin({ 53 }).margin({
53 left: '10vp', 54 left: '10vp',
54 bottom: '20vp' 55 bottom: '20vp'
55 - }).onClick(()=>{ 56 + }).onClick(() => {
56 let params = { 57 let params = {
57 'headPhotoUrl': this.detailModel.headPhotoUrl, 58 'headPhotoUrl': this.detailModel.headPhotoUrl,
58 'headType': '1' 59 'headType': '1'
59 } as Record<string, string>; 60 } as Record<string, string>;
60 - WDRouterRule.jumpWithPage(WDRouterPage.showUserHeaderPage,params) 61 + WDRouterRule.jumpWithPage(WDRouterPage.showUserHeaderPage, params)
61 }) 62 })
62 63
63 64
@@ -68,7 +69,7 @@ export struct PeopleShipHomePageTopComponent { @@ -68,7 +69,7 @@ export struct PeopleShipHomePageTopComponent {
68 .fontColor($r('app.color.color_222222')) 69 .fontColor($r('app.color.color_222222'))
69 .fontWeight(500) 70 .fontWeight(500)
70 .textAlign(TextAlign.Start) 71 .textAlign(TextAlign.Start)
71 - .textOverflow({overflow: TextOverflow.Ellipsis}) 72 + .textOverflow({ overflow: TextOverflow.Ellipsis })
72 .maxLines(2) 73 .maxLines(2)
73 .layoutWeight(1) 74 .layoutWeight(1)
74 .margin({ 75 .margin({
@@ -85,49 +86,50 @@ export struct PeopleShipHomePageTopComponent { @@ -85,49 +86,50 @@ export struct PeopleShipHomePageTopComponent {
85 .width('100%') 86 .width('100%')
86 .height('180vp') 87 .height('180vp')
87 .backgroundColor(Color.Transparent) 88 .backgroundColor(Color.Transparent)
  89 +
88 // 认证id:1蓝2黄，蓝v 只有官方认证，黄v有领域和身份认证 90 // 认证id:1蓝2黄，蓝v 只有官方认证，黄v有领域和身份认证
89 // 官方认证 91 // 官方认证
90 - if(this.detailModel.authId == 1 && this.detailModel.categoryAuth.length > 0) {  
91 - PeopleShipHomePageAttestationComponent({name: '官方认证', content: this.detailModel.categoryAuth}) 92 + if (this.detailModel.authId == 1 && this.detailModel.categoryAuth.length > 0) {
  93 + PeopleShipHomePageAttestationComponent({ name: '官方认证', content: this.detailModel.categoryAuth})
92 .margin({ 94 .margin({
93 - top: '10vp', 95 + top: '0vp',
94 bottom: '10vp' 96 bottom: '10vp'
95 }) 97 })
96 } 98 }
97 - if(this.detailModel.authId == 2) {  
98 - if (this.detailModel.authTitle && this.detailModel.authTitle.length > 0 ){  
99 - PeopleShipHomePageAttestationComponent({name: '领域认证', content: this.detailModel.authTitle}) 99 + if (this.detailModel.authId == 2) {
  100 + if (this.detailModel.authTitle && this.detailModel.authTitle.length > 0) {
  101 + PeopleShipHomePageAttestationComponent({ name: '领域认证', content: this.detailModel.authTitle })
100 .margin({ 102 .margin({
101 - top: '10vp',  
102 - bottom: '10vp' 103 + top: '0vp',
  104 + bottom: (this.detailModel.authPersonal && this.detailModel.authPersonal.length > 0) ? '6vp' : '10vp'
103 }) 105 })
104 } 106 }
105 - if (this.detailModel.authPersonal && this.detailModel.authPersonal.length > 0 ){  
106 - PeopleShipHomePageAttestationComponent({name: '身份认证', content: this.detailModel.authPersonal}) 107 + if (this.detailModel.authPersonal && this.detailModel.authPersonal.length > 0) {
  108 + PeopleShipHomePageAttestationComponent({ name: '身份认证', content: this.detailModel.authPersonal })
107 .margin({ 109 .margin({
108 - top: '10vp', 110 + top: '0vp',
109 bottom: '10vp' 111 bottom: '10vp'
110 }) 112 })
111 } 113 }
112 } 114 }
113 115
114 // 简介 116 // 简介
115 - if(this.lineInNum > 3) { 117 + if (this.lineInNum > 3) {
116 Row() { 118 Row() {
117 Text() { 119 Text() {
118 Span(this.content) 120 Span(this.content)
119 .fontColor($r('app.color.color_222222')) 121 .fontColor($r('app.color.color_222222'))
120 122
121 Span(this.collapseTxt) 123 Span(this.collapseTxt)
122 - .onClick(()=>{  
123 - if(this.isCollapse){ 124 + .onClick(() => {
  125 + if (this.isCollapse) {
124 this.maxLines = Infinity; 126 this.maxLines = Infinity;
125 this.content = `简介：${this.detailModel.introduction}` 127 this.content = `简介：${this.detailModel.introduction}`
126 this.isCollapse = false; 128 this.isCollapse = false;
127 this.collapseTxt = '收起'; 129 this.collapseTxt = '收起';
128 this.topHeight = this.topFixedHeight + 21 * this.lineInNum 130 this.topHeight = this.topFixedHeight + 21 * this.lineInNum
129 131
130 - }else{ 132 + } else {
131 this.isCollapse = true; 133 this.isCollapse = true;
132 this.collapseTxt = '…展开'; 134 this.collapseTxt = '…展开';
133 this.content = this.subTxt; 135 this.content = this.subTxt;
@@ -137,30 +139,36 @@ export struct PeopleShipHomePageTopComponent { @@ -137,30 +139,36 @@ export struct PeopleShipHomePageTopComponent {
137 .fontColor($r('app.color.color_B0B0B0')) 139 .fontColor($r('app.color.color_B0B0B0'))
138 140
139 } 141 }
  142 + .backgroundColor(Color.Transparent)
140 .lineHeight('21vp') 143 .lineHeight('21vp')
  144 + .width('100%')
141 .maxLines(this.maxLines) 145 .maxLines(this.maxLines)
142 - .textOverflow({overflow: TextOverflow.Ellipsis}) 146 + .textOverflow({ overflow: TextOverflow.Ellipsis })
143 .fontSize($r('app.float.vp_14')) 147 .fontSize($r('app.float.vp_14'))
144 - .key('home_page_introduction')  
145 - .margin({ 148 + .padding({
146 left: '16vp', 149 left: '16vp',
147 right: '16vp', 150 right: '16vp',
148 }) 151 })
149 }.width('100%') 152 }.width('100%')
  153 + .backgroundColor(Color.Transparent)
150 .alignItems(VerticalAlign.Top) 154 .alignItems(VerticalAlign.Top)
151 - }else { 155 + } else {
152 Row() { 156 Row() {
153 Text(`简介：${this.detailModel.introduction}`) 157 Text(`简介：${this.detailModel.introduction}`)
154 .fontSize($r('app.float.vp_14')) 158 .fontSize($r('app.float.vp_14'))
155 .fontColor($r('app.color.color_222222')) 159 .fontColor($r('app.color.color_222222'))
156 .lineHeight('21vp') 160 .lineHeight('21vp')
  161 + .width('100%')
157 .maxLines(3) 162 .maxLines(3)
158 - .textOverflow({overflow: TextOverflow.Ellipsis})  
159 - .margin({ 163 + .textOverflow({ overflow: TextOverflow.Ellipsis })
  164 + .padding({
160 left: '16vp', 165 left: '16vp',
161 right: '16vp', 166 right: '16vp',
162 }) 167 })
  168 + .backgroundColor(Color.Transparent)
  169 +
163 }.width('100%') 170 }.width('100%')
  171 + .backgroundColor(Color.Transparent)
164 .alignItems(VerticalAlign.Top) 172 .alignItems(VerticalAlign.Top)
165 } 173 }
166 174
@@ -171,7 +179,6 @@ export struct PeopleShipHomePageTopComponent { @@ -171,7 +179,6 @@ export struct PeopleShipHomePageTopComponent {
171 .fontSize($r('app.float.vp_12')) 179 .fontSize($r('app.float.vp_12'))
172 .fontColor($r('app.color.color_999999')) 180 .fontColor($r('app.color.color_999999'))
173 .textAlign(TextAlign.Start) 181 .textAlign(TextAlign.Start)
174 - .width('100%')  
175 .alignSelf(ItemAlign.Start) 182 .alignSelf(ItemAlign.Start)
176 .margin({ 183 .margin({
177 right: '16vp', 184 right: '16vp',
@@ -254,7 +261,8 @@ export struct PeopleShipHomePageTopComponent { @@ -254,7 +261,8 @@ export struct PeopleShipHomePageTopComponent {
254 .height('6vp') 261 .height('6vp')
255 } 262 }
256 .width('100%') 263 .width('100%')
257 - .height('100%') 264 +
  265 + // .height('100%')
258 } 266 }
259 267
260 async aboutToAppear() { 268 async aboutToAppear() {
@@ -272,17 +280,15 @@ export struct PeopleShipHomePageTopComponent { @@ -272,17 +280,15 @@ export struct PeopleShipHomePageTopComponent {
272 280
273 } 281 }
274 282
275 -  
276 -  
277 // 不听减去2个字-一直到时3行 283 // 不听减去2个字-一直到时3行
278 private compIntroductionTextHeights() { 284 private compIntroductionTextHeights() {
279 let introduction = `简介：${this.detailModel.introduction}` 285 let introduction = `简介：${this.detailModel.introduction}`
280 let lineInNum1 = this.getTextLineNum(introduction, DisplayUtils.getDeviceWidth() - 32, 21, $r('app.float.vp_14')) 286 let lineInNum1 = this.getTextLineNum(introduction, DisplayUtils.getDeviceWidth() - 32, 21, $r('app.float.vp_14'))
281 - while (lineInNum1 > 3 ) { 287 + while (lineInNum1 > 3) {
282 introduction = introduction.substring(0, introduction.length - 2); 288 introduction = introduction.substring(0, introduction.length - 2);
283 - lineInNum1 = this.getTextLineNum(introduction, DisplayUtils.getDeviceWidth() - 32, 21, $r('app.float.vp_14')) 289 + lineInNum1 = this.getTextLineNum(introduction + this.collapseTxt, DisplayUtils.getDeviceWidth() - 32, 21, $r('app.float.vp_14'))
284 } 290 }
285 - introduction = introduction.substring(0, introduction.length - 3); 291 + // introduction = introduction.substring(0, introduction.length - 3);
286 Logger.debug('PeopleShipHomePageTopComponent', '3行简介：', `${introduction}`) 292 Logger.debug('PeopleShipHomePageTopComponent', '3行简介：', `${introduction}`)
287 293
288 this.subTxt = introduction; 294 this.subTxt = introduction;
@@ -292,7 +298,7 @@ export struct PeopleShipHomePageTopComponent { @@ -292,7 +298,7 @@ export struct PeopleShipHomePageTopComponent {
292 private getTextLineNum(text: string, constraintWidth: number, lineHeight: number, fontSize: number | string | Resource) { 298 private getTextLineNum(text: string, constraintWidth: number, lineHeight: number, fontSize: number | string | Resource) {
293 let size = this.topMeasureText(text, constraintWidth, lineHeight, fontSize) 299 let size = this.topMeasureText(text, constraintWidth, lineHeight, fontSize)
294 let height: number = Number(size.height) 300 let height: number = Number(size.height)
295 - return Math.ceil(px2vp(height)/lineHeight) 301 + return Math.ceil(px2vp(height) / lineHeight)
296 } 302 }
297 303
298 private topMeasureText(text: string, constraintWidth: number, lineHeight: number, fontSize: number | string | Resource) { 304 private topMeasureText(text: string, constraintWidth: number, lineHeight: number, fontSize: number | string | Resource) {
@@ -306,7 +312,7 @@ export struct PeopleShipHomePageTopComponent { @@ -306,7 +312,7 @@ export struct PeopleShipHomePageTopComponent {
306 312
307 async onIntroductionUpdated() { 313 async onIntroductionUpdated() {
308 314
309 - if (this.content.length == 0 && this.detailModel.introduction ) { 315 + if (this.content.length == 0 && this.detailModel.introduction) {
310 this.lineInNum = this.getTextLineNum(`简介：${this.detailModel.introduction}`, DisplayUtils.getDeviceWidth() - 32, 21, $r('app.float.vp_14')) 316 this.lineInNum = this.getTextLineNum(`简介：${this.detailModel.introduction}`, DisplayUtils.getDeviceWidth() - 32, 21, $r('app.float.vp_14'))
311 if (this.lineInNum > 3) { 317 if (this.lineInNum > 3) {
312 this.compIntroductionTextHeights() 318 this.compIntroductionTextHeights()
@@ -314,43 +320,48 @@ export struct PeopleShipHomePageTopComponent { @@ -314,43 +320,48 @@ export struct PeopleShipHomePageTopComponent {
314 } 320 }
315 } 321 }
316 if (this.detailModel) { 322 if (this.detailModel) {
317 - this.topFixedHeight = 308 323 + this.topFixedHeight = 286
318 if (this.detailModel.region && this.detailModel.region.length > 0) { 324 if (this.detailModel.region && this.detailModel.region.length > 0) {
319 this.provinceName = this.detailModel.region 325 this.provinceName = this.detailModel.region
320 - }else { 326 + } else {
321 this.provinceName = await this.computeIPRegion(this.detailModel.province) 327 this.provinceName = await this.computeIPRegion(this.detailModel.province)
322 } 328 }
323 - if(this.detailModel.authId == 1 && this.detailModel.categoryAuth.length > 0) {  
324 - this.topFixedHeight += this.getTextLineNum(this.detailModel.categoryAuth, DisplayUtils.getDeviceWidth() - 90, 22, $r('app.float.vp_12'))*22 329 + if (this.detailModel.authId == 1 && this.detailModel.categoryAuth.length > 0) {
  330 + this.topFixedHeight += this.getTextLineNum(this.detailModel.categoryAuth, DisplayUtils.getDeviceWidth() - 90, 22, $r('app.float.vp_12')) * 18
  331 + this.topFixedHeight += 12
325 } 332 }
326 - else if(this.detailModel.authId == 2) {  
327 - if (this.detailModel.authTitle && this.detailModel.authTitle.length > 0 ){  
328 - this.topFixedHeight += this.getTextLineNum(this.detailModel.authTitle, DisplayUtils.getDeviceWidth() - 90, 22, $r('app.float.vp_12'))*22 333 + else if (this.detailModel.authId == 2) {
  334 + if (this.detailModel.authTitle && this.detailModel.authTitle.length > 0) {
  335 + this.topFixedHeight += this.getTextLineNum(this.detailModel.authTitle, DisplayUtils.getDeviceWidth() - 90, 22, $r('app.float.vp_12')) * 18
  336 + if (this.detailModel.authPersonal && this.detailModel.authPersonal.length > 0){
  337 + this.topFixedHeight += 8
  338 + }else{
  339 + this.topFixedHeight += 12
329 } 340 }
330 - if (this.detailModel.authPersonal && this.detailModel.authPersonal.length > 0 ){  
331 - if (this.detailModel.authTitle && this.detailModel.authTitle.length > 0 ){  
332 - this.topFixedHeight += 10  
333 } 341 }
334 - this.topFixedHeight += this.getTextLineNum(this.detailModel.authPersonal, DisplayUtils.getDeviceWidth() - 90, 22, $r('app.float.vp_12'))*22 342 + if (this.detailModel.authPersonal && this.detailModel.authPersonal.length > 0) {
  343 + this.topFixedHeight += this.getTextLineNum(this.detailModel.authPersonal, DisplayUtils.getDeviceWidth() - 90, 22, $r('app.float.vp_12')) * 18
  344 + this.topFixedHeight += 12
335 } 345 }
336 } 346 }
337 this.lineInNum = this.getTextLineNum(`简介：${this.detailModel.introduction}`, DisplayUtils.getDeviceWidth() - 32, 21, $r('app.float.vp_14')) 347 this.lineInNum = this.getTextLineNum(`简介：${this.detailModel.introduction}`, DisplayUtils.getDeviceWidth() - 32, 21, $r('app.float.vp_14'))
338 if (this.lineInNum <= 3) { 348 if (this.lineInNum <= 3) {
339 - this.topFixedHeight += (21 * this.lineInNum)  
340 - this.topHeight = this.topFixedHeight  
341 - }else {  
342 - this.topHeight = this.topFixedHeight + (this.isCollapse ? 21*3 : 21 * this.lineInNum ) 349 + this.topHeight = this.topFixedHeight + (21 * this.lineInNum)
  350 + } else {
  351 + this.lineInNum = this.getTextLineNum(`简介：${this.detailModel.introduction}` + '收起', DisplayUtils.getDeviceWidth() - 32, 21, $r('app.float.vp_14'))
  352 + this.topHeight = this.topFixedHeight + (this.isCollapse ? 21 * 3 : 21 * this.lineInNum)
343 } 353 }
344 // IP归属地 354 // IP归属地
345 if (this.provinceName && this.provinceName.length > 0) { 355 if (this.provinceName && this.provinceName.length > 0) {
  356 + this.topFixedHeight += 28
346 this.topHeight += 28 357 this.topHeight += 28
347 } 358 }
348 } 359 }
349 } 360 }
350 361
351 private computeShowNum(count: number) { 362 private computeShowNum(count: number) {
352 - if(count >= 10000) {  
353 - return `${(count/10000).toFixed(1)}万` 363 + if (count >= 10000) {
  364 + return `${(count / 10000).toFixed(1)}万`
354 } 365 }
355 return `${count}` 366 return `${count}`
356 } 367 }
@@ -359,7 +370,7 @@ export struct PeopleShipHomePageTopComponent { @@ -359,7 +370,7 @@ export struct PeopleShipHomePageTopComponent {
359 private async computeIPRegion(province: string) { 370 private async computeIPRegion(province: string) {
360 if (province && province.length) { 371 if (province && province.length) {
361 try { 372 try {
362 - let provinceName = await HWLocationUtils.getProvinceName(province) ; 373 + let provinceName = await HWLocationUtils.getProvinceName(province);
363 return provinceName 374 return provinceName
364 } catch (e) { 375 } catch (e) {
365 return '' 376 return ''
@@ -367,5 +378,4 @@ export struct PeopleShipHomePageTopComponent { @@ -367,5 +378,4 @@ export struct PeopleShipHomePageTopComponent {
367 } 378 }
368 return '' 379 return ''
369 } 380 }
370 -  
371 } 381 }