Taro跨端开发探索17——商城小程序购物车页面开发

前言

昨天，我们已经完成了商城小程序商品的最后一环：商品详情页。在商品详情页面点击【加入购物车】按钮时，传入后端需要的参数，我即可将商品加入购物车列表中。
今天我们来实现购物车的逻辑

需求分析

读过我之前文章的读者可能了解我之前在介绍父子组件传参时已经实现了购物车列表加载。但是之前只是作为传值得演示代码。
今天我们先分析一下京喜的小程序，然后完成购物车需要的所有代码\

如上图所示，我们可以看到，在原有的购物车列表展示的功能之外，京喜的购物车还有以下功能

• 按照店铺分组
• 选中店铺时自动选中店铺下的所有商品
• 多选的时候编辑、删除、计算价格的功能。我们在这里先实现计算价格功能。
• 单个购物车移入收藏、删除功能\

这篇文章我们来在原有的功能的基础上实现上边的几个功能

代码开发

我们基于代码来讲一下功能实现的逻辑
shop-cart/index.scss

@import "~taro-ui/dist/style/components/divider.scss";
@import "~taro-ui/dist/style/components/checkbox.scss";
@import "~taro-ui/dist/style/components/swipe-action.scss";
.shop-cart {
  .shop-title {
    color: red;
  }
} 

这里就是引入taro ui的scss
shop-cart/index.tsx

import { View, Text } from "@tarojs/components";
import { useEffect, useState } from "react";
import ShopCartItem from "./shop-cart-item";
import ShopCartEdit from "./shop-cart-edit";
import { AtButton, AtDivider } from "taro-ui";
import { AtSwipeAction } from "taro-ui";
import { AtCheckbox } from "taro-ui";
import "./index.scss";
export default function ShopCart() {
  const [shopCartList, setShopCartList] = useState([