开发实战 - ego商城 - 6 购物车模块

6 购物车模块

6.1 新增购物车页面

• 内容：新增购物车页面，完成导航栏开发
  - 使用uni-nav自定义导航栏
  - 字体大小：不支持文字大小的修改 ，如有需要请使用深度选择器覆盖样式

• 实现：新增购物车页面，自定义导航栏

• 效果
  

6.2 内容块布局

• 涉及知识

  • CSS 实现文本省略显示【单行，2行，多行】

• 实现：购物车内容块布局

• 效果
  

改了下文件路径，如果找不到文件的修改记录，不要惊慌
(。・＿・。)ﾉI’m sorry~

6.3 使用Vuex管理状态

• uniapp项目使用Vuex管理状态，请见开发实战 - ego商城 - 补充：uni-app项目使用vuex管理状态

• 将购物车list放入state进行管理

• 实现：vuex管理状态

• 效果
  页面效果与6.2一样，代码效果见提交记录。

6.4 购物车无商品默认样式

• css技巧

  • view没有占满一屏时，可以设置绝对定位，上下左右为0，则占满一屏

• 实现：空白页样式

• 效果
  

6.5 全选/全不选/单选

6.5.1 全选/全不选

• 单向操作

  • 选中/取消选中全选radio，更新全选radio状态，更新所有商品radio状态（确定值）

  即，将当前全选按钮的checked赋值给所有店铺所有商品的checked

• 实现：全选/全不选

• 效果
  

6.5.2 单选

购物车只保存商品，不存门店，将门店逻辑删除。

• 单选
  • 选中/取消选中商品，更新对应商品的radio状态
  • 选中/取消选中商品，更新全选radio状态

  1 将选中商品的checked赋值给对应商品数据的check属性（确定值）
  2 判断选中商品的个数，全部选中更新全选radio的checked为true，反之为false（需额外判断）

-实现：单选
-效果

6.6 合计和结算

• 思路

  • 1 计算属性计算合计和结算，每次选中的商品变化，都从0计算两个值
  • 2 普通变量，在全选按钮和单选按钮变化时，加/减选中/取消选中的商品价格和数量（全选/取消全选对应从0计算和重置为0） √

• 实现：合计和结算

• 效果
  

6.7 编辑/完成切换

• 切换涉及的功能点

  • 编辑购物车
    • 购物车右上角编辑按钮内容 切换为 完成
    • 数量为数字输入框
    • 合计和结算切换为 移入收藏夹 和 删除按钮
  • 编辑 -> 编辑完成
    • 选中购物车商品，修改商品数量，需要在切换为编辑按钮时刷新总金额，即合计

• 实现：编辑/完成切换

• 效果

6.6 商品删除功能

• 商品删除

  • 从商品列表中查找选中的商品并过滤出去

• 实现：商品删除

• 效果
  

6.7 加入购物车

• css

  • 文档流中的顺序‌：在同一个层叠上下文中，后面的元素会覆盖前面的元素（除非有定位或z-index改变）。

• 详情页面内容

  • 点击弹窗确定按钮，更新vuex的cart.list
  • 点击购物车按钮，跳转购物车页面

• 实现：加入购物车

• 效果