技术栈
Appgallery connect
开发准备
上一节我们实现了地址的添加，那么有了地址之后我们接下来的重点就可以放到订单生成上了，我们在购物车页面，点击结算会跳转到一个 订单确认页面，在这个页面我们需要有地址选择、加购列表展示、价格计算、优惠计算、商品数量展示等信息。
功能分析
要想实现确认订单页面的功能，我们只需要从购物车页面把加购的列表传递过来，然后根据列表中的 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)}}数据接收成功之后我们绘制收货地址模块，以及列表展示模块，价格计算模块的 uiColumn() {CommonTopBar({ title: "确认订单", alpha: 0, titleAlignment: TextAlign.Center ,backButton:true})Divider().width('100%').height(5).backgroundColor("#f7f7f7")Column(){Row({space:20}){Image(r(′app.media.orderlocation′)).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=0for (let i = 0; i <this.productList.length ; i++) { number+=this.productList[i].buyAmount}return number
复制代码
}
price():number{
let number=0for (let i = 0; i <this.productList.length ; i++) { number+=this.productList[i].buyAmount*this.productList[i].productPrice}return number
复制代码
}
originalPrice():number{
let number=0for (let i = 0; i <this.productList.length ; i++) { number+=this.productList[i].buyAmount*this.productList[i].productOriginalPrice}return number
复制代码
}这样我们确认订单页面相对静态的功能就实现了
评论