《仿盒马》app开发技术分享HarmonyOS 鸿蒙Next积分信息展示

《仿盒马》app开发技术分享HarmonyOS 鸿蒙Next积分信息展示

技术栈

Appgallery connect

开发准备

上一节我们实现了数据的插入，现在我们需要在tabs中展示我们积分的详细情况了，现在我们只需要从云端进行数据的查询，在页面中拿到数据进行展示就能实现我们想要的效果

功能分析

数据的展示我们通过用自定义组件的方式实现，这样我们的页面不会那么的臃肿，首先在进入页面后我们判断用户信息是否存在，如果用户信息存在，我们通过userid进行数据查询，拿到数据列表后，传递给自定义组件进行展示，在列表中全部选项我们要注意区分数据的两种状态

代码实现

首先在进入页面后进行云端数据查询

@State pointsList:PointsInfo[]=[]

async aboutToAppear(): Promise<void> {
    const value = await StorageUtils.getAll('user');
    if (value != "") {
        this.user = JSON.parse(value)
        if (this.user != null) {
            let databaseZone = cloudDatabase.zone('default');
            let condition = new cloudDatabase.DatabaseQuery(user_info);
            condition.equalTo("user_id", this.user?.user_id)
            let listData = await databaseZone.query(condition);
            let json = JSON.stringify(listData)
            let data: UserInfo[] = JSON.parse(json)
            this.userInfo = data[0]
            this.points=data[0].points
            hilog.error(0x0000, 'testTag', `Failed to query data, code: ${data}`);

            let condition1 = new cloudDatabase.DatabaseQuery(points_info);
            condition.equalTo("user_id", this.user?.user_id)
            let listData1 = await databaseZone.query(condition1);
            let json1 = JSON.stringify(listData1)
            let data1: PointsInfo[] = JSON.parse(json1)
            this.pointsList=data1
            hilog.error(0x0000, 'testTag', `Failed to query data, code: ${data1}`);
        }
    }
}

拿到数据之后我们创建列表展示的自定义组件，并且在组件内排列好布局以及展示的数据

import { PointsInfo } from '../../../entity/PointsInfo'

@Component
export struct AllPoints {
    @Prop pointsList:PointsInfo[]=[]
    @Builder
    recordList(){
        List({ space: 10 }) {
            ForEach(this.pointsList, (item:PointsInfo) => {
                ListItem() {
                    this.allItem(item)
                }
            })
        }
        .backgroundColor("#f7f7f7").padding({ top: 10 })
        .sticky(StickyStyle.Header)
    }

    @Builder
    allItem(item:PointsInfo){
        Row({space:10}){
            Image(item.points_type=='0'?$r('app.media.shouru'):$r('app.media.tixian'))
                .height(35)
                .width(35)
                .objectFit(ImageFit.Contain)
                .interpolation(ImageInterpolation.High)
                .borderRadius(25)
            Column({space:10}){
                Text(item.points_type=='0'?"获得":"兑换")
                    .fontColor("#333333")
                    .fontSize(16)
                Text(item.address)
                    .fontColor("#999999")
                    .fontSize(14)
            }
            .alignItems(HorizontalAlign.Start)
            Blank()
            Column({space:10}){
                Text(item.points_type=='0'?"$"+item.points:"-$"+item.points)
                    .fontColor(item.points_type=='0'?"#00B644":"#EC2400")
                    .fontSize(16)
                    .margin({top:1})
                Text(item.create_time)
                    .fontColor("#999999")
                    .fontSize(14)
                    .margin({top:1})
            }
            .alignItems(HorizontalAlign.End)
        }
        .justifyContent(FlexAlign.SpaceBetween)
        .padding({left:12,right:12})
        .width('100%')
        .alignItems(VerticalAlign.Center)
        .height(71)
        .backgroundColor(Color.White)
    }

    build() {
        Column() {
            this.recordList()
        }
        .height('100%')
        .layoutWeight(1)
        .width('100%')
    }
}

在页面引入自定义组件

AllPoints({pointsList:this.pointsList})

现在我们就实现了积分信息的展示