多图详情页增加comp，调详情接口

@@ -44,6 +44,17 @@ export class HttpUrlUtils {
    */
   static readonly INTERACT_DATA_PATH: string = "/api/rmrb-contact/contact/zh/c/content/interactData";
 
+  // 多图（图集）详情页
+  /**
+   * 批量查询内容当前用户点赞、收藏状态
+   */
+  static readonly INTERACT_DATA_STATUS: string = "/api/rmrb-interact/interact/zh/c/batchLikeAndCollect/status";
+
+  /**
+   * 浏览历史新增、删除接口
+   */
+  static readonly INTERACT_BROWS_OPERATE: string = "/api/rmrb-interact/interact/zh/c/brows/operate";
+
   /**
    * 电子报信息
    */

@@ -23,6 +23,8 @@ 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 { InteractParam, ContentBean } from './src/main/ets/bean/content/InteractParam';
 
 export { LabelBean } from './src/main/ets/bean/component/extra/LabelBean';
@@ -85,4 +87,3 @@ export { OperDataList } from './src/main/ets/bean/morningevening/OperDataList';
 
 export { ShareInfo } from './src/main/ets/bean/morningevening/ShareInfo';
 
-

+/*
+ * 多图（图集）详情
+ * */
+// 批量查询内容当前用户点赞、收藏状态
+export interface InteractDataStatusDTO {
+  contentId: string;
+  contentType: number;
+  contentRelId: string;
+  relType: number;
+  likeStatus: number;
+  collectStatus: number;
+}
\ No newline at end of file

@@ -51,3 +51,5 @@ export { BigPicCardComponent } from "./src/main/ets/components/view/BigPicCardCo
 export { HeadPictureCardComponent } from "./src/main/ets/components/view/HeadPictureCardComponent"
 
 export { ZhGridLayoutComponent } from "./src/main/ets/components/view/ZhGridLayoutComponent"
+
+export { MultiPictureDetailPageComponent } from "./src/main/ets/components/MultiPictureDetailPageComponent"

+import { Logger } from 'wdKit';
+import { ContentDetailDTO } from 'wdBean';
+import { MultiPictureDetailViewModel } from '../viewmodel/MultiPictureDetailViewModel';
+import display from '@ohos.display';
+import font from '@ohos.font';
+
+const TAG = 'MultiPictureDetailPageComponent';
+
+@Component
+export struct MultiPictureDetailPageComponent {
+  private displayTool = display.getDefaultDisplaySync()
+  private screenWidth: number = 0
+  private picWidth: number = 0
+  @State picHeight: number = 0
+  @State relId: string = '500005189942'
+  @State contentId: string = '30043715146'
+  @State relType: string = '1'
+  @State contentDetailData: ContentDetailDTO[] = [{}] as ContentDetailDTO[]
+  @Provide @Watch('onCurrentPageNumUpdated') currentPageNum: string = '01'
+  private swiperController: SwiperController = new SwiperController()
+  @State swiperIndex: number = 0;
+
+  //watch监听页码回调
+  onCurrentPageNumUpdated(): void {
+    Logger.info(TAG, `currentPageNum：${this.currentPageNum}`, )
+    let _swiperIndex = Number.parseInt(this.currentPageNum)
+    Logger.info(TAG, `_swiperIndex：${_swiperIndex}`)
+    this.swiperIndex = _swiperIndex > 0 ? _swiperIndex - 1 : _swiperIndex
+  }
+
+
+  async aboutToAppear() {
+    //获取宽高尺寸
+    this.screenWidth = this.displayTool.width
+    this.picWidth = this.screenWidth - vp2px(52)
+    this.picHeight = this.picWidth * 566 / 378
+    //注册字体
+    font.registerFont({
+      familyName: 'BebasNeue_Regular',
+      familySrc: $rawfile('font/BebasNeue_Regular.otf')
+    })
+    this.getContentDetailData()
+  }
+
+  aboutToDisappear() {
+
+  }
+
+  build() {
+    RelativeContainer() {
+      if (this.contentDetailData && this.contentDetailData.length > 0) {
+        Swiper(this.swiperController) {
+          ForEach(this.contentDetailData, (item: ContentDetailDTO, index: number) => {
+            // ENewspaperItemComponent({ newspaperListItemBean: 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_newspaper_content')
+        .alignRules({
+          top: { anchor: "e_newspaper_top", align: VerticalAlign.Bottom },
+          middle: { anchor: "__container__", align: HorizontalAlign.Center }
+        })
+        .onChange((index: number) => {
+          this.swiperIndex = index
+        })
+      }}
+  }
+
+  private async getContentDetailData() {
+    try {
+      let data = await MultiPictureDetailViewModel.getDetailData(this.relId, this.contentId, this.relType)
+      this.contentDetailData = data;
+      Logger.info(TAG, `contentDetailData：${JSON.stringify(this.contentDetailData)}`)
+    } catch (exception) {
+
+    }
+  }
+}
\ No newline at end of file

+import { ToastUtils, Logger } from 'wdKit';
+
+export interface OperationItem {
+  icon: Resource;
+
+  // icon_selected: Resource;
+  text: string | Resource;
+  num?: number; // 个数
+}
+
+const FULL_PARENT: string = '100%';
+
+const TAG = 'OperRowListView';
+
+@Entry
+@Component
+export struct OperRowListView {
+  @State operationList: OperationItem[] = [
+    {
+      icon: $r('app.media.ic_like_uncheck'),
+      text: "点赞",
+      num: 6622
+    },
+    {
+      icon: $r('app.media.ic_collect_uncheck'),
+      text: "收藏",
+      num: 662,
+    },
+    {
+      icon: $r('app.media.ic_comment'),
+      text: "评论",
+      num: 500,
+    },
+    {
+      icon: $r('app.media.ic_share'),
+      text: "分享"
+    }
+  ]
+
+  aboutToAppear() {
+  }
+
+  build() {
+    // List({ space: 0, initialIndex: 0 }) {
+    //   ForEach(this.operationList, (item: OperationItem, index: number) => {
+    //     ListItem() {
+    //       this.buildOperationItem(item, index)
+    //     }
+    //   }, (item: OperationItem, index: number) => JSON.stringify(item))
+    // }
+    // .width(48)
+    // .height(250)
+    // // .margin({ bottom: 100 })
+    // .backgroundColor(Color.Red)
+    // // .listDirection(Axis.Vertical) // 默认值：Axis.Vertical
+    // // .lanes(this.buildLanes()) // 行/列数，一列 // 默认值：1
+    // .cachedCount(2)
+    // .scrollBar(BarState.Off)
+    // .nestedScroll({
+    //   scrollForward: NestedScrollMode.PARENT_FIRST,
+    //   scrollBackward: NestedScrollMode.SELF_FIRST
+    // })
+
+    Column() {
+      ForEach(this.operationList, (item: OperationItem, index: number) => {
+        this.buildOperationItem(item, index)
+      }, (item: OperationItem, index: number) => JSON.stringify(item))
+    }
+    .width(48)
+  }
+
+  /**
+   * 组件项
+   *
+   * @param programmeBean item 组件项
+   */
+  @Builder
+  buildOperationItem(item: OperationItem, index: number) {
+    Column() {
+      Image(item.icon)
+        .width('100%')
+        .aspectRatio(1)
+      // .borderRadius(6)
+
+      Text(item.text)
+        .width('100%')// .margin({ top: 4, left: 6, right: 6 })// .backgroundColor(Color.Brown)
+        .fontWeight(FontWeight.Normal)
+        .textAlign(TextAlign.Center)
+        .fontSize(13)
+        .fontColor('#FFFFFF')
+        .maxLines(1)
+        .textOverflow({ overflow: TextOverflow.Ellipsis })
+    }
+    .margin(5)
+    // .backgroundColor(Color.Black)
+    .alignItems(HorizontalAlign.Center)
+    .hoverEffect(HoverEffect.Scale)
+    .onClick((event: ClickEvent) => {
+      Logger.info(TAG, `buildOperationItem onClick event index: ${index}`);
+      ToastUtils.showToast('体验版，本功能暂未开发', 1000);
+    })
+  }
+}
\ No newline at end of file

@@ -5,6 +5,7 @@ import {
   CompInfoBean,
   ContentDetailDTO,
   InteractDataDTO,
+  InteractDataStatusDTO,
   MorningEveningPaperDTO,
   NavigationBodyDTO,
   NewspaperListBean,
@@ -69,6 +70,20 @@ export class PageRepository {
     return url;
   }
 
+  // 批量查询内容当前用户点赞、收藏状态
+  static getInteractDataStatusUrl() {
+    let url = HttpUrlUtils.getHost() + HttpUrlUtils.INTERACT_DATA_STATUS;
+    Logger.info(TAG, "getInteractDataStatusUrl url = " + url)
+    return url;
+  }
+
+  // 浏览历史新增、删除接口
+  static getInteractBrowsOperateUrl() {
+    let url = HttpUrlUtils.getHost() + HttpUrlUtils.INTERACT_BROWS_OPERATE;
+    Logger.info(TAG, "getInteractBrowsOperateUrl url = " + url)
+    return url;
+  }
+
   static getNewspaperInfoUrl(date: string) {
     let url = HttpUrlUtils.getHost() + HttpUrlUtils.E_NEWSPAPER_INFO_PATH + "?date=" + date;
     Logger.info(TAG, "getNewspaperInfoUrl url = " + url)
@@ -153,6 +168,20 @@ export class PageRepository {
     return WDHttp.post<ResponseDTO<InteractDataDTO[]>>(url, param, headers)
   };
 
+  // 批量查询内容当前用户点赞、收藏状态
+  static fetchInteractDataStatus(param: object) {
+    let url = PageRepository.getInteractDataStatusUrl()
+    let headers: HashMap<string, string> = HttpUrlUtils.getCommonHeaders();
+    return WDHttp.post<ResponseDTO<InteractDataStatusDTO[]>>(url, param, headers)
+  };
+
+  // 浏览历史新增、删除接口
+  static fetchInteractBrowsOperate(param: object) {
+    let url = PageRepository.getInteractBrowsOperateUrl()
+    let headers: HashMap<string, string> = HttpUrlUtils.getCommonHeaders();
+    return WDHttp.post<ResponseDTO<null>>(url, param, headers)
+  };
+
   static fetchNewspaperInfo(date: string) {
     let url = PageRepository.getNewspaperInfoUrl(date)
     let headers: HashMap<string, string> = HttpUrlUtils.getCommonHeaders();

+import { Logger } from 'wdKit';
+import { ResponseDTO } from 'wdNetwork';
+import {  ContentDetailDTO } from 'wdBean';
+import { PageRepository } from '../repository/PageRepository';
+
+const TAG = 'MultiPictureDetailViewModel';
+
+export class MultiPictureDetailViewModel {
+
+  /*fetchDetailData
+  fetchInteractData
+  fetchInteractDataStatus
+  fetchInteractBrowsOperate*/
+
+  static async getDetailData(relId: string, contentId: string, relType: string): Promise<ContentDetailDTO[]> {
+    return new Promise<ContentDetailDTO[]>((success, error) => {
+      Logger.info(TAG, `fetchDetailData start`);
+      PageRepository.fetchDetailData(relId, contentId, relType).then((resDTO: ResponseDTO<ContentDetailDTO[]>) => {
+        if (!resDTO || !resDTO.data) {
+          Logger.error(TAG, 'fetchDetailData is empty');
+          error('resDTO is empty');
+          return
+        }
+        if (resDTO.code != 0) {
+          Logger.error(TAG, `fetchDetailData then code:${resDTO.code}, message:${resDTO.message}`);
+          error('resDTO Response Code is failure');
+          return
+        }
+        Logger.info(TAG, "fetchDetailData then,navResDTO.timestamp:" + resDTO.timestamp);
+        success(resDTO.data);
+      }).catch((err: Error) => {
+        Logger.error(TAG, `fetchDetailData catch, error.name : ${err.name},  error.message:${err.message}`);
+        error(err);
+      })
+    })
+  }
+}

+import { Logger } from 'wdKit';
+import { MultiPictureDetailPageComponent } from 'wdComponent';
+
+const TAG = 'MultiPictureDetailPage';
+
+/**
+ * 多图（图集详情页）
+ */
 @Entry
 @Component
 struct MultiPictureDetailPage {
-  @State message: string = 'Hello World';
 
   build() {
     Row() {
       Column() {
-        Text(this.message)
-          .fontSize(50)
-          .fontWeight(FontWeight.Bold)
+        MultiPictureDetailPageComponent()
       }
-      .width('100%')
     }
-    .height('100%')
+  }
+
+  pageTransition(){
+    // 定义页面进入时的效果，从右边侧滑入
+    PageTransitionEnter({ type: RouteType.None, duration: 300 })
+      .slide(SlideEffect.Right)
+    // 定义页面退出时的效果，向右边侧滑出
+    PageTransitionExit({ type: RouteType.None, duration: 300 })
+      .slide(SlideEffect.Right)
+  }
+
+  aboutToAppear() {
+    Logger.info(TAG, 'aboutToAppear');
+  }
+
+  aboutToDisappear() {
+    Logger.info(TAG, 'aboutToDisappear');
+  }
+
+  onBackPress() {
+    Logger.info(TAG, 'onBackPress');
   }
 }
\ No newline at end of file