《仿盒马》app开发技术分享-- 旧物回收订单列表（43）

技术栈

Appgallery connect

开发准备

上一节我们实现了订单的创建，并且成功把数据提交到云数据库中，在上一节的内容中我们需要注意的是提交表单的时候注意非空字段的创建，不然会造成数据提交失败的情况，字段是否设置为非空可以在我们创建表的文件内查看notNull字段的值，这一节我们实现的内容是展示我们提交的订单列表。

功能分析

要实现订单列表的展示，首先我们要在页面创建的时候进行数据的查询，在查询之前我们需要拿到当前用户的信息，查询对应用户下的订单列表，查询出对应的订单列表后，展示出对应的数据到组件内，数据的列表展示使用list实现，在订单展示item上我们根据订单状态展示对应的订单操作按钮，后续我们给item创建对应的点击事件即可

代码实现

首先我们获取保存的用户信息，创建一个变量来获取我们存储的用户信息，我们的信息存储在了用户首选项中，通过我们封装的工具类直接取出使用

  @State user: User|null=null;
   const value = await StorageUtils.getAll('user');
    if (value != "") {
      this.user = JSON.parse(value)
    }

拿到用户信息里的userid，根据用户信息的userid，查询当前用户下所有的列表，拿到列表之后，创建对应的变量，查询出的列表内容赋予我们刚才创建的变量

let condition = new cloudDatabase.DatabaseQuery(recycle_info);
    condition.equalTo("user_id",this.user?.user_id)
    let listData = await databaseZone.query(condition);
    let json = JSON.stringify(listData)
    let data:RecycleInfo[]= JSON.parse(json)
    this.orderList=data

创建一个list组件，然后我们通过foreach循环，把数据循环展示到列表组件上，通过listItme进行包裹，展示对应的条目数据

 List({space:10}){
          ForEach(this.orderList,(item:RecycleInfo,index:number)=>{
            ListItem(){
              Column({space:10}){
                Row(){
                  Text("订单编号："+item.express_code)
                    .fontColor(Color.Black)
                    .fontSize(14)

                  Text("待取件")
                    .fontColor(Color.Black)
                    .fontSize(14)
                }
                .justifyContent(FlexAlign.SpaceBetween)
                .width('100%')

                Row({space:10}){
                  Image($r('app.media.background'))
                    .height(40)
                    .width(40)
                    .borderRadius(5)

                  Column({space:10}){
                    Text("回收品类  衣帽鞋包")
                      .fontColor(Color.Black)
                      .fontSize(14)


                    Text("预约时间  "+item.create_time)
                      .fontColor(Color.Black)
                      .fontSize(14)

                    Text("联系方式  "+item.phone)
                      .fontColor(Color.Black)
                      .fontSize(14)

                    Text("取件地址  "+item.address)
                      .fontColor(Color.Black)
                      .fontSize(14)

                  }.alignItems(HorizontalAlign.Start)
                }
                .margin({top:10})
                .alignItems(VerticalAlign.Top)
                .width('100%')
                .justifyContent(FlexAlign.Start)

                Row({space:10}){
                  Text()
                  Blank()
                  Text("取消预约")
                    .fontColor(Color.Black)
                    .fontSize(12)
                    .padding(5)
                    .borderRadius(10)
                    .border({width:1,color:Color.Grey})


                  Text("确认订单")
                    .fontColor(Color.Black)
                    .fontSize(12)
                    .padding(5)
                    .borderRadius(10)
                    .backgroundColor(Color.Orange)
                }
                .width('100%')


              }
              .padding(10)
              .backgroundColor(Color.White)
              .borderRadius(10)
              .width('100%')
              .justifyContent(FlexAlign.SpaceBetween)
            }
          })
        }
        .padding(10)

现在我们执行代码查看效果，可以看到我们的列表已经展示到页面上了