開發準備

在之前的章節中我們實現了訂單的提交，以及提交之后跳轉到確認訂單頁面，在確認訂單頁面我們添加了一個入口，這個入口是查詢訂單，當我們點擊入口時，我們需要跳轉到一個新的界面，這個界面通過接收上個界面的訂單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}

我們執行一下代碼看看效果


到這里我們就實現了訂單詳情的展示