《仿盒马》app开发技术分享-- 商品详情页（10）

技术栈

Appgallery connect

开发准备

上一节我们实现了自定义标题栏和商品详情的数据接收，我们已经拿到了想要的数据，这一节我们要丰富商品详情页的内容。商品详情页面我们需要展示的是商品的各个属性参数、商品的图片、商品规格、活动详情等

功能分析

商品详情页面的结构需要我们去用比较多的布局去处理，首先因为商品详情页面对的数据足够多，需要他能够实现滚动查看信息，然后我们需要在底部固定加入购物车和立即购买按钮，并且我们加购之后，我们也要在页面中即使响应购物车中的商品数。同时给到用户便捷跳转到购物车的按钮

代码实现

我们先进行数据的填充，因为上一节我们已经接收到数据，所以我们直接吧数据打印到text上，对着数据进行填充，同时还能帮我们暂时丰富一下页面内容，查看滑动的效果，页面完善之后我们再去删掉即可

Text(JSON.stringify(this.productParams))

          .fontColor(Color.Black)

然后我们根据设计的样式进行数据填充，要注意滚动和底部布局的固定，挑选合适的布局容器

Stack({alignContent:Alignment.Bottom}){

  Scroll(this.scroller){
      Column() {
        CommonTopBar({ title: "商品详情", alpha: 0, titleAlignment: TextAlign.Center ,backButton:true})
        Image(this.productParams.url)
          .width('100%')
          .height(300)
        Text(JSON.stringify(this.productParams))
          .fontColor(Color.Black)
        Column({space:10}){
          Row(){
            if (this.productParams.promotion_spread_price>0){
              Text(){
                Span("¥")
                  .fontSize(14)
                  .fontColor(Color.Red)
                Span(this.productParams.promotion_spread_price+"")
                  .fontSize(20)
                  .fontColor(Color.Red)
              }
            }else {
              Text(){
                Span("¥")
                  .fontSize(14)
                  .fontColor(Color.Red)
                Span(this.productParams.price+"")
                  .fontSize(20)
                  .fontColor(Color.Red)
              }
            }

            Text("¥"+this.productParams.original_price+"")
              .fontColor('#999')
              .decoration({
                type: TextDecorationType.LineThrough,
                color: Color.Gray
              })
              .fontSize(16)
              .margin({left:10})

            if (this.productParams.promotion_spread_price>0){
              Row(){
                Text("每件立减"+(this.productParams.price-this.productParams.promotion_spread_price)+"元")
                  .fontSize(14)
                  .borderRadius(20)
                  .backgroundColor("#FB424C")
                  .padding(3)
                  .textAlign(TextAlign.Center)
                Text("每人限购"+this.productParams.max_loop_amount+"件")
                  .margin({left:5})
                  .fontSize(14)
                  .borderRadius(20)
                  .backgroundColor("#FB424C")
                  .padding(3)
                  .textAlign(TextAlign.Center)
              }
              .padding({top:2,bottom:2,left:10})
            }



          }
          .padding(10)

          if (this.productParams.promotion_spread_price>0){
            Text(this.productParams.endTime)
              .fontSize(14)
              .borderRadius(20)
              .backgroundColor("#FB424C")
              .padding(3)
              .margin({left:10})
              .textAlign(TextAlign.Center)
          }

          Text(this.productParams.name)
            .fontSize(20)
            .fontColor(Color.Black)
            .margin({left:10})
            .fontWeight(FontWeight.Bold)
          Text(this.productParams.text_message)
            .fontSize(14)
            .fontColor(Color.Black)
            .margin({left:10})
          Row(){
            Text()
            Text("销量 "+this.productParams.sales_volume)
              .fontSize(14)
              .fontColor(Color.Black)
          }
          .padding(10)
          .width('100%')
          .justifyContent(FlexAlign.SpaceBetween)


          Divider().width('100%')
            .height(5).backgroundColor("#f7f7f7")
          Row(){
            Text("发货")
              .fontColor(Color.Gray)
              .fontSize(14)

            Text(this.productParams.delivery_time+"")
              .fontSize(14)
              .margin({left:20})
              .fontColor(Color.Black)
          }
          .padding(10)
          .width('100%')
          .justifyContent(FlexAlign.Start)
          Divider().width('100%')
            .height(5).backgroundColor("#f7f7f7")
          Row(){
            Text("参数")
              .fontColor(Color.Gray)
              .fontSize(14)

            Text("储藏条件：")
              .margin({left:20})
              .fontSize(14)
              .fontColor(Color.Black)
            Text(this.productParams.parameter)
              .fontSize(14)
              .fontColor(Color.Black)
          }
          .padding(10)

          .width('100%')
          .justifyContent(FlexAlign.Start)
          Divider().width('100%')
            .height(5).backgroundColor("#f7f7f7")


          Row(){
            Text("规格")
              .fontColor(Color.Gray)
              .fontSize(14)

            Column(){
              Text("请选择规格")
            }
          }
          .padding(10)
          .width('100%')
          .justifyContent(FlexAlign.Start)
          Divider().width('100%')
            .height(5).backgroundColor("#f7f7f7")
        }
        .alignItems(HorizontalAlign.Start)
      }
      .alignItems(HorizontalAlign.Start)
      .backgroundColor(Color.White)


  }
  .padding({bottom:80})
  .height('100%')
  .width('100%')
  Row(){
    Image($r('app.media.product_details_cart'))
      .width(35)
      .height(35)
      .objectFit(ImageFit.Contain)


    Blank()

    Text("加入购物车")
      .padding(10)
      .width(100)
      .textAlign(TextAlign.Center)
      .backgroundColor("#FCDB29")
      .fontColor(Color.White)
      .borderRadius({topLeft:15,bottomLeft:15})

    Text(" 立即购买 ")
      .padding(10)
      .textAlign(TextAlign.Center)
      .width(100)
      .backgroundColor(Color.Red)
      .fontColor(Color.White)
      .borderRadius({topRight:15,bottomRight:15})
  }
  .padding(15)
  .justifyContent(FlexAlign.SpaceBetween)
  .width('100%')
  .backgroundColor(Color.White)
}
.backgroundColor(Color.White)

到这里我们的商品详情页面的内容已经比较完善了