Showing
3 changed files
with
51 additions
and
24 deletions
| @@ -13,6 +13,10 @@ export struct ENewspaperItemComponent { | @@ -13,6 +13,10 @@ export struct ENewspaperItemComponent { | ||
| 13 | private startY: number = 0 | 13 | private startY: number = 0 |
| 14 | private itemBeanClicked: NewspaperPositionItemBean = {} as NewspaperPositionItemBean | 14 | private itemBeanClicked: NewspaperPositionItemBean = {} as NewspaperPositionItemBean |
| 15 | @State isShowSkeleton: boolean = true | 15 | @State isShowSkeleton: boolean = true |
| 16 | + @State contentWidth: number = 0 | ||
| 17 | + @State contentHeight: number = 0 | ||
| 18 | + @Consume itemPicWidth: number | ||
| 19 | + @Consume itemPicHeight: number | ||
| 16 | 20 | ||
| 17 | aboutToAppear(): void { | 21 | aboutToAppear(): void { |
| 18 | for (let index = 0; index < this.newspaperListItemBean.items.length; index++) { | 22 | for (let index = 0; index < this.newspaperListItemBean.items.length; index++) { |
| @@ -33,23 +37,28 @@ export struct ENewspaperItemComponent { | @@ -33,23 +37,28 @@ export struct ENewspaperItemComponent { | ||
| 33 | newsSkeleton() | 37 | newsSkeleton() |
| 34 | .visibility(this.isShowSkeleton ? Visibility.Visible : Visibility.None) | 38 | .visibility(this.isShowSkeleton ? Visibility.Visible : Visibility.None) |
| 35 | Image(this.newspaperListItemBean.pagePic) | 39 | Image(this.newspaperListItemBean.pagePic) |
| 36 | - .width('100%') | ||
| 37 | - .onComplete(() => { | 40 | + .width(px2vp(this.itemPicWidth)) |
| 41 | + .height(px2vp(this.itemPicHeight)) | ||
| 42 | + .onComplete((event) => { | ||
| 43 | + if (event?.loadingStatus == 1) { | ||
| 44 | + this.contentWidth = event?.contentWidth | ||
| 45 | + this.contentHeight = event?.contentHeight | ||
| 46 | + } | ||
| 38 | this.isShowSkeleton = false | 47 | this.isShowSkeleton = false |
| 39 | }) | 48 | }) |
| 40 | - .objectFit(ImageFit.Contain) | 49 | + .objectFit(ImageFit.Fill) |
| 41 | .visibility(this.isShowSkeleton ? Visibility.None : Visibility.Visible) | 50 | .visibility(this.isShowSkeleton ? Visibility.None : Visibility.Visible) |
| 51 | + if (this.contentWidth !== 0) { | ||
| 52 | + Canvas(this.context) | ||
| 53 | + .width(px2vp(this.contentWidth)) | ||
| 54 | + .height(px2vp(this.contentHeight)) | ||
| 55 | + .backgroundColor(Color.Transparent) | ||
| 56 | + .onReady(() => { | ||
| 42 | 57 | ||
| 43 | - Canvas(this.context) | ||
| 44 | - .width('100%') | ||
| 45 | - .height('100%') | ||
| 46 | - .backgroundColor(Color.Transparent) | ||
| 47 | - .onReady(() => { | ||
| 48 | - | ||
| 49 | - }) | 58 | + }) |
| 59 | + } | ||
| 50 | } | 60 | } |
| 51 | .padding({ top:14, right: 10, bottom: 14, left: 10 }) | 61 | .padding({ top:14, right: 10, bottom: 14, left: 10 }) |
| 52 | - .margin({ left: 10, right: 10 }) | ||
| 53 | .backgroundColor(Color.White) | 62 | .backgroundColor(Color.White) |
| 54 | .width('100%') | 63 | .width('100%') |
| 55 | .onTouch((event: TouchEvent) => { | 64 | .onTouch((event: TouchEvent) => { |
| @@ -59,6 +68,7 @@ export struct ENewspaperItemComponent { | @@ -59,6 +68,7 @@ export struct ENewspaperItemComponent { | ||
| 59 | this.startX = x; | 68 | this.startX = x; |
| 60 | this.startY = y; | 69 | this.startY = y; |
| 61 | let points: number[][] = this.getArea(x, y, this.newspaperListItemBean.items); | 70 | let points: number[][] = this.getArea(x, y, this.newspaperListItemBean.items); |
| 71 | + console.log("event.points", JSON.stringify(points)) | ||
| 62 | if (points && points.length > 2) { | 72 | if (points && points.length > 2) { |
| 63 | let path = new Path2D(); | 73 | let path = new Path2D(); |
| 64 | path.moveTo(px2vp(points[0][0]), px2vp(points[0][1])); | 74 | path.moveTo(px2vp(points[0][0]), px2vp(points[0][1])); |
| @@ -21,8 +21,10 @@ export struct ENewspaperPageComponent { | @@ -21,8 +21,10 @@ export struct ENewspaperPageComponent { | ||
| 21 | private windowClass?: window.Window; | 21 | private windowClass?: window.Window; |
| 22 | private displayTool = display.getDefaultDisplaySync() | 22 | private displayTool = display.getDefaultDisplaySync() |
| 23 | private screenWidth: number = 0 | 23 | private screenWidth: number = 0 |
| 24 | - private picWidth: number = 0 | 24 | + @State picWidth: number = 0 |
| 25 | @State picHeight: number = 0 | 25 | @State picHeight: number = 0 |
| 26 | + @Provide itemPicWidth: number = 0 | ||
| 27 | + @Provide itemPicHeight: number = 0 | ||
| 26 | @State newspaperListBean: NewspaperListBean = {} as NewspaperListBean | 28 | @State newspaperListBean: NewspaperListBean = {} as NewspaperListBean |
| 27 | @Provide @Watch('onCurrentPageNumUpdated') currentPageNum: string = '01' | 29 | @Provide @Watch('onCurrentPageNumUpdated') currentPageNum: string = '01' |
| 28 | @State pageDialogShow: boolean = false | 30 | @State pageDialogShow: boolean = false |
| @@ -131,13 +133,19 @@ export struct ENewspaperPageComponent { | @@ -131,13 +133,19 @@ export struct ENewspaperPageComponent { | ||
| 131 | this.screenWidth = this.windowClass?.getWindowProperties()?.windowRect.width | 133 | this.screenWidth = this.windowClass?.getWindowProperties()?.windowRect.width |
| 132 | console.log('ENewspaperPageComponent this.screenWidth', this.screenWidth) | 134 | console.log('ENewspaperPageComponent this.screenWidth', this.screenWidth) |
| 133 | // 2000折叠屏 TODO DeviceUtil 方法完善了换判断条件 | 135 | // 2000折叠屏 TODO DeviceUtil 方法完善了换判断条件 |
| 134 | - this.ratio = this.screenWidth > 2000 ? '60%' : '100%' | 136 | + this.ratio = this.screenWidth > 2000 ? '50%' : '100%' |
| 135 | //获取宽高尺寸 | 137 | //获取宽高尺寸 |
| 136 | - this.picWidth = this.screenWidth - vp2px(52) | 138 | + // Swiper .margin({ left: 10, right: 10 }) |
| 139 | + this.picWidth = this.screenWidth - vp2px(20) | ||
| 137 | let screenHeight = this.displayTool.height; | 140 | let screenHeight = this.displayTool.height; |
| 138 | // bottomSafeHeight 底导高度 topSafeHeight 顶导高度 44 顶部高度 60 底部高度 | 141 | // bottomSafeHeight 底导高度 topSafeHeight 顶导高度 44 顶部高度 60 底部高度 |
| 139 | - let height = screenHeight - this.bottomSafeHeight - this.topSafeHeight - vp2px(44) - vp2px(60) | 142 | + // newspaper_shadow 49 高度 e_newspaper_content 59 margin top |
| 143 | + let height = screenHeight - this.bottomSafeHeight - this.topSafeHeight - vp2px(44) - vp2px(60) - vp2px(49) -vp2px(59) | ||
| 140 | this.picHeight = height | 144 | this.picHeight = height |
| 145 | + | ||
| 146 | + let ratio = this.ratio == '100%' ? 1 : 0.5 | ||
| 147 | + this.picWidth = this.picWidth * ratio | ||
| 148 | + this.picHeight = this.picHeight | ||
| 141 | // 默认日期 | 149 | // 默认日期 |
| 142 | const date = new Date() | 150 | const date = new Date() |
| 143 | const month = date.getMonth() + 1 | 151 | const month = date.getMonth() + 1 |
| @@ -168,7 +176,10 @@ export struct ENewspaperPageComponent { | @@ -168,7 +176,10 @@ export struct ENewspaperPageComponent { | ||
| 168 | this.windowClass?.on('windowSizeChange', () => { | 176 | this.windowClass?.on('windowSizeChange', () => { |
| 169 | this.screenWidth = this.windowClass?.getWindowProperties()?.windowRect.width || this.displayTool.width | 177 | this.screenWidth = this.windowClass?.getWindowProperties()?.windowRect.width || this.displayTool.width |
| 170 | // 2000折叠屏 TODO DeviceUtil 方法完善了换判断条件 | 178 | // 2000折叠屏 TODO DeviceUtil 方法完善了换判断条件 |
| 171 | - this.ratio = this.screenWidth > 2000 ? '60%' : '100%' | 179 | + this.ratio = this.screenWidth > 2000 ? '50%' : '100%' |
| 180 | + let ratio = this.ratio == '100%' ? 1 : 0.5 | ||
| 181 | + this.picWidth = this.screenWidth - vp2px(20) | ||
| 182 | + this.picWidth = this.picWidth * ratio | ||
| 172 | }); | 183 | }); |
| 173 | } | 184 | } |
| 174 | 185 | ||
| @@ -248,7 +259,7 @@ export struct ENewspaperPageComponent { | @@ -248,7 +259,7 @@ export struct ENewspaperPageComponent { | ||
| 248 | .id('news_skeleton_id') | 259 | .id('news_skeleton_id') |
| 249 | .width('100%') | 260 | .width('100%') |
| 250 | .height(px2vp(this.picHeight) + 32) | 261 | .height(px2vp(this.picHeight) + 32) |
| 251 | - .margin({ top: 35, left: 10, right: 10 }) | 262 | + .margin({ top: 59, left: 10, right: 10 }) |
| 252 | } | 263 | } |
| 253 | 264 | ||
| 254 | if (this.newspaperListBean && this.newspaperListBean.list && this.newspaperListBean.list.length > 0) { | 265 | if (this.newspaperListBean && this.newspaperListBean.list && this.newspaperListBean.list.length > 0) { |
| @@ -259,16 +270,15 @@ export struct ENewspaperPageComponent { | @@ -259,16 +270,15 @@ export struct ENewspaperPageComponent { | ||
| 259 | } | 270 | } |
| 260 | .itemSpace(10) | 271 | .itemSpace(10) |
| 261 | .index(this.swiperIndex) | 272 | .index(this.swiperIndex) |
| 262 | - .width(this.ratio) | ||
| 263 | - // newspaper_shadow 44 高度 e_newspaper_content 35 margin top | ||
| 264 | - .height(px2vp(this.picHeight) - 44 - 35) | 273 | + .width(px2vp(this.picWidth)) |
| 274 | + .height(px2vp(this.picHeight)) | ||
| 265 | .vertical(true) | 275 | .vertical(true) |
| 266 | .autoPlay(false) | 276 | .autoPlay(false) |
| 267 | .cachedCount(1) | 277 | .cachedCount(1) |
| 268 | .indicator(false) | 278 | .indicator(false) |
| 269 | .loop(false) | 279 | .loop(false) |
| 270 | .displayCount(1) | 280 | .displayCount(1) |
| 271 | - .margin({ top: 35, left: 10, right: 10 }) | 281 | + .margin({ top: 59, left: 10, right: 10 }) |
| 272 | .id('e_newspaper_content') | 282 | .id('e_newspaper_content') |
| 273 | .alignRules({ | 283 | .alignRules({ |
| 274 | top: { anchor: "e_newspaper_top", align: VerticalAlign.Bottom }, | 284 | top: { anchor: "e_newspaper_top", align: VerticalAlign.Bottom }, |
| @@ -298,6 +308,7 @@ export struct ENewspaperPageComponent { | @@ -298,6 +308,7 @@ export struct ENewspaperPageComponent { | ||
| 298 | '滑动查看下一版') | 308 | '滑动查看下一版') |
| 299 | .fontColor(Color.White) | 309 | .fontColor(Color.White) |
| 300 | .fontSize($r('app.float.font_size_14')) | 310 | .fontSize($r('app.float.font_size_14')) |
| 311 | + .lineHeight(20) | ||
| 301 | Image($r('app.media.icon_next_page')) | 312 | Image($r('app.media.icon_next_page')) |
| 302 | .width($r('app.float.vp_16')) | 313 | .width($r('app.float.vp_16')) |
| 303 | .height($r('app.float.vp_16')) | 314 | .height($r('app.float.vp_16')) |
| @@ -305,7 +316,7 @@ export struct ENewspaperPageComponent { | @@ -305,7 +316,7 @@ export struct ENewspaperPageComponent { | ||
| 305 | Visibility.Visible) | 316 | Visibility.Visible) |
| 306 | } | 317 | } |
| 307 | .justifyContent(FlexAlign.Center) | 318 | .justifyContent(FlexAlign.Center) |
| 308 | - .margin({ top: $r('app.float.margin_16') }) | 319 | + .margin({ top: 17 }) |
| 309 | .alignRules({ | 320 | .alignRules({ |
| 310 | top: { anchor: "e_newspaper_shadow", align: VerticalAlign.Bottom }, | 321 | top: { anchor: "e_newspaper_shadow", align: VerticalAlign.Bottom }, |
| 311 | middle: { anchor: "__container__", align: HorizontalAlign.Center } | 322 | middle: { anchor: "__container__", align: HorizontalAlign.Center } |
| @@ -434,10 +445,15 @@ export struct ENewspaperPageComponent { | @@ -434,10 +445,15 @@ export struct ENewspaperPageComponent { | ||
| 434 | } | 445 | } |
| 435 | 446 | ||
| 436 | private async getNewspaperList() { | 447 | private async getNewspaperList() { |
| 448 | + // ENewspaperItemComponent .padding({ top:14, right: 10, bottom: 14, left: 10 }) | ||
| 449 | + // 计算图片的内容宽高 | ||
| 450 | + let ratio = this.ratio == '100%' ? 1 : 0.6 | ||
| 451 | + this.itemPicWidth = this.picWidth * ratio - vp2px(20) | ||
| 452 | + this.itemPicHeight = this.picHeight - vp2px(28) | ||
| 437 | try { | 453 | try { |
| 438 | if (NetworkUtil.isNetConnected()) { | 454 | if (NetworkUtil.isNetConnected()) { |
| 439 | let listBean = | 455 | let listBean = |
| 440 | - await NewspaperViewModel.getNewspaperList(this.calendarDate, this.picWidth + 'x' + this.picHeight) | 456 | + await NewspaperViewModel.getNewspaperList(this.calendarDate, this.itemPicWidth + 'x' + this.itemPicHeight) |
| 441 | this.newspaperListBean = listBean; | 457 | this.newspaperListBean = listBean; |
| 442 | } else { | 458 | } else { |
| 443 | this.showToastTip('网络出小差了,请检查网络后重试') | 459 | this.showToastTip('网络出小差了,请检查网络后重试') |
| @@ -72,7 +72,8 @@ export default struct CustomDialogComponent { | @@ -72,7 +72,8 @@ export default struct CustomDialogComponent { | ||
| 72 | Row() { | 72 | Row() { |
| 73 | Text($r('app.string.dialog_text_privacy_statement')) | 73 | Text($r('app.string.dialog_text_privacy_statement')) |
| 74 | .fontColor($r('app.color.dialog_text_color')) | 74 | .fontColor($r('app.color.dialog_text_color')) |
| 75 | - .fontSize(14).margin({top:20}) | 75 | + .fontSize(14).fontFamily('PingFang SC') |
| 76 | + .margin({top:20}) | ||
| 76 | }.width('90%') | 77 | }.width('90%') |
| 77 | .justifyContent(FlexAlign.Center) | 78 | .justifyContent(FlexAlign.Center) |
| 78 | 79 |
-
Please register or login to post a comment