## 技术栈
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)
```
这样我们就实现了兑换商品订单的详情页
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/70046889/viewspace-3089326/ ，如需转载，请注明出处，否则将追究法律责任。
