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

鸿蒙小林
• 阅读 3

技术栈

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<string, boolean>)['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<string, string>)['info']
    if (params!=null&&params!=undefined) {
      this.orderInfo=JSON.parse(params)
    }
  }
  onPageShow(): void {
    let params = (this.getUIContext().getRouter().getParams() as Record<string, string>)['address']
    if (params!=''&&params!=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}})
          }
        })

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

鸿蒙开发
点赞
收藏
评论区
推荐文章
鸿蒙小林 鸿蒙小林
•
4小时前
《仿盒马》app开发技术分享-- 确认订单页（数据展示）（29）
技术栈Appgalleryconnect开发准备上一节我们实现了地址的添加，那么有了地址之后我们接下来的重点就可以放到订单生成上了，我们在购物车页面，点击结算会跳转到一个订单确认页面，在这个页面我们需要有地址选择、加购列表展示、价格计算、优惠计算、商品数量
3
0
0
鸿蒙小林 鸿蒙小林
•
4小时前
《仿盒马》app开发技术分享-- 确认订单页（业务逻辑）（30）
技术栈Appgalleryconnect开发准备上一节我们实现了确认订单页的页面绘制和价格计算优惠计算，订单列表展示等功能，这一节我们来实现确认订单页的整个业务逻辑。首先我们要实现的就是地址的选择，然后把我们计算的价格，商品列表等数据保存起来，然后我们开始
3
0
0
鸿蒙小林 鸿蒙小林
•
4小时前
《仿盒马》app开发技术分享-- 订单详情页（32）
技术栈Appgalleryconnect开发准备在之前的章节中我们实现了订单的提交，以及提交之后跳转到确认订单页面，在确认订单页面我们添加了一个入口，这个入口是查询订单，当我们点击入口时，我们需要跳转到一个新的界面，这个界面通过接收上个界面的订单id或者订
4
0
0
鸿蒙小林 鸿蒙小林
•
4小时前
《仿盒马》app开发技术分享-- 订单列表页（33）
技术栈Appgalleryconnect开发准备上一节我们实现了订单详情的展示，但是我们的确认订单页面只在下单成功后才会出现供用户查看，现在我们要有一个常驻的入口让用户去随时查看自己的订单以及订单状态，订单状态分为多个，还需要给用户提供切换的功能功能分析要
3
0
0
鸿蒙小林 鸿蒙小林
•
4小时前
《仿盒马》app开发技术分享-- 旧物回收订单列表（43）
技术栈Appgalleryconnect开发准备上一节我们实现了订单的创建，并且成功吧数据提交到云数据库中，这一节我们实现的内容是展示我们提交的订单列表功能分析要实现订单列表的展示，首先我们要查询对应用户下的订单列表，查询出对应的订单列表后，展示出对应的数
3
0
0
鸿蒙小林 鸿蒙小林
•
4小时前
《仿盒马》app开发技术分享-- 回收记录页（47）
技术栈Appgalleryconnect开发准备上一节我们实现了在订单列表中查看订单详情，但是我们的回收相关的营收就必须要进入到商品详情页才能够进行查看，如果我们在订单较多的情况下，一个一个的查看订单的详情就会变得非常的麻烦了，现在我们需要实现一个订单记录
3
0
0
鸿蒙小林 鸿蒙小林
•
4小时前
《仿盒马》app开发技术分享-- 兑换订单提交（73）
技术栈Appgalleryconnect开发准备上一节我们实现了兑换提交前的准备页面，向用户展示了兑换相关的所有信息，这一节我们就可以实现兑换订单的提交了功能分析订单提交我们需要创建对应的兑换商品订单提交信息表，我们需要把地址，商品信息，积分，备注，订单状
3
0
0
鸿蒙小林 鸿蒙小林
•
4小时前
《仿盒马》app开发技术分享-- 订单提交逻辑完善（74）
技术栈Appgalleryconnect开发准备上一节我们实现了兑换订单的提交功能，并且成功的把数据提交到云端,但是我们的业务逻辑并没有完全实现，我们只是把数据提交到了云端，但我们的积分还存在，我们回到积分数据查看的页面也没有消费积分的记录，这一节我们要实
3
0
0
鸿蒙小林 鸿蒙小林
•
4小时前
《仿盒马》app开发技术分享-- 兑换订单列表框架（75）
技术栈Appgalleryconnect开发准备上一节我们针对订单兑换的业务逻辑进行了完善，成功的在兑换物品之后修改了用户信息的修改，新增了积分消费的记录。这一节我们实现订单创建之后进入的列表展示页框架。功能分析兑换商品的订单列表框架我们选择使用tabs，
3
0
0
鸿蒙小林 鸿蒙小林
•
4小时前
《仿盒马》app开发技术分享-- 待发货兑换订单列表（76）
技术栈Appgalleryconnect开发准备上一节我们实现了兑换订单展示页面的框架，这一节我们要进行兑换订单的展示，在兑换订单提交后，默认的状态是待发货状态，我们用列表的方式展示出来功能分析进入页面时我们就要通过用户的userid去查询对应的订单，获取
3
0
0
鸿蒙小林
鸿蒙小林
Lv1
鸿蒙原生应用系列开发
文章
90
粉丝
0
获赞
0
热门文章
《仿盒马》app开发技术分享-- 地图选点（27）
《仿盒马》app开发技术分享-- 积分页组件新增（64）
《仿盒马》app开发技术分享-- 逻辑优化第三弹（83）
《仿盒马》app开发技术分享-- 定位获取（25）
《仿盒马》app开发技术分享-- 个人信息页（23）