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


## 技术栈


Appgallery connect

## 开发准备

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



## 功能分析

在之前的开发中我们的购物车功能已经实现,但是在后来的使用中发现当新增商品的时候,会有添加不了商品的情况这主要是因为在商品规格弹窗

SpecDialog中我们的user用了@Provide,这里我们换成@State然后在购物车中当我们有位选中或者全都未选中的时候,我们点击结算,依然能够跳转到订单确认页,这时候我么的逻辑就有问题了,我们针对未选中状态进行逻辑优化


## 代码实现

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


```c

 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)

```



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


```c

 isAllTrue(list: CartProductList[]): boolean {

     for (const item of list) {

       if (item['isNeedPay'] === true) return true;

     }

     return false;

}


```

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


```c


  onPageShow(): void {

    let params = router.getParams() as DataModel

    if (params!=null&¶ms.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&¶ms1.address!=undefined){

      this.addressInfo=JSON.parse(params1.address)

    }

  }

```

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



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


```c

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,添加对应的逻辑


```c

 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)

```


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


请使用浏览器的分享功能分享到微信等