《仿盒马》app开发技术分享

分享编程技巧，开启技术世界 #生活乐趣# #生活分享# #兴趣爱好分享#

技术栈

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)

到这里我们就暂时实现了旧物回收的主要框架了

网址：《仿盒马》app开发技术分享 https://www.yuejiaxmz.com/news/view/1078812

相关内容

ssmFunnycooking菜谱分享app(开题+源码)
芭乐工匠盒 APP：一款全能型APP
从盒马鲜生看“新零售”体验
每人可分享储物柜App开发解决方案
（)认为“不是艺术模仿生活，而是生活模仿艺术”。
上门洗车APP项目开发分享与源码解析
2022智能日程管理APP开发之功能架构分享来了
共享储物柜APP开发解决方案
抽屉分隔盒制造技术
家电清洁、家政保洁、衣物洗护…上“盒马”也能享一站式生活服务

随便看看