多图详情页开发

@@ -23,7 +23,7 @@ export { Pic } from './src/main/ets/bean/content/Pic'
 
 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';
 

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

+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%')
+  }
+}
\ No newline at end of file

 import { Logger } from 'wdKit';
-import { ContentDetailDTO } from 'wdBean';
+import { ContentDetailDTO, PhotoListBean } from 'wdBean';
 import { MultiPictureDetailViewModel } from '../viewmodel/MultiPictureDetailViewModel';
 import display from '@ohos.display';
 import font from '@ohos.font';
+import { OperRowListView } from './view/OperRowListView';
+import { MultiPictureDetailItemComponent } from './MultiPictureDetailItemComponent';
 
 const TAG = 'MultiPictureDetailPageComponent';
 
@@ -48,30 +50,48 @@ export struct MultiPictureDetailPageComponent {
 
   build() {
     RelativeContainer() {
-      if (this.contentDetailData && this.contentDetailData.length > 0) {
-        Swiper(this.swiperController) {
-          ForEach(this.contentDetailData, (item: ContentDetailDTO, index: number) => {
-            // ENewspaperItemComponent({ newspaperListItemBean: item })
+      RelativeContainer() {
+        if (this.contentDetailData?.[0].photoList?.length > 0) {
+          Swiper(this.swiperController) {
+            ForEach(this.contentDetailData[0].photoList, (item: PhotoListBean, index: number) => {
+              MultiPictureDetailItemComponent({ MultiPictureDetailItem: item })
+            })
+          }
+          .index(this.swiperIndex)
+          .width('100%')
+          .height(px2vp(this.picHeight) + 32)
+          .vertical(true)
+          .autoPlay(false)
+          .cachedCount(3)
+          .indicator(false)
+          .displayCount(1)
+          .margin({ top: 35, left: 10, right: 10 })
+          .id('e_picture_content')
+          .alignRules({
+            top: { anchor: "e_picture_container", align: VerticalAlign.Bottom },
+            middle: { anchor: "__container__", align: HorizontalAlign.Center }
+          })
+          .onChange((index: number) => {
+            this.swiperIndex = index
           })
         }
-        .index(this.swiperIndex)
-        .width('100%')
-        .height(px2vp(this.picHeight) + 32)
-        .vertical(true)
-        .autoPlay(false)
-        .cachedCount(3)
-        .indicator(false)
-        .displayCount(1)
-        .margin({ top: 35, left: 10, right: 10 })
-        .id('e_newspaper_content')
-        .alignRules({
-          top: { anchor: "e_newspaper_top", align: VerticalAlign.Bottom },
-          middle: { anchor: "__container__", align: HorizontalAlign.Center }
-        })
-        .onChange((index: number) => {
-          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() {