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

## 技术栈

Appgallery connect

## 开发准备

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

## 功能分析

接下来我们实现订单数据展示的内容，要实现订单详情首先我们需要拿到订单id，拿到订单id之后，我们通过订单id，根据云数据库的查询api去查询出对应的订单信息，拿到订单信息之后，根据ordertype去展示不同的订单状态，根据订单的状态展示不同的时间戳。

## 代码实现

首先我们在订单列表条目上添加对应的点击事件，传递订单id到详情页，因为我们只需要传递一个id过去，就不创建一个新的对象了

```css

.onClick(()=>{

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

})

```

在订单详情页，我们创建对应的变量，通过getParams来接收id，根据id查询订单数据，然后我们把数据赋值给我们创建的变量

```css

@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展示订单状态，根据不同的状体展示不同的字符串，我们在后台设置了0-3的不同状态，只需要根据type设置对应的字符串即可

```css

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='商品兑换订单已完成'

}

```

接下来根据获取的内容，我们选择最外层的滚动组件，因为我们的订单详情页内容非常多，不能在一个屏幕中展示完全，所以使用Scroll，展示订单内容

```css

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)

```

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