《仿盒马》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)['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 

}

price():number{

let  number=0
for (let i = 0; i 

}

originalPrice():number{

let  number=0
for (let i = 0; i 

}
这样我们确认订单页面相对静态的功能就实现了