developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
王士厅
5879f05a 1 parent fb5d7b00

图集bug修复

Inline Side-by-side
Showing 3 changed files with 94 additions and 77 deletions
@@ -3,12 +3,12 @@ import { Logger } from 'wdKit'; @@ -3,12 +3,12 @@ import { Logger } from 'wdKit';
3 3
4 const TAG = 'MultiPictureDetailPageComponent'; 4 const TAG = 'MultiPictureDetailPageComponent';
5 5
  6 +@Reusable
6 @Component 7 @Component
7 export struct MultiPictureDetailItemComponent { 8 export struct MultiPictureDetailItemComponent {
8 private MultiPictureDetailItem: PhotoListBean = {} as PhotoListBean 9 private MultiPictureDetailItem: PhotoListBean = {} as PhotoListBean
9 //alt app.media.picture_loading 设计稿尺寸 10 //alt app.media.picture_loading 设计稿尺寸
10 @State imageWidth:string | number = 167 11 @State imageWidth:string | number = 167
11 - @State ratio:number = 167/60  
12 12
13 13
14 async aboutToAppear() { 14 async aboutToAppear() {
@@ -20,12 +20,10 @@ export struct MultiPictureDetailItemComponent { @@ -20,12 +20,10 @@ export struct MultiPictureDetailItemComponent {
20 Image(this.MultiPictureDetailItem.picPath) 20 Image(this.MultiPictureDetailItem.picPath)
21 .alt($r('app.media.picture_loading')) 21 .alt($r('app.media.picture_loading'))
22 .width(this.imageWidth) 22 .width(this.imageWidth)
23 - .aspectRatio(this.ratio)  
24 .objectFit(ImageFit.Contain) 23 .objectFit(ImageFit.Contain)
25 .interpolation(ImageInterpolation.High) 24 .interpolation(ImageInterpolation.High)
26 .onComplete(event => { 25 .onComplete(event => {
27 this.imageWidth = '100%' 26 this.imageWidth = '100%'
28 - this.ratio = this.MultiPictureDetailItem.width / this.MultiPictureDetailItem.height  
29 }) 27 })
30 } 28 }
31 .height('100%') 29 .height('100%')
@@ -46,6 +46,9 @@ export struct MultiPictureDetailPageComponent { @@ -46,6 +46,9 @@ export struct MultiPictureDetailPageComponent {
46 @State showDownload: Boolean = false // 控制是否显示下载默认隐藏 46 @State showDownload: Boolean = false // 控制是否显示下载默认隐藏
47 @State publishCommentModel: publishCommentModel = new publishCommentModel() 47 @State publishCommentModel: publishCommentModel = new publishCommentModel()
48 @State operationButtonList: string[] = ['comment', 'like', 'collect', 'share'] 48 @State operationButtonList: string[] = ['comment', 'like', 'collect', 'share']
  49 + @State topSafeHeight: number = AppStorage.get<number>('topSafeHeight') as number;
  50 + @State windowHeight: number = AppStorage.get<number>('windowHeight') as number;
  51 + @State currentOffset:number = 0
49 52
50 //watch监听页码回调 53 //watch监听页码回调
51 onCurrentPageNumUpdated(): void { 54 onCurrentPageNumUpdated(): void {
@@ -90,9 +93,6 @@ export struct MultiPictureDetailPageComponent { @@ -90,9 +93,6 @@ export struct MultiPictureDetailPageComponent {
90 .height('100%') 93 .height('100%')
91 .backgroundColor(Color.Black) 94 .backgroundColor(Color.Black)
92 .id('e_picture_container') 95 .id('e_picture_container')
93 - // 设置顶部绘制延伸到状态栏  
94 - // 设置底部绘制延伸到导航条  
95 - .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])  
96 } 96 }
97 97
98 @Builder 98 @Builder
@@ -104,7 +104,7 @@ export struct MultiPictureDetailPageComponent { @@ -104,7 +104,7 @@ export struct MultiPictureDetailPageComponent {
104 Row() { 104 Row() {
105 Stack() { 105 Stack() {
106 Image(this.getImgUrl()) 106 Image(this.getImgUrl())
107 - .borderRadius(24) 107 + .borderRadius(18)
108 .aspectRatio(1) 108 .aspectRatio(1)
109 .border({ width: 1, color: Color.White, style: BorderStyle.Solid }) 109 .border({ width: 1, color: Color.White, style: BorderStyle.Solid })
110 .width(36) 110 .width(36)
@@ -157,7 +157,7 @@ export struct MultiPictureDetailPageComponent { @@ -157,7 +157,7 @@ export struct MultiPictureDetailPageComponent {
157 .margin(0) 157 .margin(0)
158 .height(17) 158 .height(17)
159 Text(`${this.contentDetailData?.rmhInfo?.rmhDesc}`) 159 Text(`${this.contentDetailData?.rmhInfo?.rmhDesc}`)
160 - .fontColor('#676767') 160 + .fontColor(Color.White)
161 .fontSize(12) 161 .fontSize(12)
162 .fontFamily('PingFang SC-Regular') 162 .fontFamily('PingFang SC-Regular')
163 .fontWeight(400) 163 .fontWeight(400)
@@ -201,8 +201,8 @@ export struct MultiPictureDetailPageComponent { @@ -201,8 +201,8 @@ export struct MultiPictureDetailPageComponent {
201 }.alignItems(VerticalAlign.Center) 201 }.alignItems(VerticalAlign.Center)
202 } 202 }
203 .borderRadius(4) 203 .borderRadius(4)
204 - .backgroundColor('#B0B0B0')  
205 - .width(48) 204 + .backgroundColor('#333333')
  205 + .width(54)
206 .height(24) 206 .height(24)
207 } 207 }
208 208
@@ -215,6 +215,7 @@ export struct MultiPictureDetailPageComponent { @@ -215,6 +215,7 @@ export struct MultiPictureDetailPageComponent {
215 .width('100%') 215 .width('100%')
216 .height(44) 216 .height(44)
217 .zIndex(10) 217 .zIndex(10)
  218 + .margin({top:`${this.topSafeHeight + 12}px`})
218 .alignRules({ 219 .alignRules({
219 top: { anchor: "__container__", align: VerticalAlign.Top }, 220 top: { anchor: "__container__", align: VerticalAlign.Top },
220 middle: { anchor: "__container__", align: HorizontalAlign.Center } 221 middle: { anchor: "__container__", align: HorizontalAlign.Center }
@@ -235,8 +236,17 @@ export struct MultiPictureDetailPageComponent { @@ -235,8 +236,17 @@ export struct MultiPictureDetailPageComponent {
235 .cachedCount(1) 236 .cachedCount(1)
236 .indicator(false) 237 .indicator(false)
237 .displayCount(1) 238 .displayCount(1)
238 - .onAnimationEnd(event => {  
239 - router.back() 239 + .onGestureSwipe((index: number, extraInfo: SwiperAnimationEvent) => {
  240 + console.info("onGestureSwipe current offset: " + extraInfo.currentOffset)
  241 + this.currentOffset = Math.abs(extraInfo.currentOffset)
  242 + })
  243 + .onTouch((event: TouchEvent) => {
  244 + if(event.type === 1) {
  245 + // if(this.currentOffset > px2vp((this.windowHeight - item.height)/2 - 100)) {
  246 + if(this.currentOffset > 160) {
  247 + router.back()
  248 + }
  249 + }
240 }) 250 })
241 }) 251 })
242 } 252 }
@@ -283,47 +293,52 @@ export struct MultiPictureDetailPageComponent { @@ -283,47 +293,52 @@ export struct MultiPictureDetailPageComponent {
283 direction: FlexDirection.Column, 293 direction: FlexDirection.Column,
284 justifyContent: FlexAlign.Start 294 justifyContent: FlexAlign.Start
285 }) { 295 }) {
286 - Text() {  
287 - Span(`${this.swiperIndex + 1}`)  
288 - .fontSize(24)  
289 - .fontFamily('PingFang SC-Medium')  
290 - .fontWeight(500)  
291 - .lineHeight(28)  
292 - Span(`/${this.contentDetailData?.photoList?.length}`) 296 + if(this.contentDetailData?.photoList?.length) {
  297 + Text() {
  298 + Span(`${this.swiperIndex + 1}`)
  299 + .fontSize(24)
  300 + .fontFamily('PingFang SC-Medium')
  301 + .fontWeight(500)
  302 + .lineHeight(28)
  303 + Span(`/${this.contentDetailData?.photoList?.length}`)
  304 + .fontSize(14)
  305 + .fontFamily('PingFang SC-Medium')
  306 + .fontWeight(500)
  307 + .lineHeight(19)
  308 + }
  309 + .fontColor(Color.White)
  310 + .margin(4)
  311 + }
  312 + if(this.contentDetailData.newsTitle) {
  313 + Text(`${this.contentDetailData.newsTitle}`)
  314 + .fontColor(Color.White)
  315 + .fontSize(16)
  316 + .fontFamily('PingFang SC-Semibold')
  317 + .fontWeight(600)
  318 + .lineHeight(24)
  319 + .margin({
  320 + top: 4,
  321 + left: 0,
  322 + bottom: 4,
  323 + right: 0
  324 + })
  325 + }
  326 + if(this.contentDetailData.photoList?.[this.swiperIndex].picDesc) {
  327 + Text(`${this.contentDetailData.photoList?.[this.swiperIndex].picDesc}`)
  328 + .fontColor(Color.White)
293 .fontSize(14) 329 .fontSize(14)
294 - .fontFamily('PingFang SC-Medium')  
295 - .fontWeight(500)  
296 - .lineHeight(19) 330 + .fontFamily('PingFang SC-Regular')
  331 + .fontWeight(400)
  332 + .lineHeight(22)
  333 + .textOverflow({ overflow: TextOverflow.Ellipsis })
  334 + .margin({
  335 + top: 4,
  336 + left: 0,
  337 + bottom: 4,
  338 + right: 18
  339 + })
  340 + .maxLines(32)
297 } 341 }
298 - .fontColor(Color.White)  
299 - .margin(4)  
300 -  
301 - Text(`${this.contentDetailData.newsTitle}`)  
302 - .fontColor(Color.White)  
303 - .fontSize(16)  
304 - .fontFamily('PingFang SC-Semibold')  
305 - .fontWeight(600)  
306 - .lineHeight(24)  
307 - .margin({  
308 - top: 4,  
309 - left: 0,  
310 - bottom: 4,  
311 - right: 0  
312 - })  
313 - Text(`${this.contentDetailData.photoList?.[this.swiperIndex].picDesc}`)  
314 - .fontColor(Color.White)  
315 - .fontSize(14)  
316 - .fontFamily('PingFang SC-Regular')  
317 - .fontWeight(400)  
318 - .lineHeight(22)  
319 - .textOverflow({ overflow: TextOverflow.Ellipsis })  
320 - .margin({  
321 - top: 4,  
322 - left: 0,  
323 - bottom: 4,  
324 - right: 18  
325 - })  
326 - .maxLines(16)  
327 } 342 }
328 } 343 }
329 .width('100%') 344 .width('100%')
@@ -346,28 +361,32 @@ export struct MultiPictureDetailPageComponent { @@ -346,28 +361,32 @@ export struct MultiPictureDetailPageComponent {
346 direction: FlexDirection.Row, 361 direction: FlexDirection.Row,
347 justifyContent: FlexAlign.SpaceBetween 362 justifyContent: FlexAlign.SpaceBetween
348 }) { 363 }) {
349 - Text() {  
350 - Span(`${this.swiperIndex + 1}`)  
351 - .fontSize(24)  
352 - .fontFamily('PingFang SC-Medium')  
353 - .fontWeight(500)  
354 - .lineHeight(28)  
355 - Span(`/${this.contentDetailData?.photoList?.length}`)  
356 - .fontSize(14)  
357 - .fontFamily('PingFang SC-Medium')  
358 - .fontWeight(500)  
359 - .lineHeight(19) 364 + if(this.contentDetailData?.photoList?.length) {
  365 + Text() {
  366 + Span(`${this.swiperIndex + 1}`)
  367 + .fontSize(24)
  368 + .fontFamily('PingFang SC-Medium')
  369 + .fontWeight(500)
  370 + .lineHeight(28)
  371 + Span(`/${this.contentDetailData?.photoList?.length}`)
  372 + .fontSize(14)
  373 + .fontFamily('PingFang SC-Medium')
  374 + .fontWeight(500)
  375 + .lineHeight(19)
  376 + }
  377 + .fontColor(Color.White)
  378 + .margin(4)
360 } 379 }
361 - .fontColor(Color.White)  
362 - .margin(4)  
363 380
364 - ImageDownloadComponent({ url: this.contentDetailData.photoList?.[this.swiperIndex].picPath })  
365 - .margin({  
366 - top: 8,  
367 - left: 18,  
368 - bottom: 24,  
369 - right: 18  
370 - }) 381 + if(this.contentDetailData.photoList?.[this.swiperIndex].picPath) {
  382 + ImageDownloadComponent({ url: this.contentDetailData.photoList?.[this.swiperIndex].picPath })
  383 + .margin({
  384 + top: 8,
  385 + left: 18,
  386 + bottom: 24,
  387 + right: 18
  388 + })
  389 + }
371 } 390 }
372 } 391 }
373 .width('100%') 392 .width('100%')
@@ -26,7 +26,6 @@ struct MultiPictureDetailPage { @@ -26,7 +26,6 @@ struct MultiPictureDetailPage {
26 }) 26 })
27 } 27 }
28 } 28 }
29 - .padding({top:44})  
30 .backgroundColor(Color.Black) 29 .backgroundColor(Color.Black)
31 } 30 }
32 31
@@ -57,6 +56,12 @@ struct MultiPictureDetailPage { @@ -57,6 +56,12 @@ struct MultiPictureDetailPage {
57 Logger.info(TAG, 'onBackPress'); 56 Logger.info(TAG, 'onBackPress');
58 } 57 }
59 58
  59 +
  60 + aboutToDisappear(): void {
  61 + console.log(TAG, 'aboutToDisappear')
  62 + this.closeFullScreen()
  63 + }
  64 +
60 /** 65 /**
61 * 开启沉浸式 66 * 开启沉浸式
62 * TODO:颜色待根据业务接口修改 67 * TODO:颜色待根据业务接口修改
@@ -67,11 +72,6 @@ struct MultiPictureDetailPage { @@ -67,11 +72,6 @@ struct MultiPictureDetailPage {
67 // WindowModel.shared.setWindowSystemBarEnable([]) 72 // WindowModel.shared.setWindowSystemBarEnable([])
68 } 73 }
69 74
70 - aboutToDisappear(): void {  
71 - console.log(TAG, 'aboutToDisappear')  
72 - this.closeFullScreen()  
73 - }  
74 -  
75 /** 75 /**
76 * 关闭沉浸式 76 * 关闭沉浸式
77 * TODO:颜色待根据业务接口修改 77 * TODO:颜色待根据业务接口修改