技术栈

Appgallery connect

开发准备

上一节我们实现了订单的创建，并且成功吧数据提交到云数据库中，这一节我们实现的内容是展示我们提交的订单列表

功能分析

要实现订单列表的展示，首先我们要查询对应用户下的订单列表，查询出对应的订单列表后，展示出对应的数据到组件内，数据的列表展示使用list实现，在订单展示item上我们根据订单状态展示对应的订单操作按钮

代码实现

首先我们获取保存的用户信息

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

根据用户信息查询当前用户下所有的列表

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展示列表

 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)

现在我们执行代码查看效果