商品规格选择弹窗

引入

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

代码演示

<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>

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 | 按钮插槽 |