《仿盒马》app开发技术分享-- 兑换商品取消订单&取消列表展示（77）

## 技术栈

Appgallery connect

开发准备

上一节我们实现了兑换订单待发货列表的展示逻辑，成功的在列表中展示出来，我们在订单条目中新增了两个按钮，确认揽收与取消订单，这一节我们要实现的功能是订单的取消，以及订单取消后取消列表的展示

功能分析

要实现订单取消的功能，我们需要在条目上点击取消预约按钮时对数据库点击条目的数据进行修改，同时刷新列表数据，把取消后的列表展示到页面上，同时当我们切换tabs页签的时候还要同步刷新组件的内容，保证数据的实时性

代码实现

首先我们实现取消功能，修改订单ordertype状态为1

  Text("取消订单")
                  .fontColor(Color.Black)
                  .fontSize(12)
                  .padding(5)
                  .borderRadius(10)
                  .border({width:1,color:Color.Grey})
                  .onClick(async ()=>{

                    let order=new points_order_info()
                    order.id=item.id
                    order.user_id=String(this.user!.user_id)
                    order.order_code=item.order_code
                    order.url=item.url
                    order.name=item.name
                    order.order_type=1
                    order.points=item.points
                    if (item.msg!='') {
                      order.msg=item.msg
                    }else {
                      order.msg="无"
                    }
                    order.amount=1
                    order.nike_name=item.nike_name
                    order.address=item.address
                    order.phone=item.phone
                    order.crete_time=item.crete_time
                    order.cancel_time=this.thisTime()
                    let num = await databaseZone.upsert(order);
                    if (num>0) {
                      showToast("兑换取消成功")
                    }
                  })

可以看到我们还需要获取用户id信息，我们从用户首选项里获取一下

 async aboutToAppear(): Promise<void> {
      const value = await StorageUtils.getAll('user');
      if (value != "") {
      this.user = JSON.parse(value)
    }
  }

然后我们实现tabs切换刷新的方法

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

  async onRefresh(){

    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).and().equalTo("order_type",0)
      let listData = await databaseZone.query(condition);
      let json = JSON.stringify(listData)
      let data: PointsOrderInfo[] = JSON.parse(json)
      this.orderList=data
    }
  }

  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).and().equalTo("order_type",0)
          let listData = await databaseZone.query(condition);
          let json = JSON.stringify(listData)
          let data: PointsOrderInfo[] = JSON.parse(json)
          this.orderList=data
        }
    }
  }

引用刷新方法

if (num>0) {
                      showToast("兑换取消成功")
                      this.onRefresh()
                    }

接下来我们实现取消订单列表的展示，新建取消订单组件

```css
import { points_order_info } from '../../../clouddb/points_order_info'
import { PointsOrderInfo } from '../../../entity/PointsOrderInfo'
import { User } from '../../../entity/User'
import { cloudDatabase } from '@kit.CloudFoundationKit';
import showToast from '../../../utils/ToastUtils';
import { StorageUtils } from '../../../utils/StorageUtils';
import { hilog } from '@kit.PerformanceAnalysisKit';

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

@Component
export struct  CancelPointsItem{
  @State currentIndexCheck: number = 1
  @Prop @Watch("onRefresh") currentIndex:number=0
  @State orderList:PointsOrderInfo[]=[]
  @State user: User|null=null

  async onRefresh(){
    if (this.currentIndexCheck==this.currentIndex) {
      if (this.user != null) {
        let condition = new cloudDatabase.DatabaseQuery(points_order_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 data: PointsOrderInfo[] = JSON.parse(json)
        this.orderList=data
      }
    }

  }

  async aboutToAppear(): Promise<void> {
      const value = await StorageUtils.getAll('user');
      if (value != "") {
      this.user = JSON.parse(value)
        if (this.user != null) {
          let condition = new cloudDatabase.DatabaseQuery(points_order_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 data: PointsOrderInfo[] = JSON.parse(json)
          this.orderList=data
        }
    }
  }
  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)



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

  thisTime(): string {
    const now = new Date();

    const year = now.getFullYear();
    const month = String(now.getMonth() + 1).padStart(2, '0');
    const day = String(now.getDate()).padStart(2, '0');
    const hours = String(now.getHours()).padStart(2, '0');
    const minutes = String(now.getMinutes()).padStart(2, '0');
    const seconds = String(now.getSeconds()).padStart(2, '0');

    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  }

}

到这里我们就实现了订单的取消和取消列表的展示