SKU 商品多规格选择器

该组件是一款仿京东算法的轻量化、强大、拓展性强、可使用带图sku、可根据配置主题色自动生成相应的组件主题色的商品多规格sku，仅需要按照指定格式传入sku数组便可以直接使用。

平台兼容性

App(vue)	App(nvue)	H5	小程序	VUE2	VUE3
√	√	√	√	√	√

依赖

在使用前组件前，需要先安装依赖 crypto-js ，以此来生成加密的属性名。

shell

npm install crypto-js

npm install crypto-js

基本使用

vue3vue2

vue

<template>
	<view class="test" style="padding: 3rem 1.5rem;">
		<wu-sku v-model="skuShow" :data="skus" :themeColor="[226, 35, 26]"
			defaultCover="https://mp-16389c52-85e7-413f-b566-3da08e2fe054.cdn.bspapp.com/img/sku-test/default.jpeg"
			btnConfirmText="购买" notSelectSku="请选择完整的商品信息" @skuChange="skuChange" @confirm="skuConfirm"></wu-sku>
		<!-- 打开sku组件 -->
		<button @click="skuShow = true">打开sku组件</button>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		inject,
		toRefs
	} from "vue";
	import {} from '@dcloudio/uni-app';

	let skuShow = ref(false);
	// sku列表
	let skus = ref([{
			id: 1,
			price: 7000,
			stock: 30,
			sku_attrs: {
				'机身颜色': '深空黑色',
				'储存容量': '128G',
				'套装': '快充套装'
			}
		},
		{
			id: 2,
			price: 8500,
			stock: 10,
			sku_attrs: {
				'机身颜色': '暗紫色',
				'储存容量': '256G',
				'套装': '快充套装'
			}
		},
		{
			id: 3,
			price: 9500,
			stock: 0,
			sku_attrs: {
				'机身颜色': '暗紫色',
				'储存容量': '512G',
				'套装': 'AirPods套装'
			}
		},
		{
			id: 4,
			price: 9200,
			stock: 60,
			sku_attrs: {
				'机身颜色': '银色',
				'储存容量': '512G',
				'套装': 'AirPods套装'
			}
		},
		{
			id: 5,
			price: 9200,
			stock: 80,
			sku_attrs: {
				'机身颜色': '金色',
				'储存容量': '512G',
				'套装': 'AirPods3套装'
			}
		}
	])

	// sku发生改变事件, 选择完整的sku则回返回 否则sku的值为{}
	let skuChange = (sku) => {
		console.log(sku);
	}
	// sku确认事件
	let skuConfirm = (e) => {
		console.log(e);
	}
</script>

<template>
	<view class="test" style="padding: 3rem 1.5rem;">
		<wu-sku v-model="skuShow" :data="skus" :themeColor="[226, 35, 26]"
			defaultCover="https://mp-16389c52-85e7-413f-b566-3da08e2fe054.cdn.bspapp.com/img/sku-test/default.jpeg"
			btnConfirmText="购买" notSelectSku="请选择完整的商品信息" @skuChange="skuChange" @confirm="skuConfirm"></wu-sku>
		<!-- 打开sku组件 -->
		<button @click="skuShow = true">打开sku组件</button>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		inject,
		toRefs
	} from "vue";
	import {} from '@dcloudio/uni-app';

	let skuShow = ref(false);
	// sku列表
	let skus = ref([{
			id: 1,
			price: 7000,
			stock: 30,
			sku_attrs: {
				'机身颜色': '深空黑色',
				'储存容量': '128G',
				'套装': '快充套装'
			}
		},
		{
			id: 2,
			price: 8500,
			stock: 10,
			sku_attrs: {
				'机身颜色': '暗紫色',
				'储存容量': '256G',
				'套装': '快充套装'
			}
		},
		{
			id: 3,
			price: 9500,
			stock: 0,
			sku_attrs: {
				'机身颜色': '暗紫色',
				'储存容量': '512G',
				'套装': 'AirPods套装'
			}
		},
		{
			id: 4,
			price: 9200,
			stock: 60,
			sku_attrs: {
				'机身颜色': '银色',
				'储存容量': '512G',
				'套装': 'AirPods套装'
			}
		},
		{
			id: 5,
			price: 9200,
			stock: 80,
			sku_attrs: {
				'机身颜色': '金色',
				'储存容量': '512G',
				'套装': 'AirPods3套装'
			}
		}
	])

	// sku发生改变事件, 选择完整的sku则回返回 否则sku的值为{}
	let skuChange = (sku) => {
		console.log(sku);
	}
	// sku确认事件
	let skuConfirm = (e) => {
		console.log(e);
	}
</script>

vue

<template>
	<view class="test" style="padding: 3rem 1.5rem;">
		<wu-sku 
			v-model="skuShow" 
			:data="skus" 
			:themeColor="[226, 35, 26]"
			defaultCover="https://mp-16389c52-85e7-413f-b566-3da08e2fe054.cdn.bspapp.com/img/sku-test/default.jpeg"
			btnConfirmText="购买" notSelectSku="请选择完整的商品信息" 
			@skuChange="skuChange" 
			@confirm="skuConfirm"
		></wu-sku>
		<!-- 打开sku组件 -->
		<button @click="skuShow = true">打开sku组件</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 是否显示组件
				skuShow: false,
				// sku列表
				skus: [{
						id: 1,
						price: 7000,
						stock: 30,
						sku_attrs: {
							'机身颜色': '深空黑色',
							'储存容量': '128G',
							'套装': '快充套装'
						}
					},
					{
						id: 2,
						price: 8500,
						stock: 10,
						sku_attrs: {
							'机身颜色': '暗紫色',
							'储存容量': '256G',
							'套装': '快充套装'
						}
					},
					{
						id: 3,
						price: 9500,
						stock: 0,
						sku_attrs: {
							'机身颜色': '暗紫色',
							'储存容量': '512G',
							'套装': 'AirPods套装'
						}
					},
					{
						id: 4,
						price: 9200,
						stock: 60,
						sku_attrs: {
							'机身颜色': '银色',
							'储存容量': '512G',
							'套装': 'AirPods套装'
						}
					},
					{
						id: 5,
						price: 9200,
						stock: 80,
						sku_attrs: {
							'机身颜色': '金色',
							'储存容量': '512G',
							'套装': 'AirPods3套装'
						}
					}
				]
			}
		},
		methods: {
			// sku发生改变事件, 选择完整的sku则回返回 否则sku的值为{}
			skuChange(sku) {
				console.log(sku);
			},
			// sku确认事件
			skuConfirm(e) {
				console.log(e);
			}
		}
	}
</script>

<template>
	<view class="test" style="padding: 3rem 1.5rem;">
		<wu-sku 
			v-model="skuShow" 
			:data="skus" 
			:themeColor="[226, 35, 26]"
			defaultCover="https://mp-16389c52-85e7-413f-b566-3da08e2fe054.cdn.bspapp.com/img/sku-test/default.jpeg"
			btnConfirmText="购买" notSelectSku="请选择完整的商品信息" 
			@skuChange="skuChange" 
			@confirm="skuConfirm"
		></wu-sku>
		<!-- 打开sku组件 -->
		<button @click="skuShow = true">打开sku组件</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 是否显示组件
				skuShow: false,
				// sku列表
				skus: [{
						id: 1,
						price: 7000,
						stock: 30,
						sku_attrs: {
							'机身颜色': '深空黑色',
							'储存容量': '128G',
							'套装': '快充套装'
						}
					},
					{
						id: 2,
						price: 8500,
						stock: 10,
						sku_attrs: {
							'机身颜色': '暗紫色',
							'储存容量': '256G',
							'套装': '快充套装'
						}
					},
					{
						id: 3,
						price: 9500,
						stock: 0,
						sku_attrs: {
							'机身颜色': '暗紫色',
							'储存容量': '512G',
							'套装': 'AirPods套装'
						}
					},
					{
						id: 4,
						price: 9200,
						stock: 60,
						sku_attrs: {
							'机身颜色': '银色',
							'储存容量': '512G',
							'套装': 'AirPods套装'
						}
					},
					{
						id: 5,
						price: 9200,
						stock: 80,
						sku_attrs: {
							'机身颜色': '金色',
							'储存容量': '512G',
							'套装': 'AirPods3套装'
						}
					}
				]
			}
		},
		methods: {
			// sku发生改变事件, 选择完整的sku则回返回 否则sku的值为{}
			skuChange(sku) {
				console.log(sku);
			},
			// sku确认事件
			skuConfirm(e) {
				console.log(e);
			}
		}
	}
</script>

单独logo设置(在不使用带图sku时生效)

每组 sku 属性都可以单独设置 logo 属性，logo 属性会在选择完整 sku 后展示，未选择完整 sku时会展示组件的 defaultCover 属性

[
    ...
    {
        id: 5,
        price: 9200,
        logo: '图片路径',
        stock: 80,
        sku_attrs: {
            '机身颜色': '金色',
            '储存容量': '512G',
        }
    }
    ...
]

[
    ...
    {
        id: 5,
        price: 9200,
        logo: '图片路径',
        stock: 80,
        sku_attrs: {
            '机身颜色': '金色',
            '储存容量': '512G',
        }
    }
    ...
]

带图sku

如果您想某个 sku 的属性带有图片展示时，只需要在您想展示图片的 sku 属性上，将原有的 属性名：属性值 变成 属性名: {name: 属性名, img: '图片链接'} 即可。

例如: 我们想让 机身颜色 的这个属性带有图片展示时。

修改后修改前

// 以下代码可以直接复制使用
[
    {
        id: 1,
        price: 7000,
        stock: 30,
        sku_attrs: {
            '机身颜色': {
                name: '深空黑色',
                img: 'https://mp-16389c52-85e7-413f-b566-3da08e2fe054.cdn.bspapp.com/img/sku-test/heise.jpeg',
            },
            '储存容量': '128G',
            '套装': '快充套装'
        }
    },
    {
        id: 2,
        price: 8500,
        stock: 10,
        sku_attrs: {
            '机身颜色': {
                name: '暗紫色',
                img: 'https://mp-16389c52-85e7-413f-b566-3da08e2fe054.cdn.bspapp.com/img/sku-test/anyezi.jpeg',
            },
            '储存容量': '256G',
            '套装': '快充套装'
        }
    },
    {
        id: 3,
        price: 9500,
        stock: 0,
        sku_attrs: {
            '机身颜色': {
                name: '暗紫色',
                img: 'https://mp-16389c52-85e7-413f-b566-3da08e2fe054.cdn.bspapp.com/img/sku-test/anyezi.jpeg',
            },
            '储存容量': '512G',
            '套装': 'AirPods套装'
        }
    },
    {
        id: 4,
        price: 9200,
        stock: 60,
        sku_attrs: {
            '机身颜色': {
                name: '银色',
                img: 'https://mp-16389c52-85e7-413f-b566-3da08e2fe054.cdn.bspapp.com/img/sku-test/baise.jpeg',
            },
            '储存容量': '512G',
            '套装': 'AirPods套装'
        }
    },
    {
        id: 5,
        price: 9200,
        stock: 80,
        sku_attrs: {
            '机身颜色': {
                name: '金色',
                img: 'https://mp-16389c52-85e7-413f-b566-3da08e2fe054.cdn.bspapp.com/img/sku-test/jinse.jpeg',
            },
            '储存容量': '512G',
            '套装': 'AirPods3套装'
        }
    }
]

// 以下代码可以直接复制使用
[
    {
        id: 1,
        price: 7000,
        stock: 30,
        sku_attrs: {
            '机身颜色': {
                name: '深空黑色',
                img: 'https://mp-16389c52-85e7-413f-b566-3da08e2fe054.cdn.bspapp.com/img/sku-test/heise.jpeg',
            },
            '储存容量': '128G',
            '套装': '快充套装'
        }
    },
    {
        id: 2,
        price: 8500,
        stock: 10,
        sku_attrs: {
            '机身颜色': {
                name: '暗紫色',
                img: 'https://mp-16389c52-85e7-413f-b566-3da08e2fe054.cdn.bspapp.com/img/sku-test/anyezi.jpeg',
            },
            '储存容量': '256G',
            '套装': '快充套装'
        }
    },
    {
        id: 3,
        price: 9500,
        stock: 0,
        sku_attrs: {
            '机身颜色': {
                name: '暗紫色',
                img: 'https://mp-16389c52-85e7-413f-b566-3da08e2fe054.cdn.bspapp.com/img/sku-test/anyezi.jpeg',
            },
            '储存容量': '512G',
            '套装': 'AirPods套装'
        }
    },
    {
        id: 4,
        price: 9200,
        stock: 60,
        sku_attrs: {
            '机身颜色': {
                name: '银色',
                img: 'https://mp-16389c52-85e7-413f-b566-3da08e2fe054.cdn.bspapp.com/img/sku-test/baise.jpeg',
            },
            '储存容量': '512G',
            '套装': 'AirPods套装'
        }
    },
    {
        id: 5,
        price: 9200,
        stock: 80,
        sku_attrs: {
            '机身颜色': {
                name: '金色',
                img: 'https://mp-16389c52-85e7-413f-b566-3da08e2fe054.cdn.bspapp.com/img/sku-test/jinse.jpeg',
            },
            '储存容量': '512G',
            '套装': 'AirPods3套装'
        }
    }
]

[
    {
        id: 1,
        price: 7000,
        stock: 30,
        sku_attrs: {
            '机身颜色': '深空黑色',
            '储存容量': '128G',
            '套装': '快充套装'
        }
    },
    {
        id: 2,
        price: 8500,
        stock: 10,
        sku_attrs: {
            '机身颜色': '暗紫色',
            '储存容量': '256G',
            '套装': '快充套装'
        }
    },
    {
        id: 3,
        price: 9500,
        stock: 0,
        sku_attrs: {
            '机身颜色': '暗紫色',
            '储存容量': '512G',
            '套装': 'AirPods套装'
        }
    },
    {
        id: 4,
        price: 9200,
        stock: 60,
        sku_attrs: {
            '机身颜色': '银色',
            '储存容量': '512G',
            '套装': 'AirPods套装'
        }
    },
    {
        id: 5,
        price: 9200,
        stock: 80,
        sku_attrs: {
            '机身颜色': '金色',
            '储存容量': '512G',
            '套装': 'AirPods3套装'
        }
    }
]

[
    {
        id: 1,
        price: 7000,
        stock: 30,
        sku_attrs: {
            '机身颜色': '深空黑色',
            '储存容量': '128G',
            '套装': '快充套装'
        }
    },
    {
        id: 2,
        price: 8500,
        stock: 10,
        sku_attrs: {
            '机身颜色': '暗紫色',
            '储存容量': '256G',
            '套装': '快充套装'
        }
    },
    {
        id: 3,
        price: 9500,
        stock: 0,
        sku_attrs: {
            '机身颜色': '暗紫色',
            '储存容量': '512G',
            '套装': 'AirPods套装'
        }
    },
    {
        id: 4,
        price: 9200,
        stock: 60,
        sku_attrs: {
            '机身颜色': '银色',
            '储存容量': '512G',
            '套装': 'AirPods套装'
        }
    },
    {
        id: 5,
        price: 9200,
        stock: 80,
        sku_attrs: {
            '机身颜色': '金色',
            '储存容量': '512G',
            '套装': 'AirPods3套装'
        }
    }
]

指定默认选中sku

selectSkuIndex 用来指定默认要选中的sku下标。

vue

<wu-sku
    v-model="skuShow"
    :data="skus"
    defaultCover="http://rn8zfvrr0.hn-bkt.clouddn.com/e40744e32a2930f945e67da79a35f270.jpg?e=1672666137&token=0qmhoqQQZ4ggfGZOevcNXE4wYe_IZD3Y5xm8ZZ5Y:bxn-lcJPnFNY22kGWwh5MRgdGwM="
    btnConfirmText="购买"
    notSelectSku="请选择完整的商品信息"
    :isShowStock="false"
    :selectSkuIndex="3"
    @skuChange="skuChange"
    @confirm="skuConfirm"
></wu-sku>

<wu-sku
    v-model="skuShow"
    :data="skus"
    defaultCover="http://rn8zfvrr0.hn-bkt.clouddn.com/e40744e32a2930f945e67da79a35f270.jpg?e=1672666137&token=0qmhoqQQZ4ggfGZOevcNXE4wYe_IZD3Y5xm8ZZ5Y:bxn-lcJPnFNY22kGWwh5MRgdGwM="
    btnConfirmText="购买"
    notSelectSku="请选择完整的商品信息"
    :isShowStock="false"
    :selectSkuIndex="3"
    @skuChange="skuChange"
    @confirm="skuConfirm"
></wu-sku>

不相关sku是否禁用

和目前选中的sku属性不相关的其余sku属性是否禁用。

vue

<wu-sku
    v-model="skuShow"
    :data="skus"
    defaultCover="http://rn8zfvrr0.hn-bkt.clouddn.com/e40744e32a2930f945e67da79a35f270.jpg?e=1672666137&token=0qmhoqQQZ4ggfGZOevcNXE4wYe_IZD3Y5xm8ZZ5Y:bxn-lcJPnFNY22kGWwh5MRgdGwM="
    btnConfirmText="购买"
    skuUnrelatedDisabled
    :skuDisabledStyle="{}"
    notSelectSku="请选择完整的商品信息"
    :isShowStock="false"
    :selectSkuIndex="3"
    @skuChange="skuChange"
    @confirm="skuConfirm"
></wu-sku>

<wu-sku
    v-model="skuShow"
    :data="skus"
    defaultCover="http://rn8zfvrr0.hn-bkt.clouddn.com/e40744e32a2930f945e67da79a35f270.jpg?e=1672666137&token=0qmhoqQQZ4ggfGZOevcNXE4wYe_IZD3Y5xm8ZZ5Y:bxn-lcJPnFNY22kGWwh5MRgdGwM="
    btnConfirmText="购买"
    skuUnrelatedDisabled
    :skuDisabledStyle="{}"
    notSelectSku="请选择完整的商品信息"
    :isShowStock="false"
    :selectSkuIndex="3"
    @skuChange="skuChange"
    @confirm="skuConfirm"
></wu-sku>

如果您对sku禁用样式不满意可以通过设置 skuDisabledStyle 来实现样式修改，对象的形式即可。

SKU Props

属性名	说明	类型	默认值	可选值
data	源数据(sku列表)	Array	[]	-
value/modelValue/v-model	是否显示sku组件	Boolean	false	true/false
isMaskClose	是否可以点击遮罩层关闭	Boolean	false	true/false
isSelectMinPriceSku	是否默认选中最低价格的sku	Boolean	true	true/false
selectSkuIndex	默认选中的sku下标	Number/String	null	-
defaultCover	默认封面图，用于没有选中完整的sku时展示	String	""	-
defaultNum	默认购买商品数量	Number/String	1	-
themeColor	主题色，需要传入一个数组长度为3的数组，分别对应rgb三个颜色的值，例如: [84, 164, 255]	Array	[84, 164, 255]	-
btnConfirmText	确认按钮文字	String	"确认"	-
skuUnrelatedDisabled	和目前选中的sku属性不相关的其余sku属性是否禁用。	Boolean	false	true/false
skuDisabledStyle	sku禁用样式	Object	{}	-
notStockText	库存不足文字	String	"库存不足"	-
notSelectSku	未选择完整的sku时的文字提示	String	"请选择完整的sku属性"	-
showStockNum	是否展示库存数量	Boolean	true	true/false

SKU Events

事件名	说明	回调参数
confirm	点击确认按钮时触发的事件	e = { sku, skuText , num }。分别对应选中的sku值、sku属性名数组、输入框内的数量。
skuChange	sku发生变化时出发的事件，如果有选中完整的sku则会返回该sku，否则会返回{}	e = {}
numChange	输入框内数量发生改变时触发事件	e = num, 返回输入框数量
close	关闭sku组件触发事件	-
open	打开sku组件触发事件	-

SKU Methods

方法名	说明
resetNum	重置购买数量

SKU 商品多规格选择器 ​

平台兼容性 ​

依赖 ​

基本使用 ​

单独logo设置(在不使用带图sku时生效) ​

带图sku ​

指定默认选中sku ​

不相关sku是否禁用 ​

SKU Props ​

SKU Events ​

SKU Methods ​