《仿盒马》app开发技术分享-- 兑换商品订单详情页（80）

技术栈

Appgallery connect

开发准备

我们的兑换商品列表相关的功能都已经实现的差不多了，现在我们还缺少一个订单详情查看的功能，为了ui一致性，我们的订单详情页样式要保持一致性，外观要跟订单、回收单的详情页相似。

功能分析

要实现订单详情首先我们需要拿到订单id，根据订单id去查询出对应的订单信息，拿到订单信息之后，根据ordertype去展示不同的订单状态，根据订单的状态展示不同的时间戳。

代码实现

首先我们在订单列表条目上添加对应的点击事件，传递订单id到详情页

.onClick(()=>{
              router.pushUrl({url:"pages/recycle/points/PointsOrderDetailsPage",params:{code:item.id}})
            })

订单详情页接收id，根据id查询订单数据

 @State orderInfo:PointsOrderInfo|null=null
  @State orderCode:string=''
  @State flag:boolean=false
  @State titleStr:string=''
  @State msgStr:string=''
 let params = (this.getUIContext().getRouter().getParams() as Record<string, string>)['code']
    if (params!=undefined&& params!=''){
      this.orderCode=params
    }
 let databaseZone = cloudDatabase.zone('default');
    let condition = new cloudDatabase.DatabaseQuery(points_order_info);
    condition.equalTo("id",this.orderCode!)
    let listData = await databaseZone.query(condition);
    let json = JSON.stringify(listData)
    let data1:PointsOrderInfo[]= JSON.parse(json)
    this.orderInfo=data1[0]

查询出数据后根据ordertype展示订单状态

 if (this.orderInfo?.order_type==0) {
      this.titleStr="待取件"
      this.msgStr='已通知快递小哥按时上门取件，请耐心等候'
    }
    if (this.orderInfo?.order_type==1) {
      this.titleStr="已取消"
      this.msgStr='订单已取消，感谢您的使用'
    }
    if (this.orderInfo?.order_type==2) {
      this.titleStr="运输中"
      this.msgStr='包裹已寄出，正在紧急运送中！'
    }

    if (this.orderInfo?.order_type==3) {
      this.titleStr="已完成"
       this.msgStr='商品兑换订单已完成'
    }

展示订单内容

   Column(){
        CommonTopBar({ title: "订单详情", alpha: 0, titleAlignment: TextAlign.Center ,backButton:true})
        Scroll(){
          Column() {
            Column({space:15}){
              Text(this.titleStr)
                .fontSize(20)
                .width('100%')
                .textAlign(TextAlign.Center)
                .fontColor(Color.Black)
                .fontWeight(FontWeight.Bold)

              Text(this.msgStr)
                .fontSize(16)
                .fontColor(Color.Black)
                .width('100%')
                .textAlign(TextAlign.Center)
            }.width('100%')
            .padding(15)
            .backgroundColor("#fff3574a")
            .alignItems(HorizontalAlign.Start
            )
            Divider().width('100%').height(5)
              .color("#e6e6e6")
            Column(){
              Row({space:20}){
                Image($r('app.media.order_location'))
                  .height(20)
                  .width(20)
                Column(){
                  Row(){
                    Text(this.orderInfo?.nike_name)
                      .fontColor(Color.Black)
                      .fontSize(16)
                      .fontWeight(FontWeight.Bold)
                    Text(this.orderInfo?.phone)
                      .fontColor(Color.Black)
                      .fontSize(16)
                      .fontWeight(FontWeight.Bold)
                      .margin({left:20})
                  }
                  Text(this.orderInfo?.address)
                    .fontColor(Color.Black)
                    .fontSize(16)
                    .margin({top:10})
                }
                .padding(10)
                .alignItems(HorizontalAlign.Start)
                .width('100%')

              }
            }
            .padding(10)
            .alignItems(HorizontalAlign.Start)
            .width('100%')
            Divider().width('100%').height(0.8)
              .color("#e6e6e6")
                  Column(){
                    Row() {
                      Row({ space: 10 }) {
                        Image($r('app.media.duihuan'))
                          .height(70)
                          .width(70)
                          .margin({ left: 10 })
                          .borderRadius(10)
                        Column({ space: 5 }) {
                          Text("积分兑换")
                            .fontColor(Color.Black)
                            .fontSize(14)

                          Text("积分扣除："+this.orderInfo?.points)
                            .fontColor(Color.Grey)
                            .fontSize(14)
                        }
                        .alignItems(HorizontalAlign.Start)

                      }

                      .justifyContent(FlexAlign.Start)
                      .alignItems(VerticalAlign.Top)


                    }
                    .padding(10)
                    .width('100%')
                    .alignItems(VerticalAlign.Top)
                    .justifyContent(FlexAlign.SpaceBetween)


                    Divider()
                      .width('100%')
                      .height(1)
                      .backgroundColor("#f7f7f7")

                  }

            Divider().width('100%').height(5)
              .color("#e6e6e6")



            Text("快递信息")
              .fontSize(18)
              .fontColor(Color.Black)
              .fontWeight(FontWeight.Bold)
              .margin({left:15})
            Divider().width('100%').height(5)
              .color("#e6e6e6")
            Row(){
              Text("运单编号：")
                .fontSize(16)
                .fontColor(Color.Black)
              Blank()
              Text(this.orderInfo?.order_code)
                .fontColor(Color.Black)
                .fontSize(14)
            }
            .justifyContent(FlexAlign.SpaceBetween)
            .width('100%')
            .padding(10)

            Divider().width('100%').height(0.8)
              .color("#e6e6e6")

            Row(){
              Text("快递公司：")
                .fontSize(16)
                .fontColor(Color.Black)
              Blank()
              Text(this.orderInfo?.express_company)
                .fontColor(Color.Black)
                .fontSize(14)
            }
            .justifyContent(FlexAlign.SpaceBetween)
            .width('100%')
            .padding(10)
            Divider().width('100%').height(0.8)
              .color("#e6e6e6")
            Row(){
              Text("快递员：")
                .fontSize(16)
                .fontColor(Color.Black)
              Blank()
              Text(this.orderInfo?.express_people)
                .fontSize(16)
                .fontColor(Color.Black)
            }
            .justifyContent(FlexAlign.SpaceBetween)
            .width('100%')
            .padding(10)
            Divider().width('100%').height(5)
              .color("#e6e6e6")








            Text("下单信息")
              .fontSize(18)
              .fontColor(Color.Black)
              .fontWeight(FontWeight.Bold)
              .margin({left:15})
            Divider().width('100%').height(5)
              .color("#e6e6e6")
            Row(){
              Text("联系人：")
                .fontSize(16)
                .fontColor(Color.Black)
              Blank()
              Text(this.orderInfo?.nike_name+" "+this.orderInfo?.phone)
                .fontColor(Color.Black)
                .fontSize(14)
            }
            .justifyContent(FlexAlign.SpaceBetween)
            .width('100%')
            .padding(10)

            Divider().width('100%').height(0.8)
              .color("#e6e6e6")

            Row(){
              Text("取件地址：")
                .fontSize(16)
                .fontColor(Color.Black)
              Blank()
              Text(this.orderInfo?.address)
                .fontColor(Color.Black)
                .fontSize(14)
            }
            .justifyContent(FlexAlign.SpaceBetween)
            .width('100%')
            .padding(10)
            Divider().width('100%').height(0.8)
              .color("#e6e6e6")
            Row(){
              Text("备注：")
                .fontSize(16)
                .fontColor(Color.Black)
              Blank()
              Text(this.orderInfo?.msg!=''?this.orderInfo?.msg:"无")
                .fontColor(Color.Black)
                .fontSize(14)
            }
            .justifyContent(FlexAlign.SpaceBetween)
            .width('100%')
            .padding(10)
            Divider().width('100%').height(0.8)
              .color("#e6e6e6")
            Row(){
              Text("订单编号：")
                .fontSize(16)
                .fontColor(Color.Black)
              Blank()
              Text(String(this.orderInfo?.id))
                .fontColor(Color.Black)
                .fontSize(14)
            }
            .justifyContent(FlexAlign.SpaceBetween)
            .width('100%')
            .padding(10)



            Row(){
              Text("创建时间：")
                .fontSize(16)
                .fontColor(Color.Black)
              Blank()
              Text(this.orderInfo!.crete_time)
                .fontColor(Color.Black)
                .fontSize(14)
            }
            .justifyContent(FlexAlign.SpaceBetween)
            .width('100%')
            .padding(10)

            Row(){
              Text("取消时间：")
                .fontSize(16)
                .fontColor(Color.Black)
              Blank()
              Text(this.orderInfo!.crete_time)
                .fontColor(Color.Black)
                .fontSize(14)
            }
            .visibility(this.orderInfo?.cancel_time!=null?Visibility.Hidden:Visibility.None)
            .justifyContent(FlexAlign.SpaceBetween)
            .width('100%')
            .padding(10)
            Row(){
              Text("完成时间：")
                .fontSize(16)
                .fontColor(Color.Black)
              Blank()
              Text(this.orderInfo!.success_time)
                .fontColor(Color.Black)
                .fontSize(14)
            }
            .visibility(this.orderInfo?.success_time!=null?Visibility.Hidden:Visibility.None)
            .justifyContent(FlexAlign.SpaceBetween)
            .width('100%')
            .padding(10)
          }
          .height('100%')
          .margin({bottom:50})
          .backgroundColor(Color.White)
          .alignItems(HorizontalAlign.Start)
        }
        .height('100%')
        .width('100%')
      }
      .backgroundColor(Color.White)

这样我们就实现了兑换商品订单的详情页