人民号图集修复bug

@@ -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%'

@@ -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() {
+        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%')
+
         }
+        .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,77 +221,13 @@ export struct MultiPictureDetailPageComponent {
         center: { anchor: "__container__", align: VerticalAlign.Center },
         middle: { anchor: "__container__", align: HorizontalAlign.Center }
       })
+      .zIndex(1)
       .onChange((index: number) => {
         this.swiperIndex = index
       })
-
-      Row() {
-        Scroll(this.scroller) {
-          Row() {
-            Flex({
-              direction: FlexDirection.Column,
-              justifyContent: FlexAlign.Start
-            }) {
-              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)
-              }.fontColor(Color.White).margin(4)
-
-              Text(`${this.contentDetailData.newsTitle}`)
-                .fontColor(Color.White)
-                .fontSize(16)
-                .fontFamily('PingFang SC-Semibold')
-                .fontWeight(600)
-                .lineHeight(24)
-                .margin({
-                  top: 4,
-                  left: 0,
-                  bottom: 4,
-                  right: 0
-                })
-              Text(`${this.contentDetailData.photoList?.[this.swiperIndex].picDesc}`)
-                .fontColor(Color.White)
-                .fontSize(14)
-                .fontFamily('PingFang SC-Regular')
-                .fontWeight(400)
-                .lineHeight(22)
-                .textOverflow({ overflow: TextOverflow.Ellipsis })
-                .margin({
-                  top: 4,
-                  left: 0,
-                  bottom: 4,
-                  right: 18
-                })
-                .maxLines(16)
-            }
-          }
-          .width('100%')
-          .margin({
-            top: 8,
-            left: 18,
-            bottom: 24,
-            right: 18
-          })
-        }
-        .scrollable(ScrollDirection.Vertical)
-        .scrollBarWidth(0)
-        .height(px2vp(this.titleHeight))
-      }
-      .id('e_swiper_titles')
-      .alignRules({
-        bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
-        middle: { anchor: "__container__", align: HorizontalAlign.Center }
+      .onClick(() => {
+        this.showDownload = !this.showDownload
       })
-      .height(px2vp(this.titleHeight) + 64)
-
     }
     if (this.netStatus !== undefined) {
       EmptyComponent({
@@ -291,23 +241,113 @@ export struct MultiPictureDetailPageComponent {
           middle: { anchor: "__container__", align: HorizontalAlign.Center }
         })
     }
-    OperRowListView({
-      contentDetailData: this.contentDetailData,
+    Column(){
+      Column(){
+        Row() {
+          Scroll(this.scroller) {
+            Row() {
+              Flex({
+                direction: FlexDirection.Column,
+                justifyContent: FlexAlign.Start
+              }) {
+                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)
+                }
+                .fontColor(Color.White)
+                .margin(4)
+
+                Text(`${this.contentDetailData.newsTitle}`)
+                  .fontColor(Color.White)
+                  .fontSize(16)
+                  .fontFamily('PingFang SC-Semibold')
+                  .fontWeight(600)
+                  .lineHeight(24)
+                  .margin({
+                    top: 4,
+                    left: 0,
+                    bottom: 4,
+                    right: 0
+                  })
+                Text(`${this.contentDetailData.photoList?.[this.swiperIndex].picDesc}`)
+                  .fontColor(Color.White)
+                  .fontSize(14)
+                  .fontFamily('PingFang SC-Regular')
+                  .fontWeight(400)
+                  .lineHeight(22)
+                  .textOverflow({ overflow: TextOverflow.Ellipsis })
+                  .margin({
+                    top: 4,
+                    left: 0,
+                    bottom: 4,
+                    right: 18
+                  })
+                  .maxLines(16)
+              }
+            }
+            .width('100%')
+          }
+          .scrollable(ScrollDirection.Vertical)
+          .scrollBarWidth(0)
+          .height(px2vp(this.titleHeight))
+          .align(Alignment.Bottom)
+        }
+        OperRowListView({
+          contentDetailData: this.contentDetailData,
+        })
+          .width('100%')
+          .height(56)
+          .border({ width: { top: 0.5 }, color: '#FFFFFF' })
+      }
+      .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)
+            }
+            .fontColor(Color.White)
+            .margin(4)
+
+            ImageDownloadComponent({ url: this.contentDetailData.photoList?.[this.swiperIndex].picPath })
+              .margin({
+                top: 8,
+                left: 18,
+                bottom: 24,
+                right: 18
+              })
+          }
+        }
+        .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 }
     })
-      .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() {