人民号图集修复bug

王士厅
Commit e8d699fc6fd7004a797d38731ff291fdfef1dafa e8d699fc 1 parent f0a22287
Showing 2 changed files with 82 additions and 42 deletions
sight_harmony/features/wdComponent/src/main/ets/components/MultiPictureDetailItemComponent.ets
sight_harmony/features/wdComponent/src/main/ets/components/MultiPictureDetailPageComponent.ets
--- a/sight_harmony/features/wdComponent/src/main/ets/components/MultiPictureDetailItemComponent.ets
View file @e8d699f
+++ b/sight_harmony/features/wdComponent/src/main/ets/components/MultiPictureDetailItemComponent.ets
View file @e8d699f
@@ -21,7 +21,7 @@ export struct MultiPictureDetailItemComponent {
         .alt($r('app.media.picture_loading'))
         .width(this.imageWidth)
         .aspectRatio(this.ratio)
-        .objectFit(ImageFit.Fill)
+        .objectFit(ImageFit.Contain)
         .interpolation(ImageInterpolation.High)
         .onComplete(event => {
           this.imageWidth = '100%'
--- a/sight_harmony/features/wdComponent/src/main/ets/components/MultiPictureDetailPageComponent.ets
View file @e8d699f
+++ b/sight_harmony/features/wdComponent/src/main/ets/components/MultiPictureDetailPageComponent.ets
View file @e8d699f
@@ -12,6 +12,7 @@ import display from '@ohos.display';
 import font from '@ohos.font';
 import { OperRowListView } from './view/OperRowListView';
 import { MultiPictureDetailItemComponent } from './MultiPictureDetailItemComponent';
+import { ImageDownloadComponent } from '../components/ImageDownloadComponent';
 import { EmptyComponent } from './view/EmptyComponent';
 import { DateTimeUtils } from 'wdKit/Index';
 import { HttpUrlUtils } from 'wdNetwork/Index';
@@ -37,9 +38,10 @@ export struct MultiPictureDetailPageComponent {
   private swiperController: SwiperController = new SwiperController()
   private swiperControllerItem: SwiperController = new SwiperController()
   @State swiperIndex: number = 0;
-  @Provide followStatus: string = '0' // 关注状态
+  @Provide followStatus: string | undefined = undefined // 关注状态
   private scroller: Scroller = new Scroller()
   @State netStatus: number | undefined = undefined // 存储网络状态用来展示缺省图
+  @State showDownload: Boolean = false // 控制是否显示下载默认隐藏
   //watch监听页码回调
   onCurrentPageNumUpdated(): void {
@@ -146,8 +148,8 @@ export struct MultiPictureDetailPageComponent {
           right: 0
         })
-        if (this.followStatus == '0') {
         Row() {
+          if (this.followStatus == '0') {
             Button({ type: ButtonType.Normal, stateEffect: true }) {
               Row() {
                 Text('+关注').fontSize(12).fontColor(0xffffff)
@@ -160,15 +162,27 @@ export struct MultiPictureDetailPageComponent {
             .onClick(() => {
               this.handleAccention()
             })
+          } else {
+            Button({ type: ButtonType.Normal, stateEffect: true }) {
+              Row() {
+                Text('已关注').fontSize(12).fontColor(0xffffff)
+              }.alignItems(VerticalAlign.Center)
+            }
+            .borderRadius(4)
+            .backgroundColor('#B0B0B0')
+            .width(48)
+            .height(24)
+          }
+
         }
         .justifyContent(FlexAlign.Center)
         .alignItems(VerticalAlign.Center)
         .width('21.6%')
         .height('100%')
       }
-      }
       .width('100%')
       .height(44)
+      .zIndex(10)
       .alignRules({
         top: { anchor: "__container__", align: VerticalAlign.Top },
         middle: { anchor: "__container__", align: HorizontalAlign.Center }
@@ -195,7 +209,7 @@ export struct MultiPictureDetailPageComponent {
       }
       .index(this.swiperIndex)
       .width('100%')
-      .height(px2vp(this.picHeight) + 32)
+      .height('100%')
       .vertical(false)
       .autoPlay(false)
       .cachedCount(3)
@@ -207,10 +221,28 @@ export struct MultiPictureDetailPageComponent {
         center: { anchor: "__container__", align: VerticalAlign.Center },
         middle: { anchor: "__container__", align: HorizontalAlign.Center }
       })
+      .zIndex(1)
       .onChange((index: number) => {
         this.swiperIndex = index
       })
-
+      .onClick(() => {
+        this.showDownload = !this.showDownload
+      })
+    }
+    if (this.netStatus !== undefined) {
+      EmptyComponent({
+        emptyType: this.netStatus, emptyButton: true, retry: () => {
+          this.getContentDetailData()
+        }
+      })
+        .id('e_empty_content')
+        .alignRules({
+          center: { anchor: "__container__", align: VerticalAlign.Center },
+          middle: { anchor: "__container__", align: HorizontalAlign.Center }
+        })
+    }
+    Column(){
+      Column(){
         Row() {
           Scroll(this.scroller) {
             Row() {
@@ -224,12 +256,14 @@ export struct MultiPictureDetailPageComponent {
                     .fontFamily('PingFang SC-Medium')
                     .fontWeight(500)
                     .lineHeight(28)
-                Span(`/${this.contentDetailData.photoList.length}`)
+                  Span(`/${this.contentDetailData?.photoList?.length}`)
                     .fontSize(14)
                     .fontFamily('PingFang SC-Medium')
                     .fontWeight(500)
                     .lineHeight(19)
-              }.fontColor(Color.White).margin(4)
+                }
+                .fontColor(Color.White)
+                .margin(4)
                 Text(`${this.contentDetailData.newsTitle}`)
                   .fontColor(Color.White)
@@ -260,54 +294,60 @@ export struct MultiPictureDetailPageComponent {
               }
             }
             .width('100%')
-          .margin({
-            top: 8,
-            left: 18,
-            bottom: 24,
-            right: 18
-          })
           }
           .scrollable(ScrollDirection.Vertical)
           .scrollBarWidth(0)
           .height(px2vp(this.titleHeight))
+          .align(Alignment.Bottom)
         }
-      .id('e_swiper_titles')
-      .alignRules({
-        bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
-        middle: { anchor: "__container__", align: HorizontalAlign.Center }
+        OperRowListView({
+          contentDetailData: this.contentDetailData,
         })
-      .height(px2vp(this.titleHeight) + 64)
-
+          .width('100%')
+          .height(56)
+          .border({ width: { top: 0.5 }, color: '#FFFFFF' })
       }
-    if (this.netStatus !== undefined) {
-      EmptyComponent({
-        emptyType: this.netStatus, emptyButton: true, retry: () => {
-          this.getContentDetailData()
+      .visibility(!this.showDownload ? Visibility.Visible : Visibility.None)
+      Column(){
+        Row() {
+          Flex({
+            direction: FlexDirection.Row,
+            justifyContent: FlexAlign.SpaceBetween
+          }) {
+            Text() {
+              Span(`${this.swiperIndex + 1}`)
+                .fontSize(24)
+                .fontFamily('PingFang SC-Medium')
+                .fontWeight(500)
+                .lineHeight(28)
+              Span(`/${this.contentDetailData?.photoList?.length}`)
+                .fontSize(14)
+                .fontFamily('PingFang SC-Medium')
+                .fontWeight(500)
+                .lineHeight(19)
             }
-      })
-        .id('e_empty_content')
-        .alignRules({
-          center: { anchor: "__container__", align: VerticalAlign.Center },
-          middle: { anchor: "__container__", align: HorizontalAlign.Center }
+            .fontColor(Color.White)
+            .margin(4)
+
+            ImageDownloadComponent({ url: this.contentDetailData.photoList?.[this.swiperIndex].picPath })
+              .margin({
+                top: 8,
+                left: 18,
+                bottom: 24,
+                right: 18
               })
           }
-    OperRowListView({
-      contentDetailData: this.contentDetailData,
-    })
+        }
+        .width('100%')
+      }
+      .visibility(this.showDownload ? Visibility.Visible : Visibility.None)
+    }
+    .zIndex(10)
+    .id('e_swiper_bottom')
     .alignRules({
       bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
       middle: { anchor: "__container__", align: HorizontalAlign.Center }
     })
-      .width('100%')
-      .height(56)
-      .margin({
-        top: 16,
-        left: 16,
-        right: 16,
-        bottom: 0
-      })
-      .border({ width: { top: 0.5 }, color: '#FFFFFF' })
-      .id('e_oper_row')
   }
   getContentDetailData() {