Vant 商品规格sku用法

<template>
<div>  <!-- 基础用法 --> <div><van-skuv-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-hidereset-selected-sku-on-hidedisable-stepper-input:close-on-click-overlay="closeOnClickOverlay" :custom-sku-validator="customSkuValidator" @buy-clicked="onBuyClicked"@add-cart="onAddCartClicked" /><van-buttontype="primary"@click="showBase = true">商品规格</van-button></div></div>
</template><script>
import skuData from '../../public/data.js';
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: {onAddCartClicked(data) { //加入购物车this.$toast('add cart:' + JSON.stringify(data));},onBuyClicked(data) { //立即购买this.$toast('buy:' + JSON.stringify(data));console.log(JSON.stringify(data))}}
};
</script><style scoped="scoped"></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、天蓝色2list: [{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, //限购数量 quota_used: 0,  //已经购买过的数量goods_info: {title: '测试商品A',picture:'https://img.yzcdn.cn/upload_files/2017/03/16/Fs_OMbSFPa183sBwvG_94llUYiLa.jpeg?imageView2/2/w/100/h/100/q/75/format/jpg' },initialSku:{s1: "0001",s2: "1001",selectedNum: 3}
};

Vant 商品规格sku用法相关推荐

后台配置商品规格sku（vue+element）
效果gif: 主要数据结构: 规格项: goodsSpecs: [{ attr:"颜色", valueList:[{"title": "红" ...
有赞vant_vue+有赞vant的商品规格sku记录-小程序
vant-vue关于sku规格是说明,并不详情,从手册复制无法使用.git下载安装vant后的sku示例却很详情. 我剔除了高级用法,以下是基础用法示例: sku.vue文件 <template ...
商品规格sku算法应用
近期在做商城商品规格这个模块,规格联动这边看似简单,实则坑(学问)深着呢.只怪自己轻视了它,未经思考便上手,于是越写越棘手,越绕越晕... 两天后,成功地把自己套牢,写不下去了. 上网寻找,看了淘宝S ...
php商品规格sku,SKU商品规格选择
SKU商品规格选择在线demo地址 Github代码地址可选属性实现思路当用户点击某选项(如"黑色")时,拿到此时所有规格的选项( { color: "黑色&quo ...
java 开发之商品规格属性（SKU）组合算法
java 开发之商品规格属性(SKU)组合算法开发背景一般在开发商城的时候都会遇到商品规格组合的问题, 在这个开发过程中就需要一套算法用来组合多个规格属性,用来给每个组合定一组封面图和价格比如某 ...
【javaWeb微服务架构项目——乐优商城day05】——商品规格参数管理(增、删、改,查已完成)，SPU和SKU数据结构，商品查询
乐优商城day05 0.学习目标 1.商品规格数据结构 1.1.SPU和SKU 1.2.数据库设计分析 1.2.1.思考并发现问题 1.2.2.分析规格参数 1.2.3.SKU的特有属性 1.2.4. ...
商品规格属性（SKU）组合算法
借鉴java 开发之商品规格属性(SKU)组合算法_Runt02的博客-CSDN博客_java 商品属性 public List<LinkedHashMap<String, String& ...
电商项目--------------------商品（SKU）规格、价格功能
目录 1.功能介绍: 2.核心功能实现: 1.功能介绍: 当我们进入商品详情页面时 ①.商品的规格选项栏,规格选项栏目展示(可选择---部分展示,即已有规格选项) 默认展示基础价格商品,基础价格=商品 ...
【VK】商品多规格SKU选择器组件豪华版（uniapp版，可编译成H5、APP、各大小程序）
插件名称:vk-data-goods-sku-popup 作者:VK [开箱即用]商品sku选择器组件豪华独立版插件Q群:22466457 插件下载地址:点击下载SKU组件体验地址组件安装到自己 ...

Vant 商品规格sku用法

Vant 商品规格sku用法

Vant 商品规格sku用法相关推荐

最新文章

热门文章