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

鸿蒙小林
• 阅读 7

技术栈

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

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

点赞
收藏
评论区
推荐文章
鸿蒙小林 鸿蒙小林
14小时前
《仿盒马》app开发技术分享-- 旧物回收订单列表(43)
技术栈Appgalleryconnect开发准备上一节我们实现了订单的创建,并且成功吧数据提交到云数据库中,这一节我们实现的内容是展示我们提交的订单列表功能分析要实现订单列表的展示,首先我们要查询对应用户下的订单列表,查询出对应的订单列表后,展示出对应的数
鸿蒙小林 鸿蒙小林
14小时前
《仿盒马》app开发技术分享-- 回收订单页功能完善(45)
技术栈Appgalleryconnect开发准备上一节我们实现了订单的待取件、已取消状态展示,并且成功实现了修改订单状态后的列表刷新,实现了云端数据的修改,这一节我们来实现订单页剩下的两个板块的业务逻辑,分别是运输中、已完成状态下的列表展示以及订单状态的修
鸿蒙小林 鸿蒙小林
14小时前
《仿盒马》app开发技术分享-- 回收订单详情页(46)
技术栈Appgalleryconnect开发准备上一节我们实现了订单列表的所有功能,展示了待取件、已取消、运输中、已完成等订单列表的数据展示,并且在对应的订单中点击功能按钮实现了订单的状态切换,这一节我们就要通过点击对应列表内的订单进入相应的订单详情页,展
鸿蒙小林 鸿蒙小林
14小时前
《仿盒马》app开发技术分享-- 兑换商品详情(69)
技术栈Appgalleryconnect开发准备上一节我们实现了兑换商品列表的展示,用户可以在回收之后通过积分页面进入兑换列表页查看当前能够兑换的商品了,我们距离一个完整的app又更近了一步,现在我们要实现的就是当用户点击列表条目的时候能够查看数据详情。功
鸿蒙小林 鸿蒙小林
14小时前
《仿盒马》app开发技术分享-- 兑换订单提交(73)
技术栈Appgalleryconnect开发准备上一节我们实现了兑换提交前的准备页面,向用户展示了兑换相关的所有信息,这一节我们就可以实现兑换订单的提交了功能分析订单提交我们需要创建对应的兑换商品订单提交信息表,我们需要把地址,商品信息,积分,备注,订单状
鸿蒙小林 鸿蒙小林
14小时前
《仿盒马》app开发技术分享-- 兑换订单列表框架(75)
技术栈Appgalleryconnect开发准备上一节我们针对订单兑换的业务逻辑进行了完善,成功的在兑换物品之后修改了用户信息的修改,新增了积分消费的记录。这一节我们实现订单创建之后进入的列表展示页框架。功能分析兑换商品的订单列表框架我们选择使用tabs,
鸿蒙小林 鸿蒙小林
14小时前
《仿盒马》app开发技术分享-- 兑换商品取消订单&取消列表展示(77)
技术栈Appgalleryconnect开发准备上一节我们实现了兑换订单待发货列表的展示逻辑,成功的在列表中展示出来,我们在订单条目中新增了两个按钮,确认揽收与取消订单,这一节我们要实现的功能是订单的取消,以及订单取消后取消列表的展示功能分析要实现订单取消
鸿蒙小林 鸿蒙小林
14小时前
《仿盒马》app开发技术分享-- 兑换商品确认揽收&待收货列表展示(78)
技术栈Appgalleryconnect开发准备上一节我们实现了订单取消功能,实现了tabs切换时的数据刷新,实现了已取消订单的列表展示。这一节我们要实现揽收功能,并且实现待收货的列表展示功能功能分析当我们点击确认揽收的时候,修改订单状态ordertype
鸿蒙小林 鸿蒙小林
14小时前
《仿盒马》app开发技术分享-- 兑换商品收货确认&已完成列表展示(79)
技术栈Appgalleryconnect开发准备上一节我们实现了兑换商品订单的确认揽收功能,实现了tabs切换时的数据刷新,实现了待收货订单的列表展示。这一节我们要实现确认收货功能,并且实现待收货的列表展示功能功能分析当我们点击确认揽收的时候,修改订单状态
鸿蒙小林 鸿蒙小林
14小时前
《仿盒马》app开发技术分享-- 逻辑优化第二弹(82)
技术栈Appgalleryconnect开发准备这一节我们继续对我们已有的业务逻辑进行优化,在积分兑换完商品后我们回到积分展示页面发现积分的数量并没有减少,而是重新进入才会发生变化,上一节我们实现商城订单的确认揽收之后继续在待收货页面实现确认揽收按钮的业务