developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
wangyujian_wd
9745e2d1 1 parent bd222260

feat：1）电子报修改优化

Inline Side-by-side
Showing 2 changed files with 332 additions and 284 deletions
@@ -8,6 +8,7 @@ import { ENewspaperCalendarDialog } from '../dialog/ENewspaperCalendarDialog'; @@ -8,6 +8,7 @@ import { ENewspaperCalendarDialog } from '../dialog/ENewspaperCalendarDialog';
8 import font from '@ohos.font'; 8 import font from '@ohos.font';
9 import { ENewspaperPageDialog } from '../dialog/ENewspaperPageDialog'; 9 import { ENewspaperPageDialog } from '../dialog/ENewspaperPageDialog';
10 import { RMCalendarBean } from './calendar/RMCalendarBean'; 10 import { RMCalendarBean } from './calendar/RMCalendarBean';
  11 +import { newsSkeleton } from './skeleton/newsSkeleton';
11 12
12 @Component 13 @Component
13 export struct ENewspaperPageComponent { 14 export struct ENewspaperPageComponent {
@@ -63,13 +64,15 @@ export struct ENewspaperPageComponent { @@ -63,13 +64,15 @@ export struct ENewspaperPageComponent {
63 customStyle: true, 64 customStyle: true,
64 }) 65 })
65 //文字报纸弹框 66 //文字报纸弹框
66 - listDialogController: CustomDialogController = new CustomDialogController({  
67 - builder: ENewspaperListDialog({  
68 - newspaperListBean: this.newspaperListBean  
69 - }),  
70 - alignment: DialogAlignment.Bottom,  
71 - offset: { dx: 0, dy: 0 }  
72 - }) 67 + @State isOpenListDialog: boolean = false
  68 +
  69 + // listDialogController: CustomDialogController = new CustomDialogController({
  70 + // builder: ENewspaperListDialog({
  71 + // newspaperListBean: this.newspaperListBean
  72 + // }),
  73 + // alignment: DialogAlignment.Bottom,
  74 + // offset: { dx: 0, dy: 0 }
  75 + // })
73 76
74 async aboutToAppear() { 77 async aboutToAppear() {
75 //获取宽高尺寸 78 //获取宽高尺寸
@@ -95,184 +98,207 @@ export struct ENewspaperPageComponent { @@ -95,184 +98,207 @@ export struct ENewspaperPageComponent {
95 } 98 }
96 99
97 build() { 100 build() {
98 - RelativeContainer() { 101 + Stack() {
99 RelativeContainer() { 102 RelativeContainer() {
100 - Image($r('app.media.icon_arrow_down'))  
101 - .height($r('app.float.top_arrow_size'))  
102 - .width($r('app.float.top_arrow_size')) 103 + RelativeContainer() {
  104 + Image($r('app.media.icon_arrow_down'))
  105 + .height($r('app.float.top_arrow_size'))
  106 + .width($r('app.float.top_arrow_size'))
  107 + .alignRules({
  108 + left: { anchor: "__container__", align: HorizontalAlign.Start },
  109 + center: { anchor: "__container__", align: VerticalAlign.Center }
  110 + })
  111 + .id('e_newspaper_back')
  112 + .onClick((event: ClickEvent) => {
  113 + router.back()
  114 + })
  115 +
  116 + Row() {
  117 + Text(this.calendarDate?.replace('-', '.')?.replace('-', '.'))
  118 + .fontSize($r('app.float.font_size_20'))
  119 + .fontColor($r('app.color.white'))
  120 + .fontFamily('BebasNeue_Regular')
  121 + .fontWeight(FontWeight.Regular)
  122 +
  123 + Image($r('app.media.icon_triangle'))
  124 + .width($r('app.float.border_radius_6'))
  125 + .height($r('app.float.border_radius_6'))
  126 + .margin({ left: 2, bottom: 5 })
  127 + }
  128 + .alignItems(VerticalAlign.Bottom)
103 .alignRules({ 129 .alignRules({
104 - left: { anchor: "__container__", align: HorizontalAlign.Start }, 130 + middle: { anchor: "__container__", align: HorizontalAlign.Center },
105 center: { anchor: "__container__", align: VerticalAlign.Center } 131 center: { anchor: "__container__", align: VerticalAlign.Center }
106 }) 132 })
107 - .id('e_newspaper_back') 133 + .id('e_newspaper_date')
  134 + .onClick(() => {
  135 + this.calendarDialogShow = !this.calendarDialogShow
  136 + if (this.calendarDialogShow) {
  137 + this.calendarDialogController.open()
  138 + } else {
  139 + this.calendarDialogController.close()
  140 + }
  141 + })
  142 +
  143 + Image($r('app.media.icon_share'))
  144 + .height($r('app.float.top_arrow_size'))
  145 + .width($r('app.float.top_arrow_size'))
  146 + .alignRules({
  147 + right: { anchor: "__container__", align: HorizontalAlign.End },
  148 + center: { anchor: "__container__", align: VerticalAlign.Center }
  149 + })
  150 + .id('e_newspaper_share')
  151 + }
  152 + .margin({ left: $r('app.float.margin_16'), right: $r('app.float.margin_16') })
  153 + .height($r('app.float.top_bar_height'))
  154 + .alignRules({
  155 + top: { anchor: '__container__', align: VerticalAlign.Top },
  156 + left: { anchor: '__container__', align: HorizontalAlign.Start },
  157 + right: { anchor: '__container__', align: HorizontalAlign.End }
  158 + })
  159 + .id('e_newspaper_top')
  160 +
  161 + if (!this.newspaperListBean || !this.newspaperListBean.list || this.newspaperListBean.list.length == 0) {
  162 + newsSkeleton()
  163 + .alignRules({
  164 + top: { anchor: "e_newspaper_top", align: VerticalAlign.Bottom },
  165 + middle: { anchor: "__container__", align: HorizontalAlign.Center }
  166 + })
  167 + .id('news_skeleton_id')
  168 + .width('100%')
  169 + .height(px2vp(this.picHeight) + 32)
  170 + .margin({ top: 35, left: 10, right: 10 })
  171 + }
  172 +
  173 + if (this.newspaperListBean && this.newspaperListBean.list && this.newspaperListBean.list.length > 0) {
  174 + Swiper(this.swiperController) {
  175 + ForEach(this.newspaperListBean?.list, (item: NewspaperListItemBean, index: number) => {
  176 + ENewspaperItemComponent({ newspaperListItemBean: item })
  177 + })
  178 + }
  179 + .index(this.swiperIndex)
  180 + .width('100%')
  181 + .height(px2vp(this.picHeight) + 32)
  182 + .vertical(true)
  183 + .autoPlay(false)
  184 + .cachedCount(3)
  185 + .indicator(false)
  186 + .loop(false)
  187 + .displayCount(1)
  188 + .margin({ top: 35, left: 10, right: 10 })
  189 + .id('e_newspaper_content')
  190 + .alignRules({
  191 + top: { anchor: "e_newspaper_top", align: VerticalAlign.Bottom },
  192 + middle: { anchor: "__container__", align: HorizontalAlign.Center }
  193 + })
  194 + .onChange((index: number) => {
  195 + this.currentPageNum = this.newspaperListBean?.list[index]?.pageNum
  196 + this.swiperIndex = index
  197 + })
  198 +
  199 + Image($r('app.media.newspaper_shadow'))
  200 + .height($r('app.float.vp_12'))
  201 + .margin({ left: 20, right: 20, top: -1 })
  202 + .objectFit(ImageFit.Contain)
  203 + .alignRules({
  204 + top: { anchor: "e_newspaper_content", align: VerticalAlign.Bottom },
  205 + left: { anchor: 'e_newspaper_content', align: HorizontalAlign.Start },
  206 + right: { anchor: 'e_newspaper_content', align: HorizontalAlign.End }
  207 + })
  208 + .id('e_newspaper_shadow')
  209 +
  210 + Row() {
  211 + Text(this.swiperIndex + 1 == this.newspaperListBean?.list?.length ? '已到底部，可以选择其他日期' : '滑动查看下一版')
  212 + .fontColor(Color.White)
  213 + .fontSize($r('app.float.font_size_14'))
  214 + Image($r('app.media.icon_next_page'))
  215 + .width($r('app.float.vp_16'))
  216 + .height($r('app.float.vp_16'))
  217 + .visibility(this.swiperIndex + 1 == this.newspaperListBean?.list?.length ? Visibility.None : Visibility.Visible)
  218 + }
  219 + .justifyContent(FlexAlign.Center)
  220 + .margin({ top: $r('app.float.margin_16') })
  221 + .alignRules({
  222 + top: { anchor: "e_newspaper_shadow", align: VerticalAlign.Bottom },
  223 + middle: { anchor: "__container__", align: HorizontalAlign.Center }
  224 + })
  225 + .id('e_newspaper_next')
108 .onClick((event: ClickEvent) => { 226 .onClick((event: ClickEvent) => {
109 - router.back() 227 + this.swiperController.showNext()
110 }) 228 })
  229 + }
111 230
112 Row() { 231 Row() {
113 - Text(this.calendarDate?.replace('-', '.')?.replace('-', '.'))  
114 - .fontSize($r('app.float.font_size_20')) 232 + Text(this.currentPageNum)
  233 + .fontSize($r('app.float.font_size_36'))
115 .fontColor($r('app.color.white')) 234 .fontColor($r('app.color.white'))
116 .fontFamily('BebasNeue_Regular') 235 .fontFamily('BebasNeue_Regular')
117 - .fontWeight(FontWeight.Regular) 236 + Text('版')
  237 + .fontSize($r('app.float.font_size_16'))
  238 + .fontColor($r('app.color.white'))
  239 + .margin({ bottom: 6 })
118 240
119 Image($r('app.media.icon_triangle')) 241 Image($r('app.media.icon_triangle'))
120 .width($r('app.float.border_radius_6')) 242 .width($r('app.float.border_radius_6'))
121 .height($r('app.float.border_radius_6')) 243 .height($r('app.float.border_radius_6'))
122 - .margin({ left: 2, bottom: 5 }) 244 + .margin({ left: 2, bottom: 6 })
123 } 245 }
124 .alignItems(VerticalAlign.Bottom) 246 .alignItems(VerticalAlign.Bottom)
  247 + .margin({ left: $r('app.float.margin_16'), bottom: $r('app.float.top_tab_bar_height') })
125 .alignRules({ 248 .alignRules({
126 - middle: { anchor: "__container__", align: HorizontalAlign.Center },  
127 - center: { anchor: "__container__", align: VerticalAlign.Center } 249 + bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
  250 + left: { anchor: '__container__', align: HorizontalAlign.Start }
128 }) 251 })
129 - .id('e_newspaper_date')  
130 - .onClick(() => {  
131 - this.calendarDialogShow = !this.calendarDialogShow  
132 - if (this.calendarDialogShow) {  
133 - this.calendarDialogController.open() 252 + .id('e_newspaper_page_num')
  253 + .onClick((event: ClickEvent) => {
  254 + this.pageDialogShow = !this.pageDialogShow
  255 + if (this.pageDialogShow) {
  256 + this.pageDialogController.open()
134 } else { 257 } else {
135 - this.calendarDialogController.close() 258 + this.pageDialogController.close()
136 } 259 }
137 }) 260 })
138 261
139 - Image($r('app.media.icon_share'))  
140 - .height($r('app.float.top_arrow_size'))  
141 - .width($r('app.float.top_arrow_size'))  
142 - .alignRules({  
143 - right: { anchor: "__container__", align: HorizontalAlign.End },  
144 - center: { anchor: "__container__", align: VerticalAlign.Center }  
145 - })  
146 - .id('e_newspaper_share')  
147 - }  
148 - .margin({ left: $r('app.float.margin_16'), right: $r('app.float.margin_16') })  
149 - .height($r('app.float.top_bar_height'))  
150 - .alignRules({  
151 - top: { anchor: '__container__', align: VerticalAlign.Top },  
152 - left: { anchor: '__container__', align: HorizontalAlign.Start },  
153 - right: { anchor: '__container__', align: HorizontalAlign.End }  
154 - })  
155 - .id('e_newspaper_top')  
156 -  
157 - if (this.newspaperListBean && this.newspaperListBean.list && this.newspaperListBean.list.length > 0) {  
158 - Swiper(this.swiperController) {  
159 - ForEach(this.newspaperListBean?.list, (item: NewspaperListItemBean, index: number) => {  
160 - ENewspaperItemComponent({ newspaperListItemBean: item })  
161 - })  
162 - }  
163 - .index(this.swiperIndex)  
164 - .width('100%')  
165 - .height(px2vp(this.picHeight) + 32)  
166 - .vertical(true)  
167 - .autoPlay(false)  
168 - .cachedCount(3)  
169 - .indicator(false)  
170 - .loop(false)  
171 - .displayCount(1)  
172 - .margin({ top: 35, left: 10, right: 10 })  
173 - .id('e_newspaper_content')  
174 - .alignRules({  
175 - top: { anchor: "e_newspaper_top", align: VerticalAlign.Bottom },  
176 - middle: { anchor: "__container__", align: HorizontalAlign.Center }  
177 - })  
178 - .onChange((index: number) => {  
179 - this.currentPageNum = this.newspaperListBean?.list[index]?.pageNum  
180 - this.swiperIndex = index  
181 - })  
182 -  
183 - Image($r('app.media.newspaper_shadow'))  
184 - .height($r('app.float.vp_12'))  
185 - .margin({ left: 20, right: 20, top: -1 })  
186 - .objectFit(ImageFit.Contain)  
187 - .alignRules({  
188 - top: { anchor: "e_newspaper_content", align: VerticalAlign.Bottom },  
189 - left: { anchor: 'e_newspaper_content', align: HorizontalAlign.Start },  
190 - right: { anchor: 'e_newspaper_content', align: HorizontalAlign.End }  
191 - })  
192 - .id('e_newspaper_shadow') 262 + // .bindPopup(this.pageNumPopup, {
  263 + // builder: this.popupBuilder,
  264 + // placement: Placement.Top,
  265 + // popupColor: Color.White
  266 + // })
193 267
194 Row() { 268 Row() {
195 - Text(this.swiperIndex + 1 == this.newspaperListBean?.list?.length ? '已到底部，可以选择其他日期' : '滑动查看下一版')  
196 - .fontColor(Color.White) 269 + Image($r('app.media.icon_read_paper'))
  270 + .width($r('app.float.vp_20'))
  271 + .height($r('app.float.vp_20'))
  272 + .margin({ right: $r('app.float.vp_3') })
  273 + Text('读报纸')
197 .fontSize($r('app.float.font_size_14')) 274 .fontSize($r('app.float.font_size_14'))
198 - Image($r('app.media.icon_next_page'))  
199 - .width($r('app.float.vp_16'))  
200 - .height($r('app.float.vp_16'))  
201 - .visibility(this.swiperIndex + 1 == this.newspaperListBean?.list?.length ? Visibility.None : Visibility.Visible) 275 + .fontColor($r('app.color.white'))
202 } 276 }
203 - .justifyContent(FlexAlign.Center)  
204 - .margin({ top: $r('app.float.margin_16') }) 277 + .alignItems(VerticalAlign.Center)
  278 + .margin({ right: $r('app.float.margin_16'), bottom: $r('app.float.top_tab_bar_height') })
205 .alignRules({ 279 .alignRules({
206 - top: { anchor: "e_newspaper_shadow", align: VerticalAlign.Bottom },  
207 - middle: { anchor: "__container__", align: HorizontalAlign.Center } 280 + bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
  281 + right: { anchor: '__container__', align: HorizontalAlign.End }
208 }) 282 })
209 - .id('e_newspaper_next') 283 + .id('e_newspaper_read')
210 .onClick((event: ClickEvent) => { 284 .onClick((event: ClickEvent) => {
211 - this.swiperController.showNext() 285 + this.isOpenListDialog = true
212 }) 286 })
213 } 287 }
  288 + .width('100%')
  289 + .height('100%')
  290 + .backgroundColor($r('app.color.color_80000000'))
  291 + .id('e_newspaper_container')
214 292
215 - Row() {  
216 - Text(this.currentPageNum)  
217 - .fontSize($r('app.float.font_size_36'))  
218 - .fontColor($r('app.color.white'))  
219 - .fontFamily('BebasNeue_Regular')  
220 - Text('版')  
221 - .fontSize($r('app.float.font_size_16'))  
222 - .fontColor($r('app.color.white'))  
223 - .margin({ bottom: 6 })  
224 -  
225 - Image($r('app.media.icon_triangle'))  
226 - .width($r('app.float.border_radius_6'))  
227 - .height($r('app.float.border_radius_6'))  
228 - .margin({ left: 2, bottom: 6 })  
229 - }  
230 - .alignItems(VerticalAlign.Bottom)  
231 - .margin({ left: $r('app.float.margin_16'), bottom: $r('app.float.top_tab_bar_height') })  
232 - .alignRules({  
233 - bottom: { anchor: '__container__', align: VerticalAlign.Bottom },  
234 - left: { anchor: '__container__', align: HorizontalAlign.Start }  
235 - })  
236 - .id('e_newspaper_page_num')  
237 - .onClick((event: ClickEvent) => {  
238 - this.pageDialogShow = !this.pageDialogShow  
239 - if (this.pageDialogShow) {  
240 - this.pageDialogController.open()  
241 - } else {  
242 - this.pageDialogController.close() 293 + ENewspaperListDialog({
  294 + newspaperListBean: this.newspaperListBean,
  295 + closeDialog: () => {
  296 + this.isOpenListDialog = false
243 } 297 }
244 }) 298 })
245 -  
246 - // .bindPopup(this.pageNumPopup, {  
247 - // builder: this.popupBuilder,  
248 - // placement: Placement.Top,  
249 - // popupColor: Color.White  
250 - // })  
251 -  
252 - Row() {  
253 - Image($r('app.media.icon_read_paper'))  
254 - .width($r('app.float.vp_20'))  
255 - .height($r('app.float.vp_20'))  
256 - .margin({ right: $r('app.float.vp_3') })  
257 - Text('读报纸')  
258 - .fontSize($r('app.float.font_size_14'))  
259 - .fontColor($r('app.color.white'))  
260 - }  
261 - .alignItems(VerticalAlign.Center)  
262 - .margin({ right: $r('app.float.margin_16'), bottom: $r('app.float.top_tab_bar_height') })  
263 - .alignRules({  
264 - bottom: { anchor: '__container__', align: VerticalAlign.Bottom },  
265 - right: { anchor: '__container__', align: HorizontalAlign.End }  
266 - })  
267 - .id('e_newspaper_read')  
268 - .onClick((event: ClickEvent) => {  
269 - this.listDialogController.open()  
270 - }) 299 + .visibility(this.isOpenListDialog ? Visibility.Visible : Visibility.None)
271 } 300 }
272 - .width('100%')  
273 - .height('100%')  
274 - .backgroundColor($r('app.color.color_80000000'))  
275 - .id('e_newspaper_container') 301 +
276 } 302 }
277 303
278 private async getNewspaperTime() { 304 private async getNewspaperTime() {
@@ -12,7 +12,7 @@ export struct ENewspaperListDialog { @@ -12,7 +12,7 @@ export struct ENewspaperListDialog {
12 @Consume @Watch('onCurrentPageNumUpdated') currentPageNum: string 12 @Consume @Watch('onCurrentPageNumUpdated') currentPageNum: string
13 @State pageDialogShow: boolean = false 13 @State pageDialogShow: boolean = false
14 @State scrollIndex: number = 0 14 @State scrollIndex: number = 0
15 - newspaperListBean: NewspaperListBean = {} as NewspaperListBean 15 + @Prop newspaperListBean: NewspaperListBean = {} as NewspaperListBean
16 private listScroller: Scroller = new Scroller(); 16 private listScroller: Scroller = new Scroller();
17 //文字版选择弹框 17 //文字版选择弹框
18 pageListDialogController: CustomDialogController = new CustomDialogController({ 18 pageListDialogController: CustomDialogController = new CustomDialogController({
@@ -21,13 +21,14 @@ export struct ENewspaperListDialog { @@ -21,13 +21,14 @@ export struct ENewspaperListDialog {
21 newspaperListBean: this.newspaperListBean, 21 newspaperListBean: this.newspaperListBean,
22 }), 22 }),
23 alignment: DialogAlignment.TopStart, 23 alignment: DialogAlignment.TopStart,
24 - offset: { dx: 0, dy: 214 }, 24 + offset: { dx: 0, dy: 224 },
25 customStyle: true, 25 customStyle: true,
26 }) 26 })
27 //页面半屏弹窗（实现在上个组件）若尝试在CustomDialog中传入多个其他的Controller， 27 //页面半屏弹窗（实现在上个组件）若尝试在CustomDialog中传入多个其他的Controller，
28 // 以实现在CustomDialog中打开另一个或另一些CustomDialog， 28 // 以实现在CustomDialog中打开另一个或另一些CustomDialog，
29 // 那么此处需要将指向自己的controller放在所有controller的后面 29 // 那么此处需要将指向自己的controller放在所有controller的后面
30 - listDialogController: CustomDialogController 30 + // listDialogController: CustomDialogController
  31 + public closeDialog?: () => void
31 32
32 //watch监听报纸页码回调 33 //watch监听报纸页码回调
33 onCurrentPageNumUpdated(): void { 34 onCurrentPageNumUpdated(): void {
@@ -53,147 +54,168 @@ export struct ENewspaperListDialog { @@ -53,147 +54,168 @@ export struct ENewspaperListDialog {
53 } 54 }
54 55
55 build() { 56 build() {
56 - Column() {  
57 - Row()  
58 - .width(43)  
59 - .height(4)  
60 - .backgroundColor('#EDEDED')  
61 - .margin({  
62 - top: 10,  
63 - bottom: 10  
64 - })  
65 - Row() {  
66 - Text(this.currentPageNum)  
67 - .fontSize($r('app.float.font_size_36'))  
68 - .fontColor($r('app.color.color_222222'))  
69 - .fontFamily('BebasNeue_Regular')  
70 - Text('版')  
71 - .fontSize($r('app.float.font_size_16'))  
72 - .fontColor($r('app.color.color_222222'))  
73 - .margin({ bottom: 6 })  
74 -  
75 - Image($r('app.media.icon_triangle_black'))  
76 - .width($r('app.float.border_radius_6'))  
77 - .height($r('app.float.border_radius_6'))  
78 - .margin({ left: 2, bottom: 6 })  
79 - }  
80 - .alignItems(VerticalAlign.Bottom)  
81 - .margin({ left: 15 })  
82 - .alignSelf(ItemAlign.Start)  
83 - .onClick(() => {  
84 - this.pageDialogShow = !this.pageDialogShow  
85 - if (this.pageDialogShow) {  
86 - this.pageListDialogController.open()  
87 - } else {  
88 - this.pageListDialogController.close() 57 + Stack() {
  58 + Column() {
  59 + Row()
  60 + .width(43)
  61 + .height(4)
  62 + .backgroundColor('#EDEDED')
  63 + .margin({
  64 + top: 10,
  65 + bottom: 10
  66 + })
  67 + .onClick(() => {
  68 + if (this.closeDialog) {
  69 + this.closeDialog()
  70 + }
  71 + })
  72 + Row() {
  73 + Text(this.currentPageNum)
  74 + .fontSize($r('app.float.font_size_36'))
  75 + .fontColor($r('app.color.color_222222'))
  76 + .fontFamily('BebasNeue_Regular')
  77 + Text('版')
  78 + .fontSize($r('app.float.font_size_16'))
  79 + .fontColor($r('app.color.color_222222'))
  80 + .margin({ bottom: 6 })
  81 +
  82 + Image($r('app.media.icon_triangle_black'))
  83 + .width($r('app.float.border_radius_6'))
  84 + .height($r('app.float.border_radius_6'))
  85 + .margin({ left: 2, bottom: 6 })
89 } 86 }
90 - })  
91 -  
92 - Image($r('app.media.line'))  
93 - .width('100%')  
94 - .height(6)  
95 - .margin({ top: 20, left: 16, right: 16 })  
96 - .objectFit(ImageFit.Contain)  
97 -  
98 - List({ scroller: this.listScroller, initialIndex: this.scrollIndex }) {  
99 - ForEach(this.newspaperListBean?.list, (item: NewspaperListItemBean, index: number) => {  
100 - ListItem() {  
101 - List() {  
102 - ForEach(item.items, (positionItem: NewspaperPositionItemBean, itemIndex: number) => {  
103 - ListItem() {  
104 - Column() {  
105 - if (itemIndex == 0) {  
106 - Text(item.pageNum + item.pageName)  
107 - .fontSize($r('app.float.font_size_14'))  
108 - .fontColor($r('app.color.color_ED2800'))  
109 - .fontWeight(600)  
110 - .margin({ top: 16, bottom: 16 })  
111 - .maxLines(1)  
112 - }  
113 -  
114 - if (positionItem.shortTitle) {  
115 - Text(positionItem.shortTitle)  
116 - .fontSize($r('app.float.font_size_14'))  
117 - .fontColor($r('app.color.color_222222'))  
118 - .fontWeight(600)  
119 - .maxLines(2)  
120 - }  
121 -  
122 - if (positionItem.title) {  
123 - Text(positionItem.title)  
124 - .fontSize($r('app.float.font_size_17'))  
125 - .fontColor($r('app.color.color_222222'))  
126 - .margin({ top: 8 })  
127 - .maxLines(2)  
128 - }  
129 -  
130 - if (positionItem.downTitle) {  
131 - Text(positionItem.downTitle)  
132 - .fontSize($r('app.float.font_size_14'))  
133 - .fontColor($r('app.color.color_222222'))  
134 - .fontWeight(600)  
135 - .margin({ top: 8 })  
136 - .maxLines(2)  
137 - } 87 + .alignItems(VerticalAlign.Bottom)
  88 + .margin({ left: 15 })
  89 + .alignSelf(ItemAlign.Start)
  90 + .onClick(() => {
  91 + this.pageDialogShow = !this.pageDialogShow
  92 + if (this.pageDialogShow) {
  93 + this.pageListDialogController.open()
  94 + } else {
  95 + this.pageListDialogController.close()
  96 + }
  97 + })
138 98
139 - if (positionItem.newsTxt) {  
140 - Text(positionItem.newsTxt)  
141 - .fontSize($r('app.float.font_size_14'))  
142 - .fontColor($r('app.color.color_999999'))  
143 - .margin({ top: 15, bottom: 15 })  
144 - .maxLines(5) 99 + Image($r('app.media.line'))
  100 + .width('100%')
  101 + .height(6)
  102 + .margin({ top: 20, left: 16, right: 16 })
  103 + .objectFit(ImageFit.Contain)
  104 +
  105 + List({ scroller: this.listScroller, initialIndex: this.scrollIndex }) {
  106 + ForEach(this.newspaperListBean?.list, (item: NewspaperListItemBean, index: number) => {
  107 + ListItem() {
  108 + List() {
  109 + ForEach(item.items, (positionItem: NewspaperPositionItemBean, itemIndex: number) => {
  110 + ListItem() {
  111 + Column() {
  112 + if (itemIndex == 0) {
  113 + Text(item.pageNum + item.pageName)
  114 + .fontSize($r('app.float.font_size_14'))
  115 + .fontColor($r('app.color.color_ED2800'))
  116 + .fontWeight(600)
  117 + .margin({ top: 16, bottom: 16 })
  118 + .maxLines(1)
  119 + }
  120 +
  121 + if (positionItem.shortTitle) {
  122 + Text(positionItem.shortTitle)
  123 + .fontSize($r('app.float.font_size_14'))
  124 + .fontColor($r('app.color.color_222222'))
  125 + .fontWeight(600)
  126 + .maxLines(2)
  127 + }
  128 +
  129 + if (positionItem.title) {
  130 + Text(positionItem.title)
  131 + .fontSize($r('app.float.font_size_17'))
  132 + .fontColor($r('app.color.color_222222'))
  133 + .margin({ top: 8 })
  134 + .maxLines(2)
  135 + }
  136 +
  137 + if (positionItem.downTitle) {
  138 + Text(positionItem.downTitle)
  139 + .fontSize($r('app.float.font_size_14'))
  140 + .fontColor($r('app.color.color_222222'))
  141 + .fontWeight(600)
  142 + .margin({ top: 8 })
  143 + .maxLines(2)
  144 + }
  145 +
  146 + if (positionItem.newsTxt) {
  147 + Text(positionItem.newsTxt)
  148 + .fontSize($r('app.float.font_size_14'))
  149 + .fontColor($r('app.color.color_999999'))
  150 + .margin({ top: 15, bottom: 15 })
  151 + .maxLines(5)
  152 + .textOverflow({ overflow: TextOverflow.Ellipsis })
  153 + }
145 } 154 }
  155 + .alignItems(HorizontalAlign.Start)
  156 + .onClick(() => {
  157 + let taskAction: Action = {
  158 + type: 'JUMP_INNER_NEW_PAGE',
  159 + params: {
  160 + contentID: '' + positionItem.newsId,
  161 + pageID: 'IMAGE_TEXT_DETAIL',
  162 + extra: {
  163 + relType: positionItem.relType ?? '',
  164 + relId: '' + positionItem.relId,
  165 + sourcePage: '5'
  166 + } as ExtraDTO
  167 + } as Params,
  168 + };
  169 + WDRouterRule.jumpWithAction(taskAction)
  170 + // if (this.listDialogController) {
  171 + // this.listDialogController.close()
  172 + // }
  173 + })
146 } 174 }
147 - .alignItems(HorizontalAlign.Start)  
148 - .onClick(() => {  
149 - let taskAction: Action = {  
150 - type: 'JUMP_INNER_NEW_PAGE',  
151 - params: {  
152 - contentID: '' + positionItem.newsId,  
153 - pageID: 'IMAGE_TEXT_DETAIL',  
154 - extra: {  
155 - relType: positionItem.relType ?? '',  
156 - relId: '' + positionItem.relId,  
157 - sourcePage: '5'  
158 - } as ExtraDTO  
159 - } as Params,  
160 - };  
161 - WDRouterRule.jumpWithAction(taskAction)  
162 - if (this.listDialogController) {  
163 - this.listDialogController.close()  
164 - }  
165 - })  
166 - }  
167 175
168 - }) 176 + })
  177 + }
169 } 178 }
170 - } 179 + })
  180 + }
  181 + .width('100%')
  182 + .padding({ left: 15, right: 15 })
  183 + .margin({
  184 + bottom: 85
  185 + })
  186 + .scrollBar(BarState.Off)
  187 + .divider({
  188 + strokeWidth: 0.5,
  189 + color: '#EDEDED'
  190 + })
  191 + .onScrollIndex((firstIndex: number) => {
  192 + console.log('firstIndex', firstIndex)
  193 + })
  194 + .onScrollIndex((firstIndex: number, lastIndex: number, centerIndex: number) => {
  195 + console.info('first' + firstIndex)
  196 + console.info('last' + lastIndex)
  197 + console.info('center' + centerIndex)
  198 + // this.updateCurrentPageNum(firstIndex)
  199 + this.currentPageNum = `${centerIndex < 9 ? '0' + (centerIndex + 1) : centerIndex + 1}`
  200 + })
  201 + .onScroll((scrollOffset: number, scrollState: ScrollState) => {
  202 + console.info(`onScroll scrollState = ScrollState` + scrollState + `, scrollOffset = ` + scrollOffset)
171 }) 203 })
172 } 204 }
  205 + .margin({ top: 124 })
173 .width('100%') 206 .width('100%')
174 - .padding({ left: 15, right: 15 })  
175 - .scrollBar(BarState.Off)  
176 - .divider({  
177 - strokeWidth: 0.5,  
178 - color: '#EDEDED'  
179 - })  
180 - .onScrollIndex((firstIndex: number) => {  
181 - console.log('firstIndex', firstIndex)  
182 - })  
183 - .onScrollIndex((firstIndex: number, lastIndex: number, centerIndex: number) => {  
184 - console.info('first' + firstIndex)  
185 - console.info('last' + lastIndex)  
186 - console.info('center' + centerIndex)  
187 - // this.updateCurrentPageNum(firstIndex)  
188 - this.currentPageNum = `${centerIndex < 9 ? '0' + (centerIndex + 1) : centerIndex + 1}`  
189 - })  
190 - .onScroll((scrollOffset: number, scrollState: ScrollState) => {  
191 - console.info(`onScroll scrollState = ScrollState` + scrollState + `, scrollOffset = ` + scrollOffset)  
192 - })  
193 - }  
194 - .width('100%')  
195 - .backgroundColor(Color.White) 207 + .backgroundColor(Color.White)
  208 + .onClick(() => {
196 209
  210 + })
  211 + }.width('100%')
  212 + .height('100%')
  213 + .backgroundColor('#80000000')
  214 + .onClick(() => {
  215 + if (this.closeDialog) {
  216 + this.closeDialog()
  217 + }
  218 + })
197 } 219 }
198 220
199 updateCurrentPageNum(firstIndex: number): void { 221 updateCurrentPageNum(firstIndex: number): void {