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

举报
yd_215151764 发表于 2025/06/30 10:30:06 2025/06/30
【摘要】 ## 技术栈Appgallery connect## 开发准备上一节我们实现了确认订单页的页面绘制和价格计算优惠计算，订单列表展示等功能，这一节我们来实现确认订单页的整个业务逻辑。首先我们要实现的就是地址的选择，然后把我们计算的价格，商品列表等数据保存起来，然后我们开始创建订单表实体类等，把这些数据提交到订单表中## 功能分析要想实现确认订单的功能，首先我们要创建对应的表，我们需要注意的数据...


## 技术栈

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}`);
到这里我们的确认订单页面业务逻辑就实现了

【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入