【VK】商品多规格SKU选择器组件豪华版（uniapp版，可编译成H5、APP、各大小程序）

已于 2022-05-18 15:30:25 修改
阅读量3.4k 收藏 13
点赞数 2
分类专栏： vk uniapp 文章标签： vue 小程序 node.js vk
于 2020-09-27 13:08:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wwqwwq112/article/details/108825894
版权
vk 同时被 2 个专栏收录
3 篇文章 1 订阅
订阅专栏
uniapp
3 篇文章 0 订阅
订阅专栏

插件名称：vk-data-goods-sku-popup

作者：VK

【开箱即用】商品sku选择器组件豪华独立版

插件Q群：22466457

插件下载地址：点击下载SKU组件

体验地址

组件安装到自己项目步骤

1、将components目录下的vk-data-goods-sku-popup 和 vk-data-input-number-box 复制到你项目根目录下的components目录下
若你的项目根目录下无components则先新增一个components目录
2、通过下面的基本使用示例的方式使用组件，API文档 在最下面
基本使用示例
<!-- 静态数据演示版本 适合任何后端 -->
<template>
  <view class="app">
    <button @click="openSkuPopup()">打开SKU组件</button>
    
    <vk-data-goods-sku-popup
      ref="skuPopup"
      v-model="skuKey" 
      border-radius="20" 
      :localdata="goodsInfo"
      :mode="skuMode"
      @open="onOpenSkuPopup"
      @close="onCloseSkuPopup"
      @add-cart="addCart"
      @buy-now="buyNow"
    ></vk-data-goods-sku-popup>
    
  </view>
</template>

<script>
  var that;											// 当前页面对象
  export default {
    data() {
      return {
        // 是否打开SKU弹窗
        skuKey:false,
        // SKU弹窗模式
        skuMode:1,
        // 后端返回的商品信息
        goodsInfo:{}
      }
    },
    // 监听 - 页面每次【加载时】执行(如：前进)
    onLoad(options) {
      that = this;
      that.init(options);
    },
    methods: {
      // 初始化
      init(options = {}){
        
      },
      // 获取商品信息，并打开sku弹出
      openSkuPopup(){
        /**
         * 获取商品信息
         * 这里可以看到每次打开SKU都会去重新请求商品信息,为的是每次打开SKU组件可以实时看到剩余库存
         */
        // 此处写接口请求，并将返回的数据进行处理成goodsInfo的数据格式，
        // goodsInfo是后端返回的数据
        that.goodsInfo = {
          "_id":"002",
          "name": "迪奥香水",
          "goods_thumb":"https://res.lancome.com.cn/resources/2020/9/11/15998112890781924_920X920.jpg?version=20200917220352530",
          "sku_list": [
            {
              "_id": "004",
              "goods_id": "002",
              "goods_name": "迪奥香水",
              "image": "https://res.lancome.com.cn/resources/2020/9/11/15998112890781924_920X920.jpg?version=20200917220352530",
              "price": 19800,
              "sku_name_arr": ["50ml/瓶"],
              "stock": 100
            },
            {
              "_id": "005",
              "goods_id": "002",
              "goods_name": "迪奥香水",
              "image": "https://res.lancome.com.cn/resources/2020/9/11/15998112890781924_920X920.jpg?version=20200917220352530",
              "price": 9800,
              "sku_name_arr": ["70ml/瓶"],
              "stock": 100
            }
          ],
          "spec_list": [
            {
              "list": [
                {
                  "name": "20ml/瓶"
                },
                {
                  "name": "50ml/瓶"
                },
                {
                  "name": "70ml/瓶"
                }
              ],
              "name": "规格"
            }
          ]
        }
        that.skuKey = true;
      },
      // sku组件 开始-----------------------------------------------------------
      onOpenSkuPopup(){
        console.log("监听 - 打开sku组件");
      },
      onCloseSkuPopup(){
        console.log("监听 - 关闭sku组件");
      },
      // 加入购物车前的判断
      addCartFn(obj){
        let { selectShop } = obj;
        // 模拟添加到购物车,请替换成你自己的添加到购物车逻辑
        let res = {};
        let name = selectShop.goods_name;
        if(selectShop.sku_name != "默认"){
          name += "-"+selectShop.sku_name_arr;
        }
        res.msg = `${name} 已添加到购物车`;
        if(typeof obj.success == "function") obj.success(res);
      },
      // 加入购物车按钮
      addCart(selectShop){
        console.log("监听 - 加入购物车");
        that.addCartFn({
          selectShop : selectShop,
          success : function(res){
            // 实际业务时,请替换自己的加入购物车逻辑
            that.toast(res.msg);
            setTimeout(function() {
              that.skuKey = false;
            }, 300);
          }
        });
      },
      // 立即购买
      buyNow(selectShop){
        console.log("监听 - 立即购买");
        that.addCartFn({
          selectShop : selectShop,
          success : function(res){
            // 实际业务时,请替换自己的立即购买逻辑
            that.toast("立即购买");
          }
        });
      },
      toast(msg){
        uni.showToast({
          title: msg,
          icon:"none"
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .app {
    padding: 30rpx;
    font-size: 28rpx;
  }
</style>

如何使用缓存加快第二次渲染速度

// 获取商品信息，并打开sku弹出
openSkuPopup(){
  let useCache = false;
  // goodsCache 可以在 <script> 标签下方 同时在 export default { 标签上方 的位置出写 var goodsCache = {};
  if(goodsCache[that.goods_id]){
    // 使用缓存加快第二次渲染速度
    useCache = true;
    that.goodsInfo = goodsCache[that.goods_id];
    that.skuKey = true;
  }
  // 即使使用了缓存,也还要再获取下商品信息,因为需要实时显示最新的库存
  // 请求后端
  that.callFunction({
    useCache,
    success(data) {
      // 设置本地数据源
      that.goodsInfo = data.goodsInfo;
      // 设置缓存
      goodsCache[that.goods_id] = data.goodsInfo;
      // 打开sku弹窗
      that.skuKey = true;
    }
  });
}

API

Props

参数说明类型默认值可选值
v-mode双向绑定，true为打开组件，false为关闭组件Booleanfalsetrue、false
no-stock-text该商品已抢完时的按钮文字String该商品已抢完-
stock-text库存文字String库存-
mode模式 1:都显示 2:只显示购物车 3:只显示立即购买Number11、2、3
mask-close-able点击遮罩是否关闭组件 true 关闭 false 不关闭 默认trueBooleantruetrue、false
border-radius顶部圆角值[String,Number]0-
min-buy-num最小购买数量Number1-
max-buy-num最大购买数量Number100000-
step-buy-num每次点击后的数量Number
step-strictly（v1.1）是否只能输入 step 的倍数Booleanfalsetrue、false
hide-stock（v1.1）是否隐藏库存的显示Booleanfalsetrue、false
theme（v1.1.1）主题风格Stringdefaultdefault、red-black、black-white、coffee、green
localdata（v1.3.0）商品信息本地数据源Object--
amount-type默认金额会除以100（即100=1元），若设置为0，则不会除以100（即1=1元）Number10
custom-action自定义获取商品信息的函数（已知支付宝不支持，支付宝请改用localdata属性）Functionnull-
show-close是否显示右上角关闭按钮Booleantruetrue、false
close-image关闭按钮的图片地址String--
price-color价格的字体颜色String#fe560a-
buy-now-text立即购买 - 按钮的文字String立即购买-
buy-now-color立即购买 - 按钮的字体颜色String#ffffff-
buy-now-background-color立即购买 - 按钮的背景颜色String#fe560a-
add-cart-text加入购物车 - 按钮的文字String加入购物车-
add-cart-color加入购物车 - 按钮的字体颜色String#ffffff-
add-cart-background-color加入购物车 - 按钮的背景颜色String#ff9402-
goods-thumb-background-color商品缩略图背景颜色String--
disable-style样式 - 不可点击时,按钮的样式Objectnull-
actived-style样式 - 按钮点击时的样式Objectnull-
btn-style样式 - 按钮常态的样式Objectnull-
goods-id-name字段名 - 商品表id的字段名String_id-
sku-id-name字段名 - sku表id的字段名String_id-
sku-list-name字段名 - 商品对应的sku列表的字段名Stringsku_list-
spec-list-name字段名 - 商品规格名称的字段名Stringspec_list-
stock-name字段名 - sku库存的字段名Stringstock-
sku-arr-name字段名 - sku组合路径的字段名(数组元素的顺序需要和specListName对应，详情请看下方)Stringsku_name_arr-
goods-thumb-name字段名 - 商品缩略图字段名(未选择sku时)Stringgoods_thumb-

Event

事件名说明回调参数
open打开组件时
close关闭组件时
add-cart点击添加到购物车时（需选择完SKU才会触发）selectShop：当前选择的sku数据
buy-now点击立即购买时（需选择完SKU才会触发）selectShop：当前选择的sku数据

重要说明

skuArrName（sku_name_arr）和specListName（spec_list）对应顺序

// 为了方便说明，这里只展示sku_name_arr和spec_list字段
{
	"_id":"001",
	"sku_list": [
		{
			"sku_name_arr": ["红色", "128G", "公开版"],
		}
	],
	"spec_list": [
		{
			"name": "颜色",
			"list": [{"name": "红色"},{"name": "黑色"},{"name": "白色"}]
		},
		{
			"name": "内存",
			"list": [{"name": "128G"},{"name": "256G"}]
		},
		{
			"name": "版本",
			"list": [{"name": "公开版"},{"name": "非公开版"}]
		}
	]
}
sku_name_arr 数组的第一个值sku_name_arr[0] = spec_list[0].list中的任意一个元素的name属性的值
sku_name_arr 数组的第二个值sku_name_arr[1] = spec_list[1].list中的任意一个元素的name属性的值
sku_name_arr 数组的第三个值sku_name_arr[2] = spec_list[2].list中的任意一个元素的name属性的值
如sku_name_arr[0] = "红色"，则spec_list[0].list中必须要有且只有一个元素的name属性的值为"红色"

单规格（无规格）商品格式示例

{
  "_id":"003",
  "name": "迪奥香水",
  "goods_thumb":"https://res.lancome.com.cn/resources/2020/9/11/15998112890781924_920X920.jpg?version=20200917220352530",
  "sku_list": [
    {
      "_id": "006",
      "goods_id": "003",
      "goods_name": "迪奥香水",
      "image": "https://res.lancome.com.cn/resources/2020/9/11/15998112890781924_920X920.jpg?version=20200917220352530",
      "price": 19800,
      "sku_name_arr": ["默认"],
      "stock": 100
    }
  ],
  "spec_list": [
    {
      "list": [
        {
          "name": "默认"
        }
      ],
      "name": "默认"
    }
  ]
}

单组规格商品格式示例

{
  "_id":"002",
  "name": "迪奥香水",
  "goods_thumb":"https://res.lancome.com.cn/resources/2020/9/11/15998112890781924_920X920.jpg?version=20200917220352530",
  "sku_list": [
    {
      "_id": "004",
      "goods_id": "002",
      "goods_name": "迪奥香水",
      "image": "https://res.lancome.com.cn/resources/2020/9/11/15998112890781924_920X920.jpg?version=20200917220352530",
      "price": 19800,
      "sku_name_arr": ["50ml/瓶"],
      "stock": 100
    },
    {
      "_id": "005",
      "goods_id": "002",
      "goods_name": "迪奥香水",
      "image": "https://res.lancome.com.cn/resources/2020/9/11/15998112890781924_920X920.jpg?version=20200917220352530",
      "price": 9800,
      "sku_name_arr": ["70ml/瓶"],
      "stock": 100
    }
  ],
  "spec_list": [
    {
      "list": [
        {
          "name": "20ml/瓶"
        },
        {
          "name": "50ml/瓶"
        },
        {
          "name": "70ml/瓶"
        }
      ],
      "name": "规格"
    }
  ]
}

多组规格商品格式示例

{
  "_id":"001",
  "name": "iphone11",
  "goods_thumb":"https://img14.360buyimg.com/n0/jfs/t1/59022/28/10293/141808/5d78088fEf6e7862d/68836f52ffaaad96.jpg",
  "sku_list": [
    {
      "_id": "001",
      "goods_id": "001",
      "goods_name": "iphone11",
      "image": "https://img14.360buyimg.com/n0/jfs/t1/79668/22/9987/159271/5d780915Ebf9bf3f4/6a1b2703a9ed8737.jpg",
      "price": 19800,
      "sku_name_arr": ["红色", "128G", "公开版"],
      "stock": 100
    },
    {
      "_id": "002",
      "goods_id": "001",
      "goods_name": "iphone11",
      "image": "https://img14.360buyimg.com/n0/jfs/t1/52252/35/10516/124064/5d7808e0E46202391/7100f3733a1c1f00.jpg",
      "price": 9800,
      "sku_name_arr": ["白色", "256G","公开版"],
      "stock": 100
    },
    {
      "_id": "003",
      "goods_id": "001",
      "goods_name": "iphone11",
      "image": "https://img14.360buyimg.com/n0/jfs/t1/79668/22/9987/159271/5d780915Ebf9bf3f4/6a1b2703a9ed8737.jpg",
      "price": 19800,
      "sku_name_arr": ["红色","256G","公开版"],
      "stock": 100
    }
  ],
  "spec_list": [
    {
      "list": [
        {
          "name": "红色"
        },
        {
          "name": "黑色"
        },
        {
          "name": "白色"
        }
      ],
      "name": "颜色"
    },
    {
      "list": [
        {
          "name": "128G"
        },
        {
          "name": "256G"
        }
      ],
      "name": "内存"
    },
    {
      "list": [
        {
          "name": "公开版"
        },
        {
          "name": "非公开版"
        }
      ],
      "name": "版本"
    }
  ]
}

各参数说明

{
  "_id":"001", // 商品ID
  "name": "iphone11", // 商品名称
   // 商品头像
  "goods_thumb":"https://img14.360buyimg.com/n0/jfs/t1/59022/28/10293/141808/5d78088fEf6e7862d/68836f52ffaaad96.jpg",
  // 该商品对应的sku列表
  "sku_list": [
    {
      "_id": "001", // SKU ID
      "goods_id": "001", // 商品ID
      "goods_name": "iphone11", // 商品名称
       // SKU头像
      "image": "https://img14.360buyimg.com/n0/jfs/t1/79668/22/9987/159271/5d780915Ebf9bf3f4/6a1b2703a9ed8737.jpg",
      "price": 19800, // SKU 价格
      "sku_name_arr": ["红色", "128G", "公开版"], // 该SKU由哪些规格组成（规格是有顺序的，需要与spec_list的数组顺序对应）
      "stock": 100
    },
    {
      "_id": "002",
      "goods_id": "001",
      "goods_name": "iphone11",
      "image": "https://img14.360buyimg.com/n0/jfs/t1/52252/35/10516/124064/5d7808e0E46202391/7100f3733a1c1f00.jpg",
      "price": 9800,
      "sku_name_arr": ["白色", "256G","公开版"],
      "stock": 100
    },
    {
      "_id": "003",
      "goods_id": "001",
      "goods_name": "iphone11",
      "image": "https://img14.360buyimg.com/n0/jfs/t1/79668/22/9987/159271/5d780915Ebf9bf3f4/6a1b2703a9ed8737.jpg",
      "price": 19800,
      "sku_name_arr": ["红色","256G","公开版"],
      "stock": 100
    }
  ],
  // 商品规格列表
  "spec_list": [
    {
      "list": [
        {
          // 第一组规格的第一项规格值名称
          "name": "红色"
        },
        {
          // 第一组规格的第二项规格值名称
          "name": "黑色"
        },
        {
          // 第一组规格的第三项规格值名称
          "name": "白色"
        }
      ],
      // 第一组规格名
      "name": "颜色"
    },
    {
      "list": [
        {
          // 第二组规格的第一项规格值名称
          "name": "128G"
        },
        {
          // 第二组规格的第二项规格值名称
          "name": "256G"
        }
      ],
       // 第二组规格名
      "name": "内存"
    },
    {
      "list": [
        {
          // 第三组规格的第一项规格值名称
          "name": "公开版"
        },
        {
          // 第三组规格的第二项规格值名称
          "name": "非公开版"
        }
      ],
       // 第三组规格名
      "name": "版本"
    }
  ]
}

uniCloud云函数路由开发框架研究Q群:22466457 如有问题或建议可以在群内讨论。

你也可以在评论区发布留言交流心得。

VK1688
关注
  • 2
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Android Sku属性选择器
05-06
Android Sku选择器, 类似于淘宝，天猫，京东，支持多维属性，购物车动画，支持MVVM架构，可以直接使用
uniapp sku插件 “ vk-data-goods-sku-popup” 默认选中指定sku
qq_43751598的博客
12-11 599
如果按照文档的示例和提供的Props 是实现不了弹窗默认选中的操作如下：打开弹窗之后花型和尺寸都是没有默认选中数据。看到里面是有个**selectSku（）**方法，这个方法就是用来选中指定sku的方法。简介：商品多规格SKU选择器组件。的格式在sku组件文档里面有。在组件弹窗写入数据;
vk-data-goods-sku-popup uniapp vue3示例
最新发布
hackchen的专栏
07-06 281
vk-data-goods-sku-popup是一个uniapp上面方便好用的sku组件，使用场景包括但不限于商品详情页、购物车页面、订单结算页、搜索结果页
用elementui实现了zent的SKU规格选择器组件
08-09
用 element-ui 实现了 zent 的 SKU 规格选择器组件
React 版 sku商品规格选择器和sku生成器
csg547325725的博客
11-23 2570
演示地址：https://tccsg.github.io/react-sku/ 仓库地址：https://github.com/tccsg/react-sku 因为业务的需求不得不对sku进行深入的研究，在还没写代码之前感觉是简单的，一天就搞定了 结果几天过后… 甚至想打人了，在想当初是谁给我的自信。还好最后还是写出来了，差点误了进度。 仓库的版本是针对普通的 react hook结合ant版的 因为我是用React-Native写的App也是用hook写的比较好迁移 小程序方面用的是Taro这个框架，
小兔鲜儿 uniapp - SKU 模块
每天都要努力学习哦~~
01-01 1426
存货单位（Stock Keeping Unit），库存管理的最小可用单元，通常称为“单品”。，我们可以依据文档为插件添加 TS 类型声明文件，从而提高项目数据校验的安全性。：后端返回的数据格式和插件所需的格式不一致，我们需要按插件要求进行处理。组件的交互，接下来进入到购物车模块，并实现加入购物车功能。，以确保插件具有良好的社区口碑、兼容性、性能和维护状况。尽管该插件未采用 TS 开发，但作者提供了详细的。属于电商常见业务，插件市场有现成的。插件，我们下载并在项目中使用。，请下载插件到本地。
uniapp全网最强商品多规格SKU选择器组件（打造uni插件市场功能最全的SKU选择器组件）
05-28
【开箱即用】商品sku选择器组件豪华独立版（打造uni插件市场功能最全的SKU选择器组件） 商品SKU选择器组件一般用于电商商品详情页的规格选择时使用。 插件下载地址：点击下载SKU组件 【重要】自1.1.0版本起，组件已...
sku电商商品多规格
12-25
总的来说，“sku电商商品多规格”组件利用uniapp跨平台的优势，结合H5、APP、小程序的特性，为电商应用提供了一套完善的商品规格展示和管理解决方案。通过合理的组件设计和性能优化，提高了用户体验，简化了开发流程...
使用vue实现多规格选择实例（SKU）
10-16
在本文中，我们将探讨如何使用Vue.js框架实现一个多规格选择功能，通常用于电商项目中的商品详情页面，如SKU（Stock Keeping Unit）。Vue.js是一个轻量级的前端JavaScript库，它提供了一种声明式的数据绑定和组件化...
sku多属性选择算法-每个商品的属性进行可选分组-有bug
07-23
在商品管理中，一个复杂的挑战是如何设计一个有效的SKU多属性选择算法，确保用户能方便地筛选和购买符合他们需求的商品。这里我们将详细讨论这个主题，特别是针对描述中提到的"每个商品的属性进行可选分组"以及与Vue...
商品sku规格选择效果.html
03-25
类似淘宝，设定好颜色、尺码、款式后，有货的显式选择，没货的会显示为不可用不可选择。商品格式为 var sku_list = [ {'sku_key': '10额;20;30;40', 'id': 120, 'store_nums': 100, 'sell_price': '10.7'}, {'sku_...
sku-algorithm:商品多规格选择-sku算法
05-08
如果有解决思路的同学，请给我提PR:handshake::handshake::handshake:商品多规格选择-前端 sku 算法相信大家看到这张图片就知道我们这篇文章要讲什么了，没错就是-商品多规格选择的解法。近来在掘金上面看见大家都在...
微信小程序-切换sku（和热门组件切换sku规则一样，已封装成组件）
11-18
1、微信小程序切换sku规格逻辑复杂，所以想封装成sku组件，然后直接调用即可。 2、里面资源已经封装成组件，直接拿来调用，传入相应的数值即可。 3、因为封装成组件后，后续需要修，直接改组件即可，简单方便。 4、...
layui+商品多规格.zip
03-04
综上所述，"layui+商品多规格.zip"项目是一个综合性的商品规格管理解决方案，它利用layui的UI组件和数据交互能力，结合jQuery或Vue的动态数据处理，为电商平台的商品展示和选择提供了灵活的实现方式。通过read.docx...
Android实现多维商品属性SKU选择
08-26
Android 实现多维商品属性 SKU 选择是指在 Android 应用程序中，为用户提供多种商品属性选择的功能，例如颜色、尺码、材质等。 SKU 选择是一个非常重要的功能，它可以帮助用户快速找到想要的商品并提高购物体验。 ...
jquery实现商品sku多属性选择功能（商品详情页）
10-15
在jQuery中实现商品详情页的SKU多属性选择功能，主要是为了帮助用户在浏览商品时能够方便地选择他们想要的特定商品版本，并实时查看该版本的库存情况。下面将详细讲解如何通过jQuery来构建这一功能。 首先，我们...
在uni-app中使用sku插件，实现商品详情页规格展示和交互。
小夏同学呀
01-15 2028
在uni-app中使用sku插件，实现商品详情页规格展示和交互。
【微信小程序】商品多规格的sku组件完整代码
weixin_42575720的博客
06-17 1824
【微信小程序】商品多规格的sku组件完整代码
小程序-购物车-基于SKU电商规格组件实现
weixin_57334661的博客
05-25 1916
加入购物车 </view><view class="buynow" @tap="openSkuPopup(SkuMode.Buy)"> 立即购买
uniapp中的sku选择器
05-21
在uniapp中实现SKU选择器，一般可以采用以下步骤： 1. 定义数据结构：SKU选择器需要有选择项和对应价格等信息。可以采用JSON格式定义SKU数据结构，如： ``` { "attrs": [ { "name": "颜色", "values": [ ...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值