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';
import font from '@ohos.font';
import { ENewspaperPageDialog } from '../dialog/ENewspaperPageDialog';
import { RMCalendarBean } from './calendar/RMCalendarBean';
import { newsSkeleton } from './skeleton/newsSkeleton';
@Component
export struct ENewspaperPageComponent {
... ... @@ -63,13 +64,15 @@ export struct ENewspaperPageComponent {
customStyle: true,
})
//文字报纸弹框
listDialogController: CustomDialogController = new CustomDialogController({
builder: ENewspaperListDialog({
newspaperListBean: this.newspaperListBean
}),
alignment: DialogAlignment.Bottom,
offset: { dx: 0, dy: 0 }
})
@State isOpenListDialog: boolean = false
// listDialogController: CustomDialogController = new CustomDialogController({
// builder: ENewspaperListDialog({
// newspaperListBean: this.newspaperListBean
// }),
// alignment: DialogAlignment.Bottom,
// offset: { dx: 0, dy: 0 }
// })
async aboutToAppear() {
//获取宽高尺寸
... ... @@ -95,184 +98,207 @@ export struct ENewspaperPageComponent {
}
build() {
RelativeContainer() {
Stack() {
RelativeContainer() {
Image($r('app.media.icon_arrow_down'))
.height($r('app.float.top_arrow_size'))
.width($r('app.float.top_arrow_size'))
RelativeContainer() {
Image($r('app.media.icon_arrow_down'))
.height($r('app.float.top_arrow_size'))
.width($r('app.float.top_arrow_size'))
.alignRules({
left: { anchor: "__container__", align: HorizontalAlign.Start },
center: { anchor: "__container__", align: VerticalAlign.Center }
})
.id('e_newspaper_back')
.onClick((event: ClickEvent) => {
router.back()
})
Row() {
Text(this.calendarDate?.replace('-', '.')?.replace('-', '.'))
.fontSize($r('app.float.font_size_20'))
.fontColor($r('app.color.white'))
.fontFamily('BebasNeue_Regular')
.fontWeight(FontWeight.Regular)
Image($r('app.media.icon_triangle'))
.width($r('app.float.border_radius_6'))
.height($r('app.float.border_radius_6'))
.margin({ left: 2, bottom: 5 })
}
.alignItems(VerticalAlign.Bottom)
.alignRules({
left: { anchor: "__container__", align: HorizontalAlign.Start },
middle: { anchor: "__container__", align: HorizontalAlign.Center },
center: { anchor: "__container__", align: VerticalAlign.Center }
})
.id('e_newspaper_back')
.id('e_newspaper_date')
.onClick(() => {
this.calendarDialogShow = !this.calendarDialogShow
if (this.calendarDialogShow) {
this.calendarDialogController.open()
} else {
this.calendarDialogController.close()
}
})
Image($r('app.media.icon_share'))
.height($r('app.float.top_arrow_size'))
.width($r('app.float.top_arrow_size'))
.alignRules({
right: { anchor: "__container__", align: HorizontalAlign.End },
center: { anchor: "__container__", align: VerticalAlign.Center }
})
.id('e_newspaper_share')
}
.margin({ left: $r('app.float.margin_16'), right: $r('app.float.margin_16') })
.height($r('app.float.top_bar_height'))
.alignRules({
top: { anchor: '__container__', align: VerticalAlign.Top },
left: { anchor: '__container__', align: HorizontalAlign.Start },
right: { anchor: '__container__', align: HorizontalAlign.End }
})
.id('e_newspaper_top')
if (!this.newspaperListBean || !this.newspaperListBean.list || this.newspaperListBean.list.length == 0) {
newsSkeleton()
.alignRules({
top: { anchor: "e_newspaper_top", align: VerticalAlign.Bottom },
middle: { anchor: "__container__", align: HorizontalAlign.Center }
})
.id('news_skeleton_id')
.width('100%')
.height(px2vp(this.picHeight) + 32)
.margin({ top: 35, left: 10, right: 10 })
}
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 })
})
}
.index(this.swiperIndex)
.width('100%')
.height(px2vp(this.picHeight) + 32)
.vertical(true)
.autoPlay(false)
.cachedCount(3)
.indicator(false)
.loop(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.currentPageNum = this.newspaperListBean?.list[index]?.pageNum
this.swiperIndex = index
})
Image($r('app.media.newspaper_shadow'))
.height($r('app.float.vp_12'))
.margin({ left: 20, right: 20, top: -1 })
.objectFit(ImageFit.Contain)
.alignRules({
top: { anchor: "e_newspaper_content", align: VerticalAlign.Bottom },
left: { anchor: 'e_newspaper_content', align: HorizontalAlign.Start },
right: { anchor: 'e_newspaper_content', align: HorizontalAlign.End }
})
.id('e_newspaper_shadow')
Row() {
Text(this.swiperIndex + 1 == this.newspaperListBean?.list?.length ? '已到底部，可以选择其他日期' : '滑动查看下一版')
.fontColor(Color.White)
.fontSize($r('app.float.font_size_14'))
Image($r('app.media.icon_next_page'))
.width($r('app.float.vp_16'))
.height($r('app.float.vp_16'))
.visibility(this.swiperIndex + 1 == this.newspaperListBean?.list?.length ? Visibility.None : Visibility.Visible)
}
.justifyContent(FlexAlign.Center)
.margin({ top: $r('app.float.margin_16') })
.alignRules({
top: { anchor: "e_newspaper_shadow", align: VerticalAlign.Bottom },
middle: { anchor: "__container__", align: HorizontalAlign.Center }
})
.id('e_newspaper_next')
.onClick((event: ClickEvent) => {
router.back()
this.swiperController.showNext()
})
}
Row() {
Text(this.calendarDate?.replace('-', '.')?.replace('-', '.'))
.fontSize($r('app.float.font_size_20'))
Text(this.currentPageNum)
.fontSize($r('app.float.font_size_36'))
.fontColor($r('app.color.white'))
.fontFamily('BebasNeue_Regular')
.fontWeight(FontWeight.Regular)
Text('版')
.fontSize($r('app.float.font_size_16'))
.fontColor($r('app.color.white'))
.margin({ bottom: 6 })
Image($r('app.media.icon_triangle'))
.width($r('app.float.border_radius_6'))
.height($r('app.float.border_radius_6'))
.margin({ left: 2, bottom: 5 })
.margin({ left: 2, bottom: 6 })
}
.alignItems(VerticalAlign.Bottom)
.margin({ left: $r('app.float.margin_16'), bottom: $r('app.float.top_tab_bar_height') })
.alignRules({
middle: { anchor: "__container__", align: HorizontalAlign.Center },
center: { anchor: "__container__", align: VerticalAlign.Center }
bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
left: { anchor: '__container__', align: HorizontalAlign.Start }
})
.id('e_newspaper_date')
.onClick(() => {
this.calendarDialogShow = !this.calendarDialogShow
if (this.calendarDialogShow) {
this.calendarDialogController.open()
.id('e_newspaper_page_num')
.onClick((event: ClickEvent) => {
this.pageDialogShow = !this.pageDialogShow
if (this.pageDialogShow) {
this.pageDialogController.open()
} else {
this.calendarDialogController.close()
this.pageDialogController.close()
}
})
Image($r('app.media.icon_share'))
.height($r('app.float.top_arrow_size'))
.width($r('app.float.top_arrow_size'))
.alignRules({
right: { anchor: "__container__", align: HorizontalAlign.End },
center: { anchor: "__container__", align: VerticalAlign.Center }
})
.id('e_newspaper_share')
}
.margin({ left: $r('app.float.margin_16'), right: $r('app.float.margin_16') })
.height($r('app.float.top_bar_height'))
.alignRules({
top: { anchor: '__container__', align: VerticalAlign.Top },
left: { anchor: '__container__', align: HorizontalAlign.Start },
right: { anchor: '__container__', align: HorizontalAlign.End }
})
.id('e_newspaper_top')
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 })
})
}
.index(this.swiperIndex)
.width('100%')
.height(px2vp(this.picHeight) + 32)
.vertical(true)
.autoPlay(false)
.cachedCount(3)
.indicator(false)
.loop(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.currentPageNum = this.newspaperListBean?.list[index]?.pageNum
this.swiperIndex = index
})
Image($r('app.media.newspaper_shadow'))
.height($r('app.float.vp_12'))
.margin({ left: 20, right: 20, top: -1 })
.objectFit(ImageFit.Contain)
.alignRules({
top: { anchor: "e_newspaper_content", align: VerticalAlign.Bottom },
left: { anchor: 'e_newspaper_content', align: HorizontalAlign.Start },
right: { anchor: 'e_newspaper_content', align: HorizontalAlign.End }
})
.id('e_newspaper_shadow')
// .bindPopup(this.pageNumPopup, {
// builder: this.popupBuilder,
// placement: Placement.Top,
// popupColor: Color.White
// })
Row() {
Text(this.swiperIndex + 1 == this.newspaperListBean?.list?.length ? '已到底部，可以选择其他日期' : '滑动查看下一版')
.fontColor(Color.White)
Image($r('app.media.icon_read_paper'))
.width($r('app.float.vp_20'))
.height($r('app.float.vp_20'))
.margin({ right: $r('app.float.vp_3') })
Text('读报纸')
.fontSize($r('app.float.font_size_14'))
Image($r('app.media.icon_next_page'))
.width($r('app.float.vp_16'))
.height($r('app.float.vp_16'))
.visibility(this.swiperIndex + 1 == this.newspaperListBean?.list?.length ? Visibility.None : Visibility.Visible)
.fontColor($r('app.color.white'))
}
.justifyContent(FlexAlign.Center)
.margin({ top: $r('app.float.margin_16') })
.alignItems(VerticalAlign.Center)
.margin({ right: $r('app.float.margin_16'), bottom: $r('app.float.top_tab_bar_height') })
.alignRules({
top: { anchor: "e_newspaper_shadow", align: VerticalAlign.Bottom },
middle: { anchor: "__container__", align: HorizontalAlign.Center }
bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
right: { anchor: '__container__', align: HorizontalAlign.End }
})
.id('e_newspaper_next')
.id('e_newspaper_read')
.onClick((event: ClickEvent) => {
this.swiperController.showNext()
this.isOpenListDialog = true
})
}
.width('100%')
.height('100%')
.backgroundColor($r('app.color.color_80000000'))
.id('e_newspaper_container')
Row() {
Text(this.currentPageNum)
.fontSize($r('app.float.font_size_36'))
.fontColor($r('app.color.white'))
.fontFamily('BebasNeue_Regular')
Text('版')
.fontSize($r('app.float.font_size_16'))
.fontColor($r('app.color.white'))
.margin({ bottom: 6 })
Image($r('app.media.icon_triangle'))
.width($r('app.float.border_radius_6'))
.height($r('app.float.border_radius_6'))
.margin({ left: 2, bottom: 6 })
}
.alignItems(VerticalAlign.Bottom)
.margin({ left: $r('app.float.margin_16'), bottom: $r('app.float.top_tab_bar_height') })
.alignRules({
bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
left: { anchor: '__container__', align: HorizontalAlign.Start }
})
.id('e_newspaper_page_num')
.onClick((event: ClickEvent) => {
this.pageDialogShow = !this.pageDialogShow
if (this.pageDialogShow) {
this.pageDialogController.open()
} else {
this.pageDialogController.close()
ENewspaperListDialog({
newspaperListBean: this.newspaperListBean,
closeDialog: () => {
this.isOpenListDialog = false
}
})
// .bindPopup(this.pageNumPopup, {
// builder: this.popupBuilder,
// placement: Placement.Top,
// popupColor: Color.White
// })
Row() {
Image($r('app.media.icon_read_paper'))
.width($r('app.float.vp_20'))
.height($r('app.float.vp_20'))
.margin({ right: $r('app.float.vp_3') })
Text('读报纸')
.fontSize($r('app.float.font_size_14'))
.fontColor($r('app.color.white'))
}
.alignItems(VerticalAlign.Center)
.margin({ right: $r('app.float.margin_16'), bottom: $r('app.float.top_tab_bar_height') })
.alignRules({
bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
right: { anchor: '__container__', align: HorizontalAlign.End }
})
.id('e_newspaper_read')
.onClick((event: ClickEvent) => {
this.listDialogController.open()
})
.visibility(this.isOpenListDialog ? Visibility.Visible : Visibility.None)
}
.width('100%')
.height('100%')
.backgroundColor($r('app.color.color_80000000'))
.id('e_newspaper_container')
}
private async getNewspaperTime() {
... ...
... ... @@ -12,7 +12,7 @@ export struct ENewspaperListDialog {
@Consume @Watch('onCurrentPageNumUpdated') currentPageNum: string
@State pageDialogShow: boolean = false
@State scrollIndex: number = 0
newspaperListBean: NewspaperListBean = {} as NewspaperListBean
@Prop newspaperListBean: NewspaperListBean = {} as NewspaperListBean
private listScroller: Scroller = new Scroller();
//文字版选择弹框
pageListDialogController: CustomDialogController = new CustomDialogController({
... ... @@ -21,13 +21,14 @@ export struct ENewspaperListDialog {
newspaperListBean: this.newspaperListBean,
}),
alignment: DialogAlignment.TopStart,
offset: { dx: 0, dy: 214 },
offset: { dx: 0, dy: 224 },
customStyle: true,
})
//页面半屏弹窗（实现在上个组件）若尝试在CustomDialog中传入多个其他的Controller，
// 以实现在CustomDialog中打开另一个或另一些CustomDialog，
// 那么此处需要将指向自己的controller放在所有controller的后面
listDialogController: CustomDialogController
// listDialogController: CustomDialogController
public closeDialog?: () => void
//watch监听报纸页码回调
onCurrentPageNumUpdated(): void {
... ... @@ -53,147 +54,168 @@ export struct ENewspaperListDialog {
}
build() {
Column() {
Row()
.width(43)
.height(4)
.backgroundColor('#EDEDED')
.margin({
top: 10,
bottom: 10
})
Row() {
Text(this.currentPageNum)
.fontSize($r('app.float.font_size_36'))
.fontColor($r('app.color.color_222222'))
.fontFamily('BebasNeue_Regular')
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({ left: 15 })
.alignSelf(ItemAlign.Start)
.onClick(() => {
this.pageDialogShow = !this.pageDialogShow
if (this.pageDialogShow) {
this.pageListDialogController.open()
} else {
this.pageListDialogController.close()
Stack() {
Column() {
Row()
.width(43)
.height(4)
.backgroundColor('#EDEDED')
.margin({
top: 10,
bottom: 10
})
.onClick(() => {
if (this.closeDialog) {
this.closeDialog()
}
})
Row() {
Text(this.currentPageNum)
.fontSize($r('app.float.font_size_36'))
.fontColor($r('app.color.color_222222'))
.fontFamily('BebasNeue_Regular')
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 })
}
})
Image($r('app.media.line'))
.width('100%')
.height(6)
.margin({ top: 20, left: 16, right: 16 })
.objectFit(ImageFit.Contain)
List({ scroller: this.listScroller, initialIndex: this.scrollIndex }) {
ForEach(this.newspaperListBean?.list, (item: NewspaperListItemBean, index: number) => {
ListItem() {
List() {
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'))
.fontWeight(600)
.margin({ top: 16, bottom: 16 })
.maxLines(1)
}
if (positionItem.shortTitle) {
Text(positionItem.shortTitle)
.fontSize($r('app.float.font_size_14'))
.fontColor($r('app.color.color_222222'))
.fontWeight(600)
.maxLines(2)
}
if (positionItem.title) {
Text(positionItem.title)
.fontSize($r('app.float.font_size_17'))
.fontColor($r('app.color.color_222222'))
.margin({ top: 8 })
.maxLines(2)
}
if (positionItem.downTitle) {
Text(positionItem.downTitle)
.fontSize($r('app.float.font_size_14'))
.fontColor($r('app.color.color_222222'))
.fontWeight(600)
.margin({ top: 8 })
.maxLines(2)
}
.alignItems(VerticalAlign.Bottom)
.margin({ left: 15 })
.alignSelf(ItemAlign.Start)
.onClick(() => {
this.pageDialogShow = !this.pageDialogShow
if (this.pageDialogShow) {
this.pageListDialogController.open()
} else {
this.pageListDialogController.close()
}
})
if (positionItem.newsTxt) {
Text(positionItem.newsTxt)
.fontSize($r('app.float.font_size_14'))
.fontColor($r('app.color.color_999999'))
.margin({ top: 15, bottom: 15 })
.maxLines(5)
Image($r('app.media.line'))
.width('100%')
.height(6)
.margin({ top: 20, left: 16, right: 16 })
.objectFit(ImageFit.Contain)
List({ scroller: this.listScroller, initialIndex: this.scrollIndex }) {
ForEach(this.newspaperListBean?.list, (item: NewspaperListItemBean, index: number) => {
ListItem() {
List() {
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'))
.fontWeight(600)
.margin({ top: 16, bottom: 16 })
.maxLines(1)
}
if (positionItem.shortTitle) {
Text(positionItem.shortTitle)
.fontSize($r('app.float.font_size_14'))
.fontColor($r('app.color.color_222222'))
.fontWeight(600)
.maxLines(2)
}
if (positionItem.title) {
Text(positionItem.title)
.fontSize($r('app.float.font_size_17'))
.fontColor($r('app.color.color_222222'))
.margin({ top: 8 })
.maxLines(2)
}
if (positionItem.downTitle) {
Text(positionItem.downTitle)
.fontSize($r('app.float.font_size_14'))
.fontColor($r('app.color.color_222222'))
.fontWeight(600)
.margin({ top: 8 })
.maxLines(2)
}
if (positionItem.newsTxt) {
Text(positionItem.newsTxt)
.fontSize($r('app.float.font_size_14'))
.fontColor($r('app.color.color_999999'))
.margin({ top: 15, bottom: 15 })
.maxLines(5)
.textOverflow({ overflow: TextOverflow.Ellipsis })
}
}
.alignItems(HorizontalAlign.Start)
.onClick(() => {
let taskAction: Action = {
type: 'JUMP_INNER_NEW_PAGE',
params: {
contentID: '' + positionItem.newsId,
pageID: 'IMAGE_TEXT_DETAIL',
extra: {
relType: positionItem.relType ?? '',
relId: '' + positionItem.relId,
sourcePage: '5'
} as ExtraDTO
} as Params,
};
WDRouterRule.jumpWithAction(taskAction)
// if (this.listDialogController) {
// this.listDialogController.close()
// }
})
}
.alignItems(HorizontalAlign.Start)
.onClick(() => {
let taskAction: Action = {
type: 'JUMP_INNER_NEW_PAGE',
params: {
contentID: '' + positionItem.newsId,
pageID: 'IMAGE_TEXT_DETAIL',
extra: {
relType: positionItem.relType ?? '',
relId: '' + positionItem.relId,
sourcePage: '5'
} as ExtraDTO
} as Params,
};
WDRouterRule.jumpWithAction(taskAction)
if (this.listDialogController) {
this.listDialogController.close()
}
})
}
})
})
}
}
}
})
}
.width('100%')
.padding({ left: 15, right: 15 })
.margin({
bottom: 85
})
.scrollBar(BarState.Off)
.divider({
strokeWidth: 0.5,
color: '#EDEDED'
})
.onScrollIndex((firstIndex: number) => {
console.log('firstIndex', firstIndex)
})
.onScrollIndex((firstIndex: number, lastIndex: number, centerIndex: number) => {
console.info('first' + firstIndex)
console.info('last' + lastIndex)
console.info('center' + centerIndex)
// this.updateCurrentPageNum(firstIndex)
this.currentPageNum = `${centerIndex < 9 ? '0' + (centerIndex + 1) : centerIndex + 1}`
})
.onScroll((scrollOffset: number, scrollState: ScrollState) => {
console.info(`onScroll scrollState = ScrollState` + scrollState + `, scrollOffset = ` + scrollOffset)
})
}
.margin({ top: 124 })
.width('100%')
.padding({ left: 15, right: 15 })
.scrollBar(BarState.Off)
.divider({
strokeWidth: 0.5,
color: '#EDEDED'
})
.onScrollIndex((firstIndex: number) => {
console.log('firstIndex', firstIndex)
})
.onScrollIndex((firstIndex: number, lastIndex: number, centerIndex: number) => {
console.info('first' + firstIndex)
console.info('last' + lastIndex)
console.info('center' + centerIndex)
// this.updateCurrentPageNum(firstIndex)
this.currentPageNum = `${centerIndex < 9 ? '0' + (centerIndex + 1) : centerIndex + 1}`
})
.onScroll((scrollOffset: number, scrollState: ScrollState) => {
console.info(`onScroll scrollState = ScrollState` + scrollState + `, scrollOffset = ` + scrollOffset)
})
}
.width('100%')
.backgroundColor(Color.White)
.backgroundColor(Color.White)
.onClick(() => {
})
}.width('100%')
.height('100%')
.backgroundColor('#80000000')
.onClick(() => {
if (this.closeDialog) {
this.closeDialog()
}
})
}
updateCurrentPageNum(firstIndex: number): void {
... ...