《仿盒马》app开发技术分享-- 回收记录页(47)

鸿蒙小林
• 阅读 6

技术栈

Appgallery connect

开发准备

上一节我们实现了在订单列表中查看订单详情,但是我们的回收相关的营收就必须要进入到商品详情页才能够进行查看,如果我们在订单较多的情况下,一个一个的查看订单的详情就会变得非常的麻烦了,现在我们需要实现一个订单记录查看页面,针对正在进行的订单,和已完成的订单,展示预估收益和收益统计。

功能分析

要实现这些功能首先我们在回收订单创建页面用回收记录按钮作为入口进入回收记录页面,然后我们查询运输中的订单计算出预估收益,展示到页面上,我们继续查询出已完成订单计算出已获得收益展示到页面上,同时通过列表的形式展示出已完成订单明细以及订单创建的时间

代码实现

首先我们拿到用户信息然后查询出对应的运输中订单跟已完成订单列表


 @State user: User|null=null;
  @State orderList_type_3:RecycleInfo[]=[]
  @State orderList_type_2:RecycleInfo[]=[]
 const value = await StorageUtils.getAll('user');
    if (value != "") {
      this.user = JSON.parse(value)
    }

    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 data:RecycleInfo[]= JSON.parse(json)
    this.orderList_type_3=data


    let condition1 = new cloudDatabase.DatabaseQuery(recycle_info);
    condition1.equalTo("user_id",this.user?.user_id).and().equalTo("order_type","2")
    let listData1 = await databaseZone.query(condition1);
    let json1 = JSON.stringify(listData1)
    let data1:RecycleInfo[]= JSON.parse(json1)
    this.orderList_type_2=data1

然后我们定义接收对应数据的参数根据查询到订单列表的weightid查询出对应的收益和积分


 @State execute_money:number=0
  @State success_money:number=0
  @State execute_integral:number=0
  @State success_integral:number=0

async executeOrder(){


    for (let i = 0; i < this.orderList_type_2.length; i++) {
      let condition = new cloudDatabase.DatabaseQuery(weight_info);
      condition.equalTo("weight_id",this.orderList_type_2[i].weight_id)
      let listData = await databaseZone.query(condition);
      let json = JSON.stringify(listData)
      let weightList:WeightInfo[]= JSON.parse(json)
      for (let j = 0; j <weightList.length; j++) {
        this.execute_money+=weightList[j].money
        this.execute_integral+=weightList[j].integral
      }
    }
  }

  async successOrder(){
    for (let i = 0; i < this.orderList_type_3.length; i++) {
      let condition = new cloudDatabase.DatabaseQuery(weight_info);
      condition.equalTo("weight_id",this.orderList_type_3[i].weight_id)
      let listData = await databaseZone.query(condition);
      let json = JSON.stringify(listData)
      let weightList:WeightInfo[]= JSON.parse(json)
      for (let j = 0; j <weightList.length; j++) {
        this.success_money+=weightList[j].money
        this.success_integral+=weightList[j].integral
      }
    }
  }

 async aboutToAppear(): Promise<void> {
    this.executeOrder()
    this.successOrder()
  }

获取到内容之后我们填充到页面上

```css build() { if (this.flag){ Column() { CommonTopBar({ title: "回收记录", alpha: 0, titleAlignment: TextAlign.Center ,backButton:true}) Row(){ Column({space:10}){ Text("待结算收益") .fontSize(14) .fontColor(Color.Black) .fontWeight(FontWeight.Bold) Text("¥"+String(this.execute_money)) .fontSize(14) .fontColor(Color.Red)

        Text(String(this.execute_integral))
          .fontSize(14)
          .fontColor(Color.Black)
      }
      .alignItems(HorizontalAlign.Center)
      .justifyContent(FlexAlign.Center)
      .height(100)
      .width('45%')
      .borderRadius(10)
      .border({width:1,color:Color.Grey})

      Column({space:10}){
        Text("已结算收益统计")
          .fontSize(14)
          .fontColor(Color.Black)
          .fontWeight(FontWeight.Bold)
        Text("¥"+String(this.success_money))
          .fontSize(14)
          .fontColor(Color.Black)


        Text(String(this.success_integral))
          .fontSize(14)
          .fontColor(Color.Black)
      }
      .alignItems(HorizontalAlign.Center)
      .justifyContent(FlexAlign.Center)
      .height(100)
      .width('45%')
      .borderRadius(10)
      .border({width:1,color:Color.Grey})
    }
    .padding(10)
    .width('100%')
    .justifyContent(FlexAlign.SpaceBetween)

    Text("已完成订单").width('100%')
      .textAlign(TextAlign.Start)
      .fontSize(18)
      .fontColor(Color.Black)
      .padding(10)
    List({space:10}){
      ForEach(this.orderList_type_3,(item:RecycleInfo,index:number)=>{
        ListItem(){
          Column(){
            Column({space:10}){
              Row(){
                Text(item.nike_name)
                  .fontColor(Color.Black)
                  .fontSize(16)
                  .fontWeight(FontWeight.Bold)
                Text(item?.phone)
                  .fontColor(Color.Black)
                  .fontSize(16)
                  .fontWeight(FontWeight.Bold)
                  .margin({left:20})
              }

              Text(item.create_time)
                .fontSize(14)
                .fontColor(Color.Gray)

              Row(){
                Text()
                Blank()


              }
              .width('100%')
            }
            .padding(10)
            .alignItems(HorizontalAlign.Start)
            .width('100%')
          }
        }
      })
    }
  }
  .backgroundColor(Color.White)
  .height('100%')
  .width('100%')
}

}

点赞
收藏
评论区
推荐文章
鸿蒙小林 鸿蒙小林
16小时前
《仿盒马》app开发技术分享-- 确认订单页(业务逻辑)(30)
技术栈Appgalleryconnect开发准备上一节我们实现了确认订单页的页面绘制和价格计算优惠计算,订单列表展示等功能,这一节我们来实现确认订单页的整个业务逻辑。首先我们要实现的就是地址的选择,然后把我们计算的价格,商品列表等数据保存起来,然后我们开始
鸿蒙小林 鸿蒙小林
16小时前
《仿盒马》app开发技术分享-- 订单地址修改(31)
技术栈Appgalleryconnect开发准备上一节我们实现了订单备注弹窗,订单商品列表的提交,订单列表的提交,提交之后的业务逻辑我们并没有去处理,那么订单提交之后我们需要进入到什么页面呢?这时候我们需要一个过渡页面,它能给我们提供更多的订单相关的入口,
鸿蒙小林 鸿蒙小林
16小时前
《仿盒马》app开发技术分享-- 订单列表页(33)
技术栈Appgalleryconnect开发准备上一节我们实现了订单详情的展示,但是我们的确认订单页面只在下单成功后才会出现供用户查看,现在我们要有一个常驻的入口让用户去随时查看自己的订单以及订单状态,订单状态分为多个,还需要给用户提供切换的功能功能分析要
鸿蒙小林 鸿蒙小林
16小时前
《仿盒马》app开发技术分享-- 回收订单状态修改与展示(44)
技术栈Appgalleryconnect开发准备上一节我们实现了订单列表页,但是我们的订单列表又分为很多的订单状态,我们在订单列表页取出的数据是所有的数据,订单的状态我们还需要进行一些操作,如果都在一起,对用户来说非常的不友好,所以我们需要把它修改为不同状
鸿蒙小林 鸿蒙小林
16小时前
《仿盒马》app开发技术分享-- 回收订单详情页(46)
技术栈Appgalleryconnect开发准备上一节我们实现了订单列表的所有功能,展示了待取件、已取消、运输中、已完成等订单列表的数据展示,并且在对应的订单中点击功能按钮实现了订单的状态切换,这一节我们就要通过点击对应列表内的订单进入相应的订单详情页,展
鸿蒙小林 鸿蒙小林
16小时前
《仿盒马》app开发技术分享-- 兑换商品详情(69)
技术栈Appgalleryconnect开发准备上一节我们实现了兑换商品列表的展示,用户可以在回收之后通过积分页面进入兑换列表页查看当前能够兑换的商品了,我们距离一个完整的app又更近了一步,现在我们要实现的就是当用户点击列表条目的时候能够查看数据详情。功
鸿蒙小林 鸿蒙小林
16小时前
《仿盒马》app开发技术分享-- 兑换订单列表框架(75)
技术栈Appgalleryconnect开发准备上一节我们针对订单兑换的业务逻辑进行了完善,成功的在兑换物品之后修改了用户信息的修改,新增了积分消费的记录。这一节我们实现订单创建之后进入的列表展示页框架。功能分析兑换商品的订单列表框架我们选择使用tabs,
鸿蒙小林 鸿蒙小林
16小时前
《仿盒马》app开发技术分享-- 兑换商品取消订单&取消列表展示(77)
技术栈Appgalleryconnect开发准备上一节我们实现了兑换订单待发货列表的展示逻辑,成功的在列表中展示出来,我们在订单条目中新增了两个按钮,确认揽收与取消订单,这一节我们要实现的功能是订单的取消,以及订单取消后取消列表的展示功能分析要实现订单取消
鸿蒙小林 鸿蒙小林
16小时前
《仿盒马》app开发技术分享-- 兑换商品收货确认&已完成列表展示(79)
技术栈Appgalleryconnect开发准备上一节我们实现了兑换商品订单的确认揽收功能,实现了tabs切换时的数据刷新,实现了待收货订单的列表展示。这一节我们要实现确认收货功能,并且实现待收货的列表展示功能功能分析当我们点击确认揽收的时候,修改订单状态
鸿蒙小林 鸿蒙小林
16小时前
《仿盒马》app开发技术分享-- 兑换商品订单详情页(80)
技术栈Appgalleryconnect开发准备我们的兑换商品列表相关的功能都已经实现的差不多了,现在我们还缺少一个订单详情查看的功能,为了ui一致性,我们的订单详情页样式要保持一致性,外观要跟订单、回收单的详情页相似。功能分析要实现订单详情首先我们需要拿