《仿盒马》app开发技术分享-- 订单详情页（端云一体）

Appgallery connect

影音娱乐

开发准备

在之前的章节中我们实现了订单的提交，以及提交之后跳转到确认订单页面，在确认订单页面我们添加了一个入口，这个入口是查询订单，当我们点击入口时，我们需要跳转到一个新的界面，这个界面通过接收上个界面的订单id或者订单code 等信息，进行订单的详细内容展示

功能分析

要想实现订单内容的展示，首先我们要解决订单查询的问题，之前的订单提交页面，因为我们做了一张关联表，把提交的商品放置到了一张单独的表中，通过order_product_id去做关联查询，所以我们还需要根据id 把对应的商品列表查出来，然后我们再查出对应order_code 对应的订单，展示到页面上，同时展示出更多的信息给到用户

代码实现

首先在确认订单页面实现数据的传递

  Text("查看订单").fontSize(16).fontColor(Color.Black).padding(10).borderRadius(10).border({width:1,color:Color.Grey}).onClick(()=>{router.pushUrl({url:'pages/view/OrderDetailsPage',params:{code:this.orderInfo!.order_code}})})

然后我们回到订单详情页面进行传递数据的接收

@State orderCode:string=''let params = (this.getUIContext().getRouter().getParams() as Record<string, string>)['code']if (params!=undefined&& params!=''){this.orderCode=params}

接收到数据之后我们首先根据ordercode进行表数据的查询

let databaseZone = cloudDatabase.zone('default');let condition = new cloudDatabase.DatabaseQuery(order_list);condition.equalTo("order_code",this.orderCode!)let listData = await databaseZone.query(condition);let json = JSON.stringify(listData)let data1:OrderList[]= JSON.parse(json)this.orderInfo=data1[0]

查询出来数据之后，我们拿到返回值中的order_product_id字段，根据它再次进行查询，拿到对应的商品列表

  @State orderInfo:OrderList|null=nulllet condition1 = new cloudDatabase.DatabaseQuery(order_product_list);condition1.equalTo("order_product_id",data1[0].order_product_id)let listData1 = await databaseZone.query(condition1);let json1 = JSON.stringify(listData1)this.productList=JSON.parse(json1)

都查询出来之后我们开始进行页面数据的绘制和数据的填充

build() {if (this.flag){Column(){CommonTopBar({ title: "订单详情", alpha: 0, titleAlignment: TextAlign.Center ,backButton:true})Scroll(){Column({space:10}) {Column({space:15}){Text("买家已付款").fontSize(20).width('100%').textAlign(TextAlign.Center).fontColor(Color.Black).fontWeight(FontWeight.Bold)Text("您买的商品已经安排了，商家即将发货").fontSize(16).fontColor(Color.Black).width('100%').textAlign(TextAlign.Center)}.width('100%').padding(15).backgroundColor("#fff3574a")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?.nickname).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")List({scroller:this.scroller}){ForEach(this.productList,(item:OrderProductList,index:number)=>{ListItem(){Column(){Row() {Row({ space: 10 }) {Image(item.img).height(70).width(70).margin({ left: 10 }).borderRadius(10)Column({ space: 5 }) {Text(item.name).fontColor(Color.Black).fontSize(14)Text(item.spec).fontColor(Color.Grey).fontSize(14)Row() {Text() {Span("¥ ").fontSize(14).fontColor(Color.Red)Span(item.price + "").fontSize(16).fontColor(Color.Red)}Text("¥" + item.originalPrice + "").fontColor('#999').decoration({type: TextDecorationType.LineThrough,color: Color.Gray}).fontSize(14).margin({ left: 10 })}.alignItems(VerticalAlign.Bottom)Text("已选：" + item.buyAmount).fontColor(Color.Black).fontColor(Color.Gray).fontSize(12)}.alignItems(HorizontalAlign.Start)}.justifyContent(FlexAlign.Start).alignItems(VerticalAlign.Top)Blank()Text("¥ " + item.price*item.buyAmount).fontColor(Color.Black).fontSize(14)}.padding(10).width('100%').alignItems(VerticalAlign.Top).justifyContent(FlexAlign.SpaceBetween)Divider().width('100%').height(1).backgroundColor("#f7f7f7")}}})}.height('auto')Row(){Text()Blank()Text() {Span("合计：").fontSize(16).fontColor(Color.Black)Span("¥ ").fontSize(10).fontColor(Color.Red)Span(this.price()+"").fontSize(16).fontColor(Color.Red)}}.padding(10).width('100%').justifyContent(FlexAlign.SpaceBetween)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?.order_remark!=''&&this.orderInfo?.order_remark!=null?this.orderInfo?.order_remark:"无").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("线上支付").fontSize(16).fontColor(Color.Black)}.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?.order_create_time).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?.order_pay_time).fontColor(Color.Black).fontSize(14)}.justifyContent(FlexAlign.SpaceBetween).width('100%').padding(10)Divider().width('100%').height(0.8).color("#e6e6e6").visibility(this.orderInfo?.order_over_time!=''?Visibility.Visible:Visibility.None)Row(){Text("完成时间：").fontSize(16).fontColor(Color.Black)Blank()Text(this.orderInfo?.order_over_time).fontColor(Color.Black).fontSize(14)}.visibility(this.orderInfo?.order_over_time!=null&&this.orderInfo.order_over_time!=''?Visibility.Visible:Visibility.None).justifyContent(FlexAlign.SpaceBetween).width('100%').padding(10)}.margin({bottom:50}).backgroundColor(Color.White).alignItems(HorizontalAlign.Start)}.height('100%').width('100%')}}}price():number{let  number=0for (let i = 0; i <this.productList.length ; i++) {number+=this.productList[i].buyAmount*this.productList[i].price}return  number}

我们执行一下代码看看效果


到这里我们就实现了订单详情的展示