AI 助理
备案控制台
开发者社区 数据库 文章 正文

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

2025-06-23 34
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 上一节我们实现了确认订单页的页面绘制和价格计算优惠计算，订单列表展示等功能，这一节我们来实现确认订单页的整个业务逻辑。首先我们要实现的就是地址的选择，然后把我们计算的价格，商品列表等数据保存起来，然后我们开始创建订单表实体类等，把这些数据提交到订单表中

技术栈

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}`);

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

文章标签：
数据库
关键词：
APP逻辑
APP技术分享
APP技术分享逻辑
仿盒马APP技术分享订单页
uuraaig4ala36
目录
相关文章
uuraaig4ala36
|
24天前
《仿盒马》app开发技术分享-- 确认订单页（数据展示）（29）
上一节我们实现了地址的添加，那么有了地址之后我们接下来的重点就可以放到订单生成上了，我们在购物车页面，点击结算会跳转到一个 订单确认页面，在这个页面我们需要有地址选择、加购列表展示、价格计算、优惠计算、商品数量展示等信息。
uuraaig4ala36
33 3
uuraaig4ala36
|
24天前
|
定位技术
《仿盒马》app开发技术分享-- 地图选点（27）
上一节我们实现了地图的简单展示，这一节我们要实现的内容是，根据展示的地图，实现当前定位功能，当前位置的poi地址功能，以及列表的展示，给地图添加标记，展示自己的当前定位
uuraaig4ala36
39 4
uuraaig4ala36
|
24天前
|
定位技术 API
《仿盒马》app开发技术分享-- 原生地图展示（26）
上一节我们实现了获取当前用户的位置，并且成功的拿到了经纬度，这一节我们就要根据拿到的经纬度，结合我们其他的知识点来实现地图的展示。
uuraaig4ala36
44 4
uuraaig4ala36
|
24天前
|
存储 定位技术 数据库
《仿盒马》app开发技术分享-- 新增地址（28）
上一节我们实现了地图选点，获取当前位置，在地图上添加标记，根据当前的定位获取poi地址列表等功能，这些全部都为了我们这一节而铺垫，这一节我们要实现的是新增地址，把我们的用户信息，填写收件人、门牌号、手机号、经纬度、详细地址等信息添加到我们的云数据库中，然后在地址查询列表里展示出来。
uuraaig4ala36
30 2
uuraaig4ala36
|
24天前
|
前端开发
《仿盒马》app开发技术分享-- 个人中心页or静态头像选择（业务逻辑）（22）
上一节我们实现了登录页面的业务逻辑，并且成功的实现了数据的查询，同时我们新增了用户首选项的工具类，现在主界面往登录页面跳转，登录成功后我们关闭登录页面，这时候我们就会回到个人中心页面，那么现在我们的业务逻辑是一种什么样的形式？登录成功后我们需要显示用户的信息，并且在下次登录时依旧展示个人信息。同时我们还新增了一个头像选择的静态弹窗，丰富个人信息页面
uuraaig4ala36
30 1
uuraaig4ala36
|
24天前
|
前端开发 定位技术
《仿盒马》app开发技术分享-- 定位获取（25）
上一节我们实现了地址管理页面的数据查询和展示，接下来我们要实现的功能是地址添加相关的，我们想实现的功能是地图选点，那么在地图选点之前我们要做的就是先获取用户当前的定位。获取定位后我们拿到经纬度和其他信息，然后在对应的地图上展示。
uuraaig4ala36
27 0
uuraaig4ala36
|
24天前
|
JSON 前端开发 数据库
《仿盒马》app开发技术分享-- 地址管理页（24）
上一节我们实现了个人信息页面的信息展示和页面修改，并且实现了数据的同步修改，这一节我们来实现电商应用里比较重要的模块，地址模块。首先我们来实现地址的展示。
uuraaig4ala36
27 0
uuraaig4ala36
|
24天前
|
JSON 前端开发 数据库
《仿盒马》app开发技术分享-- 个人信息页（23）
上一节我们实现了个人中心的业务逻辑，实现了个人信息修改后的动态更换，而且实现了一个静态的头像选择弹窗，但是这个弹窗我们并没有使用。这一节我们在个人信息页面就会使用到这个弹窗并且还涉及其他的弹窗。以及信息的同步展示和修改
uuraaig4ala36
30 0
阿丘的记事本
|
3天前
|
人工智能 文字识别 小程序
旅游社用什么工具收报名 + 资料？不开发 App 也能自动收集信息
本文探讨了旅游行业中报名信息收集的常见痛点及解决方案，重点介绍了二维码表单工具在提升信息收集效率、简化操作流程方面的优势。通过对比多种工具，分析其适用场景与实际应用逻辑，为一线旅游从业者提供高效、低成本的执行参考。
阿丘的记事本
19 1
游客ilymke6ydhgpg
|
18天前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例：电影App
周末好！本文分享使用仓颉语言重构ArkTS实现的电影App案例，对比两者在UI布局、组件写法及语法差异。内容包括页面结构、列表分组、分类切换与电影展示等。通过代码演示仓颉在HarmonyOS开发中的应用。##仓颉##ArkTS##HarmonyOS开发
游客ilymke6ydhgpg
84 5

热门文章

最新文章

  • 1
    银行流水生成器在线制作，银行流水虚拟生成器app，h5+js+css【仅供学习用途】
  • 2
    仿真银行app下载安装， 银行卡虚拟余额制作app，用html+css+js实现逼真娱乐工具
  • 3
    病历单生成器在线制作，病历单生成器app，HTML+CSS+JS恶搞工具
  • 4
    四大银行虚拟仿真app，银行卡p图软件，银行转账截图生成器【jar实现仅供娱乐用途】
  • 5
    美团抢单辅助器app，美团众包抢单辅助脚本，骑手自动抢高价单插件
  • 6
    抖音抢拍神器app， 直播间抢购神器，抢单加速器永久免费版
  • 7
    银行转账虚拟生成器app，银行卡转账截图制作软件，java实现截图生成工具【仅供装逼娱乐用途】
  • 8
    人脸识别照片眨眼张嘴生成器，一键生成眨眼照片app，怎么用一张照片做人脸识别
  • 9
    银行转账模拟器手机版app， 银行转账凭证生成器app，用autojs实现效果【逼真效果】
  • 10
    银行转账虚拟生成器app，银行卡转账截图制作软件，java实现截图生成工具【仅供装逼娱乐用途】
  • 1
    圈子系统公众号app小程序系统源码圈子系统带即时通讯 多级圈子系统源码 兴趣小组系统开源 私密圈子系统代码 会员制社区系统
    22
  • 2
    【Azure Container App】构建Java应用镜像时候遇无法编译错误：ERROR [build 10/10] RUN ./mvnw.cmd dependency:go-offline -B -Dproduction package
    19
  • 3
    旅游社用什么工具收报名 + 资料？不开发 App 也能自动收集信息
    19
  • 4
    《仿盒马》app开发技术分享-- 确认订单页（数据展示）（29）
    33
  • 5
    《仿盒马》app开发技术分享-- 新增地址（28）
    30
  • 6
    《仿盒马》app开发技术分享-- 地图选点（27）
    39
  • 7
    《仿盒马》app开发技术分享-- 原生地图展示（26）
    44
  • 8
    《仿盒马》app开发技术分享-- 定位获取（25）
    27
  • 9
    《仿盒马》app开发技术分享-- 地址管理页（24）
    27
  • 10
    《仿盒马》app开发技术分享-- 个人信息页（23）
    30

    • 相关课程

    更多
  • 互联网安全-移动APP漏洞风险与解决方案

    • 相关电子书

    更多
  • 女性移动App安全攻防战
  • 汇聚云计算的生态核能——云市场，云上APP Store
  • 千万级用户直播App——服务端架构设计和思考

    • 相关实验场景

    更多
  • 星轨-钉钉APP分发实训
    • 下一篇
    就是要你懂负载均衡--lvs和转发模式