《仿盒马》app开发技术分享-- 购物车功能完善（14）

技术栈

Appgallery connect

开发准备

上一节我们实现了购物车商品列表的状态切换，已添加商品数量的增减，已添加商品滑动删除，已添加商品在选中情况下的价格计算。这一节我们在这些功能的基础上实现云端记录，因为我们现在只有数据的查询是从云端获取的，其他的操作虽然都实现了相对应的功能，但是当我们操作完，关闭app，再打开不会有对应的记录，有的同学可能会说，那我们把数据用首选项或者数据库的形式存储就可以了吧？ 那如果我更换了另一个设备那这些添加的数据是不是就又不能使用了？所以我们的每个操作，最好都是提交到云端，这样我们在其他设备，在退出应用，切换账号这些情况下都能很好的保存我们操作后的购物车状态。

功能分析

1.商品选中 上一节实现了商品选中和未选中时，通过isNeedPay的状态渲染列表，现在就要在这个基础上使用upsert来修改数据，使状态可以一直保存。

2.商品加减 商品的新增和减少我们也已经通过buyAmount字段进行实现，并且成功的切换了对应的状态，我们还是使用upsert来修改数据，把我们添加和减少后的商品数提交到云数据库中

3.商品删除 商品删除我们使用ListItem的swipeAction 已经实现，但是我们的删除现在是在list中splice，看似我们删除了数据，但是这个数据源重新进入页面就又恢复了，这里我们需要用云数据库的delete函数进行数据的真删除。这样我们下次再进入页面查询到的数据就是最后一次操作的数据流了，在上一节里，当我们删除商品的时候，忘记了调用价格计算的方法，在这里我们要补充上去

4.价格计算 这里的内容没什么变化，还是根据对应的状态去计算即可

代码实现

首先就是选中取消

let cartPush = new cart_product_list();

                 let data:CartProductList=item
                 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=data.buyAmount//商品数量
                 cartPush.activityType=data.activityType//活动类型 暂无
                 cartPush.productPrice=data.productPrice//价格
                 cartPush.productOriginalPrice=data.productOriginalPrice//划线价
                 cartPush.couponPrice=data.couponPrice
                 if (item.isNeedPay) {
                   item.isNeedPay=false
                   this.productList[index] = new CartProductList(item.id, item.productId, item.productSpecId, item.productName, item.productSpecName,
                   item.buyAmount, item.isNeedPay,item.activityType,item.productImgAddress,
                   item.productOriginalPrice, item.productPrice, item.couponPrice)
                   cartPush.isNeedPay=false
                 }else {
                   item.isNeedPay=true
                   this.productList[index] = new CartProductList(item.id, item.productId, item.productSpecId, item.productName, item.productSpecName,
                     item.buyAmount, item.isNeedPay,item.activityType,item.productImgAddress,
                     item.productOriginalPrice, item.productPrice, item.couponPrice)
                   cartPush.isNeedPay=true
                 }


                 let num = await databaseZone.upsert(cartPush);
                 hilog.info(0x0000, 'TAG', `已修改数据条目: ${num}`);
                 this.getCountPrice()

在点击事件中我们实现了数据的修改,现在我们在任何设备都能同步当前的商品选中状态了

然后是商品减少按钮

if (item.buyAmount==1) { showToast("已经是最小数量了") }else { item.buyAmount--

                     let cartPush = new cart_product_list();

                     let data:CartProductList=item
                     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=item.buyAmount//商品数量
                     cartPush.activityType=data.activityType//活动类型 暂无
                     cartPush.productPrice=data.productPrice//价格
                     cartPush.productOriginalPrice=data.productOriginalPrice//划线价
                     cartPush.couponPrice=data.couponPrice
                     cartPush.isNeedPay=data.isNeedPay


                     let num = await databaseZone.upsert(cartPush);
                     hilog.info(0x0000, 'TAG', `已修改数据条目: ${num}`);

                     this.productList[index] = new CartProductList(item.id, item.productId, item.productSpecId, item.productName, item.productSpecName,
                       item.buyAmount, item.isNeedPay,item.activityType,item.productImgAddress,
                       item.productOriginalPrice, item.productPrice, item.couponPrice)
                     this.getCountPrice()

商品新增按钮

item.buyAmount++

                   let cartPush = new cart_product_list();

                   let data:CartProductList=item
                   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=item.buyAmount//商品数量
                   cartPush.activityType=data.activityType//活动类型 暂无
                   cartPush.productPrice=data.productPrice//价格
                   cartPush.productOriginalPrice=data.productOriginalPrice//划线价
                   cartPush.couponPrice=data.couponPrice
                   cartPush.isNeedPay=data.isNeedPay


                   let num = await databaseZone.upsert(cartPush);
                   hilog.info(0x0000, 'TAG', `已修改数据条目: ${num}`);
                   this.productList[index] = new CartProductList(item.id, item.productId, item.productSpecId, item.productName, item.productSpecName,
                     item.buyAmount, item.isNeedPay,item.activityType,item.productImgAddress,
                     item.productOriginalPrice, item.productPrice, item.couponPrice)
                   this.getCountPrice()

新增和减少我们都只需要把对应的buyAmount 传进去修改就可以，其他的数据使用条目本身的

最后在条目的删除按钮这里，我们添加上价格计算的相关代码

Button('删除').margin(4) .onClick(()=>{ let index = this.productList.indexOf(item); this.productList.splice(index, 1); this.getCountPrice() }) 到这里，我们的购物车相对来说就是比较完善的了 ps：写在最后的话，可以看到针对云端数据提交的相关代码都是相似度极高的，有兴趣的同学可以自行封装一下