## 技术栈
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
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
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
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
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%')
}
}
```
到这里我们就实现了待取件订单的取消以及已取消订单的展示