《仿盒马》app开发技术分享-- 回收订单页功能完善（45）

## 技术栈

Appgallery connect

## 开发准备

上一节我们实现了订单的待取件、已取消状态展示，并且成功实现了修改订单状态后的列表刷新，实现了云端数据的修改，这一节我们来实现订单页剩下的两个板块的业务逻辑，分别是运输中、已完成状态下的列表展示以及订单状态的修改

## 功能分析

要实现运输中、已完成订单状态我们分别要先实现tab切换时组件刷新的方法，根据对应的index来实现当前页面的刷新，然后在刷新方法中请求云数据库的数据展示到页面上，通过userid与ordertype去筛选对应的订单，取出符合要求的数据，在不同的状态栏中我们还需要实现修改当前点击订单的状态，实现本地列表的更新和云端订单状态的修改

## 代码实现

首先实现运输中页面

```c

@State currentIndexCheck: number = 2

@Prop @Watch("onRefresh") currentIndex:number=0

async onRefresh(): Promise<void> {

if (this.currentIndexCheck==this.currentIndex) {

let databaseZone = cloudDatabase.zone('default');

let condition = new cloudDatabase.DatabaseQuery(recycle_info);

condition.equalTo("user_id",this.user?.user_id).and().equalTo("order_type",2)

let listData = await databaseZone.query(condition);

let json = JSON.stringify(listData)

let data1:RecycleInfo[]= JSON.parse(json)

this.orderList=data1

this.flag=true

}

}

```

在这里通过刷新方法来请求云端数据根据条件查询拿到对应的数据集合，展示到列表中

```c

List({space:10}){

ForEach(this.orderList,(item:RecycleInfo,index:number)=>{

ListItem(){

Column({space:10}){

Row(){

Text("订单编号："+item.express_code)

.fontColor(Color.Black)

.fontSize(14)

Text("运输中")

.fontColor(Color.Black)

.fontSize(14)

}

.justifyContent(FlexAlign.SpaceBetween)

.width('100%')

Row({space:10}){

Image($r('app.media.background'))

.height(40)

.width(40)

.borderRadius(5)

Column({space:10}){

Text("回收品类 衣帽鞋包")

.fontColor(Color.Black)

.fontSize(14)

Text("预约时间 "+item.create_time)

.fontColor(Color.Black)

.fontSize(14)

Text("联系方式 "+item.phone)

.fontColor(Color.Black)

.fontSize(14)

Text("取件地址 "+item.address)

.fontColor(Color.Black)

.fontSize(14)

}.alignItems(HorizontalAlign.Start)

}

.margin({top:10})

.alignItems(VerticalAlign.Top)

.width('100%')

.justifyContent(FlexAlign.Start)

Row({space:10}){

Text()

Blank()

Text("订单完成")

.fontColor(Color.Black)

.fontSize(12)

.padding(5)

.borderRadius(10)

.backgroundColor(Color.Pink)

}

.width('100%')

}

.padding(10)

.backgroundColor(Color.White)

.borderRadius(10)

.width('100%')

.justifyContent(FlexAlign.SpaceBetween)

}

})

}

```

然后在订单中通过点击订单完成按钮完成对订单状态的修改

```c

Text("订单完成")

.fontColor(Color.Black)

.fontSize(12)

.padding(5)

.borderRadius(10)

.backgroundColor(Color.Pink)

.onClick(async ()=>{

let data=new recycle_info()

data.id=item.id

data.user_id=item.user_id

data.nike_name=item.nike_name

data.phone=item.phone

data.address=item.address

data.day=item.day

data.start_time=item.start_time

data.end_time=item.end_time

data.msg=item.msg

data.weight_id=item.weight_id

data.create_time=item.create_time

data.express_code=item.express_code

data.express_people=item.express_people

data.express_company=item.express_company

data.order_type=3

data.logistics_id=item.logistics_id

let num = await databaseZone.upsert(data);

hilog.info(0x0000, 'testTag', `Succeeded in upserting data, result: ${num}`);

if (num>0) {

this.onRefresh()

showToast("订单已完成")

}

})

```

然后我们的已完成订单页面，我们如法炮制

```c

@State currentIndexCheck: number = 3

@Prop @Watch("onRefresh") currentIndex:number=0

async onRefresh(): Promise<void> {

if (this.currentIndexCheck==this.currentIndex) {

let databaseZone = cloudDatabase.zone('default');

let condition = new cloudDatabase.DatabaseQuery(recycle_info);

condition.equalTo("user_id",this.user?.user_id).and().equalTo("order_type",3)

let listData = await databaseZone.query(condition);

let json = JSON.stringify(listData)

let data1:RecycleInfo[]= JSON.parse(json)

this.orderList=data1

this.flag=true

}

}

```

因为已完成页面不需要修改订单状态，仅需要展示，所以数据查询出来之后直接展示到list中即可

```c

List({space:10}){

ForEach(this.orderList,(item:RecycleInfo,index:number)=>{

ListItem(){

Column({space:10}){

Row(){

Text("订单编号："+item.express_code)

.fontColor(Color.Black)

.fontSize(14)

Text("已完成")

.fontColor(Color.Black)

.fontSize(14)

}

.justifyContent(FlexAlign.SpaceBetween)

.width('100%')

Row({space:10}){

Image($r('app.media.background'))

.height(40)

.width(40)

.borderRadius(5)

Column({space:10}){

Text("回收品类 衣帽鞋包")

.fontColor(Color.Black)

.fontSize(14)

Text("预约时间 "+item.create_time)

.fontColor(Color.Black)

.fontSize(14)

Text("联系方式 "+item.phone)

.fontColor(Color.Black)

.fontSize(14)

Text("取件地址 "+item.address)

.fontColor(Color.Black)

.fontSize(14)

}.alignItems(HorizontalAlign.Start)

}

.margin({top:10})

.alignItems(VerticalAlign.Top)

.width('100%')

.justifyContent(FlexAlign.Start)

Row({space:10}){

Text()

Blank()

}

.width('100%')

}

.padding(10)

.backgroundColor(Color.White)

.borderRadius(10)

.width('100%')

.justifyContent(FlexAlign.SpaceBetween)

}

})

}

.padding(10)