《仿盒马》app开发技术分享-- 旧物回收页（业务逻辑）（41）

技术栈

Appgallery connect

开发准备

上一节我们实现了旧物回收页的静态展示页，现在我们开始添加对应的模块逻辑，我们要实现的内容有，地址选择、留言、取件时间、重量选择这些模块

功能分析

1.地址选择要实现地址选择，我们首先要在跳转到地址列表选择页，传递过去一个标记，证明我们是从回收首页跳转过来的，选择地址后的地址信息传递要传递到对应的页面。 2.留言这里我们实现一个添加留言的弹窗，拿到内容展示到留言板块即可 3.取件时间我们只需要在模块中展示当前的下单时间即可 4.重量选择可以点击切换，切换时修改对应的背景色，获取到对应的数据。

代码实现

地址选择，点击事件跳转对应的页面

 .onClick(()=>{
                let  status:AddressRecycleStatusModel={
                  status:true
                }
                router.pushUrl({url:'pages/view/AddressListPage',params:status})
              })

在地址选择页面拿到对应的状态标记

export class AddressRecycleStatusModel {
  status: boolean = false;
}
  @State recycleStatus:boolean=false

 let recycleStatus = router.getParams() as AddressRecycleStatusModel
       if (recycleStatus&&recycleStatus!=undefined){
         this.recycleStatus=recycleStatus.status
       }

传递对应的地址数据过去，然后接收

 if (this.recycleStatus) {
                        router.back({url:'pages/recycle/home/RecycleHomePage',params:paramsInfo})
                      }

 onPageShow(): void {
    let params1 = router.getParams() as AddressModel
    if (params1!=null&&params1.address!=undefined){
      this.addressInfo=JSON.parse(params1.address)
    }
  }

  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(this.addressInfo!=null?this.addressInfo.nikeName+" "+this.addressInfo.phone:"地址：")
                    .fontSize(16)
                    .fontWeight(FontWeight.Bold)
                    .fontColor($r('app.color.color_ff333'))
                  Text(this.addressInfo!=null?this.addressInfo.administrativeArea+" "+this.addressInfo.locality+""+this.addressInfo.subLocality+" "+this.addressInfo.placeName:"点击选择地址：")
                    .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'))
              .onClick(()=>{
                let  status:AddressRecycleStatusModel={
                  status:true
                }
                router.pushUrl({url:'pages/view/AddressListPage',params:status})
              })

留言实现，我们先创建弹窗然后引用

import showToast from "../utils/ToastUtils";
import { cloudDatabase } from "@kit.CloudFoundationKit";
import { user_info } from "../clouddb/user_info";
import { UserInfo } from "../entity/UserInfo";
import { hilog } from "@kit.PerformanceAnalysisKit";

@Preview
@CustomDialog
export struct RecycleRemarkDialog {
  controller: CustomDialogController;
  @Link str: string ;
  build() {
    Column({space:20}) {

      Text("备注")
        .fontSize($r('app.float.size_20'))
        .fontWeight(FontWeight.Bold)
        .fontColor(Color.Black)
        .margin({top:20})

      TextArea({text:this.str})
        .backgroundColor("#f6f6f6")
        .placeholderColor("#ff999595")
        .fontColor("#333333")
        .height(150)
        .maxLength(50)
        .onChange((value: String) => {
          if (value.length>50) {
            showToast("最多50个字呦~")
            return
          }else {
            this.str = value.toString()
          }
        })
        .margin(20)
      Row(){
        Text("取消")
          .width('30%')
          .textAlign(TextAlign.Center)
          .height(40)
          .fontSize(18)
          .fontColor(Color.White)
          .backgroundColor(0xff0000)
          .borderRadius(30)
          .margin({top:30})
          .onClick(()=>{
            this.str=''
              this.controller.close()
          })

        Text("确认")
          .width('30%')
          .textAlign(TextAlign.Center)
          .height(40)
          .fontSize(18)
          .fontColor(Color.White)
          .backgroundColor(0xff0000)
          .borderRadius(30)
          .margin({top:30})
          .onClick(async ()=>{
            if (this.str!='') {
             this.controller.close()
            }else {
              this.str=''
              this.controller.close()

            }
          })
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceAround)


    }
    .borderRadius({topLeft:20,topRight:20})
    .justifyContent(FlexAlign.Start)
    .backgroundColor(Color.White)
    .height(400)
    .width('100%')
  }
}


recycleController: CustomDialogController| null = new CustomDialogController({
    builder: RecycleRemarkDialog({
      str:this.remark

    }),
    alignment: DialogAlignment.Bottom,
    customStyle:true
  });


  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(this.remark!=""?this.remark:"点击留言")
                    .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'))
              .onClick(()=>{
                this.recycleController?.open()
              })

取件时间，直接获取当前日期

    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(this.formatCurrentDate()+"(下单后一小时内上门)")
                    .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'))

预估重量选择实现

 Flex({direction:FlexDirection.Column,alignItems:ItemAlign.Start}){
                Text("预估重量：")
                  .fontSize(16)
                  .fontWeight(FontWeight.Bold)
                  .fontColor($r('app.color.color_ff333'))
                Grid(this.scroller) {
                  ForEach(this.weightList, (item: ESObject,index:number) => {
                    GridItem() {
                      Column({space:5}){
                        Text(item.left+"-"+item.right+"kg")
                          .fontSize(16)
                          .width('100%')
                          .textAlign(TextAlign.Center)
                          .onClick(()=>{
                            this.checkPosition = index
                            showToast(item.left)
                          })
                          .fontColor(this.checkPosition == index ? "#000000" : "#ffffff")


                        Text(item.txt)
                          .fontSize(12)
                          .fontColor(Color.Black)
                          .fontColor(this.checkPosition == index ? "#000000" : "#ffffff")

                      }
                      .padding({top:5,bottom:5})
                      .borderRadius(10)
                      .backgroundColor(this.checkPosition == index ? "#fffa3e3e" : "#fff1a3a3")

                    }
                  })
                }
                .columnsTemplate('1fr 1fr 1fr 1fr ')
                .columnsGap(10)
                .rowsGap(10)
                .friction(0.6)
                .enableScrollInteraction(true)
                .supportAnimation(false)
                .multiSelectable(false)
                .edgeEffect(EdgeEffect.Spring)
                .scrollBar(BarState.Off)
                .scrollBarColor(Color.Grey)
                .scrollBarWidth(4)
                .width('90%')
                .backgroundColor("#FFFFFF")
                .height(100)
                .margin({top:10})
              }
              .margin({left:10})

到这我们把订单创建之前的业务都实现了

技术栈

开发准备

功能分析

代码实现

android内涵段子项目-(架构第一期)

Android进阶之音视频技术

热门文章