《仿盒马》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)
到这里我们的商品详情页面的内容已经比较完善了
- 点赞
- 收藏
- 关注作者
评论（0）