## 技术栈
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
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
number+=this.productList[i].buyAmount*this.productList[i].price
}
return number
}
```
到这里我们就实现了订单详情的展示