多图详情页开发

@@ -23,7 +23,7 @@ export { Pic } from './src/main/ets/bean/content/Pic'
 
 
 export { InteractDataDTO } from './src/main/ets/bean/content/InteractDataDTO';
 export { InteractDataDTO } from './src/main/ets/bean/content/InteractDataDTO';
 
 
-export { InteractDataStatusDTO } from './src/main/ets/bean/detail/MultiPictureDetailPageDTO';
+export { InteractDataStatusBean, PhotoListBean } from './src/main/ets/bean/detail/MultiPictureDetailPageDTO';
 
 
 export { InteractParam, ContentBean } from './src/main/ets/bean/content/InteractParam';
 export { InteractParam, ContentBean } from './src/main/ets/bean/content/InteractParam';
 
 

@@ -2,7 +2,7 @@
  * 多图（图集）详情
  * 多图（图集）详情
  * */
  * */
 // 批量查询内容当前用户点赞、收藏状态
 // 批量查询内容当前用户点赞、收藏状态
-export interface InteractDataStatusDTO {
+export interface InteractDataStatusBean {
   contentId: string;
   contentId: string;
   contentType: number;
   contentType: number;
   contentRelId: string;
   contentRelId: string;
@@ -10,3 +10,11 @@ export interface InteractDataStatusDTO {
   likeStatus: number;
   likeStatus: number;
   collectStatus: number;
   collectStatus: number;
 }
 }
+
+// 【图文、图集稿件正文图片】图片信息数组
+export interface PhotoListBean {
+  height: number;
+  width: number;
+  picPath: string;
+  picDesc: number;
+}

+import {  PhotoListBean } from 'wdBean';
+
+@Component
+export struct MultiPictureDetailItemComponent {
+  private newsTitle: string = '';
+  private MultiPictureDetailItem: PhotoListBean = {} as PhotoListBean
+
+  build() {
+    Stack() {
+      Image(this.MultiPictureDetailItem.picPath)
+        .width('100%')
+        .aspectRatio(378 / 566)
+        .objectFit(ImageFit.Fill)
+    }
+    .padding({ top: 16, right: 16, bottom: 16, left: 16 })
+    .margin({ left: 10, right: 10 })
+    .backgroundColor(Color.White)
+    .width('100%')
+  }
+}

 import { Logger } from 'wdKit';
 import { Logger } from 'wdKit';
-import { ContentDetailDTO } from 'wdBean';
+import { ContentDetailDTO, PhotoListBean } from 'wdBean';
 import { MultiPictureDetailViewModel } from '../viewmodel/MultiPictureDetailViewModel';
 import { MultiPictureDetailViewModel } from '../viewmodel/MultiPictureDetailViewModel';
 import display from '@ohos.display';
 import display from '@ohos.display';
 import font from '@ohos.font';
 import font from '@ohos.font';
+import { OperRowListView } from './view/OperRowListView';
+import { MultiPictureDetailItemComponent } from './MultiPictureDetailItemComponent';
 
 
 const TAG = 'MultiPictureDetailPageComponent';
 const TAG = 'MultiPictureDetailPageComponent';
 
 
@@ -48,10 +50,11 @@ export struct MultiPictureDetailPageComponent {
 
 
   build() {
   build() {
     RelativeContainer() {
     RelativeContainer() {
-      if (this.contentDetailData && this.contentDetailData.length > 0) {
+      RelativeContainer() {
+        if (this.contentDetailData?.[0].photoList?.length > 0) {
           Swiper(this.swiperController) {
           Swiper(this.swiperController) {
-          ForEach(this.contentDetailData, (item: ContentDetailDTO, index: number) => {
-            // ENewspaperItemComponent({ newspaperListItemBean: item })
+            ForEach(this.contentDetailData[0].photoList, (item: PhotoListBean, index: number) => {
+              MultiPictureDetailItemComponent({ MultiPictureDetailItem: item })
             })
             })
           }
           }
           .index(this.swiperIndex)
           .index(this.swiperIndex)
@@ -63,15 +66,32 @@ export struct MultiPictureDetailPageComponent {
           .indicator(false)
           .indicator(false)
           .displayCount(1)
           .displayCount(1)
           .margin({ top: 35, left: 10, right: 10 })
           .margin({ top: 35, left: 10, right: 10 })
-        .id('e_newspaper_content')
+          .id('e_picture_content')
           .alignRules({
           .alignRules({
-          top: { anchor: "e_newspaper_top", align: VerticalAlign.Bottom },
+            top: { anchor: "e_picture_container", align: VerticalAlign.Bottom },
             middle: { anchor: "__container__", align: HorizontalAlign.Center }
             middle: { anchor: "__container__", align: HorizontalAlign.Center }
           })
           })
           .onChange((index: number) => {
           .onChange((index: number) => {
             this.swiperIndex = index
             this.swiperIndex = index
           })
           })
-      }}
+        }
+      }
+      RelativeContainer() {
+        OperRowListView()
+          .alignRules({
+            top: { anchor: "e_picture_container", align: VerticalAlign.Bottom },
+            middle: { anchor: "__container__", align: HorizontalAlign.Center }
+          })
+      }
+      .width('100%')
+      .height(100)
+      .margin({ left: 20 })
+      .border({ width: 2, color: '#6699FF' })
+    }
+    .width('100%')
+    .height('100%')
+    .backgroundColor($r('app.color.color_80000000'))
+    .id('e_picture_container')
   }
   }
 
 
   private async getContentDetailData() {
   private async getContentDetailData() {