feat：1）新增电子报-自定义日历日期选择组件；

@@ -5,15 +5,25 @@ import { Logger } from 'wdKit';
 import { ENewspaperItemComponent } from './ENewspaperItemComponent';
 import { ENewspaperItemComponent } from './ENewspaperItemComponent';
 import { ENewspaperListDialog } from '../dialog/ENewspaperListDialog';
 import { ENewspaperListDialog } from '../dialog/ENewspaperListDialog';
 import display from '@ohos.display';
 import display from '@ohos.display';
+import { ENewspaperCalendarDialog } from '../dialog/ENewspaperCalendarDialog';
+import font from '@ohos.font';
 
 
 @Component
 @Component
 export struct ENewspaperPageComponent {
 export struct ENewspaperPageComponent {
   @State newspaperListBean: NewspaperListBean = {} as NewspaperListBean
   @State newspaperListBean: NewspaperListBean = {} as NewspaperListBean
   @State currentPageNum: string = '01'
   @State currentPageNum: string = '01'
   @State pageNumPopup: boolean = false
   @State pageNumPopup: boolean = false
-  @State date: string = '2024-01-26'
+  @State calendarPopup: boolean = false
+  @State calendarDateTitle: string = ''
   @State picHeight: number = 0
   @State picHeight: number = 0
   private swiperController: SwiperController = new SwiperController()
   private swiperController: SwiperController = new SwiperController()
+  calendarDialogController: CustomDialogController = new CustomDialogController({
+    builder: ENewspaperCalendarDialog(),
+    alignment: DialogAlignment.Top,
+    offset: { dx: 0, dy: 80 },
+    customStyle: true,
+    // cornerRadius: 4
+  })
   listDialogController: CustomDialogController = new CustomDialogController({
   listDialogController: CustomDialogController = new CustomDialogController({
     builder: ENewspaperListDialog({ newspaperListBean: this.newspaperListBean,
     builder: ENewspaperListDialog({ newspaperListBean: this.newspaperListBean,
       currentPageNum: this.currentPageNum,
       currentPageNum: this.currentPageNum,
@@ -64,9 +74,10 @@ export struct ENewspaperPageComponent {
           })
           })
 
 
         Row() {
         Row() {
-          Text(this.date)
+          Text(this.calendarDateTitle)
             .fontSize($r('app.float.font_size_20'))
             .fontSize($r('app.float.font_size_20'))
             .fontColor($r('app.color.white'))
             .fontColor($r('app.color.white'))
+            .fontFamily('BebasNeue_Regular')
 
 
           Image($r('app.media.icon_triangle'))
           Image($r('app.media.icon_triangle'))
             .width($r('app.float.border_radius_6'))
             .width($r('app.float.border_radius_6'))
@@ -77,6 +88,14 @@ export struct ENewspaperPageComponent {
         .alignRules({ middle: { anchor: "__container__", align: HorizontalAlign.Center },
         .alignRules({ middle: { anchor: "__container__", align: HorizontalAlign.Center },
           center: { anchor: "__container__", align: VerticalAlign.Center } })
           center: { anchor: "__container__", align: VerticalAlign.Center } })
         .id('e_newspaper_date')
         .id('e_newspaper_date')
+        .onClick(() => {
+          this.calendarPopup = !this.calendarPopup
+          if (this.calendarPopup) {
+            this.calendarDialogController.open()
+          } else {
+            this.calendarDialogController.close()
+          }
+        })
 
 
         Image($r('app.media.icon_share'))
         Image($r('app.media.icon_share'))
           .height($r('app.float.top_arrow_size'))
           .height($r('app.float.top_arrow_size'))
@@ -193,25 +212,25 @@ export struct ENewspaperPageComponent {
   }
   }
 
 
   async aboutToAppear() {
   async aboutToAppear() {
+    //注册字体
+    font.registerFont({
+      familyName: 'BebasNeue_Regular',
+      // familySrc: '/font/roboto_medium_numbers.ttf' // font文件夹与pages目录同级
+      familySrc: $rawfile('font/BebasNeue_Regular.otf')
+    })
     let newspaperTimes = await NewspaperViewModel.getNewspaperTime()
     let newspaperTimes = await NewspaperViewModel.getNewspaperTime()
     if (newspaperTimes && newspaperTimes.length > 0) {
     if (newspaperTimes && newspaperTimes.length > 0) {
-      this.date = newspaperTimes[0].date
+      this.calendarDateTitle = newspaperTimes[0].date
     }
     }
     try {
     try {
       let displayTool = display.getDefaultDisplaySync()
       let displayTool = display.getDefaultDisplaySync()
       let screenWidth = displayTool.width
       let screenWidth = displayTool.width
       let picWidth = screenWidth - vp2px(52)
       let picWidth = screenWidth - vp2px(52)
       this.picHeight = picWidth * 566 / 378
       this.picHeight = picWidth * 566 / 378
-      let listBean = await NewspaperViewModel.getNewspaperList(this.date, picWidth + 'x' + this.picHeight)
+      let listBean = await NewspaperViewModel.getNewspaperList(this.calendarDateTitle, picWidth + 'x' + this.picHeight)
       this.newspaperListBean = listBean;
       this.newspaperListBean = listBean;
     } catch (exception) {
     } catch (exception) {
 
 
     }
     }
-
-
-  }
-
-  aboutToDisappear() {
-
   }
   }
 }
 }

+import { RMCalendarBean } from './RMCalendarBean'
+import { RMCalenderCell } from './RMCalendarCell'
+
+const TAG = "RMCalendar"
+
+@Component
+export struct RMCalendar {
+  @State selectItem: RMCalendarBean = new RMCalendarBean()
+  private today: Date = new Date() // 当天
+  // 开始日期
+  startDate: Date = new Date()
+  // 截止日期
+  endDate: Date = new Date()
+  //当前日期-当前显示的月份的第一天
+  private startDay: Date = new Date(
+    this.today.getFullYear(),
+    this.today.getMonth(),
+    1
+  )
+  // 是否有上一个月
+  @State private hasPre: boolean = true
+  // 是否有下一个月
+  @State private hasNext: boolean = true
+  // 标题栏高度
+  titleHeight: Length = '50vp'
+  // 星期标题
+  weeks: string[] = ["日", "一", "二", "三", "四", "五", "六",]
+  // 星期标题字体大小
+  weekTitleFontSize: number | string | Resource = 12
+  // 星期标题字体颜色
+  weekTitleFontColor: ResourceColor = "#999999"
+  // 星期标栏高度
+  weekTitleHeight: Length = 30
+  weekFontWeight: FontWeight = FontWeight.Bold
+  // 标题字体大小
+  titleFontSize: number | string | Resource = 16
+  // 标题字体颜色
+  titleFontColor: ResourceColor = "#333333"
+  titleFontWeight: FontWeight = FontWeight.Bold
+  // 日期每一项字体大小
+  itemFontSize: number | string | Resource = 14
+  itemFontColor: ResourceColor = "#333333"
+  itemFontWeight: FontWeight = FontWeight.Bold
+  // 今日字体颜色
+  todayFontColor: ResourceColor = "#ED2800"
+  // 不能使用的日期字体颜色
+  disabledFontColor: ResourceColor = "#CCCCCC"
+  // 选中日期字体颜色
+  selectFontColor: ResourceColor = "#FFFFFF"
+  // 选中日期背景颜色, 默认与todayFontColor一致
+  selectItemBgColor: ResourceColor = "#ED2800"
+  @State private title: string = ''
+  // 计算的总加载
+  @State dates: Array<RMCalendarBean> = new Array()
+  // 已选日期
+  @State selectedDates: Array<RMCalendarBean> = new Array()
+  // 自定义每一项布局
+  public cellLayout?: (item: RMCalendarBean) => void
+  // 仅自定义 今日 样式，当使用cellLayout时，tadayLayout无效
+  todayLayout?: (item: RMCalendarBean) => void
+  // 计算item时，如需添加更多自定义属性时使用
+  reBuildDateItem?: (item: RMCalendarBean) => RMCalendarBean
+  // 选择变化监听，
+  onDateChange?: (date1: RMCalendarBean) => void
+  onMonthChange?: (after: Date, befor: Date) => void
+  // 不可选中项的点击事件
+  disableCellClick?: (item: RMCalendarBean) => void
+
+  @Builder
+  createWeekTitle(item: string) {
+    Text(item)
+      .textAlign(TextAlign.Center)
+      .fontColor(this.weekTitleFontColor)
+      .fontSize(this.weekTitleFontSize)
+      .fontWeight(this.weekFontWeight)
+      .layoutWeight(1)
+  }
+
+  @Builder
+  createCell() {
+    ForEach(this.dates, (item: RMCalendarBean) => {
+      RMCalenderCell({
+        item: item,
+        cellLayout: this.cellLayout,
+        itemFontSize: this.itemFontSize,
+        itemFontColor: this.itemFontColor,
+        today: this.today.getTime(),
+        itemFontWeight: this.itemFontWeight,
+        todayFontColor: this.todayFontColor,
+        todayLayout: this.todayLayout,
+        selectItem: $selectItem,
+        selectFontColor: this.selectFontColor,
+        selectItemBgColor: this.selectItemBgColor,
+        selectedDates: $selectedDates,
+        disabledFontColor: this.disabledFontColor,
+        hasPre: this.hasPre,
+        hasNext: this.hasNext,
+        disableClick: (item: RMCalendarBean) => {
+          if (this.disableCellClick) {
+            this.disableCellClick(item)
+          }
+        },
+        cellClick: (item: RMCalendarBean) => {
+          if (item.isPre) {
+            this.preMonth()
+          } else if (item.isNext) {
+            this.nextMonth()
+          }
+          if (this.onDateChange) {
+            this.onDateChange(item)
+            if (item.fullYear && item.month) {
+              this.title = `${item.fullYear}年${item.month + 1}月`
+            }
+          }
+        }
+      })
+        .width(`14.28%`)
+    }, (item: RMCalendarBean) => JSON.stringify(item))
+  }
+
+  /**
+   * 属性初始化
+   */
+  initAttr() {
+    if (!this.selectItemBgColor) {
+      this.selectItemBgColor = this.todayFontColor
+    }
+    this.today = new Date(
+      this.today.getFullYear(),
+      this.today.getMonth(),
+      this.today.getDate(),
+    )
+
+    // 开始日期
+    if (!this.startDate) {
+      this.startDate = new Date(1970, 0, 1)
+    }
+    // 截止日期
+    if (!this.endDate) {
+      this.endDate = new Date(this.today.getFullYear() + 10, 11, 31)
+    }
+
+    if (this.today.getTime() < this.startDate.getTime()) {
+      this.startDay.setTime(this.startDate.getTime())
+    } else if (this.today.getTime() > this.endDate.getTime()) {
+      this.startDay.setTime(this.endDate.getTime())
+    } else {
+      this.startDay.setTime(this.today.getTime())
+    }
+  }
+
+  aboutToAppear() {
+    this.initAttr()
+    let temp = new RMCalendarBean()
+    temp.time = this.today.getTime()
+    this.selectItem = temp
+    this.calcDatas()
+  }
+
+  /**
+   * 下一个月
+   */
+  private nextMonth() {
+    // this.dates.slice(0, this.dates.length)
+    this.dates = []
+    const beforDate = new Date(this.startDay.getFullYear(), this.startDay.getMonth())
+    this.startDay.setMonth(this.startDay.getMonth() + 1)
+    if (this.onMonthChange) {
+      this.onMonthChange(new Date(this.startDay.getFullYear(), this.startDay.getMonth()), beforDate)
+    }
+    this.calcDatas()
+  }
+
+  /**
+   * 上一个月
+   */
+  private preMonth() {
+    // this.dates.slice(0, this.dates.length)
+    this.dates = []
+    const beforDate = new Date(this.startDay.getFullYear(), this.startDay.getMonth())
+    this.startDay.setMonth(this.startDay.getMonth() - 1)
+    if (this.onMonthChange) {
+      this.onMonthChange(new Date(this.startDay.getFullYear(), this.startDay.getMonth()), beforDate)
+    }
+    this.calcDatas()
+  }
+
+  /**
+   * 具体计算
+   */
+  private calcDatas() {
+    const startDay = this.startDay
+    this.title = `${startDay.getFullYear()}年${startDay.getMonth() + 1}月`
+    startDay.setDate(1)
+
+    if (startDay.getFullYear() < this.startDate.getFullYear()
+      || (startDay.getFullYear() == this.startDate.getFullYear() && startDay.getMonth() <= this.startDate.getMonth())) {
+      this.hasPre = false
+    } else {
+      this.hasPre = true
+    }
+
+    if (startDay.getFullYear() > this.endDate.getFullYear()
+      || (startDay.getFullYear() == this.endDate.getFullYear() && startDay.getMonth() >= this.endDate.getMonth())) {
+      this.hasNext = false
+    } else {
+      this.hasNext = true
+    }
+
+    // 计算第一个月
+    // 获取第一个月总天数
+    let endDay: Date = new Date(
+      startDay.getFullYear(),
+      startDay.getMonth() + 1,
+      0, 23, 59, 59)
+
+    let tempDate: Date = new Date(
+      startDay.getFullYear(),
+      startDay.getMonth(),
+      startDay.getDate()
+    )
+
+    const count = endDay.getDate()
+    const preCount = startDay.getDay()
+    // const nextCount = 6 - endDay.getDay()
+    const nextCount = 0
+    const finilCount = count + preCount + nextCount
+
+    // 补齐上一个月
+    tempDate.setDate(tempDate.getDate() - preCount)
+
+    // 添加日期
+    for (let index = 0; index < finilCount; index++) {
+      let item = new RMCalendarBean(
+        tempDate.getFullYear(),
+        tempDate.getMonth(),
+        tempDate.getDate(),
+        tempDate.getDay(),
+        tempDate.getTime(),
+        // @ ts-ignore
+        // LunarCalendar.convertSolarToLunar(tempDate),
+        (index < preCount ? true : false) || this.startDate.getTime() > tempDate.getTime(),
+        (index >= preCount + count ? true : false) || this.endDate.getTime() < tempDate.getTime(),
+      )
+      if (this.reBuildDateItem) {
+        this.reBuildDateItem(item)
+      }
+      this.dates.push(item)
+      tempDate.setDate(tempDate.getDate() + 1)
+    }
+  }
+
+  build() {
+    Column() {
+      Image($r("app.media.iv_e_news_pager_calendar_arrow_up"))
+        .width(18).height(8.5)
+      Column() {
+        Row() {
+          Column() {
+            Image(this.hasPre ? $r("app.media.iv_e_news_pager_calendar_arrow_pre")
+              : $r("app.media.iv_e_news_pager_calendar_arrow_pre_gray"))
+              .width(22)
+              .aspectRatio(1)
+          }
+          .justifyContent(FlexAlign.Center)
+          .height("100%")
+          .aspectRatio(1)
+          .onClick(() => {
+            if (this.hasPre) {
+              this.preMonth()
+            }
+          })
+
+          Blank()
+          Row() {
+            Text(this.title)
+              .fontSize(this.titleFontSize)
+              .fontColor(this.titleFontColor)
+              .fontWeight(this.titleFontWeight)
+          }
+
+          Blank()
+          Column() {
+            Image(this.hasNext ? $r("app.media.iv_e_news_pager_calendar_arrow_next")
+              : $r("app.media.iv_e_news_pager_calendar_arrow_next_gray"))
+              .width(22)
+              .aspectRatio(1)
+          }
+          .justifyContent(FlexAlign.Center)
+          .height("100%")
+          .aspectRatio(1)
+          .onClick(() => {
+            if (this.hasNext) {
+              this.nextMonth()
+            }
+          })
+        }
+        .alignItems(VerticalAlign.Center)
+        .width("100%")
+        .height(this.titleHeight)
+
+        // 星期title
+        Row() {
+          ForEach(this.weeks, (item: string) => {
+            this.createWeekTitle(item)
+          }, (item: string) => {
+            return item
+          })
+        }
+        .alignItems(VerticalAlign.Center)
+        .height(this.weekTitleHeight)
+
+        Flex({ wrap: FlexWrap.Wrap }) {
+          this.createCell()
+        }
+        .width("100%")
+      }
+      .backgroundColor(Color.White)
+      .margin({
+        left: 35,
+        right: 35
+      })
+      .border({ radius: 4 })
+    }
+  }
+}

+@Observed
+export class RMCalendarBean {
+  fullYear?: number
+  month?: number
+  date?: number
+  week?: number
+  time?: number
+  isPre?: boolean // 是否是上一个月的 / 在startDate 之前
+  isNext?: boolean // 是否是下一个月的 / 在endDate 之后
+
+  constructor(fullYear?: number, month?: number,
+              date?: number, day?: number,
+              time?: number,
+              isPre?: boolean,
+              isNext?: boolean) {
+    this.fullYear = fullYear
+    this.month = month
+    this.date = date
+    this.week = day
+    this.time = time
+    this.isPre = isPre
+    this.isNext = isNext
+  }
+}

+import { RMCalendarBean } from './RMCalendarBean';
+import font from '@ohos.font';
+
+@Component
+export struct RMCalenderCell {
+  private selectOpacity: number = 0.15
+  itemFontSize: Length = 0
+  itemFontColor: ResourceColor = {} as ResourceColor
+  itemFontWeight: FontWeight = FontWeight.Normal
+  todayFontColor: ResourceColor = {} as ResourceColor
+  selectFontColor: ResourceColor = {} as ResourceColor
+  selectItemBgColor: ResourceColor = {} as ResourceColor
+  disabledFontColor: ResourceColor = {} as ResourceColor
+  // 今日时间戳
+  today: number = 0
+  @Link selectItem: RMCalendarBean
+  @Link selectedDates: Array<RMCalendarBean>
+  @Prop hasPre: boolean
+  @Prop hasNext: boolean
+  @ObjectLink item: RMCalendarBean
+  // 自定义每一项布局
+  cellLayout?: (item: RMCalendarBean) => void
+  todayLayout?: (item: RMCalendarBean) => void
+  cellClick?: (item: RMCalendarBean) => void
+  disableClick?: (item: RMCalendarBean) => void
+
+  /**
+   * 检测是否包含在数组中
+   */
+  checkInArrays() {
+    for (let index = 0; index < this.selectedDates.length; index++) {
+      if (this.item.time == this.selectedDates[index].time) {
+        return index
+      }
+    }
+    return -1
+  }
+
+  getItemColor() {
+    if (this.item.isPre) {
+      return this.disabledFontColor
+    } else if (this.item.isNext) {
+      return this.disabledFontColor
+    } else if (this.selectItem && this.selectItem.time == this.item.time) {
+      return this.selectFontColor
+    } else if (this.item.time == this.today) {
+      return this.todayFontColor
+    }
+    return this.itemFontColor
+  }
+
+  getBorder() {
+    if (this.selectItem && this.selectItem.time == this.item.time) {
+      return this.border({
+        width: 1,
+        color: this.getItemColor()
+      })
+    } else {
+      return this.border({
+        width: 0,
+      }
+      )
+    }
+  }
+
+  /**
+   * 获取选中项背景颜色
+   */
+  getSelectItemBg() {
+    return this.selectItemBgColor
+  }
+
+  /**
+   * 获取选中项背景透明度
+   * @returns
+   */
+  getSelectItemBgOpa() {
+    return this.item.isPre || this.item.isNext ? this.selectOpacity : 1
+  }
+
+  /**
+   * 是否需要显示选项背景
+   */
+  isShowSelectBg() {
+    return this.selectItem && this.selectItem.time == this.item.time
+  }
+
+  build() {
+    Column() {
+      Stack() {
+        if (!this.item.isPre) {
+          if (this.isShowSelectBg()) {
+            Column()// .position({ x: "10%", y: "10%" })
+              .height("80%")
+              .aspectRatio(1)// .borderRadius(999)
+              .backgroundColor(this.getSelectItemBg())
+              .opacity(this.getSelectItemBgOpa())
+              .transition({ type: TransitionType.Insert, opacity: 1 })
+              .transition({ type: TransitionType.Delete, opacity: 0 })
+          }
+          Text(this.item.date + '')
+            .fontSize(this.itemFontSize)
+            .fontColor(this.getItemColor())
+            .fontWeight(this.itemFontWeight)
+            .fontFamily('BebasNeue_Regular')
+        }
+      }
+      // .justifyContent(FlexAlign.Center)
+      .aspectRatio(1)
+      // .border(this.getBorder())
+      .width("80%")
+    }
+    .justifyContent(FlexAlign.Center)
+    // .width("100%")
+    // .aspectRatio(1)
+    .onClick(() => {
+      // animateTo({ duration: 200 }, () => {
+      //
+      // })
+
+      if (this.item.isNext) {
+        if (!this.hasNext) {
+          if (this.disableClick) {
+            this.disableClick(this.item)
+          }
+          return
+        }
+      }
+      if (this.item.isPre) {
+        // if (!this.hasPre) {
+        if (this.disableClick) {
+          this.disableClick(this.item)
+        }
+        return
+        // }
+      }
+      this.selectItem = this.item
+      if (this.cellClick) {
+        this.cellClick(this.item)
+      }
+    })
+  }
+}

+import { RMCalendar } from '../components/calendar/RMCalendar'
+import { RMCalendarBean } from '../components/calendar/RMCalendarBean'
+
+@CustomDialog
+export struct ENewspaperCalendarDialog {
+  calendarDialogController?: CustomDialogController
+
+  build() {
+    RMCalendar({
+      // 开始日期
+      startDate: new Date(2023, 8, 1),
+      // 截止日期
+      endDate: new Date(2024, 2, 20),
+      // 日期选择变化监听
+      onDateChange: (date1: RMCalendarBean) => {
+        console.log("onDateChange", "date1：", JSON.stringify(date1))
+        if (this.calendarDialogController) {
+          this.calendarDialogController.close()
+        }
+      }
+    })
+  }
+}