goods-list 商品卡片

引入

在app.json或index.json中引入组件，详细介绍见快速上手

"usingComponents": {
  "wr-goods-card": "@retailwe/ui-goods-list/index"
}

代码演示

基础用法

Page({
  data: {
    goodsList: [] as any,
  },
  onLoad() {
    const data = [
      {
        thumb: 'https://i.loli.net/2017/08/21/599a521472424.jpg',
        title:
          '智利 火龙果超级好吃，又大又甜 欢迎购买，限价五折优惠哦,智利 火龙果超级好吃，又大又甜 欢迎购买，限价五折优惠哦',
        price: '99.99',
        originPrice: '9.99',
        tags: ['热卖'],
      },
    ];
    const lists = Array.from({ length: 5 }, (_v, k) => data[k % data.length]);
    this.setData({
      goodsList: lists,
    });
  },
});

<goods-list goodsList="{{goodsList}}"></goods-list>

卡片垂直布局

<goods-list goodsList="{{goodsList}}" layout="vertical"></goods-list>

API

Props

| 参数 | 说明 | 类型 | 默认值 | 说明 | |-----------|-----------|-----------|-------------|-------------| | id | 组件ID | string | gl-88888888 | 默认取gl-${~~(Math.random() * 10 ** 8)} | | goods-list | 商品列表数据源 | Good[] | - | 结构参考下方说明 | | layout | 卡片布局 | string | horizontal | 横向-horizontal、横向&价格与标题不同行-horizontal-wrap、纵向-vertical | | price-fill | 价格是否保持两位小数 | boolean | false | - | | show-cart | 是否展示购物车 | boolean | true | 选填 | | lazy-load | 是否开启图片懒加载 | boolean | true | - | | cart-size | 购物车大小，透传给add-cart组件size | number | 48 | 选填 | | cart-color | 购物车颜色，透传给add-cart组件color | string | #FA550F | 选填 | | thresholds | 元素可见监控阈值 | number[] | [] | 选填，不填或填为空数组时不进行监控，进行监控后每达到一个阈值就触发一次事件：ob |

Good

| 参数 | 说明 | 类型 | 默认值 | 说明 | |-----------|-----------|-----------|-------------|-------------| | thumb | 预览图 | string | - | 选填 | | num | 商品数量 | number | - | 选填 | | title | 商品标题 | string | - | 选填 | | lineClamp | 标题多行溢出数量 | number | 1|2 | 默认值规则：当 tags 数量大于0 且 显示 时，默认值为1；当 tags 数量等于0 或 不显示 时，默认值为2 | | desc | 商品描述 | string | - | 选填 | | specs | 商品规格,字符串，单个规则超过5个字就... | string[] | - | 选填 | | tags | 商品标签，位于desc区域 | string[] | - | 选填 | | price | 商品价格，单位分，整数 | number | - | 选填 | | originPrice | 商品划线价格，单位分，整数 | number | - | 选填 | | hideKey | 传入哪个key，哪个key对应的内容就则不显示 | Record<keyof Good, boolean> | - | 选填 | | currency | 货币符号 | string | ¥ | - | | [string] | 其他任意键值, 扩展结构用于其他业务目的 | any | - | 选填 |

Events

| Event | Description | Arguments | | ------ | ----------------------------- | --------- | | thumb | 点击商品预览图触发 | { ...goods-card.thumb, index: number } | | specs | 点击商品规格显示区触发 | { ...goods-card.specs, index: number } | | tag | 点击商品标签触发 | { ...goods-card.tag, index: number } | | click | 点击商品卡片触发 | {...goods-card.click, index: number} | | addcart | 点击商品加购按钮触发 | {...goods-card.add-cart, index: number} | | ob | 设置了thresholds且商品卡片的可见比例达到阈值 | {...goods-card.ob, index: number} |

外部样式类

| 类名 | 说明 | |-----------|-----------| | wr-class | 根节点样式类 | | title-class | title 节点样式类 | | desc-class | desc 节点样式类 | | num-class | num 节点样式类 | | thumb-class | 预览图 样式类 | | specs-class | 规格节点样式类 | | price-class | price 节点样式类 | | origin-price-class | 原价 price 节点样式类 | | price-prefix-class | 价格前附加字符 样式类 |

CSS Var

| 类名 | 属性 | 说明 | 默认值(不同的layout可能会不同) | | --------------- | -------- | -------- | ------ | | --ui-goods-list-bg | background | 商品列表背景 | - | | --ui-goods-list-padding | padding | 商品列表 padding | - | | --ui-goods-list-card-margin-bottom | 商品卡片底部margin | - | | --ui-goods-list-card-border-bottom | 商品卡片底部border | - | | --ui-goods-list-last-card-border-bottom | 最后一个商品卡片底部border | - |