仿盒马》app开发技术分享-- 确认订单页（数据展示）（端云一体）

开发准备

上一节我们实现了地址的添加，那么有了地址之后我们接下来的重点就可以放到订单生成上了，我们在购物车页面，点击结算会跳转到一个 订单确认页面，在这个页面我们需要有地址选择、加购列表展示、价格计算、优惠计算、商品数量展示等信息。

功能分析

要想实现确认订单页面的功能，我们只需要从购物车页面把加购的列表传递过来，然后根据列表中的buyamount 以及price 去计算对应的价格和加购数量，然后我们通过划线价去计算我们的优惠。最后确认无误提交订单

代码实现

首先在购物车页面点击结算时传递数据到确认订单页
.onClick(()=>{
router.pushUrl({url:‘pages/view/OrderSubmitPage’,params:{data:JSON.stringify(this.productList)}})
})
然后我们在确认订单页面接收数据
@State productList:CartProductList[]=[]
aboutToAppear(): void {
let params = (this.getUIContext().getRouter().getParams() as Record<string, string>)[‘data’]
if (params!=undefined&& params!=‘’){
this.productList=JSON.parse(params)
}
}
数据接收成功之后我们绘制收货地址模块，以及列表展示模块，价格计算模块的ui
Column() {
CommonTopBar({ title: “确认订单”, alpha: 0, titleAlignment: TextAlign.Center ,backButton:true})
Divider()
.width(‘100%’)
.height(5)
.backgroundColor(“#f7f7f7”)
Column(){
Row({space:20}){
Image($r{(}^{\prime }app.media.orde{r}_{l}ocatio{n}^{\prime })).height(20).width(20)Text("请选择收货地址").fontColor(Color.Black).fontSize(16)Blank()Image($r(‘app.media.right’))
.height(20)
.width(20)
}
.padding(10)
.width(‘100%’)
.justifyContent(FlexAlign.SpaceBetween)
.height(40)
.alignItems(VerticalAlign.Center)
Divider()
.width(‘100%’)
.height(5)
.backgroundColor(“#f7f7f7”)

      List({scroller:this.scroller}){ForEach(this.productList,(item:CartProductList,index:number)=>{ListItem(){Column(){Row() {Row({ space: 10 }) {Image(item.productImgAddress).height(70).width(70).margin({ left: 10 }).borderRadius(10)Column({ space: 5 }) {Text(item.productName).fontColor(Color.Black).fontSize(14)Text(item.productSpecName).fontColor(Color.Grey).fontSize(14)Row() {Text() {Span("¥ ").fontSize(14).fontColor(Color.Red)Span(item.productPrice + "").fontSize(16).fontColor(Color.Red)}Text("¥" + item.productOriginalPrice + "").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.productPrice*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("订单备注").fontSize(14).fontColor(Color.Black)Blank()Text("选填，请写明备注内容").fontColor(Color.Gray).fontSize(12)Image($r('app.media.right')).height(15).width(15)}.width('100%').padding(10).justifyContent(FlexAlign.SpaceBetween)Row(){Text()Blank()Text("共"+this.amount()+"份").fontSize(12).fontColor(Color.Gray)Text("小计：").fontColor(Color.Gray).fontSize(12).margin({left:15})Text() {Span("¥ ").fontSize(12).fontColor(Color.Red)Span(this.price()+"").fontSize(12).fontColor(Color.Red)}}.padding(10).width('100%').justifyContent(FlexAlign.SpaceBetween)Divider().width('100%').height(10).backgroundColor("#f7f7f7")Row(){Text("商品总价").fontSize(14).fontColor(Color.Black)Text() {Span("¥ ").fontSize(12).fontColor(Color.Black)Span(this.price()+"").fontSize(12).fontColor(Color.Black)}}.padding(10).width('100%').justifyContent(FlexAlign.SpaceBetween)Row(){Text("平台优惠").fontSize(14).fontColor(Color.Black)Text() {Span("¥ ").fontSize(12).fontColor(Color.Black)Span(this.originalPrice()-this.price()+"").fontSize(12).fontColor(Color.Black)}}.padding(10).width('100%').justifyContent(FlexAlign.SpaceBetween)}.layoutWeight(1)Row({space:10}){Text("共"+this.amount()+"份").fontSize(14).fontColor(Color.Black)Blank()Text() {Span("实付：")Span("¥ ").fontSize(10).fontColor(Color.Red)Span(this.price()+"").fontSize(16).fontColor(Color.Red)}Text("提交订单").fontColor(Color.White).padding(10).borderRadius(10).backgroundColor("#d81e06").fontSize(14)}.padding(20).justifyContent(FlexAlign.SpaceBetween).width('100%')
}
.backgroundColor(Color.White)
.height('100%')
.width('100%')

都玩成之后我们在方法中计算加购的总数和当前价格和优惠价格
amount():number{

let  number=0
for (let i = 0; i <this.productList.length ; i++) {number+=this.productList[i].buyAmount
}
return  number

}

price():number{

let  number=0
for (let i = 0; i <this.productList.length ; i++) {number+=this.productList[i].buyAmount*this.productList[i].productPrice
}
return  number

}

originalPrice():number{

let  number=0
for (let i = 0; i <this.productList.length ; i++) {number+=this.productList[i].buyAmount*this.productList[i].productOriginalPrice
}
return  number

}
这样我们确认订单页面相对静态的功能就实现了我们执行一下代码看看效果