多图详情页布局，接口联调获取swiper图片

@@ -54,7 +54,7 @@ export function registerRouter() {
     // }
     // }
     if (action.params?.detailPageType == 7 || action.params?.detailPageType == 8) {
     if (action.params?.detailPageType == 7 || action.params?.detailPageType == 8) {
       return WDRouterPage.detailPlayShortVideoPage
       return WDRouterPage.detailPlayShortVideoPage
-    } else if (action.params?.detailPageType == 9 ) {
+    } else if (action.params?.detailPageType == 13 ) {
       return WDRouterPage.multiPictureDetailPage
       return WDRouterPage.multiPictureDetailPage
     }
     }
     return WDRouterPage.detailPlayVodPage
     return WDRouterPage.detailPlayVodPage

@@ -16,6 +16,6 @@ export interface Params {
   // 6.挂件详情页
   // 6.挂件详情页
   // 7.沉浸式竖屏详情页
   // 7.沉浸式竖屏详情页
   // 8.专辑竖屏详情页
   // 8.专辑竖屏详情页
-  // 9.多图（图集）详情页
+  // 13.多图（图集）详情页
   detailPageType?:number; // 详情页类型
   detailPageType?:number; // 详情页类型
 }
 }

@@ -16,5 +16,5 @@ export interface PhotoListBean {
   height: number;
   height: number;
   width: number;
   width: number;
   picPath: string;
   picPath: string;
-  picDesc: number;
+  picDesc: string;
 }
 }

 import {  PhotoListBean } from 'wdBean';
 import {  PhotoListBean } from 'wdBean';
+import { Logger } from 'wdKit';
+
+const TAG = 'MultiPictureDetailPageComponent';
 
 
 @Component
 @Component
 export struct MultiPictureDetailItemComponent {
 export struct MultiPictureDetailItemComponent {
+  private photoListLength: number = 1;
+  private index: number = 1;
   private newsTitle: string = '';
   private newsTitle: string = '';
   private MultiPictureDetailItem: PhotoListBean = {} as PhotoListBean
   private MultiPictureDetailItem: PhotoListBean = {} as PhotoListBean
 
 
+
+  async aboutToAppear() {
+    Logger.info(TAG, 'pictures preview')
+  }
+
   build() {
   build() {
-    Stack() {
-      Image(this.MultiPictureDetailItem.picPath)
-        .width('100%')
-        .aspectRatio(this.MultiPictureDetailItem.width / this.MultiPictureDetailItem.height)
-        .objectFit(ImageFit.Fill)
+    Stack({ alignContent: Alignment.BottomStart }) {
+      Row() {
+        Image(this.MultiPictureDetailItem.picPath)
+          .alt($r('app.media.picture_loading'))
+          .width('100%')
+          .aspectRatio(this.MultiPictureDetailItem.width / this.MultiPictureDetailItem.height)
+          .objectFit(ImageFit.Fill)
+      }
+      .height('100%')
+      .width('100%')
+
+
+      Row() {
+        Flex({
+          direction: FlexDirection.Column,
+          justifyContent: FlexAlign.Start
+        }) {
+          Text() {
+            Span(`${this.index + 1}`).fontSize(24).fontFamily('PingFang SC-Medium').fontWeight(500).lineHeight(28)
+            Span(`/${this.photoListLength}`).fontSize(14).fontFamily('PingFang SC-Medium').fontWeight(500).lineHeight(19)
+          }.fontColor(Color.White).margin(4)
+
+          Text(`${this.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.MultiPictureDetailItem.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
+          })
+        }
+      }
+      .width('100%')
+      .height(178)
+      .margin ({
+        top: 8,
+        left: 18,
+        bottom: 8,
+        right: 18
+      })
+
     }
     }
     .backgroundColor(Color.Black)
     .backgroundColor(Color.Black)
     .width('100%')
     .width('100%')

@@ -8,16 +8,15 @@ import { MultiPictureDetailItemComponent } from './MultiPictureDetailItemCompone
 
 
 const TAG = 'MultiPictureDetailPageComponent';
 const TAG = 'MultiPictureDetailPageComponent';
 
 
-@Preview
 @Component
 @Component
 export struct MultiPictureDetailPageComponent {
 export struct MultiPictureDetailPageComponent {
+  private relId: string = ''
+  private contentId: string = ''
+  private relType: string = ''
   private displayTool = display.getDefaultDisplaySync()
   private displayTool = display.getDefaultDisplaySync()
   private screenWidth: number = 0
   private screenWidth: number = 0
   private picWidth: number = 0
   private picWidth: number = 0
   @State picHeight: number = 0
   @State picHeight: number = 0
-  @State relId: string = '500005189942'
-  @State contentId: string = '30043715146'
-  @State relType: string = '1'
   @State contentDetailData: ContentDetailDTO[] = [] as ContentDetailDTO[]
   @State contentDetailData: ContentDetailDTO[] = [] as ContentDetailDTO[]
   @Provide @Watch('onCurrentPageNumUpdated') currentPageNum: string = '01'
   @Provide @Watch('onCurrentPageNumUpdated') currentPageNum: string = '01'
   private swiperController: SwiperController = new SwiperController()
   private swiperController: SwiperController = new SwiperController()
@@ -35,7 +34,8 @@ export struct MultiPictureDetailPageComponent {
   async aboutToAppear() {
   async aboutToAppear() {
     //获取宽高尺寸
     //获取宽高尺寸
     this.screenWidth = this.displayTool.width
     this.screenWidth = this.displayTool.width
-    this.picWidth = this.screenWidth - vp2px(52)
+    // this.picWidth = this.screenWidth - vp2px(52)
+    this.picWidth = this.screenWidth
     this.picHeight = this.picWidth * 566 / 378
     this.picHeight = this.picWidth * 566 / 378
     //注册字体
     //注册字体
     font.registerFont({
     font.registerFont({
@@ -54,12 +54,12 @@ export struct MultiPictureDetailPageComponent {
       if (this.contentDetailData && this.contentDetailData.length > 0 && this.contentDetailData[0].photoList && this.contentDetailData[0].photoList?.length > 0) {
       if (this.contentDetailData && this.contentDetailData.length > 0 && this.contentDetailData[0].photoList && this.contentDetailData[0].photoList?.length > 0) {
         Swiper(this.swiperController) {
         Swiper(this.swiperController) {
           ForEach(this.contentDetailData[0].photoList, (item: PhotoListBean, index: number) => {
           ForEach(this.contentDetailData[0].photoList, (item: PhotoListBean, index: number) => {
-            MultiPictureDetailItemComponent({ MultiPictureDetailItem: item })
+            MultiPictureDetailItemComponent({ photoListLength: this.contentDetailData[0].photoList?.length , index: index, newsTitle: this.contentDetailData[0].newsTitle, MultiPictureDetailItem: item })
           })
           })
         }
         }
         .index(this.swiperIndex)
         .index(this.swiperIndex)
         .width('100%')
         .width('100%')
-        .height(px2vp(this.picHeight) + 32)
+        .height(px2vp(this.picHeight))
         .vertical(false)
         .vertical(false)
         .autoPlay(false)
         .autoPlay(false)
         .cachedCount(3)
         .cachedCount(3)

 import { Action, CompDTO, Params } from 'wdBean';
 import { Action, CompDTO, Params } from 'wdBean';
+import { ExtraDTO } from 'wdBean/src/main/ets/bean/component/extra/ExtraDTO';
 import { DateTimeUtils, Logger } from 'wdKit';
 import { DateTimeUtils, Logger } from 'wdKit';
 import { WDRouterRule } from 'wdRouter';
 import { WDRouterRule } from 'wdRouter';
 
 
@@ -10,7 +11,7 @@ export struct AlbumCardComponent {
   @State compDTO: CompDTO = {} as CompDTO
   @State compDTO: CompDTO = {} as CompDTO
 
 
   aboutToAppear() {
   aboutToAppear() {
-    Logger.debug(TAG + "" + JSON.stringify(this.compDTO.operDataList));
+    Logger.debug(TAG + "this.compDTO.operDataList" + JSON.stringify(this.compDTO.operDataList));
 
 
   }
   }
 
 
@@ -102,7 +103,12 @@ export struct AlbumCardComponent {
         let taskAction: Action = {
         let taskAction: Action = {
           type: 'JUMP_DETAIL_PAGE',
           type: 'JUMP_DETAIL_PAGE',
           params: {
           params: {
-            detailPageType: 9
+            detailPageType: 13,
+            contentID: this.compDTO.operDataList?.[0].objectId,
+            extra: {
+              relType: this.compDTO.operDataList?.[0].relType,
+              relId: `${this.compDTO.operDataList?.[0].relId}`,
+            } as ExtraDTO
           } as Params,
           } as Params,
         };
         };
         WDRouterRule.jumpWithAction(taskAction)
         WDRouterRule.jumpWithAction(taskAction)

 import { Logger } from 'wdKit';
 import { Logger } from 'wdKit';
 import { MultiPictureDetailPageComponent } from 'wdComponent';
 import { MultiPictureDetailPageComponent } from 'wdComponent';
+import router from '@ohos.router';
+import { Params, Action } from 'wdBean';
 
 
 const TAG = 'MultiPictureDetailPage';
 const TAG = 'MultiPictureDetailPage';
 
 
@@ -10,10 +12,18 @@ const TAG = 'MultiPictureDetailPage';
 @Component
 @Component
 struct MultiPictureDetailPage {
 struct MultiPictureDetailPage {
 
 
+  @State relId: string = ''
+  @State contentId: string = ''
+  @State relType: string = ''
+
   build() {
   build() {
     Row() {
     Row() {
       Column() {
       Column() {
-        MultiPictureDetailPageComponent()
+        MultiPictureDetailPageComponent({
+            relId: this.relId,
+            contentId: this.contentId,
+            relType: this.relType
+          })
       }
       }
     }
     }
   }
   }
@@ -28,7 +38,13 @@ struct MultiPictureDetailPage {
   }
   }
 
 
   aboutToAppear() {
   aboutToAppear() {
+    let par:Action =  router.getParams() as Action;
+    let params = par?.params;
+    this.relId = params?.extra?.relId || '';
+    this.relType = params?.extra?.relType || '';
+    this.contentId = params?.contentID || '';
     Logger.info(TAG, 'aboutToAppear');
     Logger.info(TAG, 'aboutToAppear');
+    Logger.info(TAG, 'params', JSON.stringify(params));
   }
   }
 
 
   aboutToDisappear() {
   aboutToDisappear() {