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

鸿蒙小林
• 阅读 3

技术栈

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)

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

鸿蒙开发
点赞
收藏
评论区
推荐文章
鸿蒙小林 鸿蒙小林
•
13小时前
《仿盒马》app开发技术分享-- 商品详情页（10）
技术栈Appgalleryconnect开发准备上一节我们实现了自定义标题栏和商品详情的数据接收，我们已经拿到了想要的数据，这一节我们要丰富商品详情页的内容。商品详情页面我们需要展示的是商品的各个属性参数、商品的图片、商品规格、活动详情等功能分析商品详情页
4
0
0
鸿蒙小林 鸿蒙小林
•
6小时前
《仿盒马》app开发技术分享-- 订单列表页（33）
技术栈Appgalleryconnect开发准备上一节我们实现了订单详情的展示，但是我们的确认订单页面只在下单成功后才会出现供用户查看，现在我们要有一个常驻的入口让用户去随时查看自己的订单以及订单状态，订单状态分为多个，还需要给用户提供切换的功能功能分析要
3
0
0
鸿蒙小林 鸿蒙小林
•
6小时前
《仿盒马》app开发技术分享-- 回收订单详情页（46）
技术栈Appgalleryconnect开发准备上一节我们实现了订单列表的所有功能，展示了待取件、已取消、运输中、已完成等订单列表的数据展示，并且在对应的订单中点击功能按钮实现了订单的状态切换，这一节我们就要通过点击对应列表内的订单进入相应的订单详情页，展
4
0
0
鸿蒙小林 鸿蒙小林
•
6小时前
《仿盒马》app开发技术分享-- 回收记录页（47）
技术栈Appgalleryconnect开发准备上一节我们实现了在订单列表中查看订单详情，但是我们的回收相关的营收就必须要进入到商品详情页才能够进行查看，如果我们在订单较多的情况下，一个一个的查看订单的详情就会变得非常的麻烦了，现在我们需要实现一个订单记录
3
0
0
鸿蒙小林 鸿蒙小林
•
6小时前
《仿盒马》app开发技术分享-- 商品兑换校验（70）
技术栈Appgalleryconnect开发准备上一节我们实现了可兑换商品的详情，我们能够查看到商品更多的信息，这一节我们来实现商品兑换相关的功能，在进行商品兑换之前，我们在兑换详情页面，点击立即兑换按钮之后我们需要跳转到兑换详情页，但是用户的积分可能达不
3
0
0
鸿蒙小林 鸿蒙小林
•
6小时前
《仿盒马》app开发技术分享-- 兑换订单提交（73）
技术栈Appgalleryconnect开发准备上一节我们实现了兑换提交前的准备页面，向用户展示了兑换相关的所有信息，这一节我们就可以实现兑换订单的提交了功能分析订单提交我们需要创建对应的兑换商品订单提交信息表，我们需要把地址，商品信息，积分，备注，订单状
5
0
0
鸿蒙小林 鸿蒙小林
•
6小时前
《仿盒马》app开发技术分享-- 兑换订单列表框架（75）
技术栈Appgalleryconnect开发准备上一节我们针对订单兑换的业务逻辑进行了完善，成功的在兑换物品之后修改了用户信息的修改，新增了积分消费的记录。这一节我们实现订单创建之后进入的列表展示页框架。功能分析兑换商品的订单列表框架我们选择使用tabs，
4
0
0
鸿蒙小林 鸿蒙小林
•
6小时前
《仿盒马》app开发技术分享-- 待发货兑换订单列表（76）
技术栈Appgalleryconnect开发准备上一节我们实现了兑换订单展示页面的框架，这一节我们要进行兑换订单的展示，在兑换订单提交后，默认的状态是待发货状态，我们用列表的方式展示出来功能分析进入页面时我们就要通过用户的userid去查询对应的订单，获取
3
0
0
鸿蒙小林 鸿蒙小林
•
6小时前
《仿盒马》app开发技术分享-- 兑换商品取消订单&取消列表展示（77）
技术栈Appgalleryconnect开发准备上一节我们实现了兑换订单待发货列表的展示逻辑，成功的在列表中展示出来，我们在订单条目中新增了两个按钮，确认揽收与取消订单，这一节我们要实现的功能是订单的取消，以及订单取消后取消列表的展示功能分析要实现订单取消
3
0
0
鸿蒙小林 鸿蒙小林
•
6小时前
《仿盒马》app开发技术分享-- 兑换商品收货确认&已完成列表展示（79）
技术栈Appgalleryconnect开发准备上一节我们实现了兑换商品订单的确认揽收功能，实现了tabs切换时的数据刷新，实现了待收货订单的列表展示。这一节我们要实现确认收货功能，并且实现待收货的列表展示功能功能分析当我们点击确认揽收的时候，修改订单状态
4
0
0
鸿蒙小林
鸿蒙小林
Lv1
鸿蒙原生应用系列开发
文章
90
粉丝
0
获赞
0
热门文章
《仿盒马》app开发技术分享-- 回收金提现（53）
《仿盒马》app开发技术分享-- 订单地址修改（31）
《仿盒马》app开发技术分享-- 分类模块顶部导航列表弹窗（16）
《仿盒马》app开发技术分享-- 购物车基础功能实现（13）
《仿盒马》app开发技术分享--确认订单选择优惠券（59）