技术栈

Appgallery connect

开发准备

上一节我们实现了数据的插入，现在我们需要在tabs中展示我们积分的详细情况了，现在我们只需要从云端进行数据的查询，在页面中拿到数据进行展示就能实现我们想要的效果，现在我们就开始实现我们想要的内容，这里我们需要用到的内容有tabs，tabcontent，数据监听等

功能分析

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

代码实现

进入页面之后我们需要在生命周期aboutToAppear方法中进行数据查询，
接下来我们创建一个数组对象，查询出数据之后我们把查询出来的数据赋给数组这样我们就可以在其他组件中对数据进行操作了

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


        }
      }
  }

拿到数据之后我们创建列表展示的自定义组件，并且在组件内排列好布局以及展示的数据，这里的自定义组建我们只需要用@Component就不需要使用@entey了，创建好自定义组件之后我们调用数据源在list中进行循环展示即可

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

我们把组件抽离出来，在组件内进行业务逻辑的处理，因为我们要根据type的状态展示不同的image图片，根据points_type来判断文本是否是获得和兑换，然后拿到接口中获取的地址，根据type来切换字符的颜色，我们的item就实现了

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

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