## 技术栈
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&¶ms1.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})
```
到这我们把订单创建之前的业务都实现了