写点什么

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

作者:鸿蒙小林
  • 2025-06-30
    浙江
  • 本文字数:6945 字

    阅读完需:约 23 分钟

技术栈

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@CustomDialogexport 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+iproductPush.order_product_id=this.codeIdproductPush.img=this.productList[i].productImgAddressproductPush.price=this.productList[i].productPriceproductPush.name=this.productList[i].productNameproductPush.originalPrice=this.productList[i].productOriginalPriceproductPush.spec=this.productList[i].productSpecNameproductPush.buyAmount=this.productList[i].buyAmountlet 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}`);
复制代码


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

用户头像

鸿蒙小林

关注

还未添加个人签名 2025-06-20 加入

还未添加个人简介

评论

发布
暂无评论
《仿盒马》app开发技术分享-- 确认订单页(业务逻辑)(30)_鸿蒙小林_InfoQ写作社区