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

## 技术栈

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=null

let 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=0

for (let i = 0; i <this.productList.length ; i++) {

number+=this.productList[i].buyAmount*this.productList[i].price

}

return number

}

```

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