电子报页面

@@ -29,3 +29,7 @@ export { WaterFlowComponent } from "./src/main/ets/components/WaterFlowComponent
 export { NewspaperViewModel} from "./src/main/ets/viewmodel/NewspaperViewModel"
 
 export {ENewspaperPageComponent} from "./src/main/ets/components/ENewspaperPageComponent"
+
+export {ENewspaperItemComponent} from "./src/main/ets/components/ENewspaperItemComponent"
+
+export {ENewspaperListDialog} from "./src/main/ets/dialog/ENewspaperListDialog"

-import { NewspaperListBean, NewspaperListItemBean } from 'wdBean'
-import { NewspaperViewModel } from '../viewmodel/NewspaperViewModel'
-import router from '@ohos.router'
+import { NewspaperListBean, NewspaperListItemBean } from 'wdBean';
+import { NewspaperViewModel } from '../viewmodel/NewspaperViewModel';
+import router from '@ohos.router';
 import { Logger } from 'wdKit';
-import { ENewspaperItemComponent } from './ENewspaperItemComponent'
+import { ENewspaperItemComponent } from './ENewspaperItemComponent';
+import { ENewspaperListDialog } from '../dialog/ENewspaperListDialog';
 
 @Component
 export struct ENewspaperPageComponent {
   @State newspaperListBean: NewspaperListBean = {} as NewspaperListBean
-  @State currentPageNum: string = '01';
+  @State currentPageNum: string = '01'
+  @State pageNumPopup: boolean = false
   private swiperController: SwiperController = new SwiperController()
+  listDialogController: CustomDialogController = new CustomDialogController({
+    builder: ENewspaperListDialog({ newspaperListBean: this.newspaperListBean,
+      currentPageNum: this.currentPageNum,
+    }),
+    alignment: DialogAlignment.Bottom
+  })
 
+  @Builder
+  popupBuilder() {
+    Row() {
+      GridRow({ columns: 5 }) {
+        ForEach(this.newspaperListBean.list, (item: NewspaperListItemBean, index) => {
+          GridCol() {
+            Row() {
+              Text(item.pageNum)
+                .fontSize($r('app.float.normal_text_size'))
+                .fontColor(this.currentPageNum == item.pageNum ? Color.White : $r('app.color.color_222222'))
+            }
+            .alignItems(VerticalAlign.Center)
+            .justifyContent(FlexAlign.Center)
+            .width(30)
+            .height(30)
+            .backgroundColor(this.currentPageNum != item.pageNum ? Color.White : $r('app.color.color_ED2800'))
+            .onClick((event: ClickEvent) => {
+              this.pageNumPopup = !this.pageNumPopup
+            })
+          }
+        })
+      }
+    }
+    .padding({ top: 20, bottom: 20 })
+    .margin({ left: 10 })
+    .width(260)
+  }
 
   build() {
     RelativeContainer() {
@@ -57,7 +92,7 @@ export struct ENewspaperPageComponent {
       if (this.newspaperListBean && this.newspaperListBean.list && this.newspaperListBean.list.length > 0) {
         Swiper(this.swiperController) {
           ForEach(this.newspaperListBean?.list, (item: NewspaperListItemBean, index: number) => {
-            ENewspaperItemComponent({newspaperListItemBean: item})
+            ENewspaperItemComponent({ newspaperListItemBean: item })
           })
         }
         .width('100%')
@@ -121,6 +156,14 @@ export struct ENewspaperPageComponent {
       .alignRules({ bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
         left: { anchor: '__container__', align: HorizontalAlign.Start } })
       .id('e_newspaper_page_num')
+      .onClick((event: ClickEvent) => {
+        this.pageNumPopup = !this.pageNumPopup
+      })
+      .bindPopup(this.pageNumPopup, {
+        builder: this.popupBuilder,
+        placement: Placement.Top,
+        popupColor: Color.White
+      })
 
       Row() {
         Image($r('app.media.icon_read_paper'))
@@ -136,6 +179,9 @@ export struct ENewspaperPageComponent {
       .alignRules({ bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
         right: { anchor: '__container__', align: HorizontalAlign.End } })
       .id('e_newspaper_read')
+      .onClick((event: ClickEvent) => {
+        this.listDialogController.open()
+      })
     }
     .width('100%')
     .height('100%')

+import { NewspaperListBean, NewspaperListItemBean, NewspaperPositionItemBean } from 'wdBean'
+
+@CustomDialog
+export struct ENewspaperListDialog {
+  @State currentPageNum: string = '01'
+  controller: CustomDialogController
+  newspaperListBean: NewspaperListBean = {} as NewspaperListBean
+
+  build() {
+    Column() {
+      Row() {
+        Text(this.currentPageNum)
+          .fontSize($r('app.float.font_size_36'))
+          .fontColor($r('app.color.color_222222'))
+        Text('版')
+          .fontSize($r('app.float.font_size_16'))
+          .fontColor($r('app.color.color_222222'))
+          .margin({ bottom: 6 })
+
+        Image($r('app.media.icon_triangle_black'))
+          .width($r('app.float.border_radius_6'))
+          .height($r('app.float.border_radius_6'))
+          .margin({ left: 2, bottom: 6 })
+      }
+      .alignItems(VerticalAlign.Bottom)
+      .margin({ top: 25, left: 15 })
+      .alignSelf(ItemAlign.Start)
+
+      Image($r('app.media.line'))
+        .width('100%')
+        .height(6)
+        .margin({ top: 20, left: 16, right: 16 })
+        .objectFit(ImageFit.Contain)
+
+      List() {
+        ForEach(this.newspaperListBean?.list, (item: NewspaperListItemBean, index: number) => {
+          ForEach(item.items, (positionItem: NewspaperPositionItemBean, itemIndex: number) => {
+            ListItem() {
+              Column(){
+                if (itemIndex == 0) {
+                  Text(item.pageNum + item.pageName)
+                    .fontSize($r('app.float.font_size_14'))
+                    .fontColor($r('app.color.color_ED2800'))
+                    .margin({ top: 16 })
+                    .maxLines(1)
+                }
+
+                if (positionItem.shortTitle) {
+                  Text(positionItem.shortTitle)
+                    .fontSize($r('app.float.font_size_14'))
+                    .fontColor($r('app.color.color_222222'))
+                    .margin({ top: 16 })
+                    .maxLines(2)
+                }
+
+                if (positionItem.title) {
+                  Text(positionItem.title)
+                    .fontSize($r('app.float.font_size_17'))
+                    .fontColor($r('app.color.color_222222'))
+                    .margin({ top: 16 })
+                    .maxLines(2)
+                }
+
+                if (positionItem.downTitle) {
+                  Text(positionItem.downTitle)
+                    .fontSize($r('app.float.font_size_14'))
+                    .fontColor($r('app.color.color_222222'))
+                    .margin({ top: 16 })
+                    .maxLines(2)
+                }
+
+                if (positionItem.newsTxt) {
+                  Text(positionItem.newsTxt)
+                    .fontSize($r('app.float.font_size_14'))
+                    .fontColor($r('app.color.color_999999'))
+                    .margin({ top: 16, bottom: 16 })
+                    .maxLines(5)
+                }
+              }
+              .alignItems(HorizontalAlign.Start)
+            }
+
+          })
+
+        })
+
+      }
+      .width('100%')
+      .margin({ top: 16, left: 16, right: 16 })
+      .scrollBar(BarState.Off)
+      .divider({
+        strokeWidth: 1,
+        color: '#EDEDED'
+      })
+      .onScrollIndex((firstIndex: number) => {
+        this.updateCurrentPageNum(firstIndex)
+      })
+
+    }
+    .width('100%')
+    .height(674)
+    .backgroundColor(Color.White)
+
+  }
+
+  updateCurrentPageNum(firstIndex: number): void {
+    if (this.newspaperListBean.list && this.newspaperListBean.list.length > 0) {
+      let index = 0;
+      for (let itemBean of this.newspaperListBean.list) {
+        if (itemBean.items && itemBean.items.length > 0){
+          for (let item of itemBean.items){
+            index++
+            if (index == firstIndex){
+              this.currentPageNum = itemBean.pageNum
+              return
+            }
+
+          }
+        }
+      }
+    }
+
+   }
+}
+
+

@@ -27,6 +27,14 @@
     {
       "name": "color_80000000",
       "value": "#80000000"
+    },
+    {
+      "name": "color_222222",
+      "value": "#222222"
+    },
+    {
+      "name": "color_ED2800",
+      "value": "#ED2800"
     }
   ]
 }
\ No newline at end of file

@@ -25,6 +25,10 @@
       "value": "16fp"
     },
     {
+      "name": "font_size_17",
+      "value": "17fp"
+    },
+    {
       "name": "selected_text_size",
       "value": "18fp"
     },