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

技术栈

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”]}
]
}
实体
/*

• Copyright © Huawei Technologies Co., Ltd. 2020-2023. All rights reserved.
• Generated by the CloudDB ObjectType compiler. DO NOT EDIT!
  */

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

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