Bootstrap

uniapp商城之购物车模块


一、列表渲染

购物车模块主要分为已登录状态显示和未登录状态显示。通过获取会员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
;