《仿盒马》app开发技术分享-- 回收金收支查询（49）

技术栈

Appgallery connect

开发准备

上一节我们实现了回收金页面的部分布局填充和内容展示，并且实现了当前订单收益总金额的展示，以及金额的隐藏，这一节我们来实现当前用户收支列表的展示，在这之前，我们先要修改一下我们recycleinfo表，我们把规格相关的内容添加上去，方便我们后续的逻辑编写，不然每次都根据weightid查询确实有一点点不方便

功能分析

我们已经通过tab实现了标题的切换，但是我们现在并没有操作列表的内容，所以我们还需要创建一个moneyinfo表，通过绑定userid，我们进行表的操作，然后通过查询出moneyinfo的列表信息，然后根据moneytype字段去筛选出我们想要的数据在列表中展示。同时根据不同的状态我们要展示出当前记录是收入还是支出，要更直观的给用户进行展示。

代码实现

首先我们把修改过的recycleinfo表结构展示一下

{
  "CloudDBZoneName": "default",
  "objectTypeName": "recycle_info",
  "fields": [
    {"fieldName": "id", "fieldType": "Integer", "notNull": true, "belongPrimaryKey": true},
    {"fieldName": "user_id", "fieldType": "Integer", "notNull": true, "defaultValue": 0},
    {"fieldName": "nike_name", "fieldType": "String"},
    {"fieldName": "phone", "fieldType": "String"},
    {"fieldName": "address", "fieldType": "String"},
    {"fieldName": "day", "fieldType": "String"},
    {"fieldName": "start_time", "fieldType": "String"},
    {"fieldName": "end_time", "fieldType": "String"},
    {"fieldName": "msg", "fieldType": "String"},
    {"fieldName": "weight_id", "fieldType": "String"},
    {"fieldName": "weight", "fieldType": "String"},
    {"fieldName": "txt", "fieldType": "String"},
    {"fieldName": "integral", "fieldType": "Double"},
    {"fieldName": "money", "fieldType": "Double"},
    {"fieldName": "create_time", "fieldType": "String"},
    {"fieldName": "express_code", "fieldType": "String"},
    {"fieldName": "express_people", "fieldType": "String"},
    {"fieldName": "express_company", "fieldType": "String"},
    {"fieldName": "order_type", "fieldType": "Integer"},
    {"fieldName": "logistics_id", "fieldType": "Integer"}
    
  ],
  "indexes": [
    {"indexName": "fieldIndexId", "indexList": [{"fieldName":"id","sortType":"DESC"}]}
  ],
  "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"]}
  ]
}

后续的操作我们都用这个结构的表来进行增删改查

然后我们创建对应的moneyinfo表，在内部添加我们需要的字段

{
  "objectTypeName": "money_info",
  "fields": [
    {"fieldName": "id", "fieldType": "Integer", "notNull": true, "belongPrimaryKey": true},
    {"fieldName": "user_id", "fieldType": "Integer", "notNull": true, "defaultValue": 0},
    {"fieldName": "money", "fieldType": "String"},
    {"fieldName": "all_money", "fieldType": "String"},
    {"fieldName": "create_time", "fieldType": "String"},
    {"fieldName": "money_type", "fieldType": "String"},
    {"fieldName": "address", "fieldType": "String"},
    {"fieldName": "year", "fieldType": "String"},
    {"fieldName": "month", "fieldType": "String"},
    {"fieldName": "day", "fieldType": "String"},
    {"fieldName": "time", "fieldType": "String"}

  ],
  "indexes": [
    {"indexName": "field1Id", "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"]}
  ]
}

然后我们生成Server Client 的Model，因为我们的现金奖励以及积分是只有在回收订完完成之后才会添加数据所以我们要在订单完成的点击事件中添加数据的提交，同时把状态改为收入

 Text("订单完成")
                    .fontColor(Color.Black)
                    .fontSize(12)
                    .padding(5)
                    .borderRadius(10)
                    .backgroundColor(Color.Pink)
                    .onClick(async ()=>{
                      let data=new recycle_info()
                      data.id=item.id
                      data.user_id=item.user_id
                      data.nike_name=item.nike_name
                      data.phone=item.phone
                      data.address=item.address
                      data.day=item.day
                      data.start_time=item.start_time
                      data.end_time=item.end_time
                      data.msg=item.msg
                      data.weight_id=item.weight_id
                      data.weight=item.weight
                      data.txt=item.txt
                      data.money=item.money
                      data.integral=item.integral
                      data.create_time=item.create_time
                      data.express_code=item.express_code
                      data.express_people=item.express_people
                      data.express_company=item.express_company
                      data.order_type=3
                      data.logistics_id=item.logistics_id
                      let num = await databaseZone.upsert(data);
                      hilog.info(0x0000, 'testTag', `Succeeded in upserting data, result: ${num}`);
                      if (num>0) {
                        this.onRefresh()
                        showToast("订单已完成")
                        let money=new money_info
                        money.id=Math.floor(Math.random() * 1000000)
                        money.user_id=this.user!.user_id
                        money.money=String(item.money)
                        money.all_money=''
                        money.money_type='0'
                        money.address='客户端下单奖励'
                        money.year=this.year
                        money.month=this.month
                        money.day=this.day
                        money.time=this.time
                        money.create_time=this.year+"-"+this.month+"-"+this.day+" "+this.time
                        let nums =  await databaseZone.upsert(money);

                      }
                    })

提交订单后，我们的数据就已经添加到云数据库中，接下来我们回到回收金展示页开始实现数据展示，这里我们拿全部订单展示为例

先创建对应的列表展示组件

import { MoneyInfo } from '../../../entity/money_info'


@Component
export struct RecordList {
  @Prop  recodeList:MoneyInfo[]=[]

  @Builder
  recordList(){
    List({ space: 10 }) {
      ForEach(this.recodeList, (item:MoneyInfo) => {
            ListItem() {
                this.allItem(item)
            }

      })
    }
    .backgroundColor("#f7f7f7").padding({ top: 10 })
    .sticky(StickyStyle.Header)
  }




  @Builder
  allItem(item:MoneyInfo){
    Row({space:10}){
      Image(item.money_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.money_type=='0'?"收入":"提现")
          .fontColor("#333333")
          .fontSize(16)
        Text(item.address)
          .fontColor("#999999")
          .fontSize(14)
      }
      .alignItems(HorizontalAlign.Start)
      Blank()

      Column({space:10}){
        Text(item.money_type=='0'?"¥"+item.money:"-¥"+item.money)
          .fontColor(item.money_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%')


  }
}

然后在页面的tabs中引用

Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
          ForEach(this.arr,(item:string,index)=>{
            TabContent() {
              Column(){
                if (item=='全部') {
                  RecordList({recodeList:this.moneyList})
                }
            
              }
            }

            .tabBar(this.TabBuilder(index, item))
            .borderRadius(10)
            .backgroundColor(Color.White)
          })
        }