wxlitian/miniprogram/components/goods-specs-popup/goods-specs-popup.wxml

<t-popup visible="{{show}}" placement="bottom" bind:visible-change="handlePopupHide">
  <view class="popup-container">
    <view class="popup-close" bindtap="handlePopupHide">
      <t-icon name="close" size="36rpx" />
    </view>
    <view class="popup-sku-header">
      <t-image t-class="popup-sku-header__img" src="{{src}}" />
      <view class="popup-sku-header__goods-info">
        <view class="popup-sku__goods-name">{{title}}</view>
        <view class="goods-price-container">
          <slot name="goods-price" />
        </view>
        <!-- 已选规格 -->
        <view class="popup-sku__selected-spec">
          <!-- <view style="flex-shrink: 0;">选择：</view> -->
          <view style="flex: 1; display: flex;flex-wrap: wrap;">
            <view wx:for="{{specList}}" wx:key="specId">
              <view class="popup-sku__selected-item" wx:for="{{item.specValueList}}" wx:for-item="selectedItem" wx:if="{{selectedItem.isChoosed}}" wx:key="specValueId">
                {{selectedItem.specValue}}
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="popup-sku-body">
      <view class="popup-sku-group-container">
        <view class="popup-sku-row" wx:for="{{specList}}" wx:key="specId">
          <view class="popup-sku-row__title">{{item.title}}</view>
          <block wx:for="{{item.specValueList}}" wx:for-item="valuesItem" wx:for-index="valuesIndex" wx:key="specValueId">
            <view class="popup-sku-row__item {{valuesItem.isChoosed ? 'popup-sku-row__item--active' : ''}} {{!valuesItem.hasStockObj.hasStock || !isStock ? 'disabled-sku-selected' : ''}}" data-specid="{{item.specId}}" data-id="{{valuesItem.specValueId}}" data-val="{{valuesItem.specValue}}" data-hasStock="{{valuesItem.hasStockObj.hasStock}}" bindtap="toChooseItem">
              <view wx:if="{{valuesItem.image && valuesItem.image.length > 0}}">
                <image src="{{valuesItem.image}}" mode="widthFix" />
              </view>
              <view>{{valuesItem.specValue}}</view>
            </view>
          </block>
        </view>
      </view>
      <view class="popup-sku-stepper-stock" wx:if="{{!outEditStatus}}">
        <view class="popup-sku-stepper-container">
          <view class="popup-sku__stepper-title">
            购买数量
            <view class="limit-text" wx:if="{{limitBuyInfo}}">
              ({{limitBuyInfo}})
            </view>
          </view>
          <view class="popup-stepper popup-sku__stepper">
            <view class="input-btn popup-stepper__minus" bindtap="handleBuyNumMinus">
              <t-icon name="remove" size="24rpx" />
            </view>
            <view class="input-num-wrap">
              <input maxlength="{{limitCount}}" class="input-num" type="number" value="{{buyNum}}" bindblur="handleBuyNumChange" />
            </view>
            <view class="input-btn popup-stepper__plus" bindtap="handleBuyNumPlus">
              <t-icon name="add" size="24rpx" />
            </view>
          </view>
        </view>
      </view>
    </view>
    <view wx:if="{{outOperateStatus}}" class="single-confirm-btn {{!isStock ? 'disabled' : ''}}" bindtap="specsConfirm">
      加入购物车
    </view>
    <view wx:if="{{outEditStatus}}" class="single-confirm-btn {{!isStock ? 'disabled' : ''}}" bindtap="specsConfirm">
      确认
    </view>
    <view class="popup-sku-actions flex flex-between {{!isStock ? 'popup-sku-disabled' : ''}}" wx:if="{{!outOperateStatus && !outEditStatus}}">
      <view class="sku-operate">
        <view class="selected-sku-btn sku-operate-addCart {{!isStock ? 'disabled' : ''}}" bindtap="addCart">
          加入购物车
        </view>
      </view>
      <view class="sku-operate">
        <view class="selected-sku-btn sku-operate-buyNow  {{!isStock ? 'disabled' : ''}}" bindtap="buyNow">
          立即购买
        </view>
      </view>
    </view>
    <slot name="bottomSlot" />
  </view>
</t-popup>
<t-toast id="t-toast" />

<wxs module="col">
  var stringify = function (val) {
    return JSON.stringify(val)
  }

  module.exports = {
    stringify: stringify
  }
</wxs>