2021-08-20

本文概述了修复数据库变更引发的错误,并详细介绍了购物车功能的实现,包括添加购物车页面、选择规格、合并操作,以及按时间与店铺分类显示商品信息。核心代码片段展示了如何处理选择验证和购物车同步管理。

完成功能

1.改正因数据库改动导致的错误

2.购物车相关操作

1.添加购物车

相关页面

在这里插入图片描述

相关代码:
function checkSelectIndex() {
        let flag1 = true
        console.log(flag);
        consolelog(selectIndex);
        for (let i = 0; i < selectIndex.length; i++) {
          if (selectIndex[i] ===" ") {
            flag1 = false
          }
        }
        if (flag1 == true) {
          flag=true
          console.log(flag);
          $('.selectDiv').eq(0).css('background','none')
          $('.selectDiv').eq(0).css('border', 'none')
          selectInf.value = ''
        }else {
          flag=false
          console.log(flag);
          $('.selectDiv').eq(0).css('background', 'rgba(240,56,103,0.1)')
          $('.selectDiv').eq(0).css('border', '1rem rgb(240,56,103) solid')
          selectInf.value = '请选择规格信息'
        }
        console.log(flag);
      }

   function addIntoShoppingCart(item) {
        checkSelectIndex()

          if(flag==true){
            saveShoppingCart({
              'goodsId': item.data.goodsId,
              'userId': JSON.parse(sessionStorage.getItem('user')).userId,
              'time': '',
              'specificationsId': goodsSpecifications.data.specificationsId,
              'count': count.value,
              'shopId': item.data.shopId
            }).then(()=>{
              let user1=JSON.parse(sessionStorage.getItem('user'))
              if(user1!=null){
                getShoppingCartList(user1.userId)
              }
            })
          }

      }

2.购物车侧边效果

在这里插入图片描述

3.购物车详情页设计

在这里插入图片描述

4.合并购物车

相关代码:
 /**
     * 加入购物车
     * 加入时自动合并
     * @param shoppingCart
     * @return
     */
    @PostMapping("/saveShoppingCart")
    public Result<?> saveShoppingCart(@RequestBody ShoppingCart shoppingCart){
        System.out.println("shoppingCart"+shoppingCart);
        QueryWrapper<ShoppingCart> queryWrapper=new QueryWrapper<>();
        queryWrapper.eq("user_id",shoppingCart.getUserId()).eq("goods_id",shoppingCart.getGoodsId()).eq("specifications_id",shoppingCart.getSpecificationsId());

        ShoppingCart shoppingCart1=shoppingCartService.getOne(queryWrapper);

        System.out.println("shoppingCart:"+shoppingCart);
        if(shoppingCart1!=null){
            System.out.println("shoppingCart1:"+shoppingCart1);
            shoppingCart.setCount(shoppingCart.getCount()+shoppingCart1.getCount());
            shoppingCartService.removeById(shoppingCart1.getTime());
        }


        shoppingCart.setTime(LocalDateTime.now());

        return Result.success(shoppingCartService.save(shoppingCart));
    }

5.按时间、店铺分类得到购物车商品信息

 /**
     * 得到购物车里的商品
     * @param userId
     * @return
     */
    @GetMapping("/selectShoppingCartList")
    public Result<?> selectShoppingCartList(@RequestParam Integer userId){
        QueryWrapper<ShoppingCart> queryWrapper=new QueryWrapper<>();
        queryWrapper.eq("user_id",userId).groupBy("shop_id").orderByDesc("time");

        List<ShoppingCart> list=shoppingCartService.list(queryWrapper);

        List<ShoppingCartGroupByShop> shoppingCartGroupByShopList=new ArrayList<>();
        for(ShoppingCart shoppingCart:list){
            ShoppingCartGroupByShop shoppingCartGroupByShop=new ShoppingCartGroupByShop();

            //获取shop信息
            QueryWrapper<Shop> shopQueryWrapper=new QueryWrapper<>();
            shopQueryWrapper.eq("shop_id",shoppingCart.getShopId());
            shoppingCartGroupByShop.setShop(shopService.getOne(shopQueryWrapper));


            //获取商品信息
            QueryWrapper<ShoppingCart> queryWrapper1=new QueryWrapper<>();
            queryWrapper1.eq("shop_id",shoppingCart.getShopId()).orderByDesc("time");
            List<ShoppingCart> shoppingCartList=shoppingCartService.list(queryWrapper1);


            List<GoodsSpecifications> goodsSpecificationsList=new ArrayList<>();
            List<Goods> goodsList=new ArrayList<>();
            List<Integer> countList=new ArrayList<>();
            for (ShoppingCart shoppingCart1:shoppingCartList){
                QueryWrapper<Goods> goodsQueryWrapper=new QueryWrapper<>();
                goodsQueryWrapper.eq("goods_id",shoppingCart1.getGoodsId());
                goodsList.add(goodsService.getOne(goodsQueryWrapper));

                //获取商品规格信息
                QueryWrapper<GoodsSpecifications> goodsSpecificationsQueryWrapper=new QueryWrapper<>();
                goodsSpecificationsQueryWrapper.eq("specifications_id",shoppingCart1.getSpecificationsId());
                goodsSpecificationsList.add(goodsSpecificationsService.getOne(goodsSpecificationsQueryWrapper));

                //获取数量信息
                countList.add(shoppingCart1.getCount());
            }
            shoppingCartGroupByShop.setGoodsList(goodsList);
            shoppingCartGroupByShop.setGoodsSpecificationsList(goodsSpecificationsList);
            shoppingCartGroupByShop.setGoodsCountList(countList);

            shoppingCartGroupByShopList.add(shoppingCartGroupByShop);
        }

        return Result.success(shoppingCartGroupByShopList);
    }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值