## 技术栈

Appgallery connect

## 开发准备

上一节我们实现了回收金提现的功能，并且成功展示了当前账户的支出列表，但是我们的提现相关的记录并没有很好的给用户做出展示，用户只知道当前账户提现扣款，并不知道回收金的去向，这一节我们就要实现回收金记录的查询添加、查询、展示

## 功能分析

要实现这些功能我们需要新建一张表，根据当前用户绑定的信息去填充对应的信息，把提现的银行卡，提现状态，提现时间，提现金额都先添加到表里，在用户进入提现记录页面之后，通过userid去查询当前用户的记录然后在列表里进行展示

## 代码实现

首先我们创建对应的提现记录表

```css

{

  "objectTypeName": "withdrawal_record",

  "fields": [

    {"fieldName": "id", "fieldType": "Integer", "notNull": true, "belongPrimaryKey": true},

    {"fieldName": "user_id", "fieldType": "Integer", "notNull": true, "defaultValue": 0},

    {"fieldName": "bank_name", "fieldType": "String"},

    {"fieldName": "bank_num", "fieldType": "String"},

    {"fieldName": "creat_time", "fieldType": "String"},

    {"fieldName": "type_str", "fieldType": "String"},

    {"fieldName": "money", "fieldType": "Double"}

  ],

  "indexes": [

    {"indexName": "field1Index", "indexList": [{"fieldName":"id","sortType":"ASC"}]}

  ],

  "permissions": [

    {"role": "World", "rights": ["Read", "Upsert", "Delete"]},

    {"role": "Authenticated", "rights": ["Read", "Upsert", "Delete"]},

    {"role": "Creator", "rights": ["Read", "Upsert", "Delete"]},

    {"role": "Administrator", "rights": ["Read", "Upsert", "Delete"]}

  ]

}

```

我们生成对应的实体和db类之后，在提现成功的提交记录里，把我们表需要的信息添加进去

```css

 let record=new withdrawal_record()

          record.id=Math.floor(Math.random() * 1000000)

          record.user_id=this.user!.user_id

          record.bank_name=this.bankList[0].bank_name

          record.bank_num=this.bankList[0].bank_card

          record.creat_time=this.year+"-"+this.month+"-"+this.day+" "+this.time

          record.type_str='0'

          record.money=this.moneyNum

          let status =  await databaseZone.upsert(record);

```

添加完成之后我们新建一个提现记录展示页面

```css

@Entry

@Component

struct WithdrawalRecordPage {

  @State user: User|null=null

  build() {

    Column() {

      CommonTopBar({ title: "提现记录", alpha: 0, titleAlignment: TextAlign.Center ,backButton:true})

    }

    .backgroundColor("#F1F3F5")

    .height('100%')

    .width('100%')

  }

}

```

首先进行数据的查询

```css

 @State user: User|null=null

  @State withdrawalRecordList:WithdrawalRecord[]=[]

  async aboutToAppear(): Promise<void> {

    const value = await StorageUtils.getAll('user');

    if (value != "") {

      this.user = JSON.parse(value)

    }

    let databaseZone = cloudDatabase.zone('default');

    let condition = new cloudDatabase.DatabaseQuery(withdrawal_record);

    condition.equalTo("user_id", this.user?.user_id)

    let listData = await databaseZone.query(condition);

    let json = JSON.stringify(listData)

    let data: WithdrawalRecord[] = JSON.parse(json)

    if (data.length>0) {

      this.withdrawalRecordList=data

    }

  }

```

然后把我们查询到的数据展示到列表组件中

```css

 List({space:10}){

        ForEach(this.withdrawalRecordList,(item:WithdrawalRecord,index:number)=>{

          ListItem(){

            Column({space:10}){

              Row(){

                Text(item.type_str=='0'?"提现成功":"提现中")

                  .fontColor(item.type_str=='0'?Color.Green:Color.Black)

                  .fontSize(16)

                  .fontWeight(FontWeight.Bold)

                Text("¥"+item.money+"")

                  .fontSize(16)

                  .fontWeight(FontWeight.Bold)

                  .fontColor(Color.Black)

              }

              .width('100%')

              .justifyContent(FlexAlign.SpaceBetween)

              Row(){

                Text(item.bank_name+" ("+item.bank_num+")")

                  .fontColor(Color.Black)

                  .fontSize(14)

                  .fontWeight(FontWeight.Bold)

                Text(item.creat_time+"")

                  .fontSize(14)

                  .fontWeight(FontWeight.Bold)

                  .fontColor(Color.Grey)

              }

              .width('100%')

              .justifyContent(FlexAlign.SpaceBetween)

            }

            .padding(10)

            .width('100%')

            .borderRadius(10)

            .backgroundColor(Color.White)

          }

        })

      }

      .padding(10)

```