SpecsGoodsCard 带已选规格的商品卡片

引入

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

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

代码演示

基础用法

该组件基于components\goods-card组件，透传components\goods-card的所有参数，可替代使用。 可参考\we-retail\src\supermarket\components\order-goods-card中的用法。

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-specs-goods-card data="{{good}}" />

自定义样式

本组件在goods-card的基础上增加了弹框展示。 由于组件中有两处使用goods-card组件，并且样式不同，页面在通过样式覆盖实现自己的样式时，要注意区分。

<wr-specs-goods-card
  class="order-goods-card"
  wx:if="{{!hidden}}"
  data="{{good}}"
></wr-specs-goods-card>

/* 限定样式覆盖范围，避免同时覆盖了组件中的两处`goods-card` */
/* 限定仅覆盖 .order-goods-card > wr-goods-card 下的goods-card样式 */
.order-goods-card > wr-goods-card {
  .wr-goods-card {
    background-color: white;

    &__thumb {
      width: 140rpx;
      height: 140rpx;
      background-color: white;
    }
    // 更多...
  }
}

API

Props

透传goods-card需要的属性的属性，具体参考goods-card的README.md

以下是新增的属性 | 参数 | 说明 | 类型 | 默认值 | 说明 | | disable-popup | 禁止弹框 | boolean | false | - |

Events

透传goods-card的所有事件，具体参考goods-card的README.md 以下是新增的事件 | Event | Description | Arguments | | ------ | ----------------------------- | --------- | | specstap | 点击规格弹框时触发 | - | | specsopen | 打开规格弹框时触发 | - | | specsclose | 关闭规格弹框时触发 | - |

关于样式覆盖

本组件下external.less文件是覆盖弹框中的goods-card样式，页面less必须直接/间接的引入该文件。

外部样式类透传

goods-card所有的外部样式类除了card-class之外都可以透传，card-class被占用了不会透传。