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

## 技术栈

Appgallery connect

## 开发准备

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

## 功能分析

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

## 代码实现

首先修改主页为tabs

```c

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查询对应的待取件列表

```c

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%')

}

}

```

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

```c

.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("取消成功")

}

})

```

已取消订单查询和展示

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

```c

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

```

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

```c

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%')

}

}

```

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