《仿盒马》app开发技术分享-- 回收订单状态修改与展示（44）

鸿蒙小林
• 阅读 5

技术栈

Appgallery connect

开发准备

上一节我们实现了订单列表页，但是我们的订单列表又分为很多的订单状态，我们在订单列表页取出的数据是所有的数据，订单的状态我们还需要进行一些操作，如果都在一起，对用户来说非常的不友好，所以我们需要把它修改为不同状态下展示不同的列表，同时我们实现订单的取消，以及已取消订单的列表查看

功能分析

想要在一个页面中展示多个订单页面，我们需要先把主页面的布局更换位tabs，我们把对应的组件放入TabContent中，然后在待取件状列表展示中点击对应的取消预约按钮，修改当前订单的type，查询时根据userid和ordertype去查询列表

代码实现

首先修改主页为tabs

import { CommonTopBar } from '../../widget/CommonTopBar';
import { CancelOrderList } from './CancelOrderList';
import { IncompleteOrderList } from './IncompleteOrderList';
@Entry
@Component
struct OrderListPage {
  @State currentIndex: number = 0

  @State fontColor: string = '#182431';
  @State selectedFontColor: string = '#007DFF';
  @State selectedIndex: number = 0;
  private controller: TabsController = new TabsController();

  @Builder tabBuilder(index: number, name: string) {
    Column() {
      Text(name)
        .fontColor(this.selectedIndex === index ? this.selectedFontColor : this.fontColor)
        .fontSize(16)
        .fontWeight(this.selectedIndex === index ? 500 : 400)
        .lineHeight(22)
        .margin({ top: 17, bottom: 7 })
      Divider()
        .strokeWidth(2)
        .width(40)
        .color('#007DFF')
        .opacity(this.selectedIndex === index ? 1 : 0)
    }.width('100%')
  }

  build() {
    Column() {
      CommonTopBar({ title: "我的订单", alpha: 0, titleAlignment: TextAlign.Center ,backButton:true})
      Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.controller }) {
        TabContent() {
          Column(){
            IncompleteOrderList({currentIndex:this.currentIndex})
          }.width('100%').height('100%')
        }.tabBar(this.tabBuilder(0, '待取件'))

        TabContent() {
          Column(){
            CancelOrderList({currentIndex:this.currentIndex})
          }.width('100%').height('100%')
        }.tabBar(this.tabBuilder(1, '已取消'))

        TabContent() {
          Column(){
          }.width('100%').height('100%')
        }.tabBar(this.tabBuilder(2, '运输中'))

        TabContent() {
          Column(){
          }.width('100%').height('100%')
        }.tabBar(this.tabBuilder(3, '已完成'))
      }
      .vertical(false)
      .barMode(BarMode.Fixed)
      .barWidth('100%')
      .barHeight(56)
      .animationDuration(0)
      .onChange((index: number) => {
        this.currentIndex = index;
        this.selectedIndex = index;
      })
      .onAnimationStart((index: number, targetIndex: number, event: TabsAnimationEvent) => {
        if (index === targetIndex) {
          return;
        }
        this.selectedIndex = targetIndex;
      })
      .width('100%')
      .height('100%')
      .backgroundColor('#F1F3F5')
    }.width('100%')
  }
}

创建代取件组件，根据userid、ordertype查询对应的待取件列表

import { User } from '../../entity/User';
import { StorageUtils } from '../../utils/StorageUtils';
import { cloudDatabase } from '@kit.CloudFoundationKit';
import { recycle_info } from '../../clouddb/recycle_info';
import { RecycleInfo } from '../../entity/RecycleInfo';
import { hilog } from '@kit.PerformanceAnalysisKit';
import showToast from '../../utils/ToastUtils';

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

@Component
export struct IncompleteOrderList {
  @State user: User|null=null;
  @State orderList:RecycleInfo[]=[]
  @State flag:boolean=false

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

  async onRefresh(): Promise<void> {
    if (this.currentIndexCheck==this.currentIndex) {
      let databaseZone = cloudDatabase.zone('default');
      let condition = new cloudDatabase.DatabaseQuery(recycle_info);
      condition.equalTo("user_id",this.user?.user_id).and().equalTo("order_type",0)
      let listData = await databaseZone.query(condition);
      let json = JSON.stringify(listData)
      let data1:RecycleInfo[]= JSON.parse(json)
      this.orderList=data1
      this.flag=true
    }
  }
  async aboutToAppear(): Promise<void> {
    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)
    let listData = await databaseZone.query(condition);
    let json = JSON.stringify(listData)
    let data:RecycleInfo[]= JSON.parse(json)
    this.orderList=data
    hilog.info(0x0000, 'testTag', `Succeeded in querying data, result: ${data}`);

    this.flag=true
  }


  build() {
    Column() {
      if (this.flag)
      {
        List({space:10}){
          ForEach(this.orderList,(item:RecycleInfo,index:number)=>{
            ListItem(){
              Column({space:10}){
                Row(){
                  Text("订单编号："+item.express_code)
                    .fontColor(Color.Black)
                    .fontSize(14)

                  Text("待取件")
                    .fontColor(Color.Black)
                    .fontSize(14)
                }
                .justifyContent(FlexAlign.SpaceBetween)
                .width('100%')

                Row({space:10}){
                  Image($r('app.media.background'))
                    .height(40)
                    .width(40)
                    .borderRadius(5)

                  Column({space:10}){
                    Text("回收品类  衣帽鞋包")
                      .fontColor(Color.Black)
                      .fontSize(14)


                    Text("预约时间  "+item.create_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)
                    .border({width:1,color:Color.Grey})

                }
                .width('100%')


              }
              .padding(10)
              .backgroundColor(Color.White)
              .borderRadius(10)
              .width('100%')
              .justifyContent(FlexAlign.SpaceBetween)
            }
          })
        }
        .padding(10)
      }



    }
    .backgroundColor("#f7f7f7")
    .height('100%')
    .width('100%')
  }
}

取消预约按钮处，修改订单对应订单的状态

.onClick(async ()=>{
                      let data=new recycle_info()
                      data.id=item.id
                      data.user_id=item.user_id
                      data.nike_name=item.nike_name
                      data.phone=item.phone
                      data.address=item.address
                      data.day=item.day
                      data.start_time=item.start_time
                      data.end_time=item.end_time
                      data.msg=item.msg
                      data.weight_id=item.weight_id
                      data.create_time=item.create_time
                      data.express_code=item.express_code
                      data.express_people=item.express_people
                      data.express_company=item.express_company
                      data.order_type=1
                      data.logistics_id=item.logistics_id
                      let num = await databaseZone.upsert(data);
                      hilog.info(0x0000, 'testTag', `Succeeded in upserting data, result: ${num}`);
                      if (num>0) {
                        this.onRefresh()
                        showToast("取消成功")
                      }
                    })

已取消订单查询和展示

首先查询对应的取消订单列表

  let databaseZone = cloudDatabase.zone('default');
      let condition = new cloudDatabase.DatabaseQuery(recycle_info);
      condition.equalTo("user_id",this.user?.user_id).and().equalTo("order_type",1)
      let listData = await databaseZone.query(condition);
      let json = JSON.stringify(listData)
      let data1:RecycleInfo[]= JSON.parse(json)
      this.orderList=data1
      this.flag=true

对应的列表展示（完整代码）

import { User } from '../../entity/User';
import { StorageUtils } from '../../utils/StorageUtils';
import { cloudDatabase } from '@kit.CloudFoundationKit';
import { recycle_info } from '../../clouddb/recycle_info';
import { RecycleInfo } from '../../entity/RecycleInfo';
import { hilog } from '@kit.PerformanceAnalysisKit';
let databaseZone = cloudDatabase.zone('default');

@Component
export struct CancelOrderList {
  @State user: User|null=null;
  @State orderList:RecycleInfo[]=[]
  @State flag:boolean=false

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

  async onRefresh(): Promise<void> {
    if (this.currentIndexCheck==this.currentIndex) {
      let databaseZone = cloudDatabase.zone('default');
      let condition = new cloudDatabase.DatabaseQuery(recycle_info);
      condition.equalTo("user_id",this.user?.user_id).and().equalTo("order_type",1)
      let listData = await databaseZone.query(condition);
      let json = JSON.stringify(listData)
      let data1:RecycleInfo[]= JSON.parse(json)
      this.orderList=data1
      this.flag=true
    }
  }
  async aboutToAppear(): Promise<void> {
    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)
    let listData = await databaseZone.query(condition);
    let json = JSON.stringify(listData)
    let data:RecycleInfo[]= JSON.parse(json)
    this.orderList=data
    hilog.info(0x0000, 'testTag', `Succeeded in querying data, result: ${data}`);

    this.flag=true
  }


  build() {
    Column() {
      if (this.flag)
      {
        List({space:10}){
          ForEach(this.orderList,(item:RecycleInfo,index:number)=>{
            ListItem(){
              Column({space:10}){
                Row(){
                  Text("订单编号："+item.express_code)
                    .fontColor(Color.Black)
                    .fontSize(14)

                  Text("已取消")
                    .fontColor(Color.Black)
                    .fontSize(14)
                }
                .justifyContent(FlexAlign.SpaceBetween)
                .width('100%')

                Row({space:10}){
                  Image($r('app.media.background'))
                    .height(40)
                    .width(40)
                    .borderRadius(5)

                  Column({space:10}){
                    Text("回收品类  衣帽鞋包")
                      .fontColor(Color.Black)
                      .fontSize(14)


                    Text("预约时间  "+item.create_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)
              }
              .padding(10)
              .backgroundColor(Color.White)
              .borderRadius(10)
              .width('100%')
              .justifyContent(FlexAlign.SpaceBetween)
            }
          })
        }
        .padding(10)
      }
    }
    .backgroundColor("#f7f7f7")
    .height('100%')
    .width('100%')
  }
}

到这里我们就实现了待取件订单的取消以及已取消订单的展示

鸿蒙开发
点赞
收藏
评论区
推荐文章
鸿蒙小林 鸿蒙小林
•
12小时前
《仿盒马》app开发技术分享-- 确认订单页（业务逻辑）（30）
技术栈Appgalleryconnect开发准备上一节我们实现了确认订单页的页面绘制和价格计算优惠计算，订单列表展示等功能，这一节我们来实现确认订单页的整个业务逻辑。首先我们要实现的就是地址的选择，然后把我们计算的价格，商品列表等数据保存起来，然后我们开始
7
0
0
鸿蒙小林 鸿蒙小林
•
12小时前
《仿盒马》app开发技术分享-- 订单列表页（33）
技术栈Appgalleryconnect开发准备上一节我们实现了订单详情的展示，但是我们的确认订单页面只在下单成功后才会出现供用户查看，现在我们要有一个常驻的入口让用户去随时查看自己的订单以及订单状态，订单状态分为多个，还需要给用户提供切换的功能功能分析要
6
0
0
鸿蒙小林 鸿蒙小林
•
12小时前
《仿盒马》app开发技术分享-- 旧物回收订单列表（43）
技术栈Appgalleryconnect开发准备上一节我们实现了订单的创建，并且成功吧数据提交到云数据库中，这一节我们实现的内容是展示我们提交的订单列表功能分析要实现订单列表的展示，首先我们要查询对应用户下的订单列表，查询出对应的订单列表后，展示出对应的数
8
0
0
鸿蒙小林 鸿蒙小林
•
12小时前
《仿盒马》app开发技术分享-- 回收订单页功能完善（45）
技术栈Appgalleryconnect开发准备上一节我们实现了订单的待取件、已取消状态展示，并且成功实现了修改订单状态后的列表刷新，实现了云端数据的修改，这一节我们来实现订单页剩下的两个板块的业务逻辑，分别是运输中、已完成状态下的列表展示以及订单状态的修
7
0
0
鸿蒙小林 鸿蒙小林
•
12小时前
《仿盒马》app开发技术分享-- 回收订单详情页（46）
技术栈Appgalleryconnect开发准备上一节我们实现了订单列表的所有功能，展示了待取件、已取消、运输中、已完成等订单列表的数据展示，并且在对应的订单中点击功能按钮实现了订单的状态切换，这一节我们就要通过点击对应列表内的订单进入相应的订单详情页，展
7
0
0
鸿蒙小林 鸿蒙小林
•
12小时前
《仿盒马》app开发技术分享-- 回收记录页（47）
技术栈Appgalleryconnect开发准备上一节我们实现了在订单列表中查看订单详情，但是我们的回收相关的营收就必须要进入到商品详情页才能够进行查看，如果我们在订单较多的情况下，一个一个的查看订单的详情就会变得非常的麻烦了，现在我们需要实现一个订单记录
6
0
0
鸿蒙小林 鸿蒙小林
•
12小时前
《仿盒马》app开发技术分享-- 兑换订单列表框架（75）
技术栈Appgalleryconnect开发准备上一节我们针对订单兑换的业务逻辑进行了完善，成功的在兑换物品之后修改了用户信息的修改，新增了积分消费的记录。这一节我们实现订单创建之后进入的列表展示页框架。功能分析兑换商品的订单列表框架我们选择使用tabs，
6
0
0
鸿蒙小林 鸿蒙小林
•
12小时前
《仿盒马》app开发技术分享-- 待发货兑换订单列表（76）
技术栈Appgalleryconnect开发准备上一节我们实现了兑换订单展示页面的框架，这一节我们要进行兑换订单的展示，在兑换订单提交后，默认的状态是待发货状态，我们用列表的方式展示出来功能分析进入页面时我们就要通过用户的userid去查询对应的订单，获取
5
0
0
鸿蒙小林 鸿蒙小林
•
12小时前
《仿盒马》app开发技术分享-- 兑换商品确认揽收&待收货列表展示（78）
技术栈Appgalleryconnect开发准备上一节我们实现了订单取消功能，实现了tabs切换时的数据刷新，实现了已取消订单的列表展示。这一节我们要实现揽收功能，并且实现待收货的列表展示功能功能分析当我们点击确认揽收的时候，修改订单状态ordertype
7
0
0
鸿蒙小林 鸿蒙小林
•
12小时前
《仿盒马》app开发技术分享-- 兑换商品收货确认&已完成列表展示（79）
技术栈Appgalleryconnect开发准备上一节我们实现了兑换商品订单的确认揽收功能，实现了tabs切换时的数据刷新，实现了待收货订单的列表展示。这一节我们要实现确认收货功能，并且实现待收货的列表展示功能功能分析当我们点击确认揽收的时候，修改订单状态
7
0
0
鸿蒙小林
鸿蒙小林
Lv1
鸿蒙原生应用系列开发
文章
90
粉丝
0
获赞
0
热门文章
《仿盒马》app开发技术分享-- 个人信息页（23）
《仿盒马》app开发技术分享-- 地图选点（27）
《仿盒马》app开发技术分享-- 优惠券展示页（57）
《仿盒马》app开发技术分享-- 积分页组件新增（64）
《仿盒马》app开发技术分享-- 回收金提现（53）