HarmonyOS鸿蒙Next中《仿盒马》app开发技术分享10--加入购物车&购物车列表静态展示（端云一体）

HarmonyOS鸿蒙Next中《仿盒马》app开发技术分享10–加入购物车&购物车列表静态展示（端云一体）

开发准备

上一节我们实现了商品详情页面的规格选择弹窗，这在任何购物类应用中都是最常用的功能之一。当然了，作为一个购物类的应用，我们仅仅展示是用处不大的，我们还需要有添加的动作。这一节我们就来实现添加到购车里并且在购物车内简单展示的功能。

功能分析

1. 加入购物车
   我们已经实现了弹窗，加入购物车就需要在切换规格的同时，点击提交对应的数据，这里要注意，我们针对同一个数据，是不需要创建多条的，仅仅需要修改加购的商品数量即可，所以这里我们还需要先查在加，防止同一条数据分开生成多条

2. 加购列表展示
   这里就是针对我们已经添加的数据进行一个简单的列表展示，只需要查询出来展示即可

代码实现

首先在点击事件中我们实现先查后加的逻辑，根据当前选中的规格下标id和商品id作为条件去查询，根据返回数据的条目来进行针对性的处理

let databaseZone = cloudDatabase.zone('default');
let condition = new cloudDatabase.DatabaseQuery(cart_product_list);
condition.equalTo("productId", this.product?.id).and().equalTo("productSpecId", this.specList[this.checkIndex].id)
let listData = await databaseZone.query(condition);
let json = JSON.stringify(listData)
hilog.info(0x0000, 'testTag', `Succeeded in upserting data, result: ${json}`);
let request: CartProductList[] = JSON.parse(json)
let cartPush = new cart_product_list();

if (request.length > 0) {
  let data: CartProductList = request[0]
  cartPush.id = data.id;
  cartPush.productId = data.productId //商品id
  cartPush.productSpecId = data.productSpecId //规格id
  cartPush.productName = data.productName //商品名称
  cartPush.productSpecName = data.productSpecName
  cartPush.productImgAddress = data.productImgAddress
  cartPush.buyAmount = this.addNumber + data.buyAmount //商品数量
  cartPush.isNeedPay = data.isNeedPay //是否选中 默认为true
  cartPush.activityType = data.activityType //活动类型 暂无
  cartPush.productPrice = data.productPrice //价格
  cartPush.productOriginalPrice = data.productOriginalPrice //划线价
  cartPush.couponPrice = data.couponPrice
} else {
  cartPush.id = Math.floor(Math.random() * 1000000);
  cartPush.productId = this.product!.id //商品id
  cartPush.productSpecId = this.specList[this.checkIndex].id //规格id
  cartPush.productName = this.product!.name //商品名称
  cartPush.productSpecName = this.specList[this.checkIndex].name
  cartPush.productImgAddress = this.product!.url //图片地址
  cartPush.buyAmount = this.addNumber //商品数量
  cartPush.isNeedPay = true //是否选中 默认为true
  cartPush.activityType = "1" //活动类型 暂无
  cartPush.productPrice = this.product!.price //价格
  cartPush.productOriginalPrice = this.product!.original_price //划线价
  cartPush.couponPrice = 0
}

let num = await databaseZone.upsert(cartPush);
hilog.info(0x0000, 'testTag', `Succeeded in upserting data, result: ${num}`);
if (num > 0) {
  showToast("修改成功" + num + "条")
}

这样我们就可以有效的区分数据了，我们先看后台的数据

可以看到现在数据是空的，我们执行一下，进行添加

可以看到已经执行了我们添加成功的提示，现在来到后台进行插入数据的查询

可以看到数据已经成功插入

接下来我们实现加购列表，首先进行页面的创建，在生命周期函数里进行数据的查询

import { CartProductList } from ".../entity/CartProductList"
import { cloudDatabase } from "@kit.CloudFoundationKit";
import { cart_product_list } from ".../clouddb/cart_product_list";
import { hilog } from "@kit.PerformanceAnalysisKit";
let databaseZone = cloudDatabase.zone('default');

@Preview
@Component
export struct CartList {

@State productList: CartProductList[] = []
@State flag: boolean = false

async aboutToAppear(): Promise {
  let condition = new cloudDatabase.DatabaseQuery(cart_product_list);
  let listData = await databaseZone.query(condition);
  let json = JSON.stringify(listData)
  this.productList = JSON.parse(json)
  hilog.info(0x0000, 'testTag', `Succeeded in upserting data, result: ${listData}`);

  this.flag = true
}

build() {
  Column() {
    if (this.flag) {
      List() {
        ForEach(this.productList, (item: CartProductList, index: number) => {
          ListItem() {
            Row() {
              Image(item.productImgAddress)
                .height(120)
                .width(120)
              Column() {
                Text(item.productName)
                  .fontColor(Color.Black)
                  .fontSize(16)
                Text(item.productSpecName)
                  .fontColor(Color.Grey)
                  .fontSize(14)

                Text(() => {
                  Span("¥ ")
                    .fontSize(14)
                    .fontColor(Color.Red)
                  Span(item.productPrice + "")
                    .fontSize(22)
                    .fontColor(Color.Red)
                })

                Text("¥" + item.productOriginalPrice + "")
                  .fontColor('#999')
                  .decoration({
                    type: TextDecorationType.LineThrough,
                    color: Color.Gray
                  })
                  .fontSize(16)
                  .margin({ left: 10 })
              }

              Text("已经加购数量" + item.buyAmount)
                .fontColor(Color.Black)
            }
          }
        })
      }
      .height('auto')
      .layoutWeight(1)
    }
  }
}

还可以看到数据已经查询出来了，到这里我们的功能就实现了， 下一节我们将要针对购物车进行详细的教学