uniapp商城之购物车模块
文章目录
- 一、列表渲染
- 二、删除单品
- 1.封装删除API
- 2.按钮绑定事件
- 三、修改单品数量
- 1.复用步进器组件
- 2.属性和事件的绑定
- 3.接口封装
- 4.调用接口
- 四、修改商品选中/全选
- 1.单品选中绑定事件调用修改API
- 2.计算全选状态
- 3.绑定事件调用全选API并渲染单品选中状态
- 五、底部结算信息
- 1.计算选中单品列表
- 2.计算选中总件数
- 3.计算选中总金额
- 4. 结算按钮交互
- 六、购物车两个页面
一、列表渲染
购物车模块主要分为已登录状态显示和未登录状态显示。通过获取会员Store进行条件渲染，调用购物车列表接口进行渲染。
调用接口并渲染
二、删除单品
1.封装删除API
2.按钮绑定事件
三、修改单品数量
1.复用步进器组件
购物车的数量修改和SKU插件的类似，可直接复用
补充类型声明文件让组件类型更加安全。
import { Component } from '@uni-helper/uni-app-types'/** 步进器 */
export type InputNumberBox = Component<InputNumberBoxProps>/** 步进器实例 */
export type InputNumberBoxInstance = InstanceType<InputNumberBox>/** 步进器属性 */
expo