《仿盒马》app开发技术分享-- 回收金查询页面（48）

技术栈

Appgallery connect

开发准备

上一节我们实现了查看当前账号下的预收益，以及当下收益，并且展示了已完成订单的列表，现在我们可以针对收益来做更多的内容了，在之前的开发中我们在个人中心页面实现了一个静态的金额展示，后续我们将会在这里展示当前账号的总金额，点击当前账号金额进入回收金查询页面，在这个页面我们将会对该账号的回收金进行一系列的操作

功能分析

要想实现回收金页面，首先我么要在首页进行一个入口进入的点击事件添加，然后我们需要有一个金额展示的页面，同时添加关闭金额展示的功能，后续我们要实现回收金的体现，所以提前添加一个提现状态的展示位置，在这个页面我们还需要添加若干入口，进入我们的付款码、提现、商品分类页选购商品

代码实现

这个页面我们因为模块比较多，并且关联性不强，我们使用自定义组件的形式实现 首先实现回收金的展示和隐藏，以及提现金额的展示，我们先创建页面

 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")
  }

实现之后我们在中间实现我们的三个入口模块，我们创建自定义组件，然后引入

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]]

  })
}

这样我们的入口模块就实现了，最后我们在这里加上收入支出的列表展示

@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 })