# 商品规格选择弹窗

## 引入

```json
"usingComponents": {
  "goods-spec-popup": "/components/goods-spec-popup/index"
}
```

## 代码演示

```html
<goods-spec-popup
  show="{{ goodsSpecPopupVisible }}"
  btnDisabled="{{ specPopupBtnDisabled }}"
  skuList="{{ goodsDetailsData.skuList }}"
  specList="{{ goodsDetailsData.specGroupList }}"
  imgUrl="{{ specImgUrl }}"
  selectedGoodsTypes="{{ selectedGoodsTypes }}"
  disabledGoodsTypes="{{ disabledGoodsTypes }}"
  goodsPrice="{{ goodsPrice }}"
  discountPrice="{{ discountPrice }}"
  bind:goodsConfirm="onGoodsConfirm"
  bind:closeSpecsPopup="hideGoodsSpecPopup"
/>
```

```ts
/**
 * 默认选中的商品项
 */
export type SelectedGoodsTypes = Array<GoodsSpecificatedItem>;

/**
 * 禁用（没有库存）
 */
export type DisabledGoodsTypes = Array<Array<number>>;

/**
 * Sku项
 */
export interface SkuItem {
  /**
   * Sku图片
   */
  pic: string;
  /**
   * Sku排序
   */
  skuNum: string;
  /**
   * Sku ID
   */
  skuId: number;
  /**
   * Sku 库存
   */
  stock: number;
  /**
   * Sku 库存
   */
  price: number;
  /**
   * Sku 组合名称(白_XL)
   */
  detailName: string;
}

/**
 * 规格详细项
 */
export interface SpecDetailItem {
  /**
   * 规格值(白、L)
   */
  name: string;
  /**
   * 排序值
   */
  sort: number;
  /**
   * 状态，0-禁用 1-启用
   */
  state: number;
}

/**
 * 规格类
 */
export interface SpecItem {
  /**
   * 规格名(颜色、尺码)
   */
  name: string;
  /**
   * 是否必选，0否，1是
   */
  isMustChoose: number;
  /**
   * 状态
   */
  state?: number;
  /**
   * 排序值
   */
  sort: number;
  /**
   * 规格详情列表
   */
  specDetailList: SpecDetailItem[];
}

/**
 * 数据类型
 */
export interface DataType {
  /**
   * 默认选择的商品类型
   */
  selectedGoodsTypes: SelectedGoodsTypes;
  /**
   * 默认禁用的商品类型
   */
  disabledGoodsTypes: DisabledGoodsTypes;
  /**
   * 商品 sku 数据
   */
  skuList: SkuItem[];
  /**
   * 商品 sku 数据
   */
  specList: SpecItem[];
  /**
   * 商品规格数据列表
   */
  goodsTypesOptions: any[];
  /**
   * 默认选择的规格展示文案
   */
  selectedGoodsShowText: string;
  /**
   * 商品单价
   */
  goodsPrice: string;
  /**
   * 商品数量
   */
  goodsCount: number;
  /**
   * 是否展示
   */
  show: boolean;
  /**
   * 默认展示的规格图片地址
   */
  imgUrl: string;
}

/**
 * 商品规格详情项
 */
export interface GoodsSpecificatedItem {
  /**
   * 商品规格id
   */
  id: number;
  /**
   * 商品规格显示文案
   */
  text: string;
  /**
   * 商品规格图片
   */
  imgUrl: string;
}
```

#### Props

| 参数               |         说明         |            类型 | 默认值  | 是否必要 |
| :----------------- | :------------------: | --------------: | ------- | -------- | --- |
| skuList            |    商品 sku 数据     | `SkuListItem[]` | []      | 否       |
| specList           |     商品规格数据     |   `SpecsItem[]` | []      | 否       |
| show               |       显示隐藏       |       `Boolean` | false   | 是       |
| btnDisabled        |     按钮是否禁用     |       `Boolean` | false   | 否       |
| btnText            |       按钮文案       |        `String` | '确定'  | 否       |
| title              |         标题         |        `String` | ''      | 否       |
| imgUrl             |       图片地址       |        `String` | ''      | 否       |
| maxCount           |   限制最大选择数量   |        `Number` | 999999  | 否       |
| minCount           |   限制最小选择数量   |        `Number` | 1       | 否       |
| goodsCount         |  默认选择的商品数量  |         `Number | String` | 1        | 否  |
| goodsPrice         |  默认选择的商品价格  |         `Number | String` | 0        | 否  |
| discountPrice      | 默认选择的商品折扣价 |        `Number` | 0       | 否       |
| selectedGoodsTypes |   默认选中的商品项   |         `Array` | []      | 否       |
| disabledGoodsTypes |   禁用（没有库存）   |         `Array` | []      | 否       |
| useSlotButton      |    是否自定义按钮    |       `Boolean` | false   | 否       |

#### Events

| 事件            | 是否必要 |                                                                            说明 |
| :-------------- | :------: | ------------------------------------------------------------------------------: |
| closeSpecsPopup |    是    |                                                                    关闭弹窗回调 |
| changeCount     |    否    |                                                      数量选择事件，返回所选数量 |
| chooseSpecItem  |    否    | 返回选择的商品规格对象 goodsPrice(商品单价), selectedGoodsTypes(选择的商品规格) |
| goodsConfirm    |    是    |                                                                  确认商品的回调 |

#### 外部样式类

| 类名             | 说明             |
| ---------------- | ---------------- |
| wrapper-class    | 根节点样式类     |
| spec-info-class  | 规格节点样式     |
| spec-row-class   | 规格行节点样式   |
| spec-count-class | 规格数量节点样式 |
| spec-total-class | 规格总价节点样式 |

#### slot

| name       | 说明     |
| ---------- | -------- |
| slotButton | 按钮插槽 |