vue+有赞vant的商品规格sku记录-小程序
vant-vue关于sku规格是说明，并不详情，从手册复制无法使用。git下载安装vant后的sku示例却很详情。
我剔除了高级用法，以下是基础用法示例：
sku.vue文件
<template> <div> <!-- 基础用法 --> <div class="sku-container"> <van-sku v-model="showBase" :sku="skuData.sku" :goods="skuData.goods_info" :goods-id="skuData.goods_id" :hide-stock="skuData.sku.hide_stock" :quota="skuData.quota" :quota-used="skuData.quota_used" :initial-sku="initialSku" //默认选中 reset-stepper-on-hide reset-selected-sku-on-hide disable-stepper-input :close-on-click-overlay="closeOnClickOverlay" :custom-sku-validator="customSkuValidator" @buy-clicked="onBuyClicked" @add-cart="onAddCartClicked" /> <van-button block type="primary" @click="showBase = true" > xxxx </van-button> </div> </div> </template> <script> import skuData from \'./data\'; export default { data() { return { skuData:skuData, showBase: true, showCustom: false, showStepper: false, showSoldout: false, closeOnClickOverlay: true, initialSku: { s1: \'30349\', s2: \'1193\', selectedNum: 3 }, customSkuValidator: () => \'请选择xxx!\', }; }, methods: { onBuyClicked(data) { this.$toast(\'buy:\' + JSON.stringify(data)); console.log(JSON.stringify(data)) }, onAddCartClicked(data) { this.$toast(\'add cart:\' + JSON.stringify(data)); }, } }; </script> <style lang="less"> .demo-sku { .sku-container { padding: 0 15px; } } </style>
data.js文件
export default { sku: { // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。 // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。 tree: [ { k: \'颜色\', k_id: \'1\', v: [ { id: \'30349\', name: \'天蓝色\', imgUrl: \'https://img.yzcdn.cn/upload_files/2017/02/21/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg!100x100.jpg\' }, { id: \'1215\', name: \'白色\' } ], k_s: \'s1\', count: 2 }, { k: \'尺寸\', k_id: \'2\', v: [ { id: \'1193\', name: \'1\' }, { id: \'1194\', name: \'2\' } ], k_s: \'s2\', count: 2 } ], // 所有 sku 的组合列表，如下是：白色1、白色2、天蓝色1、天蓝色2 list: [ { id: 2259, price: 120, //价格 discount: 122, s1: \'1215\', s2: \'1193\', s3: \'0\', s4: \'0\', s5: \'0\', stock_num: 20, //库存 goods_id: 946755 }, { id: 2260, price: 110, discount: 112, s1: \'1215\', s2: \'1194\', s3: \'0\', s4: \'0\', s5: \'0\', stock_num: 2, //库存 goods_id: 946755 }, { id: 2257, price: 130, discount: 132, s1: \'30349\', s2: \'1193\', s3: \'0\', s4: \'0\', s5: \'0\', stock_num: 40, //库存 goods_id: 946755 }, { id: 2258, price: 100, discount: 100, s1: \'30349\', s2: \'1194\', s3: \'0\', s4: \'0\', s5: \'0\', stock_num: 50, //库存 goods_id: 946755 } ], price: \'5.00\', stock_num: 227, // 商品总库存 none_sku: false, // 是否无规格商品 hide_stock: false // 是否隐藏剩余库存 }, goods_id: \'946755\', quota: 3,