鸿蒙账单记录

 介绍

随着科技的发展，手机记账逐渐成为人们的日常习惯，记账系统便携于人们的日常生活，本篇文章将介绍如何在Dev软件中基于鸿蒙系统实现账目记录功能，包括多种活动的数据录入，展示，累加等功能。

通过Dev软件实现鸿蒙项目账单记录，项目主页面如下

 实现的功能包括对衣食出行娱乐医疗等许多日常行动消费的记录

部分源代码如下

界面视图源码

export struct BalanceViewer {
  @Link selectedDate: Date;
  @Link currentBillingInfo: string;
  @Link totalIncome: number;
  @Link totalBalance: number;

  build() {
    Column() {
      Row() {
        Column() {
          Row() {
            Text(StringUtils.formatDate(this.selectedDate, 'Y')).fontSize(12).fontColor($r('app.color.text_white'))
            Text($r("app.string.year")).fontSize(12).fontColor($r('app.color.text_white'))
          }
        }.width('20%')

        Column() {
          Text($r("app.string.income"))
            .fontColor($r('app.color.text_white'))
            .fontSize(12)
            .textAlign(TextAlign.Start)
            .width('100%')
        }.width('40%').margin({ left: 10 })

        Column() {
          Text($r("app.string.balance"))
            .fontColor($r('app.color.text_white'))
            .fontSize(12)
            .textAlign(TextAlign.Start)
            .width('100%')
        }.width('40%')
      }
      .height(12)
      .width('100%')
      .backgroundColor($r('app.color.main_theme_blue'))

      Row() {
        Column() {
          Button({ type: ButtonType.Normal }) {
            Row() {
              Text(StringUtils.formatDate(this.selectedDate, 'M'))
                .fontSize(22)
                .fontColor(Color.White)
              Text($r("app.string.month"))
                .fontColor($r('app.color.text_white'))
                .fontSize(12)
                .align(Alignment.Bottom)
                .height(22)
                .margin(2)
              Image($r("app.media.ic_public_extract_list_light"))
                .width(8).height(8).margin({ top: 6, left: 8 })
            }
          }.onClick(() => {
            DatePickerDialog.show({
              start: new Date(`2000-01-01`),
              selected: this.selectedDate,
              onAccept: (v) => {
                this.selectedDate.setFullYear(v.year, v.month, v.day);
              }
            });
          })
          .backgroundColor($r('app.color.main_theme_blue'))
          .width('100%')
          .borderRadius(4)
        }
        .width('20%')
        .border({
          style: BorderStyle.Solid,
          color: { right: "gray" },
          width: { right: 1 }
        })
        Column() {
          Text(this.totalIncome.toFixed(2))
            .fontColor(Color.White)
            .fontSize(20)
            .textAlign(TextAlign.Start)
            .width('100%')
        }.width('40%')
        .margin({ left: 10 })

账单记录

@Component
export struct PageEntries {
  private selectedDate: Date = new Date();

  build() {
    Row() {
      Flex({ justifyContent: FlexAlign.SpaceAround }) {
        Button({ type: ButtonType.Normal }) {
          Column() {
            Row() {
              Image($r("app.media.ic_public_budget"))
                .width(32)
                .height(32)
            }

            Row() {
              Text("账单")
                .fontSize(10)
                .width('100%')
                .textAlign(TextAlign.Center)
            }.height(12).width(48)
          }.width(48)
        }.backgroundColor(Color.Transparent).borderRadius(8).onClick(() => {
          router.pushUrl({
            url: "pages/BillInfoPage",
            params: {
              date: this.selectedDate
            }
          });
        })

        Button({ type: ButtonType.Normal }) {
          Column() {
            Row() {
              Image($r("app.media.ic_public_opensource_info"))
                .width(32)
                .height(32)
            }

            Row() {
              Text("开源信息")
                .fontSize(10)
                .width('100%')
                .textAlign(TextAlign.Center)
            }.height(12).width(48)
          }.width(48).alignItems(HorizontalAlign.Center)
        }.backgroundColor(Color.Transparent).onClick(() => {
          router.pushUrl({
            url: 'pages/Copyright'
          }, router.RouterMode.Standard, err => {
            return;
          })
        }).borderRadius(8)

        Button({ type: ButtonType.Normal }) {
          Column() {
            Row() {
              Image($r("app.media.ic_public_billing_graphic"))
                .width(32)
                .height(32)
            }

            Row() {
              Text("经济图表")
                .fontSize(10)
                .width('100%')
                .textAlign(TextAlign.Center)
            }.height(12).width(48)
          }.width(48).alignItems(HorizontalAlign.Center)
        }.backgroundColor(Color.Transparent).borderRadius(8).onClick(() => {
          promptAction.showToast({ message: "待开发" })
        })

        Button({ type: ButtonType.Normal }) {
          Column() {
            Row() {
              Image($r("app.media.ic_public_add_billing"))
                .width(32)
                .height(32)
            }

            Row() {
              Text("记账")
                .fontSize(10)
                .width('100%')
                .textAlign(TextAlign.Center)
            }.height(12).width(48)
          }.width(48).alignItems(HorizontalAlign.Center)
        }.stateEffect(false).backgroundColor(Color.Transparent).onClick(() => {
          router.pushUrl({
            url: "pages/addBalance",
            params: {
              year: this.selectedDate.getFullYear(),
              month: this.selectedDate.getMonth() + 1
            }
          })
        }).borderRadius(8)
      }
      .height(64)
      .width('100%')
      .backgroundColor(Color.White)
      .borderRadius(8)
      .padding(8)
      .shadow({ radius: 24, color: $r('app.color.main_theme_shadow') })
    }.linearGradient({
      angle: 180,
      colors: [
        [$r('app.color.main_theme_blue'), 0],
        ["#ffffff", 1]
      ],
      repeating: false
    }).padding({ top: 16, left: 8, right: 8, bottom: 8 })
  }
}

添加账单消息部分源码

  activeDate: Date = new Date();
  context = getContext(this) as common.UIAbilityContext;
  filesDir = this.context.filesDir;
  balanceInputUnits: IKeyboardUnit[] =
    [
      {
        content: "7",
        callback: () => {
          if (this.balanceAmount == "0") {
            this.balanceAmount = "7";
          } else {
            this.balanceAmount += "7";
          }
        }
      },
      {
        content: "8",
        callback: () => {
          if (this.balanceAmount == "0") {
            this.balanceAmount = "8";
          } else {
            this.balanceAmount += "8";
          }
        }
      },
      {
        content: "9",
        callback: () => {
          if (this.balanceAmount == "0") {
            this.balanceAmount = "9";
          } else {
            this.balanceAmount += "9";
          }
        }
      },
      {
        content: "×",
        callback: () => {
          this.calculateAction = 3;
          this.balanceTempAmount = this.balanceAmount;
          this.balanceAmount = "0";
        }
      },
      {
        content: "4",
        callback: () => {
          if (this.balanceAmount == "0") {
            this.balanceAmount = "4";
          } else {
            this.balanceAmount += "4";
          }
        }
      },
      {
        content: "5",
        callback: () => {
          if (this.balanceAmount == "0") {
            this.balanceAmount = "5";
          } else {
            this.balanceAmount += "5";
          }
        }
      },
      {
        content: "6",
        callback: () => {
          if (this.balanceAmount == "0") {
            this.balanceAmount = "6";
          } else {
            this.balanceAmount += "6";
          }
        }
      },
      {
        content: "+",
        callback: () => {
          if (this.balanceAmount.endsWith("."))
            this.balanceAmount += "0";
          this.balanceTempAmount = this.balanceAmount;
          this.balanceAmount = "0";
          this.calculateAction = 1;
          this.doneButtonText = "=";
        }
      },
      {
        content: "1",
        callback: () => {
          if (this.balanceAmount == "0") {
            this.balanceAmount = "1";
          } else {
            this.balanceAmount += "1";
          }
        }
      },
      {
        content: "2",
        callback: () => {
          if (this.balanceAmount == "0") {
            this.balanceAmount = "2";
          } else {
            this.balanceAmount += "2";
          }
        }

项目运行后主页面如下

实现部分功能如下