AI 助理
备案控制台
开发者社区 安全 文章 正文

《仿盒马》app开发技术分享-- 购物车逻辑优化（39）

2025-06-24 89
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 我们的app主要购物功能已经开发的相对来说比较完善了，接下来就针对各个功能的逻辑性进行迭代和修改，让我们的程序更加的健壮，减少一些逻辑上的bug

技术栈

Appgallery connect

开发准备

我们的app主要购物功能已经开发的相对来说比较完善了，接下来就针对各个功能的逻辑性进行迭代和修改，让我们的程序更加的健壮，减少一些逻辑上的bug

功能分析

在之前的开发中我们的购物车功能已经实现，但是在后来的使用中发现当新增商品的时候，会有添加不了商品的情况这主要是因为在商品规格弹窗
SpecDialog中我们的user用了@Provide,这里我们换成@State然后在购物车中当我们有位选中或者全都未选中的时候，我们点击结算，依然能够跳转到订单确认页，这时候我么的逻辑就有问题了，我们针对未选中状态进行逻辑优化

代码实现

首先在规格弹窗中我们优化一下添加逻辑

 Row(){
   
      Text("加入购物车")
        .width('70%')
        .borderRadius(30)
        .textAlign(TextAlign.Center)
        .fontColor(Color.Black)
        .margin({
   top:70})
        .height(40)
        .fontSize(18)
        .fontWeight(FontWeight.Bold)
        .backgroundColor("#FCDB29")
        .onClick(async ()=>{
   
          try {
   
            if (this.user==null&&this.user==undefined) {
   
              showToast("请先登录")
              return
            }
            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;
              if (this.user!=null) {
   
                cartPush.user_id=this.user!.user_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
              if (this.user!=null) {
   
                cartPush.user_id=this.user!.user_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("添加商品成功")
            }
            let eventData: emitter.EventData = {
   
              data: {
   }
            };

            let innerEvent: emitter.InnerEvent = {
   
              eventId: 1011,
              priority: emitter.EventPriority.HIGH
            };

            emitter.emit(innerEvent, eventData);
            this.controller.close()
          }catch (err) {
   
            hilog.info(0x0000, 'testTag', `Succeeded in upserting data, result: ${
   err}`);

          }


        })
    }
    .width('100%')
    .justifyContent(FlexAlign.Center)

然后我们实现全都未选中的时候提示用户，并且不跳转订单确认页面

 isAllTrue(list: CartProductList[]): boolean {
   
     for (const item of list) {
   
       if (item['isNeedPay'] === true) return true;
     }
     return false;
}

只要有一条是选中的我们就继续执行后续的逻辑，到了确认订单页面，我们拿到传递过来的数据根据isNeedPay 进行筛选，我们只拿为true的数据，其他的数据我们就不需要了，因为它没被结算依然要存储在购物车中。


  onPageShow(): void {
   
    let params = router.getParams() as DataModel
    if (params!=null&&params.json!=undefined){
   
      let list:CartProductList[]=JSON.parse(params.json)
      for (let i = 0; i < list.length; i++) {
   
        if (list[i].isNeedPay) {
   
          this.productList.push(list[i])
        }
      }
    }


    let params1 = router.getParams() as AddressModel
    if (params1!=null&&params1.address!=undefined){
   
      this.addressInfo=JSON.parse(params1.address)
    }
  }

到这里我们就对购物车逻辑进行了第一轮优化

之后我们继续进行逻辑漏洞的寻找，发现当我们选中和取消数据的时候，我们修改数据忘记了传入userid，这会导致我们的数据失去userid，下次在进入购物车查询，这些取消选中的数据都会消失掉，因为我们是根据用户的userid去进行查询的，在这里我们添加对应的逻辑

Image(item.isNeedPay?$r('app.media.cart_check'):$r('app.media.cart_no_check'))
                   .height(20)
                   .width(20)
                   .objectFit(ImageFit.Contain)
                   .onClick(async ()=>{
   
                     let cartPush = new cart_product_list();
                     let data:CartProductList=item
                     cartPush.id=data.id;
                     cartPush.user_id=this.user!.user_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.user_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.user_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()

                   })

继续向下查看，发现在添加或者减少商品数量的时候，我们依旧没有处理userid，添加对应的逻辑

 Row(){
   
                   Text("-")
                     .textAlign(TextAlign.Center)
                     .border({
   width:0.5,color:Color.Gray})
                     .fontSize(14)
                     .height(20)
                     .padding({
   left:7,right:7})
                     .fontColor(Color.Black)
                     .onClick(async ()=>{
   
                       if (item.buyAmount==1) {
   
                         showToast("已经是最小数量了")
                       }else {
   
                         item.buyAmount--

                         let cartPush = new cart_product_list();

                         let data:CartProductList=item
                         cartPush.id=data.id;
                         cartPush.user_id=this.user!.user_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.user_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()

                       }
                     })
                     .borderRadius({
   topLeft:5,bottomLeft:5})

                   Text(item.buyAmount+"")
                     .textAlign(TextAlign.Center)
                     .fontColor(Color.Black)
                     .fontSize(14)
                     .height(20)
                     .padding({
   left:10,right:10})
                     .border({
   width:0.5,color:Color.Gray})


                   Text("+")
                     .textAlign(TextAlign.Center)
                     .fontColor(Color.Black)
                     .fontSize(14)
                     .height(20)
                     .padding({
   left:7,right:7})
                     .onClick(async ()=>{
   
                       item.buyAmount++
                       let cartPush = new cart_product_list();

                       let data:CartProductList=item
                       cartPush.id=data.id;
                       cartPush.user_id=this.user!.user_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.user_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()
                     })
                     .border({
   width:0.5,color:Color.Gray})
                     .borderRadius({
   topRight:5,bottomRight:5})

                 }
                 .justifyContent(FlexAlign.SpaceBetween)

到这里我们的购物车相对来说就变得比较健壮了

文章标签：
安全
存储
关键词：
APP优化
uuraaig4ala36
目录
相关文章
岁月如酒
|
1月前
|
缓存 移动开发 JavaScript
如何优化UniApp开发的App的启动速度？
如何优化UniApp开发的App的启动速度？
岁月如酒
342 139
iOS学霸
|
JSON Dart 安全
Flutter App混淆加固、保护与优化原理
Flutter App混淆加固、保护与优化原理
iOS学霸
252 0
小小工匠
|
架构师 Java
jvm性能调优实战 - 35电商APP后台系统如何对Full GC进行深度优化
jvm性能调优实战 - 35电商APP后台系统如何对Full GC进行深度优化
小小工匠
247 0
卓伊凡
|
24天前
|
移动开发 JavaScript 应用服务中间件
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
卓伊凡
158 5
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
卓伊凡
|
2月前
|
存储 前端开发 安全
实现“永久登录”：针对蜻蜓Q系统的用户体验优化方案（前端uni-app+后端Laravel详解）-优雅草卓伊凡
实现“永久登录”：针对蜻蜓Q系统的用户体验优化方案（前端uni-app+后端Laravel详解）-优雅草卓伊凡
卓伊凡
174 5
uuraaig4ala36
|
5月前
|
存储
《仿盒马》app开发技术分享--未完成订单列表展示逻辑优化（61）
上一节我们实现订单与优惠券的联合提交时，我去到订单列表页面查看生成的订单信息，发现现在的订单从信息展示到价格计算全都是有问题的。所以紧急的把对应的问题修改一下。
uuraaig4ala36
218 70
uuraaig4ala36
|
5月前
|
数据库
《仿盒马》app开发技术分享-- 优惠券逻辑优化（58）
我们已经实现了优惠券的领取和展示，现在已经趋近于一个完整的电商应用了，但是这时候问题又来了，我们领取完优惠券之后，我们的新用户优惠券模块依然存在，他并没有消失，既然我们是从云数据库中查询的数据，那么我们需要找到一个字段跟他对应起来，来实现新用户领券后关闭这个模块的展示，同时我们在未登录的时候他也要保持隐藏，登录后能实现优惠券的领取。然后在结算的时候得出有几张符合的券能用
uuraaig4ala36
115 9
uuraaig4ala36
|
5月前
《仿盒马》app开发技术分享-- 逻辑优化第三弹（83）
现在我们的app功能已经趋近完善，bug和缺失的细节也越来越少了，我们继续对app进行优化，首先是我们的积分页面，我们只实现了全部的积分展示内容，对收入和支出的积分明细并没有进行展示，这里我们要实现一下，然后就是我们的优惠券，我们已过期的优惠券并没有修改状态为已过期。
uuraaig4ala36
108 0
uuraaig4ala36
|
5月前
《仿盒马》app开发技术分享-- 个人中心页优化（62）
上一节我们实现了订单逻辑的优化，现在我们的app功能更加的完善了，并且随着我们的迭代逻辑疏漏越来越少，现在我们继续进行优化，在之前的业务逻辑中我们的个人中心页面展示了用户的余额以及积分商城入口，这里我们要展示余额准确的值，积分商城的入口我们修改为积分相关的功能入口。并且展示当前账号的积分余额
uuraaig4ala36
101 0
多客潇潇
|
11月前
|
机器学习/深度学习 前端开发 算法
婚恋交友系统平台 相亲交友平台系统 婚恋交友系统APP 婚恋系统源码 婚恋交友平台开发流程 婚恋交友系统架构设计 婚恋交友系统前端/后端开发 婚恋交友系统匹配推荐算法优化
婚恋交友系统平台通过线上互动帮助单身男女找到合适伴侣，提供用户注册、个人资料填写、匹配推荐、实时聊天、社区互动等功能。开发流程包括需求分析、技术选型、系统架构设计、功能实现、测试优化和上线运维。匹配推荐算法优化是核心，通过用户行为数据分析和机器学习提高匹配准确性。
多客潇潇
776 4

热门文章

最新文章

  • 1
    最佳实践3：用通义灵码开发一款 App
  • 2
    如何在1v1视频直播交友APP中实现防录屏防截屏功能？
  • 3
    【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
  • 4
    Qoder + ADB Supabase ：5分钟GET超火AI手办生图APP
  • 5
    【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
  • 6
    【App Service】部署War包到Azure云上遇404错误
  • 7
    uni-app中如何使用scss定义变量
  • 8
    优酷APP响应式布局技术之iOS篇 | 《优酷响应式布局技术全解析》第三章
  • 9
    app_offline.htm的作用
  • 10
    【Android App】实战项目之仿微信的私信和群聊App（附源码和演示视频 超详细必看）
  • 1
    【App Service】部署War包到Azure云上遇404错误
    97
  • 2
    如何在1v1视频直播交友APP中实现防录屏防截屏功能？
    195
  • 3
    uni-app中如何使用scss定义变量
    84
  • 4
    【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
    158
  • 5
    Qoder + ADB Supabase ：5分钟GET超火AI手办生图APP
    139
  • 6
    最佳实践3：用通义灵码开发一款 App
    202
  • 7
    【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
    100
  • 8
    【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
    222
  • 9
    如何优化UniApp开发的App的启动速度？
    342
  • 10
    UniApp开发的App在启动速度方面有哪些优势和劣势？
    274

    • 相关课程

    更多
  • 互联网安全-移动APP漏洞风险与解决方案

    • 相关电子书

    更多
  • 女性移动App安全攻防战
  • 汇聚云计算的生态核能——云市场，云上APP Store
  • 千万级用户直播App——服务端架构设计和思考
    • 下一篇
    阿里云对象存储OSS收费标准：500G存储118元1年、