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

## 技术栈

Appgallery connect

## 开发准备

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

## 功能分析

1.地址选择

要实现地址选择，我们首先要在跳转到地址列表选择页，传递过去一个标记，证明我们是从回收首页跳转过来的，选择地址后的地址信息传递要传递到对应的页面。

2.留言

这里我们实现一个添加留言的弹窗，拿到内容展示到留言板块即可

3.取件时间

我们只需要在模块中展示当前的下单时间即可

4.重量选择

可以点击切换，切换时修改对应的背景色，获取到对应的数据。

## 代码实现

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

```c

.onClick(()=>{

let status:AddressRecycleStatusModel={

status:true

}

router.pushUrl({url:'pages/view/AddressListPage',params:status})

})

```

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

```c

export class AddressRecycleStatusModel {

status: boolean = false;

}

@State recycleStatus:boolean=false

let recycleStatus = router.getParams() as AddressRecycleStatusModel

if (recycleStatus&&recycleStatus!=undefined){

this.recycleStatus=recycleStatus.status

}

```

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

```c

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})

})

```

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

```c

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()

})

```

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

```c

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'))

```

预估重量选择实现

```c

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})

```

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