@retailwe/ui-goods-card v0.0.20

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

Good

Slot

Events

外部样式类

CSS Var