HarmonyOS 鸿蒙Next《仿盒马》app开发技术分享之回收金查询页面

HarmonyOS 鸿蒙Next《仿盒马》app开发技术分享之回收金查询页面

技术栈

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%')
    }
}

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

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