鸿蒙账单记录_鸿蒙dececo studio制作消费账单

 介绍

随着科技的发展，手机记账逐渐成为人们的日常习惯，记账系统便携于人们的日常生活，本篇文章将介绍如何在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 })

账单记录

@Componentexport 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\"; } }

项目运行后主页面如下

实现部分功能如下