《仿盒马》app开发技术分享-- 积分信息展示（66）

## 技术栈

Appgallery connect

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

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

## 代码实现
首先在进入页面后进行云端数据查询

```css

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

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

```css
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%')

  }
}
```
在页面引入自定义组件

```css
 AllPoints({pointsList:this.pointsList})
```
现在我们就实现了积分信息的展示