首页>干货分享>前端>关于Vant商品规格（Sku组件）的使用
回复
« 返回列表
pbaba
pbaba
侠客
侠客
  • 最后登录2022-03-31
  • 发帖数2
写私信
阅读：3982回复：0

[vue]关于Vant商品规格（Sku组件）的使用

楼主#
更多 发布于：2021-04-07 19:09
首先，针对Vant官网的Sku组件，表达不明说的比较笼统。找了很久才找的一个完整的基础用法，直接上代码。
界面：
  1. <template><div>  
  2.    <!-- 基础用法 -->       <div>
  3.        <van-sku          v-model="showBase"
  4.          :sku="skuData.sku"          :goods="skuData.goods_info"
  5.          :goods-id="skuData.goods_id"          :hide-stock="skuData.sku.hide_stock"
  6.          :quota="skuData.quota"          :quota-used="skuData.quota_used"
  7.          :initial-sku="initialSku"          reset-stepper-on-hide
  8.          reset-selected-sku-on-hide          disable-stepper-input
  9.          :close-on-click-overlay="closeOnClickOverlay"           :custom-sku-validator="customSkuValidator"
  10.          @buy-clicked="onBuyClicked"          @add-cart="onAddCartClicked"
  11. />
  12.        <van-button          type="primary"
  13.          @click="showBase = true"        >
  14.          商品规格        </van-button>
  15.       </div>
  16. </div>
  17. </template>

  19. <script> import skuData from '../../public/data.js';
  20. export default {    data() {
  21.    return {      skuData:skuData,
  22.      showBase: true,      showCustom: false,
  23.      showStepper: false,      showSoldout: false,
  24.      closeOnClickOverlay: true,      initialSku: { //默认选中
  25.        s1: '30349',        s2: '1193',
  26.        selectedNum: 3      },
  27.      customSkuValidator: () => '请选择xxx!',     };
  28.  },  methods: {
  29. onAddCartClicked(data) { //加入购物车    
  30. this.$toast('add cart:' + JSON.stringify(data));
  31. },    onBuyClicked(data) { //立即购买
  32.      this.$toast('buy:' + JSON.stringify(data));
  33. console.log(JSON.stringify(data))
  34.    }
  35.  }};
  36. </script>

  38. <style scoped="scoped">
  39. </style>

data.js: (关于规格设置的相应属性，特别注意当多个规格组合时，相应id不对应则规格显示不出来。组合列表需仔细查看)
  1. export default {
  2.  sku: {
  3.    // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
  4.  // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
  5.    tree: [
  6.      {
  7.        k: '颜色',
  8.        k_id: '1',
  9.        v: [
  10.          {
  11.            id: '30349',
  12.            name: '天蓝色',
  13.            imgUrl:
  14. 'https://img.yzcdn.cn/upload_files/2017/02/21/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg!100x100.jpg'
  15.          },
  16.          {
  17.            id: '1215',
  18.            name: '白色'
  19.          }
  20.        ],
  21.        k_s: 's1',
  22.        count: 2
  23.      },
  24.      {
  25.        k: '尺寸',
  26.        k_id: '2',
  27.        v: [
  28.          {
  29.            id: '1193',
  30.            name: '1'
  31.          },
  32.          {
  33.            id: '1194',
  34.            name: '2'
  35.          }
  36.        ],
  37.        k_s: 's2',
  38.        count: 2
  39.      }
  40.    ],
  41.    // 所有 sku 的组合列表，如下是：白色1、白色2、天蓝色1、天蓝色2
  42.    list: [
  43.      {
  44.        id: 2259,
  45.        price: 120, //价格
  46.        discount: 122,
  47.        s1: '1215',
  48.        s2: '1193',
  49.        s3: '0',
  50.        s4: '0',
  51.        s5: '0',  
  52.        stock_num: 20, //库存
  53.        goods_id: 946755
  54.      },
  55.      {
  56.        id: 2260,
  57.        price: 110,
  58.        discount: 112,
  59.        s1: '1215',
  60.        s2: '1194',
  61.        s3: '0',
  62.        s4: '0',
  63.        s5: '0',  
  64.        stock_num: 2, //库存
  65.        goods_id: 946755
  66.      },
  67.      {
  68.        id: 2257,
  69.        price: 130,
  70.        discount: 132,
  71.        s1: '30349',
  72.        s2: '1193',
  73.        s3: '0',
  74.        s4: '0',
  75.        s5: '0',  
  76.        stock_num: 40, //库存
  77.        goods_id: 946755
  78.      },
  79.      {
  80.        id: 2258,
  81.        price: 100,
  82.        discount: 100,
  83.        s1: '30349',
  84.        s2: '1194',
  85.        s3: '0',
  86.        s4: '0',
  87.        s5: '0',  
  88.        stock_num: 50, //库存
  89.        goods_id: 946755
  90.      }
  91.    ],
  92.    price: '5.00',
  93.    stock_num: 227, // 商品总库存
  94.    none_sku: false,  // 是否无规格商品
  95.    hide_stock: false  // 是否隐藏剩余库存
  96.  },
  97.  goods_id: '946755',
  98.  quota: 3, //限购数量
  99.  quota_used: 0,  //已经购买过的数量
  100.  goods_info: {
  101.    title: '测试商品A',
  102.    picture:
  103.      'https://img.yzcdn.cn/upload_files/2017/03/16/Fs_OMbSFPa183sBwvG_94llUYiLa.jpeg?imageView2/2/w/100/h/100/q/75/format/jpg'
  104.  },
  105.  initialSku:{
  106.          s1: "0001",
  107.          s2: "1001",
  108.          selectedNum: 3
  109.      }
  110. };


转载地址：https://blog.csdn.net/Glory_05/article/details/112985407
Vant地址：https://youzan.github.io/vant/#/zh-CN/sku
喜欢0
回复
游客


Bug搜集 — 另一种学习方式

Copyright © 2015 - 2020 蜀ICP备15036559号-1

返回顶部

公众号

公众号