【VK】商品多规格SKU选择器组件豪华版（uniapp版，可编译成H5、APP、各大小程序）
2024-05-08 17:40:44
插件名称：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-popupref="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为关闭组件 | Boolean | false | true、false |
| no-stock-text | 该商品已抢完时的按钮文字 | String | 该商品已抢完 | - |
| stock-text | 库存文字 | String | 库存 | - |
| mode | 模式 1:都显示 2:只显示购物车 3:只显示立即购买 | Number | 1 | 1、2、3 |
| mask-close-able | 点击遮罩是否关闭组件 true 关闭 false 不关闭 默认true | Boolean | true | true、false |
| border-radius | 顶部圆角值 | [String,Number] | 0 | - |
| min-buy-num | 最小购买数量 | Number | 1 | - |
| max-buy-num | 最大购买数量 | Number | 100000 | - |
| step-buy-num | 每次点击后的数量 | Number | ||
| step-strictly（v1.1） | 是否只能输入 step 的倍数 | Boolean | false | true、false |
| hide-stock（v1.1） | 是否隐藏库存的显示 | Boolean | false | true、false |
| theme（v1.1.1） | 主题风格 | String | default | default、red-black、black-white、coffee、green |
| localdata（v1.3.0） | 商品信息本地数据源 | Object | - | - |
| amount-type | 默认金额会除以100（即100=1元），若设置为0，则不会除以100（即1=1元） | Number | 1 | 0 |
| custom-action | 自定义获取商品信息的函数（已知支付宝不支持，支付宝请改用localdata属性） | Function | null | - |
| show-close | 是否显示右上角关闭按钮 | Boolean | true | true、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 | 样式 - 不可点击时,按钮的样式 | Object | null | - |
| actived-style | 样式 - 按钮点击时的样式 | Object | null | - |
| btn-style | 样式 - 按钮常态的样式 | Object | null | - |
| goods-id-name | 字段名 - 商品表id的字段名 | String | _id | - |
| sku-id-name | 字段名 - sku表id的字段名 | String | _id | - |
| sku-list-name | 字段名 - 商品对应的sku列表的字段名 | String | sku_list | - |
| spec-list-name | 字段名 - 商品规格名称的字段名 | String | spec_list | - |
| stock-name | 字段名 - sku库存的字段名 | String | stock | - |
| sku-arr-name | 字段名 - sku组合路径的字段名(数组元素的顺序需要和specListName对应，详情请看下方) | String | sku_name_arr | - |
| goods-thumb-name | 字段名 - 商品缩略图字段名(未选择sku时) | String | goods_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 如有问题或建议可以在群内讨论。
你也可以在评论区发布留言交流心得。
【VK】商品多规格SKU选择器组件豪华版（uniapp版，可编译成H5、APP、各大小程序）相关推荐
- 宝藏级UI组件库：FirstUI，微信小程序版+uniapp版双版至V1.5.0，完美支持vue3
First UI(https://www.firstui.cn/)是一套超高性能.超高颜值的移动端UI综合解决方案,包含业内顶尖的组件库.强大的功能库.丰富精美的模板库,提供uni-app(完美支持n ...
- APICloud AVM框架 封装SKU（商品规格选择）组件
AVM(Application-View-Model)前端组件化开发模式基于标准Web Components组件化思想,提供包含虚拟DOM和Runtime的编程框架avm.js以及多端统一编译工具,完 ...
- 后台: sku商品多规格
后端返回数据格式一 // 后台接口返回的数据结构 // 1. 展示和默认选中 // 2. 点击规格置灰,显示价格和库存 let dataSku = {detail: {id: 2, // 商品idpr ...
- Vant 商品规格sku用法
Vant 商品规格sku用法 <template> <div> <!-- 基础用法 --> <div><van-skuv-model=" ...
- php 商品多规格的实现,sku实现
1,规格名称表 CREATE TABLE `fa_item_attr_key` (`attr_key_id` int(10) unsigned NOT NULL AUTO_INCREMENT,`ite ...
- 后台配置商品规格sku（vue+element）
效果gif: 主要数据结构: 规格项: goodsSpecs: [{ attr:"颜色", valueList:[{"title": "红" ...
- php商品规格sku,SKU商品规格选择
SKU商品规格选择 在线demo地址 Github代码地址 可选属性实现思路 当用户点击某选项(如"黑色")时,拿到此时所有规格的选项( { color: "黑色&quo ...
- VUE类似淘宝选择商品多规格(库存判断)
1.组件效果展示 也可访问链接查看网页效果... 后面又用uni-app写过一次,比这次稍微清晰一些 uni-app类似淘宝选择商品多规格(库存判断) 瞎封装组件系列: VUE简单提示框 VUE树形图 ...
- 6_商品 SPU 与 SKU
是什么 SPU: 标准化产品单元 SPU = Standard Product Unit (标准化产品单元),SPU是商品信息聚合的最小单位,是一组可复用.易检索的标准化信息的集合,该集合描述了一个产 ...
最新文章
- Windows 10 powershell 中文乱码解决方案
- 湖北黄冈中学2021年高考成绩查询,【喜报】2020年黄冈中学高考成绩出炉，600分以上人数556人...
- GDCM：拷贝/复制DataSet的测试程序
- 前端学习（535）：多列布局2
- hanlp中文分词、提取摘要关键字、语句分析、智能推荐
- 长脸了！阿里云这位英雄拿下了世界第一
- python 字符串函数_Python字符串函数
- html更改弹窗样式（原创，转载需声明）
- 中国大数据市场规模分析及预测
- 局域网用与管理计算机,计算机局域网的组建与管理.pdf
- 如何判断电脑是否中毒（转）
- CTEX编译Xelatex以及如何更新Miktex
- html加载fbx模型,[Unity菜鸟] FBX模型动画提取
- CF1313C Skyscrapers
- Python判断节假日 chinese_calendar
- BitLocker驱动器
- 隐藏控件--HiddenField控件
- 计算机一直安装更新失败,win10系统一直安装更新失败的三种解决方法
- python生成图片
- DDR4学习笔记02