技术栈
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)
复制代码
到这里我们的商品详情页面的内容已经比较完善了
评论