《仿盒马》app开发技术分享-- 兑换商品收货确认&已完成列表展示（79）

## 技术栈

Appgallery connect

## 开发准备

上一节我们实现了兑换商品订单的确认揽收功能，实现了tabs切换时的数据刷新，实现了待收货订单的列表展示。这一节我们要实现确认收货功能，并且实现待收货的列表展示功能

## 功能分析

当我们点击确认揽收的时候，修改订单状态ordertype为3，同时刷新待收货订单列表的内容，切换tabs的时候，刷新已完成列表中的数据

## 代码实现

首先我们在待收货列表确认收货按钮实现修改订单状态的逻辑

```css

Text("确认收货")

.fontColor(Color.Black)

.fontSize(12)

.padding(5)

.borderRadius(10)

.backgroundColor(Color.Pink)

.onClick(async ()=>{

let order=new points_order_info()

order.id=item.id

order.user_id=String(this.user!.user_id)

order.order_code=item.order_code

order.url=item.url

order.name=item.name

order.order_type=3

order.points=item.points

order.msg=item.msg

order.amount=1

order.nike_name=item.nike_name

order.address=item.address

order.phone=item.phone

order.crete_time=item.crete_time

order.success_time=this.thisTime()

let num = await databaseZone.upsert(order);

if (num>0) {

showToast("您的订单已完成！")

this.onRefresh()

}

})

```

修改完成之后我们查询已完成列表

```css

@State currentIndexCheck: number = 3

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

@State orderList:PointsOrderInfo[]=[]

@State user: User|null=null

async onRefresh(){

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

if (this.user != null) {

let condition = new cloudDatabase.DatabaseQuery(points_order_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 data: PointsOrderInfo[] = JSON.parse(json)

this.orderList=data

}

}

}

async aboutToAppear(): Promise<void> {

const value = await StorageUtils.getAll('user');

if (value != "") {

this.user = JSON.parse(value)

if (this.user != null) {

let condition = new cloudDatabase.DatabaseQuery(points_order_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 data: PointsOrderInfo[] = JSON.parse(json)

this.orderList=data

}

}

}

```

加载列表内容

```css

List({space:10}){

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

ListItem(){

Column({space:10}){

Row(){

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

.fontColor(Color.Black)

.fontSize(14)

Text("订单已完成，感谢您的使用！")

.fontColor(Color.Black)

.fontSize(14)

}

.justifyContent(FlexAlign.SpaceBetween)

.width('100%')

Row({space:10}){

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

.height(40)

.width(40)

.borderRadius(5)

Column({space:10}){

Text("商品类型 积分兑换")

.fontColor(Color.Black)

.fontSize(14)

Text("兑换时间 "+item.crete_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("完成时间:"+item.success_time)

.fontColor(Color.Black)

.fontSize(12)

.padding(5)

}

.width('100%')

}

.padding(10)

.backgroundColor(Color.White)

.borderRadius(10)

.width('100%')

.justifyContent(FlexAlign.SpaceBetween)

}

})

}

.padding(10)

```

到这里我们就实现了兑换商品的确认收货功能，展示了已完成兑换商品列表