《仿盒马》app开发技术分享-- 待发货兑换订单列表（76）

## 技术栈

Appgallery connect

## 开发准备

上一节我们实现了兑换订单展示页面的框架，这一节我们要进行兑换订单的展示，在兑换订单提交后，默认的状态是待发货状态，我们用列表的方式展示出来，这样用户就可以在页面中通过上下滑动查看当前用户下未完成订单的列表。

## 功能分析

首先我们实现订单列表，我们采用list组件去进行展示，进入页面时我们在生命周期中，查询当前用户存储的用户信息，然后我们通过用户的userid去查询对应的订单，在查询方法中获取到订单返回的列表数据后通过list展示到tabcontent中

## 代码实现

进入页面后先获取用户信息，用户信息我们还是要从用户首选项中进行查询。查询出对应的用户信息之后，我们先定义一个变量来接收用户信息

```css

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

if (value != "") {

this.user = JSON.parse(value)

}

```

拿到用户的信息之后，根据用户的userid查询出对应的兑换订单列表，我们创建一个变量去接收数据，使用equalTo方法条件查询出对应的订单类表，拿到订单列表后，赋值给创建的变量

```css

@State pointsList:PointsOrderInfo[]=[]

async aboutToAppear(): Promise<void> {

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

if (value != "") {

this.user = JSON.parse(value)

if (this.user != null) {

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

let condition = new cloudDatabase.DatabaseQuery(points_order_info);

condition.equalTo("user_id", this.user?.user_id)

let listData = await databaseZone.query(condition);

let json = JSON.stringify(listData)

let data: PointsOrderInfo[] = JSON.parse(json)

this.pointsList=data

hilog.error(0x0000, 'testTag', `Failed to query data, code: ${data}`);

}

}

}

```

接下来我们进行条目数据的展示，针对数据我们要进行修改，所以在组件中我们使用@link去修饰，这样我们就实现了数据的双向绑定，同步修改，不管是在主页面修改变量的内容，还是在组件中修改变量的内容，我们都能够实时的获取新的值

```css

import { PointsOrderInfo } from '../../../entity/PointsOrderInfo'

@Component

export struct PointsItem{

@Link orderList:PointsOrderInfo[]

build() {

Column(){

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("确认揽收")

.fontColor(Color.Black)

.fontSize(12)

.padding(5)

.borderRadius(10)

.backgroundColor(Color.Pink)

Text("取消预约")

.fontColor(Color.Black)

.fontSize(12)

.padding(5)

.borderRadius(10)

.border({width:1,color:Color.Grey})

}

.width('100%')

}

.padding(10)

.backgroundColor(Color.White)

.borderRadius(10)

.width('100%')

.justifyContent(FlexAlign.SpaceBetween)

.onClick(()=>{

})

}

})

}

.padding(10)

}

}

}

```

在tabcontent中引用自定义组件传入刚才查询出的列表

```css

TabContent() {

Column(){

PointsItem({orderList:this.pointsList})

}.width('100%').height('100%')

}.tabBar(this.tabBuilder(0, '待发货'))

```

在确认兑换成功后跳转到兑换订单展示页

```css

router.replaceUrl({url:"pages/recycle/points/PointsOrderListPage"})

```

积分展示页新增列表展示入口

```css

.onClick(()=>{

switch (item.name) {

case "积分等级":

router.pushUrl({url:''})

break;

case "兑换订单":

router.pushUrl({url:'pages/recycle/points/PointsOrderListPage'})

break;

case "积分兑换":

router.pushUrl({url:'pages/recycle/points/PointsProductPage'})

break;

default:

break;

}

})

```

到这里我们就实现了待取件订单列表