当前位置：首页 > news >正文

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

news 2025/6/26 18:32:14

技术栈

Appgallery connect

开发准备

上一节我们实现了兑换订单展示页面的框架，这一节我们要进行兑换订单的展示，在兑换订单提交后，默认的状态是待发货状态，我们用列表的方式展示出来

功能分析

进入页面时我们就要通过用户的userid去查询对应的订单，获取到订单返回的列表数据后通过list展示到tabcontent中

代码实现

进入页面后先获取用户信息

 const value = await StorageUtils.getAll('user');if (value != "") {this.user = JSON.parse(value)}

根据用户的userid查询出对应的兑换订单列表

  @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=datahilog.error(0x0000, 'testTag', `Failed to query data, code: ${data}`);}}}

条目展示

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中引用自定义组件传入刚才查询出的列表

 TabContent() {Column(){PointsItem({orderList:this.pointsList})}.width('100%').height('100%')}.tabBar(this.tabBuilder(0, '待发货'))

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

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

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

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