《仿盒马》app开发技术分享-- 确认订单页（数据展示）（29）
## 技术栈
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)
}
}
数据接收成功之后我们绘制收货地址模块，以及列表展示模块，价格计算模块的ui
Column() {
CommonTopBar({ title: "确认订单", alpha: 0, titleAlignment: TextAlign.Center ,backButton:true})
Divider()
.width('100%')
.height(5)
.backgroundColor("#f7f7f7")
Column(){
Row({space:20}){
Image($r('app.media.order_location'))
.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
}
这样我们确认订单页面相对静态的功能就实现了
- 点赞
- 收藏
- 关注作者
评论（0）