技术栈
Appgallery connect
开发准备
上一节我们进行了购物车业务逻辑的优化，使我们的程序变得更加健壮，这一节我们将要开始电商业务以外的内容，旧物回收，这是一个全新的业务模块，我们将要在这里实现对应的，回收金，积分，回收业务相关内容
功能分析
要想实现旧物回收相关的内容，我们首先要搭建一个业务框架，我们这里我们要实现的内容有头部回收种类的展示模块，用户下单滚动提示模块，信息填充模块，以及后续的订单入口模块。我们先来进行页面的绘制
代码实现
首先是头部的回收种类展示模块
@State recycleTop:ESObject[]=[{"txt":"包包","img":$r('app.media.baobao')},{"txt":"裤子","img":$r('app.media.kuzi')},
{"txt":"玩具","img":$r('app.media.wanju')},{"txt":"帽子","img":$r('app.media.maozi')},
{"txt":"鞋子","img":$r('app.media.xiezi')},{"txt":"衣服","img":$r('app.media.yifu')}]
Column({space:10}){
Text("回收类别")
.fontWeight(FontWeight.Bold)
.fontColor(Color.Black)
.fontSize(16)
List({space:30}){
ForEach(this.recycleTop,(item:ESObject,index:number)=>{
ListItem(){
Column(){
Image(item.img)
.width(30)
.height(30)
.objectFit(ImageFit.Contain)
Text(item.txt)
.fontColor(Color.Black)
.fontSize(14)
}
}
})
}
.height(50)
.listDirection(Axis.Horizontal)
Text("每1kg回收物品奖励10元，可提现可消费")
.width('100%')
.fontColor(Color.Orange)
.fontSize(14)
.textAlign(TextAlign.Center)
}
.margin({top:20})
.alignItems(HorizontalAlign.Start)
.width('95%')
.backgroundColor(Color.White)
.borderRadius(10)
.padding(10)
然后我们实现用户下单滚动模块，这里我们都先填充静态数据，上下的滚动我们用swiper组件去实现即可
Swiper(this.swiperController){
ForEach(this.recycleTop,(item:ESObject,index:number)=>{
Row({space:5}){
Image($r('app.media.laba'))
.width(10)
.height(10)
Image($r('app.media.yonghu'))
.width(10)
.height(10)
Text(item.txt+"123****12333 旧衣回收预约成功 06-08")
.fontColor(Color.Black)
.fontSize(12)
}
.padding({left:10})
.borderRadius(5)
.height(30)
.width("100%")
.backgroundColor(Color.White)
})
}
.padding({left:12,right:12})
.borderRadius(5)
.disableSwipe(true)
.autoPlay(true)
.interval(2000)
.vertical(true)
.indicator(false)然后是我们的用户信息填充模块，这里我们需要的关键信息就是地址，备注，用户下单的回收时间等
Column({space:10}){
Row(){
Image($r('app.media.weizhi'))
.width($r('app.float.size_17'))
.height($r('app.float.size_17'))
.objectFit(ImageFit.Contain)
Flex({direction:FlexDirection.Column,alignItems:ItemAlign.Start}){
Text("地址：")
.fontSize(16)
.fontWeight(FontWeight.Bold)
.fontColor($r('app.color.color_ff333'))
Text("点击选择地址")
.fontSize(14)
.fontColor($r('app.color.color_999'))
.margin({top:$r('app.float.size_4')})
}
.margin({left:10})
Blank()
Image($r('app.media.back_right_recycle'))
.width($r('app.float.size_16'))
.height($r('app.float.size_16'))
.objectFit(ImageFit.Contain)
}
.alignItems(VerticalAlign.Top)
.padding({top:$r('app.float.size_16'),left:$r('app.float.size_10'),right:$r('app.float.size_10'),bottom:$r('app.float.size_10')})
.width('100%')
.height($r('app.float.size_80'))
.backgroundColor(Color.White)
.borderRadius($r('app.float.size_10'))
Row(){
Image($r('app.media.liuyan'))
.width($r('app.float.size_17'))
.height($r('app.float.size_17'))
.objectFit(ImageFit.Contain)
Flex({direction:FlexDirection.Column,alignItems:ItemAlign.Start}){
Text("留言：")
.fontSize(16)
.fontWeight(FontWeight.Bold)
.fontColor($r('app.color.color_ff333'))
Text("点击留言")
.fontSize(14)
.fontColor($r('app.color.color_999'))
.margin({top:$r('app.float.size_4')})
}
.margin({left:10})
Blank()
Image($r('app.media.back_right_recycle'))
.width($r('app.float.size_16'))
.height($r('app.float.size_16'))
.objectFit(ImageFit.Contain)
}
.alignItems(VerticalAlign.Top)
.padding({top:$r('app.float.size_16'),left:$r('app.float.size_10'),right:$r('app.float.size_10'),bottom:$r('app.float.size_10')})
.width('100%')
.height($r('app.float.size_80'))
.backgroundColor(Color.White)
.borderRadius($r('app.float.size_10'))
Row(){
Image($r('app.media.shijian'))
.width($r('app.float.size_17'))
.height($r('app.float.size_17'))
.objectFit(ImageFit.Contain)
Flex({direction:FlexDirection.Column,alignItems:ItemAlign.Start}){
Text("取件时间：")
.fontSize(16)
.fontWeight(FontWeight.Bold)
.fontColor($r('app.color.color_ff333'))
Text("点击选择时间")
.fontSize(14)
.fontColor($r('app.color.color_999'))
.margin({top:$r('app.float.size_4')})
}
.margin({left:10})
Blank()
Image($r('app.media.back_right_recycle'))
.width($r('app.float.size_16'))
.height($r('app.float.size_16'))
.objectFit(ImageFit.Contain)
}
.alignItems(VerticalAlign.Top)
.padding({top:$r('app.float.size_16'),left:$r('app.float.size_10'),right:$r('app.float.size_10'),bottom:$r('app.float.size_10')})
.width('100%')
.height($r('app.float.size_80'))
.backgroundColor(Color.White)
.borderRadius($r('app.float.size_10'))
}
.padding(12)到这里我们就暂时实现了旧物回收的主要框架了
