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

举报
yd_215151764 发表于 2025/06/30 10:23:30 2025/06/30
【摘要】 ## 技术栈Appgallery connect## 开发准备上一节我们实现了购物车商品列表的状态切换,已添加商品数量的增减,已添加商品滑动删除,已添加商品在选中情况下的价格计算。这一节我们在这些功能的基础上实现云端记录,因为我们现在只有数据的查询是从云端获取的,其他的操作虽然都实现了相对应的功能,但是当我们操作完,关闭app,再打开不会有对应的记录,有的同学可能会说,那我们把数据用首选项或...


## 技术栈

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

【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。