《仿盒马》app开发技术分享-- 加入购物车&加购列表展示（12）

**技术栈**
Appgallery connect

**开发准备**

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

**功能分析**
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+"条")
            }
          }catch (err) {
            hilog.info(0x0000, 'testTag', `Succeeded in upserting data, result: ${err}`);

          }
这样我们就可以有效的区分数据了。我们进行添加，数据已经成功插入

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

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<void> {

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

}
到这里我们的功能就实现了， 下一节我们将要针对购物车进行详细的教学