迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:vk-data-goods-sku-popup开源软件地址:https://gitee.com/vk-uni/vk-u-goods-sku-popup开源软件介绍:插件名称: |
参数 | 说明 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
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 | - | - |
safe-area-inset-bottom(v1.6.1) | 是否开启底部安全区适配 | Boolean | true | true、false |
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 | - |
事件名 | 说明 | 回调参数 |
---|---|---|
open | 打开组件时 | |
close | 关闭组件时 | |
cart | 点击添加到购物车时(需选择完SKU才会触发) | selectShop:当前选择的sku数据 |
buy | 点击立即购买时(需选择完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,
请发表评论