购物车商品卡片

changelog

v0.3.6

• 修正购物车数量是否可输入参数 editable

v0.3.5

• 修正购物车数量控制参数 hasCheckbox

v0.3.4

• 调整视频商品卡片样式

v0.3.3

• 添加价格随大小更替字号样式属性

v0.3.2

• 已结束的商品，加入购物车按钮显示商品已结束

v0.3.1

• 预售状态下加入购物车按钮为蓝色

v0.3.0

• 添加优视卡片样式

v0.2.7

• 更换已结束图标Url

v0.2.6

• 样式微调

v0.2.5

• 库存不足样式调整

v0.2.4

• 禁用状态背景色
• 圆角/字体调整

v0.2.3

• 预售文案调整

v0.2.2

• 提示语和倒计时宽度调整

v0.2.1

• 增加倒计时属性

v0.2.0

• 预售购买

v0.1.6

• 用户小程序适配修 修改counter 版本依赖

v0.1.5

• 用户小程序适配修 修改counter 版本依赖

v0.1.4

• 用户小程序适配修改

v0.1.3

• 用户小程序适配修改

v0.1.2

• 用户小程序适配修改

v0.1.1

• 依赖处理

v0.1.0

• 组件初始化

基本调用

 <shop-cart-card></shop-cart-card>

参数 Props

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------------ | ----------------------------------------- | ------- | ------------------------------------ | ------ | | key | 商品唯一标识 | String | - | - | | checked | 是否选中 | Boolean | - | false | | disabled | 是否可选 | Boolean | - | false | | status | 商品状态:(正常/卖光/库存不足/已结束/预售) | String | ACTIVE/SOLDOUT/LACK/OVER/WAITING | - | | title | 标题 | String | - | - | | cover | 商品封面 | String | - | - | | info | 商品顶部提示语 | String | - | - | | tag | 商品图片左上角标签 | String | - | - | | vendor | 商品图片底部(供应商名称) | String | - | - | | price | 价格 | Number | - | - | | market-price | 市场价(原价) | Number | - | - | | cart-count | 购物车数量 | Number | - | 1 | | countDown | 倒计时 | Object | { hours: '', minute:'', second: '' } | - |

事件 event

| 名称 | 参数 | 说明 | 备注 | | ------------- |:-------------:| :--------------------| :---------------| |onTap | | 点击图片标题区域触发 | | |onCheck | | 选中事件 | | |onAdd | | 添加购物车时触发 | | |onReduce | | 减少购物车数量 | | |onChange | | 改变购物车数量 | 输入框改变时触发| |onBlur | | 输入框失焦时触发 | | |onFocus | | 输入框聚焦时触发 | |

插槽 slot

| 名称 | 说明 | 备注 | | ------------- |:-------------:| :--------------------| | cell | 商品属性(包装单位) | |

相关演示