npm package: @retailwe/ui-goods-specs-popup
Description: ## 引入
Latest version: 0.0.21

# 商品规格选择弹窗

## 引入

```json
"usingComponents": {
  "wr-good-specs-popup": "@retailwe/ui-good-specs-popup/index"
}
```

## 代码演示

```html
<goods-specs-popup
  id="goodsSpecsPopup"
  show="{{isSpuSelectPopupShow}}"
  title="{{details.title}}"
  src="{{specImg ? specImg : primaryImage}}"
  specList="{{details.specList}}"
  skuList="{{skuArray}}"
  bind:closeSpecsPopup="handlePopupHide"
  bind:change="chooseSpecItem"
  bind:changeNum="changeNum"
  bind:addCart="addCart"
  bind:buyNow="gotoBuy"
  isStock="{{isStock}}"
  isSlotButton="{{outOperateStatus ? true : false}}"
>
  <view slot="goods-price">
    <view class="popup-sku__price">
      <view
        class="popup-sku__price-num"
        wx:if="{{!isAllSelectedSku || (!promotionSubCode && isAllSelectedSku)}}"
      >
        <price
          price=" {{selectSkuSellsPrice ? selectSkuSellsPrice : minSalePrice }}"
          wr-class="popup-sku__price-num"
          type="lighter"
          fill="{{false}}"
        >
          {{selectSkuSellsPrice ? selectSkuSellsPrice : minSalePrice }}
        </price>
      </view>
      <block
        wx:if="{{selectSkuSellsPrice === 0 && minSalePrice !== maxSalePrice && !isAllSelectedSku}}"
      >
        <view class="delthrough"></view>
        <price
          price=" {{maxSalePrice }}"
          symbol=""
          wr-class="popup-sku__price-num"
          type="lighter"
          fill="{{false}}"
        >
          {{maxSalePrice }}
        </price>
      </block>
    </view>
  </view>
  <view slot="bottomSlot">
    <wr-toast id="toast2" wr-class="skuToast"></wr-toast>
  </view>
  <view
    class="sku-operate sku-operate-confirm "
    slot="slotButton"
    wx:if="{{outOperateStatus}}"
  >
    <view
      class="btn selected-sku-btn {{!isStock ? 'disabled' : ''}}"
      bindtap="specsConfirm"
    >
      确定
    </view>
  </view>
</goods-specs-popup>
```

```ts
interface SpecsValueListItem {
  hasStockObj: HasStockParams;
  specValue: string;
  specValueId: string;
  isChoosed: boolean;
}

interface SpecsItem {
  title: string; // 规格名称
  specId: string; // 规格ID
  specValueList: SpecsValueListItem[];
}

interface SpecInfoItem {
  specId: string; // 规格ID
  specValueId: string; // 规格值ID
}

interface SkuListItem {
  skuId: string;
  quantity: number; // 库存数量
  specInfo?: SpecInfoItem[];
}
```

#### 入参

| 参数          |       说明       |          类型 | 默认值 | 是否必要 |
| :------------ | :--------------: | ------------: | ------ | -------- |
| specList      |     规格数据     |   SpecsItem[] | []     | 否       |
| skuList       |  商品 sku 数据   | SkuListItem[] | []     | 否       |
| show          |     显示隐藏     |       Boolean | false  | 是       |
| title         |       标题       |        String | ''     | 否       |
| src           |     图片地址     |        String | ''     | 否       |
| isStock       |    是否有库存    |       Boolean | true   | 否       |
| limitMaxCount | 限制最大选择数量 |        Number | 999    | 否       |
| limitMinCount | 限制最小选择数量 |        Number | 1      | 否       |
| count         |       数量       |        Number | 1      | 否       |
| isSlotButton  |  是否自定义按钮  |       Boolean | false  | 否       |

#### Events

| 事件            | 是否必要 |                                                                说明 |
| :-------------- | :------: | ------------------------------------------------------------------: |
| closeSpecsPopup |    是    |                                                            关闭弹窗 |
| changeNum       |    是    |                                          数量选择事件，返回所选数量 |
| change          |    否    | 返回选择的规格对象数组 selectedSku 和 规格是否全选 isAllSelectedSku |
| addCart         |    是    |                                                          加入购物车 |
| buyNow          |    是    |                            立即购买， 返回是否全选 isAllSelectedSku |

#### selectedSku 解释

```
[
  {
    specId: specValueId // 规格ID: 规格值ID
  }
]
```

#### 外部样式类

| 类名     | 说明         |
| -------- | ------------ |
| wr-class | 根节点样式类 |
| specs-class | 规格样式 |
| price-class | 价格样式 |
#### slot

| name        | 说明                                  |
| ----------- | ------------------------------------- |
| goods-price | 价格 插槽 ， 需要自己处理价格显示逻辑 |
| bottomSlot  | 底部 插槽                             |
| slotButton  | 按钮插槽                              |