> For the complete documentation index, see [llms.txt](https://jimmylv.gitbook.io/tdd-frontend/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jimmylv.gitbook.io/tdd-frontend/coding/01-project-shoppingcart/02-project-analysis.md).

# ShoppingCart 项目剖析

## 第一部分：C 端 商品购买

😉 只有原型稿：

![Shopping Cart](https://2897586075-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LquCgGNObzQ8HY5Og1P%2F-M0hZ3bQ0jbhhUCDC_vo%2F-M0hZ45ajk9HySVKxAIx%2Fshopping-cart.png?generation=1582386144516207\&alt=media)

### 业务需求

1. 每件商品信息包含名称、编码、价格、数量等
2. 输入商品编码，如果已经在购物车内，这购物车内数量加 1，否则加入购物车
3. 可以对购物车内的商品直接加减数量
4. 计算购物车内总价，包含优惠折扣
5. mini 购物车可随时显示便于查看

## 第二部分：B 端 商品管理

设计稿：[商品管理 - 蓝湖](https://lanhuapp.com/url/DBdJb-W3vf5)

![shoppingcart-design](https://2897586075-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LquCgGNObzQ8HY5Og1P%2F-M4gcngSdLf-vAmHE110%2F-M4gcoP0q2tuAngxJKY-%2Fshoppingcart-design.png?generation=1586665573065269\&alt=media)

### 基础需求

1. 录入商品：输入商品的名称、编码（规则：ABC000,不能重复）、价格、库存、图片地址
2. 商品列表：可显示所有商品的相关信息
3. 修改库存：对商品列表中的商品库存直接加减数量
4. 库存盘点：计算当前商品总数和总价格
5. 商品修改：点击商品图片，可重新编辑商品信息

### 扩展需求

1. 数据前后端集成
2. 用户登录/注册
3. 商品修改的权限控制
4. 图片文件上传

## 要求

1. 自行编写**用户故事**再确认
2. 任务分解 Tasking 列表
3. 完成上述需求中提到的功能
4. 合理拆分组件，组件化开发
5. 使用 Redux 完成业务功能

或许你可以用 GitHub 等看板工具管理你的需求故事卡：

![GitHub kanban](https://2897586075-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LquCgGNObzQ8HY5Og1P%2F-M4rVKBks-k740GzynRR%2F-M4rVKq8IPxWxaDzCh8M%2FGitHub%20kanban.png?generation=1586847900189348\&alt=media)