《仿盒马》app开发技术分享-- 确认订单页（业务逻辑）（30）

鸿蒙小林
• 阅读 4

技术栈

Appgallery connect

开发准备

上一节我们实现了确认订单页的页面绘制和价格计算优惠计算，订单列表展示等功能，这一节我们来实现确认订单页的整个业务逻辑。首先我们要实现的就是地址的选择，然后把我们计算的价格，商品列表等数据保存起来，然后我们开始创建订单表实体类等，把这些数据提交到订单表中

功能分析

要想实现确认订单的功能，首先我们要创建对应的表，我们需要注意的数据有当前订单对应的userid，表的id，以及表携带的数据，订单的创建时间，完成时间，退单时间，订单编号，付款方式，备注等，还要注意商品列表多条时如何有效插入和查询的问题

代码实现

首先我们来实现一下备注弹窗 import showToast from "../utils/ToastUtils"; import { cloudDatabase } from "@kit.CloudFoundationKit"; import { user_info } from "../clouddb/user_info"; import { UserInfo } from "../entity/UserInfo"; import { hilog } from "@kit.PerformanceAnalysisKit";

@Preview @CustomDialog export struct OrderRemarkDialog { controller: CustomDialogController; @Link str: string ; build() { Column({space:20}) {

  Text("备注")
    .fontSize($r('app.float.size_20'))
    .fontWeight(FontWeight.Bold)
    .fontColor(Color.Black)
    .margin({top:20})

  TextArea({text:this.str})
    .backgroundColor("#f6f6f6")
    .placeholderColor("#ff999595")
    .fontColor("#333333")
    .height(150)
    .maxLength(50)
    .onChange((value: String) => {
      if (value.length>50) {
        showToast("最多50个字呦~")
        return
      }else {
        this.str = value.toString()
      }
    })
    .margin(20)
  Row(){
    Text("取消")
      .width('30%')
      .textAlign(TextAlign.Center)
      .height(40)
      .fontSize(18)
      .fontColor(Color.White)
      .backgroundColor(0xff0000)
      .borderRadius(30)
      .margin({top:30})
      .onClick(()=>{
        this.str=''
          this.controller.close()
      })

    Text("确认")
      .width('30%')
      .textAlign(TextAlign.Center)
      .height(40)
      .fontSize(18)
      .fontColor(Color.White)
      .backgroundColor(0xff0000)
      .borderRadius(30)
      .margin({top:30})
      .onClick(async ()=>{
        if (this.str!='') {
         this.controller.close()
        }else {
          this.str=''
          this.controller.close()

        }
      })
  }
  .width('100%')
  .justifyContent(FlexAlign.SpaceAround)


}
.borderRadius({topLeft:20,topRight:20})
.justifyContent(FlexAlign.Start)
.backgroundColor(Color.White)
.height(400)
.width('100%')

} } 在确认订单页面去调用 orderController: CustomDialogController| null = new CustomDialogController({ builder: OrderRemarkDialog({ str:this.remark

}),
alignment: DialogAlignment.Bottom,
customStyle:true

}); 订单说明添加点击事件，唤起弹窗 Text(this.remark!=""?this.remark:"选填，请写明备注内容") .fontColor(Color.Gray) .fontSize(12) .onClick(()=>{ this.orderController?.open() }) ，我们只需要定义好对应的变量去接受值即可： 如下 @State remark:string=''

接下来我们先获取保存的用户信息 定义 @State user: User|null=null; 接收
const value = await StorageUtils.getAll('user'); if (value != "") { this.user=JSON.parse(value) } 然后我们在提价订单的按钮添加点击事件 Text("提交订单") .fontColor(Color.White) .padding(10) .borderRadius(10) .backgroundColor("#d81e06") .fontSize(14) .onClick(()=>{

    })

接下来开始上云操作，首先创建保存商品列表的表，实体，db类 { "objectTypeName": "order_product_list", "fields": [ {"fieldName": "id", "fieldType": "Integer", "notNull": true, "belongPrimaryKey": true}, {"fieldName": "order_product_id", "fieldType": "Integer", "notNull": true, "defaultValue": 0}, {"fieldName": "img", "fieldType": "String"}, {"fieldName": "price", "fieldType": "Double"}, {"fieldName": "name", "fieldType": "String"}, {"fieldName": "originalPrice", "fieldType": "Double"}, {"fieldName": "spec", "fieldType": "String"}, {"fieldName": "buyAmount", "fieldType": "Integer"} ], "indexes": [ {"indexName": "field1Index", "indexList": [{"fieldName":"id","sortType":"ASC"}]} ], "permissions": [ {"role": "World", "rights": ["Read", "Upsert", "Delete"]}, {"role": "Authenticated", "rights": ["Read", "Upsert", "Delete"]}, {"role": "Creator", "rights": ["Read", "Upsert", "Delete"]}, {"role": "Administrator", "rights": ["Read", "Upsert", "Delete"]} ] }

实体

class OrderProductList { id: number; order_product_id: number = 0; img: string; price: number; name: string; originalPrice: number; spec: string; buyAmount: number;

constructor() {
}



setId(id: number): void {
    this.id = id;
}

getId(): number  {
    return this.id;
}

setOrder_product_id(order_product_id: number): void {
    this.order_product_id = order_product_id;
}

getOrder_product_id(): number  {
    return this.order_product_id;
}

setImg(img: string): void {
    this.img = img;
}

getImg(): string  {
    return this.img;
}

setPrice(price: number): void {
    this.price = price;
}

getPrice(): number  {
    return this.price;
}

setName(name: string): void {
    this.name = name;
}

getName(): string  {
    return this.name;
}

setOriginalPrice(originalPrice: number): void {
    this.originalPrice = originalPrice;
}

getOriginalPrice(): number  {
    return this.originalPrice;
}

setSpec(spec: string): void {
    this.spec = spec;
}

getSpec(): string  {
    return this.spec;
}

setBuyAmount(buyAmount: number): void {
    this.buyAmount = buyAmount;
}

getBuyAmount(): number  {
    return this.buyAmount;
}

static parseFrom(inputObject: any): OrderProductList {
    let result = new OrderProductList();
    if (!inputObject) {
        return result;
    }
    if (inputObject.id) {
        result.id = inputObject.id;
    }
    if (inputObject.order_product_id) {
        result.order_product_id = inputObject.order_product_id;
    }
    if (inputObject.img) {
        result.img = inputObject.img;
    }
    if (inputObject.price) {
        result.price = inputObject.price;
    }
    if (inputObject.name) {
        result.name = inputObject.name;
    }
    if (inputObject.originalPrice) {
        result.originalPrice = inputObject.originalPrice;
    }
    if (inputObject.spec) {
        result.spec = inputObject.spec;
    }
    if (inputObject.buyAmount) {
        result.buyAmount = inputObject.buyAmount;
    }
    return result;
}

}

export { OrderProductList };

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

class order_product_list extends cloudDatabase.DatabaseObject { public id: number; public order_product_id = 0; public img: string; public price: number; public name: string; public originalPrice: number; public spec: string; public buyAmount: number;

public naturalbase_ClassName(): string { return 'order_product_list'; } }

export { order_product_list }; 因为商品是多条的，我们直接在for循环中执行添加方法即可

在提交订单的点击事件中添加修改数据库方法 let databaseZone = cloudDatabase.zone('default'); try { for (let i = 0; i < this.productList.length; i++) { let productPush = new order_product_list(); productPush.id=this.codeId+i productPush.order_product_id=this.codeId productPush.img=this.productList[i].productImgAddress productPush.price=this.productList[i].productPrice productPush.name=this.productList[i].productName productPush.originalPrice=this.productList[i].productOriginalPrice productPush.spec=this.productList[i].productSpecName productPush.buyAmount=this.productList[i].buyAmount let num = await databaseZone.upsert(productPush); hilog.info(0x0000, 'testTag', Succeeded in upserting data, result: ${num}); } }catch (e) { hilog.info(0x0000, 'testTag', Succeeded in upserting data, result: ${e}); } 点击提交订单然后插入的数据

然后我们创建订单表，通过order_product_id我们来实现两张表的数据串联查询 { "objectTypeName": "order_list", "fields": [ {"fieldName": "id", "fieldType": "Integer", "notNull": true, "belongPrimaryKey": true}, {"fieldName": "user_id", "fieldType": "Integer", "notNull": true, "defaultValue": 0}, {"fieldName": "order_code", "fieldType": "String"}, {"fieldName": "order_status", "fieldType": "Integer"}, {"fieldName": "order_product_id", "fieldType": "String"}, {"fieldName": "address", "fieldType": "String"}, {"fieldName": "nickname", "fieldType": "String"}, {"fieldName": "phone", "fieldType": "String"}, {"fieldName": "order_remark", "fieldType": "String"}, {"fieldName": "pay_type", "fieldType": "String"}, {"fieldName": "order_create_time", "fieldType": "String"}, {"fieldName": "order_pay_time", "fieldType": "String"}, {"fieldName": "order_delivery_time", "fieldType": "String"}, {"fieldName": "order_over_time", "fieldType": "String"}

], "indexes": [ {"indexName": "field1Index", "indexList": [{"fieldName":"id","sortType":"ASC"}]} ], "permissions": [ {"role": "World", "rights": ["Read", "Upsert", "Delete"]}, {"role": "Authenticated", "rights": ["Read", "Upsert", "Delete"]}, {"role": "Creator", "rights": ["Read", "Upsert", "Delete"]}, {"role": "Administrator", "rights": ["Read", "Upsert", "Delete"]} ] } 实体

class OrderList { id: number; user_id: number = 0; order_code: string; order_status: number; order_product_id: string; address: string; nickname: string; phone: string; order_remark: string; pay_type: string; order_create_time: string; order_pay_time: string; order_delivery_time: string; order_over_time: string;

constructor() {
}



setId(id: number): void {
    this.id = id;
}

getId(): number  {
    return this.id;
}

setUser_id(user_id: number): void {
    this.user_id = user_id;
}

getUser_id(): number  {
    return this.user_id;
}

setOrder_code(order_code: string): void {
    this.order_code = order_code;
}

getOrder_code(): string  {
    return this.order_code;
}

setOrder_status(order_status: number): void {
    this.order_status = order_status;
}

getOrder_status(): number  {
    return this.order_status;
}

setOrder_product_id(order_product_id: string): void {
    this.order_product_id = order_product_id;
}

getOrder_product_id(): string  {
    return this.order_product_id;
}

setAddress(address: string): void {
    this.address = address;
}

getAddress(): string  {
    return this.address;
}

setNickname(nickname: string): void {
    this.nickname = nickname;
}

getNickname(): string  {
    return this.nickname;
}

setPhone(phone: string): void {
    this.phone = phone;
}

getPhone(): string  {
    return this.phone;
}

setOrder_remark(order_remark: string): void {
    this.order_remark = order_remark;
}

getOrder_remark(): string  {
    return this.order_remark;
}

setPay_type(pay_type: string): void {
    this.pay_type = pay_type;
}

getPay_type(): string  {
    return this.pay_type;
}

setOrder_create_time(order_create_time: string): void {
    this.order_create_time = order_create_time;
}

getOrder_create_time(): string  {
    return this.order_create_time;
}

setOrder_pay_time(order_pay_time: string): void {
    this.order_pay_time = order_pay_time;
}

getOrder_pay_time(): string  {
    return this.order_pay_time;
}

setOrder_delivery_time(order_delivery_time: string): void {
    this.order_delivery_time = order_delivery_time;
}

getOrder_delivery_time(): string  {
    return this.order_delivery_time;
}

setOrder_over_time(order_over_time: string): void {
    this.order_over_time = order_over_time;
}

getOrder_over_time(): string  {
    return this.order_over_time;
}

static parseFrom(inputObject: any): OrderList {
    let result = new OrderList();
    if (!inputObject) {
        return result;
    }
    if (inputObject.id) {
        result.id = inputObject.id;
    }
    if (inputObject.user_id) {
        result.user_id = inputObject.user_id;
    }
    if (inputObject.order_code) {
        result.order_code = inputObject.order_code;
    }
    if (inputObject.order_status) {
        result.order_status = inputObject.order_status;
    }
    if (inputObject.order_product_id) {
        result.order_product_id = inputObject.order_product_id;
    }
    if (inputObject.address) {
        result.address = inputObject.address;
    }
    if (inputObject.nickname) {
        result.nickname = inputObject.nickname;
    }
    if (inputObject.phone) {
        result.phone = inputObject.phone;
    }
    if (inputObject.order_remark) {
        result.order_remark = inputObject.order_remark;
    }
    if (inputObject.pay_type) {
        result.pay_type = inputObject.pay_type;
    }
    if (inputObject.order_create_time) {
        result.order_create_time = inputObject.order_create_time;
    }
    if (inputObject.order_pay_time) {
        result.order_pay_time = inputObject.order_pay_time;
    }
    if (inputObject.order_delivery_time) {
        result.order_delivery_time = inputObject.order_delivery_time;
    }
    if (inputObject.order_over_time) {
        result.order_over_time = inputObject.order_over_time;
    }
    return result;
}

}

export { OrderList };

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

class order_list extends cloudDatabase.DatabaseObject { public id: number; public user_id = 0; public order_code: string; public order_status: number; public order_product_id: string; public address: string; public nickname: string; public phone: string; public order_remark: string; public pay_type: string; public order_create_time: string; public order_pay_time: string; public order_delivery_time: string; public order_over_time: string;

public naturalbase_ClassName(): string { return 'order_list'; } }

export { order_list };

都添加完成后我们直接在提交按钮的点击事件中继续添加对应的数据

          let orderPush = new order_list();
          orderPush.id=Math.floor(Math.random() * 1000000)
          orderPush.user_id=this.user!.user_id
          orderPush.order_product_id=String(this.codeId)
          orderPush.order_code=this.generateOrderNo(10)
          orderPush.order_status=0
          if (this.remark!='') {
            orderPush.order_remark=this.remark
          }
          orderPush.address=this.addressInfo.address
          orderPush.nickname=this.addressInfo.nikeName
          orderPush.phone=this.addressInfo.phone
          orderPush.order_create_time=this.formatCurrentDate()
          orderPush.order_pay_time=this.formatCurrentDate()
          let num = await databaseZone.upsert(orderPush);
          hilog.info(0x0000, 'testTag', `Succeeded in upserting data, result: ${num}`);

到这里我们的确认订单页面业务逻辑就实现了

鸿蒙开发
点赞
收藏
评论区
推荐文章
鸿蒙小林 鸿蒙小林
•
6小时前
《仿盒马》app开发技术分享-- 确认订单页（数据展示）（29）
技术栈Appgalleryconnect开发准备上一节我们实现了地址的添加，那么有了地址之后我们接下来的重点就可以放到订单生成上了，我们在购物车页面，点击结算会跳转到一个订单确认页面，在这个页面我们需要有地址选择、加购列表展示、价格计算、优惠计算、商品数量
4
0
0
鸿蒙小林 鸿蒙小林
•
6小时前
《仿盒马》app开发技术分享-- 旧物回收订单列表（43）
技术栈Appgalleryconnect开发准备上一节我们实现了订单的创建，并且成功吧数据提交到云数据库中，这一节我们实现的内容是展示我们提交的订单列表功能分析要实现订单列表的展示，首先我们要查询对应用户下的订单列表，查询出对应的订单列表后，展示出对应的数
5
0
0
鸿蒙小林 鸿蒙小林
•
6小时前
《仿盒马》app开发技术分享-- 回收订单页功能完善（45）
技术栈Appgalleryconnect开发准备上一节我们实现了订单的待取件、已取消状态展示，并且成功实现了修改订单状态后的列表刷新，实现了云端数据的修改，这一节我们来实现订单页剩下的两个板块的业务逻辑，分别是运输中、已完成状态下的列表展示以及订单状态的修
4
0
0
鸿蒙小林 鸿蒙小林
•
6小时前
《仿盒马》app开发技术分享-- 回收订单详情页（46）
技术栈Appgalleryconnect开发准备上一节我们实现了订单列表的所有功能，展示了待取件、已取消、运输中、已完成等订单列表的数据展示，并且在对应的订单中点击功能按钮实现了订单的状态切换，这一节我们就要通过点击对应列表内的订单进入相应的订单详情页，展
4
0
0
鸿蒙小林 鸿蒙小林
•
6小时前
《仿盒马》app开发技术分享--确认订单选择优惠券（59）
技术栈Appgalleryconnect开发准备在上一节我们实现了在确认订单页查询优惠券，但是我们并没有其他优惠券相关的逻辑，我们的目的还是在订单结算的时候去使用我们对应的优惠券，现在我们要在确认订单页去进行优惠券的选择，为了方便用户操作，我们以弹窗的形式
3
0
0
鸿蒙小林 鸿蒙小林
•
6小时前
《仿盒马》app开发技术分享-- 兑换订单列表框架（75）
技术栈Appgalleryconnect开发准备上一节我们针对订单兑换的业务逻辑进行了完善，成功的在兑换物品之后修改了用户信息的修改，新增了积分消费的记录。这一节我们实现订单创建之后进入的列表展示页框架。功能分析兑换商品的订单列表框架我们选择使用tabs，
4
0
0
鸿蒙小林 鸿蒙小林
•
6小时前
《仿盒马》app开发技术分享-- 兑换商品取消订单&取消列表展示（77）
技术栈Appgalleryconnect开发准备上一节我们实现了兑换订单待发货列表的展示逻辑，成功的在列表中展示出来，我们在订单条目中新增了两个按钮，确认揽收与取消订单，这一节我们要实现的功能是订单的取消，以及订单取消后取消列表的展示功能分析要实现订单取消
3
0
0
鸿蒙小林 鸿蒙小林
•
6小时前
《仿盒马》app开发技术分享-- 兑换商品确认揽收&待收货列表展示（78）
技术栈Appgalleryconnect开发准备上一节我们实现了订单取消功能，实现了tabs切换时的数据刷新，实现了已取消订单的列表展示。这一节我们要实现揽收功能，并且实现待收货的列表展示功能功能分析当我们点击确认揽收的时候，修改订单状态ordertype
4
0
0
鸿蒙小林 鸿蒙小林
•
6小时前
《仿盒马》app开发技术分享-- 兑换商品收货确认&已完成列表展示（79）
技术栈Appgalleryconnect开发准备上一节我们实现了兑换商品订单的确认揽收功能，实现了tabs切换时的数据刷新，实现了待收货订单的列表展示。这一节我们要实现确认收货功能，并且实现待收货的列表展示功能功能分析当我们点击确认揽收的时候，修改订单状态
4
0
0
鸿蒙小林 鸿蒙小林
•
6小时前
《仿盒马》app开发技术分享-- 逻辑优化第二弹（82）
技术栈Appgalleryconnect开发准备这一节我们继续对我们已有的业务逻辑进行优化，在积分兑换完商品后我们回到积分展示页面发现积分的数量并没有减少，而是重新进入才会发生变化，上一节我们实现商城订单的确认揽收之后继续在待收货页面实现确认揽收按钮的业务
3
0
0
鸿蒙小林
鸿蒙小林
Lv1
鸿蒙原生应用系列开发
文章
90
粉丝
0
获赞
0
热门文章
《仿盒马》app开发技术分享-- 回收金提现（53）
《仿盒马》app开发技术分享-- 旧物回收页（提交云端）（42）
《仿盒马》app开发技术分享-- 个人信息页（23）
《仿盒马》app开发技术分享-- 地图选点（27）
《仿盒马》app开发技术分享--确认订单选择优惠券（59）