developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
wangyujian_wd
98715f24 1 parent 4bc46675

feat： 

1）电子版-日历和期刊弹窗和联动优化；
2）电子版-期刊选择弹框自定义，页面顶部状态栏修改；
Inline Side-by-side
Showing 8 changed files with 255 additions and 94 deletions
import { NewspaperListBean, NewspaperListItemBean } from 'wdBean';
import { NewspaperViewModel } from '../viewmodel/NewspaperViewModel';
import router from '@ohos.router';
import { Logger } from 'wdKit';
import { ENewspaperItemComponent } from './ENewspaperItemComponent';
import { ENewspaperListDialog } from '../dialog/ENewspaperListDialog';
import display from '@ohos.display';
import { ENewspaperCalendarDialog } from '../dialog/ENewspaperCalendarDialog';
import font from '@ohos.font';
import { ENewspaperPageDialog } from '../dialog/ENewspaperPageDialog';
import { RMCalendarBean } from './calendar/RMCalendarBean';
@Component
export struct ENewspaperPageComponent {
private displayTool = display.getDefaultDisplaySync()
private screenWidth: number = 0
private picWidth: number = 0
@State picHeight: number = 0
@State newspaperListBean: NewspaperListBean = {} as NewspaperListBean
@State currentPageNum: string = '01'
@State pageNumPopup: boolean = false
@State calendarPopup: boolean = false
@State calendarDateTitle: string = ''
@State picHeight: number = 0
@State pageDialogShow: boolean = false
@State calendarDialogShow: boolean = false
@State calendarDate: string = ''
private swiperController: SwiperController = new SwiperController()
@State swiperIndex: number = 0;
//watch监听报纸页码回调
// onCurrentPageNumUpdated(): void {
// console.log("ENewspaperPageComponent-onCurrentPageNumUpdated", "date：", this.currentPageNum)
// let _swiperIndex = Number.parseInt(this.currentPageNum)
// console.log("ENewspaperPageComponent-onCurrentPageNumUpdated", "_swiperIndex：", _swiperIndex)
// this.swiperIndex = _swiperIndex > 0 ? _swiperIndex - 1 : _swiperIndex
// }
//日历选择弹框
calendarDialogController: CustomDialogController = new CustomDialogController({
builder: ENewspaperCalendarDialog(),
builder: ENewspaperCalendarDialog({ onDateChange: (date: RMCalendarBean) => {
console.log("onDateChange-日历选择弹框", "date：", JSON.stringify(date))
if (date.fullYear && date.month && date.date) {
this.calendarDate = `${date.fullYear}-${date.month > 9 ? date.month + 1 : '0' + (date.month + 1)}-${date.date > 9 ? date.date : '0' + date.date}`
this.currentPageNum = '01'
this.getNewspaperTime()
this.getNewspaperList()
}
} }),
alignment: DialogAlignment.Top,
offset: { dx: 0, dy: 80 },
customStyle: true,
// cornerRadius: 4
})
listDialogController: CustomDialogController = new CustomDialogController({
builder: ENewspaperListDialog({ newspaperListBean: this.newspaperListBean,
//图片版选择弹框
pageDialogController: CustomDialogController = new CustomDialogController({
builder: ENewspaperPageDialog({
currentPageNum: this.currentPageNum,
dialogType: 0,
newspaperListBean: this.newspaperListBean,
onDateChange: (date: string, dialogType: number) => {
if (dialogType == 0) {
let _swiperIndex = Number.parseInt(this.currentPageNum)
console.log("ENewspaperPageComponent-onCurrentPageNumUpdated", "_swiperIndex：", _swiperIndex)
this.swiperIndex = _swiperIndex > 0 ? _swiperIndex - 1 : _swiperIndex
}
}
}),
alignment: DialogAlignment.Bottom
alignment: DialogAlignment.BottomStart,
offset: { dx: 0, dy: -90 },
customStyle: true,
})
//文字报纸弹框
listDialogController: CustomDialogController = new CustomDialogController({
builder: ENewspaperListDialog({
currentPageNum: this.currentPageNum,
newspaperListBean: this.newspaperListBean }),
alignment: DialogAlignment.Bottom,
offset: { dx: 0, dy: 0 }
})
@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() {
... ... @@ -69,15 +82,15 @@ export struct ENewspaperPageComponent {
center: { anchor: "__container__", align: VerticalAlign.Center } })
.id('e_newspaper_back')
.onClick((event: ClickEvent) => {
Logger.info("sfsfsd", "" + vp2px(10))
router.back()
})
Row() {
Text(this.calendarDateTitle)
Text(this.calendarDate)
.fontSize($r('app.float.font_size_20'))
.fontColor($r('app.color.white'))
.fontFamily('BebasNeue_Regular')
.fontWeight(FontWeight.Bold)
Image($r('app.media.icon_triangle'))
.width($r('app.float.border_radius_6'))
... ... @@ -89,8 +102,8 @@ export struct ENewspaperPageComponent {
center: { anchor: "__container__", align: VerticalAlign.Center } })
.id('e_newspaper_date')
.onClick(() => {
this.calendarPopup = !this.calendarPopup
if (this.calendarPopup) {
this.calendarDialogShow = !this.calendarDialogShow
if (this.calendarDialogShow) {
this.calendarDialogController.open()
} else {
this.calendarDialogController.close()
... ... @@ -117,6 +130,7 @@ export struct ENewspaperPageComponent {
ENewspaperItemComponent({ newspaperListItemBean: item })
})
}
.index(this.swiperIndex)
.width('100%')
.height(px2vp(this.picHeight) + 32)
.vertical(true)
... ... @@ -163,6 +177,7 @@ export struct ENewspaperPageComponent {
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'))
... ... @@ -179,14 +194,20 @@ export struct ENewspaperPageComponent {
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
this.pageDialogShow = !this.pageDialogShow
if (this.pageDialogShow) {
this.pageDialogController.open()
} else {
this.pageDialogController.close()
}
})
// .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'))
... ... @@ -212,22 +233,29 @@ export struct ENewspaperPageComponent {
}
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: '/font/roboto_medium_numbers.ttf' // font文件夹与pages目录同级
familySrc: $rawfile('font/BebasNeue_Regular.otf')
})
let newspaperTimes = await NewspaperViewModel.getNewspaperTime()
this.getNewspaperTime()
this.getNewspaperList()
}
private async getNewspaperTime() {
let newspaperTimes = await NewspaperViewModel.getNewspaperTime(this.calendarDate)
if (newspaperTimes && newspaperTimes.length > 0) {
this.calendarDateTitle = newspaperTimes[0].date
this.calendarDate = newspaperTimes[0].date
}
}
private async getNewspaperList() {
try {
let displayTool = display.getDefaultDisplaySync()
let screenWidth = displayTool.width
let picWidth = screenWidth - vp2px(52)
this.picHeight = picWidth * 566 / 378
let listBean = await NewspaperViewModel.getNewspaperList(this.calendarDateTitle, picWidth + 'x' + this.picHeight)
let listBean = await NewspaperViewModel.getNewspaperList(this.calendarDate, this.picWidth + 'x' + this.picHeight)
this.newspaperListBean = listBean;
} catch (exception) {
... ...
... ... @@ -4,16 +4,20 @@ import { RMCalendarBean } from '../components/calendar/RMCalendarBean'
@CustomDialog
export struct ENewspaperCalendarDialog {
calendarDialogController?: CustomDialogController
// 选择变化监听，
onDateChange?: (date: RMCalendarBean) => void
build() {
RMCalendar({
// 开始日期
startDate: new Date(2023, 8, 1),
// 截止日期
endDate: new Date(2024, 2, 20),
endDate: new Date(),
// 日期选择变化监听
onDateChange: (date1: RMCalendarBean) => {
console.log("onDateChange", "date1：", JSON.stringify(date1))
onDateChange: (date: RMCalendarBean) => {
if (this.onDateChange) {
this.onDateChange(date)
}
if (this.calendarDialogController) {
this.calendarDialogController.close()
}
... ...
import { NewspaperListBean, NewspaperListItemBean, NewspaperPositionItemBean } from 'wdBean'
import { ENewspaperPageDialog } from '../dialog/ENewspaperPageDialog'
/**
* 读报纸半屏弹窗
* 弹窗嵌套参考资料（https://developer.harmonyos.com/cn/docs/documentation/doc-references-V2/ts-methods-custom-dialog-box-0000001580345722-V2）
*/
@CustomDialog
export struct ENewspaperListDialog {
@State currentPageNum: string = '01'
controller: CustomDialogController
@Link currentPageNum: string
@State pageDialogShow: boolean = false
@State scrollIndex: number = 0
newspaperListBean: NewspaperListBean = {} as NewspaperListBean
private listScroller: Scroller = new Scroller();
//文字版选择弹框
pageListDialogController: CustomDialogController = new CustomDialogController({
builder: ENewspaperPageDialog({
currentPageNum: this.currentPageNum,
dialogType: 1,
newspaperListBean: this.newspaperListBean,
onDateChange: (date: string, dialogType: number) => {
if (dialogType == 1) {
console.log("ENewspaperListDialog-pageListDialogController", "date：", this.currentPageNum)
let _scrollIndex = Number.parseInt(this.currentPageNum)
console.log("ENewspaperListDialog-pageListDialogController", "_swiperIndex：", _scrollIndex)
this.scrollIndex = _scrollIndex > 0 ? _scrollIndex - 1 : _scrollIndex
this.listScroller.scrollToIndex(this.scrollIndex)
}
}
}),
alignment: DialogAlignment.TopStart,
offset: { dx: 0, dy: 214 },
customStyle: true,
})
//页面半屏弹窗（实现在上个组件）若尝试在CustomDialog中传入多个其他的Controller，
// 以实现在CustomDialog中打开另一个或另一些CustomDialog，
// 那么此处需要将指向自己的controller放在所有controller的后面
listDialogController: CustomDialogController
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'))
... ... @@ -23,8 +61,16 @@ export struct ENewspaperListDialog {
.margin({ left: 2, bottom: 6 })
}
.alignItems(VerticalAlign.Bottom)
.margin({ top: 25, left: 15 })
.margin({ left: 15 })
.alignSelf(ItemAlign.Start)
.onClick(() => {
this.pageDialogShow = !this.pageDialogShow
if (this.pageDialogShow) {
this.pageListDialogController.open()
} else {
this.pageListDialogController.close()
}
})
Image($r('app.media.line'))
.width('100%')
... ... @@ -32,16 +78,17 @@ export struct ENewspaperListDialog {
.margin({ top: 20, left: 16, right: 16 })
.objectFit(ImageFit.Contain)
List() {
List({ scroller: this.listScroller }) {
ForEach(this.newspaperListBean?.list, (item: NewspaperListItemBean, index: number) => {
ForEach(item.items, (positionItem: NewspaperPositionItemBean, itemIndex: number) => {
ListItem() {
Column(){
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 })
.fontWeight(600)
.margin({ top: 16, bottom: 16 })
.maxLines(1)
}
... ... @@ -49,7 +96,7 @@ export struct ENewspaperListDialog {
Text(positionItem.shortTitle)
.fontSize($r('app.float.font_size_14'))
.fontColor($r('app.color.color_222222'))
.margin({ top: 16 })
.fontWeight(600)
.maxLines(2)
}
... ... @@ -57,7 +104,7 @@ export struct ENewspaperListDialog {
Text(positionItem.title)
.fontSize($r('app.float.font_size_17'))
.fontColor($r('app.color.color_222222'))
.margin({ top: 16 })
.margin({ top: 8 })
.maxLines(2)
}
... ... @@ -65,7 +112,8 @@ export struct ENewspaperListDialog {
Text(positionItem.downTitle)
.fontSize($r('app.float.font_size_14'))
.fontColor($r('app.color.color_222222'))
.margin({ top: 16 })
.fontWeight(600)
.margin({ top: 8 })
.maxLines(2)
}
... ... @@ -73,7 +121,7 @@ export struct ENewspaperListDialog {
Text(positionItem.newsTxt)
.fontSize($r('app.float.font_size_14'))
.fontColor($r('app.color.color_999999'))
.margin({ top: 16, bottom: 16 })
.margin({ top: 15, bottom: 15 })
.maxLines(5)
}
}
... ... @@ -81,24 +129,20 @@ export struct ENewspaperListDialog {
}
})
})
}
.width('100%')
.margin({ top: 16, left: 16, right: 16 })
.padding({ left: 15, right: 15 })
.scrollBar(BarState.Off)
.divider({
strokeWidth: 1,
strokeWidth: 0.5,
color: '#EDEDED'
})
.onScrollIndex((firstIndex: number) => {
this.updateCurrentPageNum(firstIndex)
})
}
.width('100%')
.height(674)
.backgroundColor(Color.White)
}
... ... @@ -107,20 +151,19 @@ export struct ENewspaperListDialog {
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){
if (itemBean.items && itemBean.items.length > 0) {
for (let item of itemBean.items) {
index++
if (index == firstIndex){
if (index == firstIndex) {
this.currentPageNum = itemBean.pageNum
return
}
}
}
}
}
}
}
}
... ...
import { NewspaperListBean, NewspaperListItemBean } from 'wdBean/Index'
/**
* 期刊日期选择弹窗
*/
@CustomDialog
export struct ENewspaperPageDialog {
dialogType: number = 0 //0：图片版，1：文字版
pageDialogController?: CustomDialogController
@Link currentPageNum: string
@Prop newspaperListBean: NewspaperListBean = {} as NewspaperListBean
// 选择变化监听，
onDateChange?: (date: string, dialogType: number) => void
build() {
Column() {
if (this.dialogType == 1) {
Image($r("app.media.iv_e_news_pager_calendar_arrow_up"))
.width(18).height(8.5)
.margin({ left: 31 })
}
Stack() {
GridRow({ columns: 5, gutter: { x: 15, y: 15 } }) {
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'))
.fontFamily('BebasNeue_Regular')
}
.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.currentPageNum = item.pageNum
if (this.onDateChange) {
this.onDateChange(item.pageNum, this.dialogType)
}
if (this.pageDialogController) {
this.pageDialogController.close()
}
})
}
})
}
}
.padding(20)
.width(260)
.borderRadius(4)
.backgroundColor(Color.White)
if (this.dialogType == 0) {
Image($r("app.media.iv_e_news_pager_calendar_arrow_down"))
.width(18).height(8.5)
.margin({ left: 31 })
}
}
.margin({ left: 10 })
.alignItems(HorizontalAlign.Start)
}
}
\ No newline at end of file
... ...
import HashMap from '@ohos.util.HashMap';
import { HttpUrlUtils, ResponseDTO, WDHttp } from 'wdNetwork';
import { DateTimeUtils, Logger } from 'wdKit';
import { ContentDetailDTO, NavigationBodyDTO, PageDTO,InteractDataDTO, MorningEveningPaperDTO,
NewspaperTimeInfoBean,
import {
CompInfoBean,
ContentDetailDTO,
InteractDataDTO,
MorningEveningPaperDTO,
NavigationBodyDTO,
NewspaperListBean,
PageInfoBean,
CompInfoBean
NewspaperTimeInfoBean,
PageDTO,
PageInfoBean
} from 'wdBean';
const TAG = 'HttpRequest';
export class PageRepository {
static getBottomNavGroupUrl() {
... ... @@ -62,8 +68,8 @@ export class PageRepository {
return url;
}
static getNewspaperInfoUrl() {
let url = HttpUrlUtils.getHost() + HttpUrlUtils.E_NEWSPAPER_INFO_PATH;
static getNewspaperInfoUrl(date: string) {
let url = HttpUrlUtils.getHost() + HttpUrlUtils.E_NEWSPAPER_INFO_PATH + "?date=" + date;
Logger.info(TAG,"getNewspaperInfoUrl url = "+url)
return url;
}
... ... @@ -146,8 +152,8 @@ export class PageRepository {
return WDHttp.post<ResponseDTO<InteractDataDTO[]>>(url, param, headers)
};
static fetchNewspaperInfo() {
let url = PageRepository.getNewspaperInfoUrl()
static fetchNewspaperInfo(date: string) {
let url = PageRepository.getNewspaperInfoUrl(date)
let headers: HashMap<string, string> = HttpUrlUtils.getCommonHeaders();
return WDHttp.get<ResponseDTO<NewspaperTimeInfoBean[]>>(url, headers)
};
... ...
... ... @@ -16,10 +16,10 @@ export class NewspaperViewModel {
return newspaperTimeInfo.data
}
static async getNewspaperTime(): Promise<NewspaperTimeInfoBean[]> {
static async getNewspaperTime(date: string): Promise<NewspaperTimeInfoBean[]> {
return new Promise<NewspaperTimeInfoBean[]>((success, error) => {
Logger.info(TAG, `getNavData start`);
PageRepository.fetchNewspaperInfo().then((resDTO: ResponseDTO<NewspaperTimeInfoBean[]>) => {
PageRepository.fetchNewspaperInfo(date).then((resDTO: ResponseDTO<NewspaperTimeInfoBean[]>) => {
if (!resDTO || !resDTO.data) {
Logger.error(TAG, 'getNewspaperTime then navResDTO is empty');
error('resDTO is empty');
... ... @@ -71,6 +71,4 @@ export class NewspaperViewModel {
}
return newspaperListBean.data
}
}
... ...
import { ENewspaperPageComponent } from 'wdComponent';
import { Logger } from 'wdKit'
import { Logger } from 'wdKit';
import common from '@ohos.app.ability.common';
import window from '@ohos.window';
const TAG = 'ENewspaper';
@Entry
@Component
struct ENewspaper {
// 获取UIAbility上下文
context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext
async setSystemBar(color: string) {
// 获取当前应用窗口
let windowClass: window.Window = await window.getLastWindow(this.context)
// 将状态栏和导航栏的背景色设置为跟应用窗口相同的颜色
await windowClass.setWindowSystemBarProperties({
navigationBarColor: color,
statusBarColor: color,
// navigationBarContentColor: "#00FF00",
// statusBarContentColor: "#00FF00"
})
}
build() {
Column() {
... ... @@ -13,7 +29,7 @@ struct ENewspaper {
}
}
pageTransition(){
pageTransition() {
// 定义页面进入时的效果，从底侧滑入
PageTransitionEnter({ type: RouteType.None, duration: 300 })
.slide(SlideEffect.Bottom)
... ... @@ -31,10 +47,12 @@ struct ENewspaper {
}
onPageShow() {
this.setSystemBar('#80000000')
Logger.info(TAG, 'onPageShow');
}
onPageHide() {
this.setSystemBar('#FFFFFFFF')
Logger.info(TAG, 'onPageHide');
}
... ...