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

## **技术栈**

Appgallery connect

## **开发准备**

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

## **功能分析**

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

## **代码实现**

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

Text(JSON.stringify(this.productParams))

.fontColor(Color.Black)

然后我们根据设计的样式进行数据填充，要注意滚动和底部布局的固定，挑选合适的布局容器，这里我们选择的布局是stack，这个布局可以使我们页面中的布局实现层叠效果，这样我们就能实现了在滚动的同时不影响地步布局的固定

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)

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