Vant Sku 商品規(guī)格

引入

import Vue from 'vue';
import { Sku } from 'vant';

Vue.use(Sku);

代碼演示

基礎用法

<van-sku
  v-model="show"
  :sku="sku"
  :goods="goods"
  :goods-id="goodsId"
  :quota="quota"
  :quota-used="quotaUsed"
  :hide-stock="sku.hide_stock"
  :message-config="messageConfig"
  @buy-clicked="onBuyClicked"
  @add-cart="onAddCartClicked"
/>

export default {
  data() {
    return {
      show: false,
      sku: {
        // 數(shù)據(jù)結(jié)構(gòu)見下方文檔
      },
      goods: {
        // 數(shù)據(jù)結(jié)構(gòu)見下方文檔
      },
      messageConfig: {
        // 數(shù)據(jù)結(jié)構(gòu)見下方文檔
      }
    };
  }
}

自定義步進器

<van-sku
  v-model="show"
  :sku="sku"
  :goods="goods"
  :goods-id="goodsId"
  :quota="quota"
  :quota-used="quotaUsed"
  :hide-stock="sku.hide_stock"
  :custom-stepper-config="customStepperConfig"
  @buy-clicked="onBuyClicked"
  @add-cart="onAddCartClicked"
/>

高級用法

<van-sku
  v-model="show"
  stepper-title="我要買"
  :sku="sku"
  :goods="goods"
  :goods-id="goodsId"
  :quota="quota"
  :quota-used="quotaUsed"
  :hide-stock="sku.hide_stock"
  show-add-cart-btn
  reset-stepper-on-hide
  :initial-sku="initialSku"
  @buy-clicked="onBuyClicked"
  @add-cart="onAddCartClicked"
>
  <!-- 自定義 sku-header-price -->
  <template slot="sku-header-price" slot-scope="props">
    <div class="van-sku__goods-price">
      <span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ props.price }}</span>
    </div>
  </template>

  <!-- 自定義 sku actions -->
  <template slot="sku-actions" slot-scope="props">
    <div class="van-sku-actions">
      <van-button
        square
        size="large"
        type="warning"
        @click="onPointClicked"
      >
        積分兌換
      </van-button>
      <!-- 直接觸發(fā) sku 內(nèi)部事件，通過內(nèi)部事件執(zhí)行 onBuyClicked 回調(diào) -->
      <van-button
        square
        size="large"
        type="danger"
        @click="props.skuEventBus.$emit('sku:buy')"
      >
        買買買
      </van-button>
    </div>
  </template>
</van-sku>

API

Props

Events

方法

通過 ref 可以獲取到 Sku 實例并調(diào)用實例方法，詳見 組件實例方法

Slots

Sku 組件默認劃分好了若干區(qū)塊，這些區(qū)塊都定義成了插槽，可以按需進行替換。區(qū)塊順序見下表：

sku 對象結(jié)構(gòu)

sku: {
  // 所有sku規(guī)格類目與其值的從屬關(guān)系，比如商品有顏色和尺碼兩大類規(guī)格，顏色下面又有紅色和藍色兩個規(guī)格值。
  // 可以理解為一個商品可以有多個規(guī)格類目，一個規(guī)格類目下可以有多個規(guī)格值。
  tree: [
    {
      k: '顏色', // skuKeyName：規(guī)格類目名稱
      v: [
        {
          id: '30349', // skuValueId：規(guī)格值 id
          name: '紅色', // skuValueName：規(guī)格值名稱
          imgUrl: 'https://img.yzcdn.cn/1.jpg', // 規(guī)格類目圖片，只有第一個規(guī)格類目可以定義圖片
          previewImgUrl: 'https://img.yzcdn.cn/1p.jpg', // 用于預覽顯示的規(guī)格類目圖片
        },
        {
          id: '1215',
          name: '藍色',
          imgUrl: 'https://img.yzcdn.cn/2.jpg',
          previewImgUrl: 'https://img.yzcdn.cn/2p.jpg',
        }
      ],
      k_s: 's1' // skuKeyStr：sku 組合列表（下方 list）中當前類目對應的 key 值，value 值會是從屬于當前類目的一個規(guī)格值 id
    }
  ],
  // 所有 sku 的組合列表，比如紅色、M 碼為一個 sku 組合，紅色、S 碼為另一個組合
  list: [
    {
      id: 2259, // skuId，下單時后端需要
      price: 100, // 價格（單位分）
      s1: '1215', // 規(guī)格類目 k_s 為 s1 的對應規(guī)格值 id
      s2: '1193', // 規(guī)格類目 k_s 為 s2 的對應規(guī)格值 id
      s3: '0', // 最多包含3個規(guī)格值，為0表示不存在該規(guī)格
      stock_num: 110 // 當前 sku 組合對應的庫存
    }
  ],
  price: '1.00', // 默認價格（單位元）
  stock_num: 227, // 商品總庫存
  collection_id: 2261, // 無規(guī)格商品 skuId 取 collection_id，否則取所選 sku 組合對應的 id
  none_sku: false, // 是否無規(guī)格商品
  messages: [
    {
      // 商品留言
      datetime: '0', // 留言類型為 time 時，是否含日期。'1' 表示包含
      multiple: '0', // 留言類型為 text 時，是否多行文本。'1' 表示多行
      name: '留言', // 留言名稱
      type: 'text', // 留言類型，可選: id_no（身份證）, text, tel, date, time, email
      required: '1', // 是否必填 '1' 表示必填
      placeholder: '' // 可選值，占位文本
    }
  ],
  hide_stock: false // 是否隱藏剩余庫存
}

properties 對象結(jié)構(gòu)

  [ // 商品屬性
    {
      k_id: 123, // 屬性id
      k: '加料', // 屬性名
      is_multiple: true, // 是否可多選
      v: [
        {
          id: 1222, // 屬性值id
          name: '珍珠', // 屬性值名
          price: 1, // 屬性值加價
        },
        {
          id: 1223,
          name: '椰果',
          price: 1,
        }
      ],
    }
  ]

initialSku 對象結(jié)構(gòu)

{
  // 鍵：skuKeyStr（sku 組合列表中當前類目對應的 key 值）
  // 值：skuValueId（規(guī)格值 id）
  s1: '30349',
  s2: '1193',
  // 初始選中數(shù)量
  selectedNum: 3,
  // 初始選中的商品屬性
  // 鍵：屬性id
  // 值：屬性值id列表
  selectedProp: {
    123: [1222]
  }
}

goods 對象結(jié)構(gòu)

goods: {
  // 商品標題
  title: '測試商品',
  // 默認商品 sku 縮略圖
  picture: 'https://img.yzcdn.cn/1.jpg'
}

customStepperConfig 對象結(jié)構(gòu)

customStepperConfig: {
  // 自定義限購文案
  quotaText: '每次限購xxx件',
  // 自定義步進器超過限制時的回調(diào)
  handleOverLimit: (data) => {
    const { action, limitType, quota, quotaUsed, startSaleNum } = data;

    if (action === 'minus') {
      Toast(startSaleNum > 1  ? `${startSaleNum}件起售` : '至少選擇一件商品');
    } else if (action === 'plus') {
      // const { LIMIT_TYPE } = Sku.skuConstants;
      if (limitType === LIMIT_TYPE.QUOTA_LIMIT) {
        let msg = `單次限購${quota}件`;
        if (quotaUsed > 0) msg += `，你已購買${quotaUsed}`;
        Toast(msg);
      } else {
        Toast('庫存不夠了');
      }
    }
  },
  // 步進器變化的回調(diào)
  handleStepperChange: currentValue => {},
  // 庫存
  stockNum: 1999,
  // 格式化庫存
  stockFormatter: stockNum => {},
}

messageConfig Data Structure

messageConfig: {
  // 圖片上傳回調(diào)，需要返回一個promise，promise正確執(zhí)行的結(jié)果需要是一個圖片url
  uploadImg: () => {
    return new Promise((resolve) => {
      setTimeout(() => resolve('https://img.yzcdn.cn/upload_files/2017/02/21/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg!100x100.jpg'), 1000);
    });
  },
  // 最大上傳體積 (MB)
  uploadMaxSize: 3,
  // placeholder 配置
  placeholderMap: {
    text: 'xxx',
    tel: 'xxx',
    ...
  }
}

添加購物車和點擊購買回調(diào)函數(shù)接收的 skuData 對象結(jié)構(gòu)

skuData: {
  // 商品 id
  goodsId: '946755',
  // 留言信息
  messages: {
    message_0: '12',
    message_1: ''
  },
  // 另一種格式的留言，key 不同
  cartMessages: {
    '留言1': 'xxxx'
  },
  // 選擇的商品數(shù)量
  selectedNum: 1,
  // 選擇的 sku 組合
  selectedSkuComb: {
    id: 2257,
    price: 100,
    s1: '30349',
    s2: '1193',
    s3: '0',
    stock_num: 111,
    properties: [
      {
        k_id: 123,
        k: '加料',
        is_multiple: true,
        v: [
          {
            id: 1223,
            name: '椰果',
            price: 1
          }
        ]
      }
    ],
    property_price: 1
  },
}