## 技术栈
Appgallery connect
## 开发准备
上一节我们实现了查看当前账号下的预收益，以及当下收益，并且展示了已完成订单的列表，现在我们可以针对收益来做更多的内容了，在之前的开发中我们在个人中心页面实现了一个静态的金额展示，后续我们将会在这里展示当前账号的总金额，点击当前账号金额进入回收金查询页面，在这个页面我们将会对该账号的回收金进行一系列的操作
## 功能分析
要想实现回收金页面，首先我么要在首页进行一个入口进入的点击事件添加，然后我们需要有一个金额展示的页面，同时添加关闭金额展示的功能，后续我们要实现回收金的体现，所以提前添加一个提现状态的展示位置，在这个页面我们还需要添加若干入口，进入我们的付款码、提现、商品分类页选购商品
## 代码实现
这个页面我们因为模块比较多，并且关联性不强，我们使用自定义组件的形式实现
首先实现回收金的展示和隐藏，以及提现金额的展示，我们先创建页面
```css
build() {
Column() {
CommonTopBar({ title: "我的回收金", 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?"可用****":"可用"+this.availableAmount)
.margin({right:9})
.fontColor(Color.Black)
.fontSize(15)
Text(this.isClose?"提现中****":"提现中"+this.useAmount)
.fontColor(Color.Black)
.fontSize(15)
}
.padding(5)
}
}
}
.height(190)
.width('100%')
}
.backgroundColor("#f7f7f7")
}
```
实现之后我们在中间实现我们的三个入口模块，我们创建自定义组件，然后引入
```css
import router from '@ohos.router'
@Component
export struct CenterImageButton {
iconList:ESObject[]=[{
icon:$r('app.media.fukuanma'),
name:"付款码"
},{
icon:$r('app.media.qutixian'),
name:"去提现"
},{
icon:$r('app.media.qugouwu'),
name:"去购物"
}]
@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 "付款码":
router.pushUrl({url:''})
break;
case "去提现":
router.pushUrl({url:''})
break;
case "使用回收金":
router.pushUrl({url:''})
break;
default:
break;
}
})
}
build() {
Row() {
this.IconBar()
}
.padding({left:12,right:12})
.margin({top:14})
.width(
'100%'
)
}
}
//样式
@Extend(Row) function IconBarBg(){
.linearGradient({
angle: 180,
colors: [[0xff0000, 0], [0xff6666, 0.5], [0xffffff, 1]]
})
}
```
这样我们的入口模块就实现了，最后我们在这里加上收入支出的列表展示
```css
@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=='全部') {
}
if (item=='收入') {
}
if (item=='支出') {
}
}
}
.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 })
```
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/70046889/viewspace-3089295/ ，如需转载，请注明出处，否则将追究法律责任。
