《仿盒马》app开发技术分享-- 旧物回收页（静态）（40）

技术栈

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)

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