技术栈
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：写在最后的话，可以看到针对云端数据提交的相关代码都是相似度极高的，有兴趣的同学可以自行封装一下
评论