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.

1. 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");
}

1. 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]]
});
}

1. 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.