@retailwe/ui-goods-specs-popup v0.0.21

商品规格选择弹窗

引入

"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[];
}

入参

Events

selectedSku 解释

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

外部样式类

slot