Imitation Box Horse - Recycling Gold Query Page (48)
Technical Stack
Appgallery connect
Development Preparation In the previous section, we implemented the viewing of pending earnings and current earnings for the current account, and displayed the list of completed orders. Now we can do more with the earnings. In the earlier development, we implemented a static amount display on the personal center page. In the follow-up, we will display the total amount of the current account here. Clicking on the current account amount will take users to the recycling fund query page, where we will perform a series of operations on the recycling funds of this account.
Function Analysis To implement the recycling fund page:
Add a click event entry on the home page. Create an amount display page with a function to close the amount display. Prepare a display position for withdrawal status in advance as we will implement fund withdrawal functionality later. Add several entry points on this page to navigate to payment codes, withdrawal, and product category shopping pages.
Code Implementation Due to the multiple and loosely related modules on this page, we implement it using custom components.
- Implement display and hiding of recycling funds, and display of withdrawal amounts
build() { Column() { CommonTopBar({ title: "My Recycling Funds", alpha: 0, titleAlignment: TextAlign.Center, backButton: true }); Stack() { Column() { Column() { Row() { Text(this.isClose ? "¥****" : "¥" + this.amount.toString()) .fontSize(30) .fontColor("#333333") .fontWeight(FontWeight.Bold); Image(this.isClose ? $r('app.media.ic_psd_hide') : $r('app.media.ic_psd_show')) .width(28) .height(28) .objectFit(ImageFit.Contain) .interpolation(ImageInterpolation.High) .margin({ left: 12 }) .onClick(() => { if (this.isClose == false) { this.isClose = true; } else { this.isClose = false; } }); }
Row() { Text(this.isClose ? "Available: ****" : "Available: " + this.availableAmount) .margin({ right: 9 }) .fontColor(Color.Black) .fontSize(15);
Text(this.isClose ? "Withdrawing: ****" : "Withdrawing: " + this.useAmount) .fontColor(Color.Black) .fontSize(15); } .padding(5); } } } .height(190) .width('100%'); } .backgroundColor("#f7f7f7"); } 2. Implement three entry modules using custom components
import router from '@ohos.router';
@Component export struct CenterImageButton { iconList: ESObject[] = [{ icon: $r('app.media.fukuanma'), name: "Payment Code" }, { icon: $r('app.media.qutixian'), name: "Withdraw" }, { icon: $r('app.media.qugouwu'), name: "Go Shopping" }];
@Builder IconBar() { Row() { ForEach(this.iconList, (item: ESObject, index) => { this.IconButton(item, index); }) } .IconBarBg() .height(80) .borderRadius(10) .width('100%') .padding({ left: 50, right: 50 }) .justifyContent(FlexAlign.SpaceBetween); }
@Builder IconButton(item: ESObject, index: number) { Column() { Image(item.icon) .height(20) .width(20) .objectFit(ImageFit.Contain) .interpolation(ImageInterpolation.High); Text(item.name) .margin({ top: 6 }) .fontColor("#000000") .fontSize(14); } .onClick(() => { switch (item.name) { case "Payment Code": router.pushUrl({ url: '' }); break; case "Withdraw": router.pushUrl({ url: '' }); break; case "Use Recycling Funds": router.pushUrl({ url: '' }); break; default: break; } }); }
build() { Row() { this.IconBar(); } .padding({ left: 12, right: 12 }) .margin({ top: 14 }) .width('100%'); } }
// Style extension @Extend(Row) function IconBarBg() { .linearGradient({ angle: 180, colors: [[0xff0000, 0], [0xff6666, 0.5], [0xffffff, 1]] }); } 3. Add income and expenditure list display with tab navigation
@Builder TabBuilder(index: number, name: string) { Column() { Text(name) .fontColor(this.currentIndex === index ? this.fontColor : this.fontColor) .fontSize(this.currentIndex === index ? 16 : 15) .fontWeight(this.currentIndex === index ? FontWeight.Bold : FontWeight.Normal) .lineHeight(22); Divider() .strokeWidth(3) .width(30) .color(0xff0000) .opacity(this.currentIndex === index ? 1 : 0) .margin({ top: 2 }); } .height(50) .width('100%') .justifyContent(FlexAlign.Center); }
Tabs({ barPosition: BarPosition.Start, controller: this.controller }) { ForEach(this.arr, (item: string, index) => { TabContent() { Column() { if (item == 'All') { // All transactions content } if (item == 'Income') { // Income content } if (item == 'Expenditure') { // Expenditure content } } } .tabBar(this.TabBuilder(index, item)) .borderRadius(10) .backgroundColor(Color.White); }) } .vertical(false) .barMode(BarMode.Fixed) .barWidth('100%') .barHeight(50) .backgroundColor(Color.White) .animationDuration(300) .onChange((index: number) => { this.currentIndex = index; }) .width('100%') .height('100%') .layoutWeight(1) .margin({ top: 10 });
Execute the code to view the current page display effect.