《仿盒马》app开发技术分享-- 订单地址修改（31）

  • 鸿蒙小林

    2025-06-26 20:31:39
  • HTML5
  • 原创



## 技术栈


Appgallery connect

## 开发准备

上一节我们实现了订单备注弹窗，订单商品列表的提交，订单列表的提交，提交之后的业务逻辑我们并没有去处理，那么订单提交之后我们需要进入到什么页面呢？这时候我们需要一个过渡页面，它能给我们提供更多的订单相关的入口，帮助用户去确认内容，或者查看订单相关内容

## 功能分析

要实现这样一个页面，首先我们要做的就是在这个页面我们能拿到用户的信息，对应的订单id，这样的话我们就可以通过一个查询订单的按钮或者入口进入到订单的详情界面，然后我们需要有一个地址确认的页面，这能帮助用户核对地址的准确性，同时我们还需要提供一个地址修改的信息展示，辅助用户进行错误地址的修改


## 代码实现

首先我们来实现，点击事件的跳转，在提交订单按钮添加要跳转的页面路径和传递过去的值（要在提交成功后跳转）


 let num = await databaseZone.upsert(orderPush);

          if (num>0) {

            router.back({url:'pages/view/OrderSuccessPage',params:{status:true}})

          }

然后在订单状态页面接收数据，展示查看订单的入口和当前订单的地址信息


```

import { OrderList } from '../entity/OrderList';

import showToast from '../utils/ToastUtils';

import { router } from '@kit.ArkUI';

import { CommonTopBar } from '../widget/CommonTopBar';


@Entry

@Component

struct OrderSuccessPage {

  @State orderInfo:OrderList|null=null

  @State addressSuccess:boolean=false

  @State isSuccess:boolean=false

  onPageShow(): void {

    let params = (this.getUIContext().getRouter().getParams() as Record)['status']

    if (params!=undefined){

      this.isSuccess=params

    }

  }

  aboutToAppear(): void {

    const params = this.getUIContext().getRouter().getParams() as OrderList;

    if (params!=null) {

      this.orderInfo=params

    }

  }

  build() {

    Column() {

      CommonTopBar({ title: "订单状态", alpha: 0, titleAlignment: TextAlign.Center ,backButton:true})

      Column({space:15}){

        Row({space:10}){

          Image($r('app.media.order_success'))

            .height(30)

            .width(30)

          Text("下单成功!")

            .fontSize(24)

            .fontColor(Color.Black)

            .fontWeight(FontWeight.Bold)

        }

        Text("您的包裹正准备发出，请保持联系通畅哦～～")

          .fontSize(16)

          .fontColor(Color.Black)


        Text("查看订单")

          .fontSize(16)

          .fontColor(Color.Black)

          .padding(10)

          .borderRadius(10)

          .border({width:1,color:Color.Grey})

          .onClick(()=>{

            showToast("订单号是："+this.orderInfo!.order_code)

          })

      }

      .padding(30)


      Column({space:10}){

        Text("收货地址")

          .fontSize(16)

          .fontColor(Color.Black)


          Row(){

            Text(this.orderInfo?.nickname)

              .fontColor(Color.Black)

              .fontSize(16)

              .fontWeight(FontWeight.Bold)

            Text(this.orderInfo?.phone)

              .fontColor(Color.Black)

              .fontSize(16)

              .fontWeight(FontWeight.Bold)

              .margin({left:20})

          }

          Text(this.orderInfo?.address)

            .fontColor(Color.Black)

            .fontSize(16)

        Row({space:10}){

          Text()

          Blank()

          Text("修改地址")

            .fontSize(14)

            .fontColor(Color.Black)

            .padding(5)

            .borderRadius(5)

            .border({width:1,color:Color.Grey})

            .visibility(this.addressSuccess?Visibility.None:Visibility.Visible)

            .onClick(()=>{

              router.pushUrl({url:'pages/view/EditOrderAddressPage',params:{info:JSON.stringify(this.orderInfo)}})

            })




          Text("确认地址")

            .fontSize(14)

            .fontColor(Color.Black)

            .padding(5)

            .borderRadius(5)

            .backgroundColor(Color.White)

            .onClick(()=>{

              this.addressSuccess=true

            })

        }

        .width('100%')

        .justifyContent(FlexAlign.SpaceBetween)

      }

      .backgroundColor("#fff6db95")

      .padding(20)

      .width('90%')

      .borderRadius(10)

      .alignItems(HorizontalAlign.Start)



    }

    .backgroundColor(Color.White)

    .height('100%')

    .width('100%')

  }

}

```

我们执行一下代码，看看效果



订单详情我们到下一节实现，现在我们点击地址修改


这里定义一个变量

  @State addressSuccess:boolean=false

当我们不需要修改地址，点击确认地址之后，我们要隐藏对应的修改地址按钮


相关代码：

.visibility(this.addressSuccess?Visibility.None:Visibility.Visible)


这时修改地址按钮已经消失了


当我们的地址需要修改，我们点击修改地址按钮，来到订单地址修改页，我们依旧要接收对应的数据集在当前页面加载，我们展示的内容有当前选择的地址，以及要修改的地址，要修改的地址我们从地址列表也重新选择实现


```

import { OrderList } from '../entity/OrderList';

import { router } from '@kit.ArkUI';

import { AddressList } from '../entity/AddressList';

import { cloudDatabase } from '@kit.CloudFoundationKit';

import { order_list } from '../clouddb/order_list';

import { CommonTopBar } from '../widget/CommonTopBar';


@Entry

@Component

struct EditOrderAddressPage {

  @State orderInfo:OrderList|null=null

  @State addressInfo:AddressList|null=null


  aboutToAppear(): void {


    let params = (this.getUIContext().getRouter().getParams() as Record)['info']

    if (params!=null&¶ms!=undefined) {

      this.orderInfo=JSON.parse(params)

    }

  }

  onPageShow(): void {

    let params = (this.getUIContext().getRouter().getParams() as Record)['address']

    if (params!=''&¶ms!=undefined){

      this.addressInfo=JSON.parse(params)

    }

  }

  build() {

    Column() {

      CommonTopBar({ title: "订单地址修改", alpha: 0, titleAlignment: TextAlign.Center ,backButton:true})


      Row({space:15}){

        Image($r('app.media.edit_address_notice'))

          .height(15)

          .width(15)


        Text("提示：地址仅可以修改一次，请谨慎修改！！！")

          .fontSize(14)

          .fontColor(Color.Black)

      }

      .width('100%')

      .height(50)

      .alignItems(VerticalAlign.Center)

      .padding(10)

      .backgroundColor("#ffe7bdbd")


      Column({space:20}){


        Column({space:10}){

          Text("原地址")

            .fontColor(Color.Black)

            .fontSize(14)

          Row(){

            Text(this.orderInfo?.nickname)

              .fontColor(Color.Black)

              .fontSize(14)

            Text(this.orderInfo?.phone)

              .fontColor(Color.Black)

              .fontSize(14)

          }

          Text(this.orderInfo?.address)

            .fontColor(Color.Black)

            .fontSize(14)

        }

        .borderRadius(10)

        .alignItems(HorizontalAlign.Start)

        .width('80%')

        .padding(10)

        .backgroundColor(Color.Pink)


        Column({space:10}){

          Row(){

            Text("新地址")

              .fontColor(Color.Black)

              .fontSize(14)

            Text("选择地址 >")

              .fontColor(Color.Black)

              .fontSize(14)

              .onClick(()=>{

                router.pushUrl({url:'pages/view/AddressListPage',params:{edit_status:true}})

              })

          }.width('100%')

          .justifyContent(FlexAlign.SpaceBetween)


          Row(){

            Text(this.addressInfo?.nikeName)

              .fontColor(Color.Black)

              .fontSize(14)

            Text(this.addressInfo?.phone)

              .fontColor(Color.Black)

              .fontSize(14)

          }

          Text(this.addressInfo?.address)

            .fontColor(Color.Black)

            .fontSize(14)

        }

        .alignItems(HorizontalAlign.Start)

        .width('80%')

        .padding(10)

        .backgroundColor(Color.Pink)

        .borderRadius(10)

      }

      .margin({top:20})

      .layoutWeight(1)


      Text("提交修改")

        .fontColor(Color.Black)

        .width('80%')

        .height(50)

        .backgroundColor(Color.Pink)

        .textAlign(TextAlign.Center)

        .margin({bottom:20})

        .borderRadius(10)

      


    }

    .backgroundColor(Color.White)

    .height('100%')

    .width('100%')

  }

}

```

未选择修改地址的状态,选择了地址之后.我们在提交修改按钮重新提交我们的订单信息，把新地址提交到云数据库


```

Text("提交修改")

        .fontColor(Color.Black)

        .width('80%')

        .height(50)

        .backgroundColor(Color.Pink)

        .textAlign(TextAlign.Center)

        .margin({bottom:20})

        .borderRadius(10)

        .onClick(async ()=>{

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

          let orderPush = new order_list();

          orderPush.id=this.orderInfo!.id

          orderPush.user_id=this.orderInfo!.user_id

          orderPush.order_product_id=this.orderInfo!.order_product_id

          orderPush.order_code=this.orderInfo!.order_code

          orderPush.order_status=this.orderInfo!.order_status

          orderPush.order_remark=this.orderInfo!.order_remark

          orderPush.address=this.addressInfo!.address

          orderPush.nickname=this.addressInfo!.nikeName

          orderPush.phone=this.addressInfo!.phone

          orderPush.order_create_time=this.orderInfo!.order_create_time

          orderPush.order_pay_time=this.orderInfo!.order_pay_time

          let num = await databaseZone.upsert(orderPush);

          if (num>0) {

            router.back({url:'pages/view/OrderSuccessPage',params:{status:true}})

          }

        })

```

到这里我们的地址修改主要功能就实现了，后续我们只需要打磨细节即可


请使用浏览器的分享功能分享到微信等