当前位置：首页 > article >正文

uniapp商城之购物车模块

article 2025/2/11 1:27:00

文章目录

一、列表渲染
二、删除单品
- 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