GoodsCard 商品卡片

引入

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

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

代码演示

基础用法

Page({
  data: {
    /** @type { GoodBase } */
    good: {
      thumb: '123123',
      num: 3,
      title: '当季新裤',
      desc: '欧美网红款',
      specs: ['比利时进口', 'L - 180', '长袖', '天蓝'],
      tags: ['双十一', '裤子'],
      price: 20.1 * 100,
      originPrice: 45.2 * 100,

      /** 指定某个key不展示 */
      hideKey: {
        thumbTag: true
      }
    }
  }
})

<wr-goods-card data="{{good}}" />

高级用法

通过插槽添加定制内容

<wr-goods-card data="{{good}}">
  <view slot="footer">
    <button size="mini">按钮</button>
    <button size="mini">按钮</button>
  </view>
</wr-goods-card>

API

Types

GoodBase

/** 商品类型，包含基础的数据结构 */
interface GoodBase {
  /** 预览图 */
  thumb?: string;
  /** 商品数量 */
  num?: number;
  /** 商品标题 */
  title?: string;
  /**
   * 标题多行溢出数量
   *
   * @default 1 当 tag 数量大于0时，取值为1
   * @default 2 当 tag 数量等于0时，取值为2
   */
  lineClamp?: number;
  /** 商品描述 */
  desc?: string;
  /** 商品规格,字符串，超过5个字就溢出 */
  specs?: string[];
  /**
   * 商品标签，位于desc区域
   */
  tags?: string[];
  /**
   * 商品标签，位于 title 前
   */
  titlePrefixTags?: {
    textColor?: string;
    color?: string;
    text: string;
  }[];
  /** 商品价格，单位分，整数 */
  price?: number;
  /** 商品划线价格，单位分，整数 */
  originPrice?: number;

  /** 传入哪个key，哪个key对应的内容就则不显示 */
  hideKey?: Record<keyof GoodBase, boolean>;
}

Good

/** 泛定义的商品数据类型，在基础类型上可以扩展数据用于业务需求 */
interface Good extends GoodBase {
  /** 是否展示购物车 */
  showCart?: boolean

  [key: string]: any
}

Props

| 参数 | 说明 | 类型 | 默认值 | 说明 | |-----------|-----------|-----------|-------------|-------------| | data | 商品数据 | Good | - | 必填 | | id | 组件ID，不填时自动生成形如goods-card-88888888的随机ID，方便做加购动画等时选取元素 | string | - | 选填 | | layout | 预设布局 | string | horizontal | 横向-horizontal、横向&价格与标题不同行-horizontal-wrap、纵向-vertical | | thumb-mode | 左侧图片裁剪、缩放的模式，可选值参考小程序image组件mode属性值 | string | aspectFit | 选填 | | price-fill | 价格是否保持两位小数 | boolean | true | 选填 | | currency | 货币符号 | string | ¥ | 选填 | | lazy-load | 是否开启图片懒加载 | boolean | false | 选填 | | centered | 是否开启居中模式 | boolean | false | 选填 | | price-prefix | 价格前缀文案 | string | - | 选填 | | show-cart | 是否展示购物车 | boolean | - | 选填 | | 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[] | - | 选填 | | titlePrefixTags | 商品标签，位于 title 前 | string[] | - | 选填 | | price | 商品价格，单位分，整数 | number | - | 选填 | | originPrice | 商品划线价格，单位分，整数 | number | - | 选填 | | hideKey | 传入哪个key，哪个key对应的内容就则不显示 | Record<keyof Good, boolean> | - | 选填 | | [string] | 其他任意键值, 扩展结构用于其他业务目的 | any | - | 选填 |

Slot

| 名称 | 说明 | |-----------|-----------| | thumb-cover | 覆盖在thumb上方 | | before-title | 渲染在 title 的view前部分（tags） | | after-title | 跟随在 title 的view后方 | | after-desc | 跟随在 desc 的view后方 | | price-prefix | 渲染在 价格 的view前方 | | append-body | 渲染在 body 的尾部 | | footer | 渲染在 body 的后方 | | append-card | 渲染在 卡片 整个 view 的尾部 |

Events

| Event | Description | Arguments(detail) | | ------ | ----------------------------- | --------- | | thumb | 点击商品预览图触发 | { good: Good } | | specs | 点击商品规格显示区触发 | { good: Good } | | tag | 点击商品标签触发 | { good: Good, index: number } | | add-cart | 加入购物车 | { ...addCart.detail, good: Good, cardID: string, id: string } | | click | 点击卡片 | { good: Good } | | tap | 同click，用于兼容 | { good: Good } | | ob | 设置了thresholds且商品卡片的可见比例达到阈值 | { good: Good, context: WechatMiniprogram.IntersectionObserver, ob: WechatMiniprogram.ObserveCallbackResult, } |

外部样式类

| 类名 | 说明 | |-----------|-----------| | card-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-card-l-height | line-height | 组件全局行高 | 1 | | --ui-goods-card-direction | flex-direction | 组件main区块flex方向 | row | | --ui-goods-card-padding | padding | 组件main区块padding | 0 | | --ui-goods-card-bg | background | 组件main区块背景 | transparent | | --ui-goods-card-width | width | 组件main区块宽度 | - | | --ui-goods-card-height | height | 组件main区块高度 | - | | --ui-goods-card-radius | border-radius | 组件main区块圆角 | - | | --ui-goods-card-overflow | overflow | 组件main区块溢出行为 | - | | --ui-goods-card-thumb-width | width | 组件预览图区块宽度 | 140rpx | | --ui-goods-card-thumb-height | height | 组件预览图区块宽度 | 140rpx | | --ui-goods-card-thumb-radius | border-radius | 组件预览图区块圆角 | - | | --ui-goods-card-body-direction | flex-direction | 组件body图区块flex方向 | row | | --ui-goods-card-body-margin | margin | 组件body图区块margin | 0 0 0 20rpx | | --ui-goods-card-body-flex | flex | 组件body图区块flex设置(flex-grow flex-shrink flex-basis) | 1 1 auto | | --ui-goods-card-long-direction | flex-direction | long区块的flex方向 | column | | --ui-goods-card-long-height | height | long区块指定高度 | - | | --ui-goods-card-long-overflow | overflow | long区块溢出行为 | - | | --ui-goods-card-long-flex | flex | long区块flex设置(flex-grow flex-shrink flex-basis) | 1 1 auto | | --ui-goods-card-title-size | font-size | 标题字体大小 | 28rpx | | --ui-goods-card-title-color | color | 标题字体颜色 | #333 | | --ui-goods-card-title-height | height | 标题区块高度 | - | | --ui-goods-card-title-l-height | line-height | 标题行高 | 40rpx | | --ui-goods-card-title-tag-margin | margin | 标题前tag margin | 0 8rpx 0 0 | | --ui-goods-card-desc-size | font-size | 描述字体大小 | 24rpx | | --ui-goods-card-desc-color | color | 描述字体颜色 | #F5F5F5 | | --ui-goods-card-desc-l-height | line-height | 描述行高 | 40rpx | | --ui-goods-card-specs-size | font-size | 规格值字体大小 | 20rpx | | --ui-goods-card-specs-color | color | 规格值字体颜色 | #333 | | --ui-goods-card-specs-bg | background | 规格值字体颜色 | #F5F5F5 | | --ui-goods-card-specs-icon-size | --ui-icon-size | 规格值icon(右箭头)大小 | 16rpx | | --ui-goods-card-tags-wrap | flex-wrao | 标签区块flex换行行为 | wrap | | --ui-goods-card-tags-margin | margin | 标签区块margin | 16rpx 0 0 0 | | --ui-goods-card-tag-color | color | 标签前景色 | #FA550F | | --ui-goods-card-tag-bg | background | 标签背景色 | transparent | | --ui-goods-card-tag-size | font-size | 标签字体大小 | 20rpx | | --ui-goods-card-tag-border | border | 标签border | 1rpx solid #FA550F | | --ui-goods-card-tag-padding | padding | 标签border | 0 8rpx | | --ui-goods-card-tag-height | height | 标签高度 | 30rpx | | --ui-goods-card-tag-max-width | max-width | 标签最大长度 | - | | --ui-goods-card-tag-margin | margin | 标签margin | 0 8rpx 0 0 | | --ui-goods-card-tag-display | display | 标签display | block | | --ui-goods-card-tag-overflow | overflow | 标签overflow | hidden | | --ui-goods-card-tag-white-space | white-space | 标签white-space | nowrap | | --ui-goods-card-tag-word-break | word-break | 标签word-break | keep-all | | --ui-goods-card-tag-text-overflow | text-overflow | 标签text-overflow | ellipsis | | --ui-goods-card-short-position | position | short区块position | - | | --ui-goods-card-short-direction | flex-direction | short区块flex方向 | - | | --ui-goods-card-short-justify | justify-content | short区块主轴对齐 | flex-start | | --ui-goods-card-short-align | align-items | short区块副轴对齐 | flex-start | | --ui-goods-card-short-margin | margin | short区块margin | 0 0 0 46rpx | | --ui-goods-card-price-pre-order | order | 价格前文案order | 0 | | --ui-goods-card-price-pre-color | color | 价格前文案颜色 | #666 | | --ui-goods-card-price-pre-margin | margin | 价格前文案margin | 0 | | --ui-goods-card-price-weight | font-weight | 价格字重 | 600 | | --ui-goods-card-price-order | order | 价格order | 1 | | --ui-goods-card-price-color | color | 价格color | #333| | --ui-goods-card-price-size | font-size | 价格字体大小 | 28rpx | | --ui-goods-card-price-margin | margin | 价格margin | 0 | | --ui-goods-card-price-display | --ui-price-display | - | - | | --ui-goods-card-price-color | --ui-price-color | - | - | | --ui-goods-card-price-size | --ui-price-size | - | - | | --ui-goods-card-price-weight | --ui-price-weight | - | - | | --ui-goods-card-price-decoration | --ui-price-decoration | - | - | | --ui-goods-card-price-symbol-color | --ui-price-symbol-color | - | - | | --ui-goods-card-price-symbol-size | --ui-price-symbol-size | - | 20rpx | | --ui-goods-card-price-pprice-margin | --ui-price-pprice-margin | - | - | | --ui-goods-card-price-integer-color | --ui-price-integer-color | - | - | | --ui-goods-card-price-integer-size | --ui-price-integer-size | - | - | | --ui-goods-card-price-decimal-color | --ui-price-decimal-color | - | - | | --ui-goods-card-price-decimal-size | --ui-price-decimal-size | - | 20rpx | | --ui-goods-card-o-price-weight | font-weight | 划线价字重 | 400 | | --ui-goods-card-o-price-order | order | 划线价order | 2 | | --ui-goods-card-o-price-color | color | 划线价color | #AAAAAA | | --ui-goods-card-o-price-size | font-size | 划线价字体大小 | 24rpx | | --ui-goods-card-o-price-margin | margin | 划线价margin | 0 | | --ui-goods-card-o-price-display | --ui-price-display | - | - | | --ui-goods-card-o-price-color | --ui-price-color | - | - | | --ui-goods-card-o-price-size | --ui-price-size | - | - | | --ui-goods-card-o-price-weight | --ui-price-weight | - | - | | --ui-goods-card-o-price-decoration | --ui-price-decoration | - | - | | --ui-goods-card-o-price-symbol-color | --ui-price-symbol-color | - | - | | --ui-goods-card-o-price-symbol-size | --ui-price-symbol-size | - | 20rpx | | --ui-goods-card-o-price-pprice-margin | --ui-price-pprice-margin | - | - | | --ui-goods-card-o-price-integer-color | --ui-price-integer-color | - | - | | --ui-goods-card-o-price-integer-size | --ui-price-integer-size | - | - | | --ui-goods-card-o-price-decimal-color | --ui-price-decimal-color | - | - | | --ui-goods-card-o-price-decimal-size | --ui-price-decimal-size | - | 20rpx | | --ui-goods-card-number-order | order | 数量order | 4 | | --ui-goods-card-number-size | font-size | 数量字体大小 | 24rpx | | --ui-goods-card-number-color | color | 数量颜色 | #999 | | --ui-goods-card-number-margin | margin | 数量margin | 20rpx 0 0 auto | | --ui-goods-card-cart-order | order | 购物车order | 3 | | --ui-goods-card-cart-margin | margin | 购物车margin | auto 0 0 auto | | --ui-goods-card-cart-position | position | 购物车position | - | | --ui-goods-card-cart-bottom | bottom | 购物车bottom | - | | --ui-goods-card-cart-right | right | 购物车right | - |