SKU product multi specification selector

This component is a lightweight, powerful, and scalable product that emulates the JD algorithm. It can use SKUs with images and automatically generate corresponding component theme colors based on the configured theme colors. It can be directly used by simply passing in the SKU array in the specified format.

Platform compatibility

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

rely

Before using the pre component, it is necessary to install the dependency crypto-js to generate encrypted attribute names.

shell

npm install crypto-js

npm install crypto-js

Basic Use

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="purchase" notSelectSku="Please select complete product information" @skuChange="skuChange" @confirm="skuConfirm"></wu-sku>
		<!-- Open SKU component -->
		<button @click="skuShow = true">Open SKU component</button>
	</view>
</template>

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

	let skuShow = ref(false);
	// sku list
	let skus = ref([{
			id: 1,
			price: 7000,
			stock: 30,
			sku_attrs: {
				'body color': 'Deep Sky Black',
				'capacity': '128G',
				'suit': 'Quick charging set'
			}
		},
		{
			id: 2,
			price: 8500,
			stock: 10,
			sku_attrs: {
				'body color': 'Dark Purple',
				'capacity': '256G',
				'suit': 'Quick charging set'
			}
		},
		{
			id: 3,
			price: 9500,
			stock: 0,
			sku_attrs: {
				'body color': 'Dark Purple',
				'capacity': '512G',
				'suit': 'AirPodssuit'
			}
		},
		{
			id: 4,
			price: 9200,
			stock: 60,
			sku_attrs: {
				'body color': 'silvery',
				'capacity': '512G',
				'suit': 'AirPodssuit'
			}
		},
		{
			id: 5,
			price: 9200,
			stock: 80,
			sku_attrs: {
				'body color': 'golden',
				'capacity': '512G',
				'suit': 'AirPods3suit'
			}
		}
	])

	// If a change event occurs in the SKU, select the complete SKU to return. Otherwise, the value of SKU is {}
	let skuChange = (sku) => {
		console.log(sku);
	}
	// skuConfirm
	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="purchase" notSelectSku="Please select complete product information" @skuChange="skuChange" @confirm="skuConfirm"></wu-sku>
		<!-- Open SKU component -->
		<button @click="skuShow = true">Open SKU component</button>
	</view>
</template>

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

	let skuShow = ref(false);
	// sku list
	let skus = ref([{
			id: 1,
			price: 7000,
			stock: 30,
			sku_attrs: {
				'body color': 'Deep Sky Black',
				'capacity': '128G',
				'suit': 'Quick charging set'
			}
		},
		{
			id: 2,
			price: 8500,
			stock: 10,
			sku_attrs: {
				'body color': 'Dark Purple',
				'capacity': '256G',
				'suit': 'Quick charging set'
			}
		},
		{
			id: 3,
			price: 9500,
			stock: 0,
			sku_attrs: {
				'body color': 'Dark Purple',
				'capacity': '512G',
				'suit': 'AirPodssuit'
			}
		},
		{
			id: 4,
			price: 9200,
			stock: 60,
			sku_attrs: {
				'body color': 'silvery',
				'capacity': '512G',
				'suit': 'AirPodssuit'
			}
		},
		{
			id: 5,
			price: 9200,
			stock: 80,
			sku_attrs: {
				'body color': 'golden',
				'capacity': '512G',
				'suit': 'AirPods3suit'
			}
		}
	])

	// If a change event occurs in the SKU, select the complete SKU to return. Otherwise, the value of SKU is {}
	let skuChange = (sku) => {
		console.log(sku);
	}
	// skuConfirm
	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="purchase" notSelectSku="Please select complete product information" 
			@skuChange="skuChange" 
			@confirm="skuConfirm"
		></wu-sku>
		<!-- Open SKU component -->
		<button @click="skuShow = true">Open SKU component</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// Show components or not
				skuShow: false,
				// sku list
				skus: [{
						id: 1,
						price: 7000,
						stock: 30,
						sku_attrs: {
							'body color': 'Deep Sky Black',
							'capacity': '128G',
							'suit': 'Quick charging set'
						}
					},
					{
						id: 2,
						price: 8500,
						stock: 10,
						sku_attrs: {
							'body color': 'Dark Purple',
							'capacity': '256G',
							'suit': 'Quick charging set'
						}
					},
					{
						id: 3,
						price: 9500,
						stock: 0,
						sku_attrs: {
							'body color': 'Dark Purple',
							'capacity': '512G',
							'suit': 'AirPodssuit'
						}
					},
					{
						id: 4,
						price: 9200,
						stock: 60,
						sku_attrs: {
							'body color': 'silvery',
							'capacity': '512G',
							'suit': 'AirPodssuit'
						}
					},
					{
						id: 5,
						price: 9200,
						stock: 80,
						sku_attrs: {
							'body color': 'golden',
							'capacity': '512G',
							'suit': 'AirPods3suit'
						}
					}
				]
			}
		},
		methods: {
			// If a change event occurs in the SKU, select the complete SKU to return. Otherwise, the value of SKU is {}
			skuChange(sku) {
				console.log(sku);
			},
			// skuConfirm
			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="purchase" notSelectSku="Please select complete product information" 
			@skuChange="skuChange" 
			@confirm="skuConfirm"
		></wu-sku>
		<!-- Open SKU component -->
		<button @click="skuShow = true">Open SKU component</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// Show components or not
				skuShow: false,
				// sku list
				skus: [{
						id: 1,
						price: 7000,
						stock: 30,
						sku_attrs: {
							'body color': 'Deep Sky Black',
							'capacity': '128G',
							'suit': 'Quick charging set'
						}
					},
					{
						id: 2,
						price: 8500,
						stock: 10,
						sku_attrs: {
							'body color': 'Dark Purple',
							'capacity': '256G',
							'suit': 'Quick charging set'
						}
					},
					{
						id: 3,
						price: 9500,
						stock: 0,
						sku_attrs: {
							'body color': 'Dark Purple',
							'capacity': '512G',
							'suit': 'AirPodssuit'
						}
					},
					{
						id: 4,
						price: 9200,
						stock: 60,
						sku_attrs: {
							'body color': 'silvery',
							'capacity': '512G',
							'suit': 'AirPodssuit'
						}
					},
					{
						id: 5,
						price: 9200,
						stock: 80,
						sku_attrs: {
							'body color': 'golden',
							'capacity': '512G',
							'suit': 'AirPods3suit'
						}
					}
				]
			}
		},
		methods: {
			// If a change event occurs in the SKU, select the complete SKU to return. Otherwise, the value of SKU is {}
			skuChange(sku) {
				console.log(sku);
			},
			// skuConfirm
			skuConfirm(e) {
				console.log(e);
			}
		}
	}
</script>

Individual logo settings (effective when not using image SKU)

Each set of sku attributes can have their own logo attribute set. The logo attribute will be displayed after selecting complete sku, and the defaultCover attribute of the component will be displayed when not selecting complete sku

[
    ...
    {
        id: 5,
        price: 9200,
        logo: 'Image Path',
        stock: 80,
        sku_attrs: {
            'body color': 'golden',
            'capacity': '512G',
        }
    }
    ...
]

[
    ...
    {
        id: 5,
        price: 9200,
        logo: 'Image Path',
        stock: 80,
        sku_attrs: {
            'body color': 'golden',
            'capacity': '512G',
        }
    }
    ...
]

SKU with images

If you want a sku attribute to have an image display, simply change the original attribute name: attribute value to attribute name: {name: attribute name, img:'image link'} on the sku attribute of the image you want to display. For example, when we want the attribute of body color to have an image display.

After modificationBefore modification

// The following code can be directly copied and used
[
    {
        id: 1,
        price: 7000,
        stock: 30,
        sku_attrs: {
            'body color': {
                name: 'Deep Sky Black',
                img: 'https://mp-16389c52-85e7-413f-b566-3da08e2fe054.cdn.bspapp.com/img/sku-test/heise.jpeg',
            },
            'capacity': '128G',
            'suit': 'Quick charging set'
        }
    },
    {
        id: 2,
        price: 8500,
        stock: 10,
        sku_attrs: {
            'body color': {
                name: 'Dark Purple',
                img: 'https://mp-16389c52-85e7-413f-b566-3da08e2fe054.cdn.bspapp.com/img/sku-test/anyezi.jpeg',
            },
            'capacity': '256G',
            'suit': 'Quick charging set'
        }
    },
    {
        id: 3,
        price: 9500,
        stock: 0,
        sku_attrs: {
            'body color': {
                name: 'Dark Purple',
                img: 'https://mp-16389c52-85e7-413f-b566-3da08e2fe054.cdn.bspapp.com/img/sku-test/anyezi.jpeg',
            },
            'capacity': '512G',
            'suit': 'AirPodssuit'
        }
    },
    {
        id: 4,
        price: 9200,
        stock: 60,
        sku_attrs: {
            'body color': {
                name: 'silvery',
                img: 'https://mp-16389c52-85e7-413f-b566-3da08e2fe054.cdn.bspapp.com/img/sku-test/baise.jpeg',
            },
            'capacity': '512G',
            'suit': 'AirPodssuit'
        }
    },
    {
        id: 5,
        price: 9200,
        stock: 80,
        sku_attrs: {
            'body color': {
                name: 'golden',
                img: 'https://mp-16389c52-85e7-413f-b566-3da08e2fe054.cdn.bspapp.com/img/sku-test/jinse.jpeg',
            },
            'capacity': '512G',
            'suit': 'AirPods3suit'
        }
    }
]

// The following code can be directly copied and used
[
    {
        id: 1,
        price: 7000,
        stock: 30,
        sku_attrs: {
            'body color': {
                name: 'Deep Sky Black',
                img: 'https://mp-16389c52-85e7-413f-b566-3da08e2fe054.cdn.bspapp.com/img/sku-test/heise.jpeg',
            },
            'capacity': '128G',
            'suit': 'Quick charging set'
        }
    },
    {
        id: 2,
        price: 8500,
        stock: 10,
        sku_attrs: {
            'body color': {
                name: 'Dark Purple',
                img: 'https://mp-16389c52-85e7-413f-b566-3da08e2fe054.cdn.bspapp.com/img/sku-test/anyezi.jpeg',
            },
            'capacity': '256G',
            'suit': 'Quick charging set'
        }
    },
    {
        id: 3,
        price: 9500,
        stock: 0,
        sku_attrs: {
            'body color': {
                name: 'Dark Purple',
                img: 'https://mp-16389c52-85e7-413f-b566-3da08e2fe054.cdn.bspapp.com/img/sku-test/anyezi.jpeg',
            },
            'capacity': '512G',
            'suit': 'AirPodssuit'
        }
    },
    {
        id: 4,
        price: 9200,
        stock: 60,
        sku_attrs: {
            'body color': {
                name: 'silvery',
                img: 'https://mp-16389c52-85e7-413f-b566-3da08e2fe054.cdn.bspapp.com/img/sku-test/baise.jpeg',
            },
            'capacity': '512G',
            'suit': 'AirPodssuit'
        }
    },
    {
        id: 5,
        price: 9200,
        stock: 80,
        sku_attrs: {
            'body color': {
                name: 'golden',
                img: 'https://mp-16389c52-85e7-413f-b566-3da08e2fe054.cdn.bspapp.com/img/sku-test/jinse.jpeg',
            },
            'capacity': '512G',
            'suit': 'AirPods3suit'
        }
    }
]

[
    {
        id: 1,
        price: 7000,
        stock: 30,
        sku_attrs: {
            'body color': 'Deep Sky Black',
            'capacity': '128G',
            'suit': 'Quick charging set'
        }
    },
    {
        id: 2,
        price: 8500,
        stock: 10,
        sku_attrs: {
            'body color': 'Dark Purple',
            'capacity': '256G',
            'suit': 'Quick charging set'
        }
    },
    {
        id: 3,
        price: 9500,
        stock: 0,
        sku_attrs: {
            'body color': 'Dark Purple',
            'capacity': '512G',
            'suit': 'AirPodssuit'
        }
    },
    {
        id: 4,
        price: 9200,
        stock: 60,
        sku_attrs: {
            'body color': 'silvery',
            'capacity': '512G',
            'suit': 'AirPodssuit'
        }
    },
    {
        id: 5,
        price: 9200,
        stock: 80,
        sku_attrs: {
            'body color': 'golden',
            'capacity': '512G',
            'suit': 'AirPods3suit'
        }
    }
]

[
    {
        id: 1,
        price: 7000,
        stock: 30,
        sku_attrs: {
            'body color': 'Deep Sky Black',
            'capacity': '128G',
            'suit': 'Quick charging set'
        }
    },
    {
        id: 2,
        price: 8500,
        stock: 10,
        sku_attrs: {
            'body color': 'Dark Purple',
            'capacity': '256G',
            'suit': 'Quick charging set'
        }
    },
    {
        id: 3,
        price: 9500,
        stock: 0,
        sku_attrs: {
            'body color': 'Dark Purple',
            'capacity': '512G',
            'suit': 'AirPodssuit'
        }
    },
    {
        id: 4,
        price: 9200,
        stock: 60,
        sku_attrs: {
            'body color': 'silvery',
            'capacity': '512G',
            'suit': 'AirPodssuit'
        }
    },
    {
        id: 5,
        price: 9200,
        stock: 80,
        sku_attrs: {
            'body color': 'golden',
            'capacity': '512G',
            'suit': 'AirPods3suit'
        }
    }
]

Specify default selected SKU

SelectSkuIndex is used to specify the SKU index to be selected by default.

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="purchase"
    notSelectSku="Please select complete product information"
    :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="purchase"
    notSelectSku="Please select complete product information"
    :isShowStock="false"
    :selectSkuIndex="3"
    @skuChange="skuChange"
    @confirm="skuConfirm"
></wu-sku>

Is irrelevant SKU disabled

Are the remaining SKU attributes that are not related to the currently selected SKU attribute disabled.

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>

If you are not satisfied with the sku disabled style, you can modify the style by setting skuDisabledStyle, and the object's form is sufficient.

SKU Props

Attribute Name	illustrate	types	Default value	Optional values
data	Source data (SKU list)	Array	[]	-
value/modelValue/v-model	Show SKU components	Boolean	false	true/false
isMaskClose	Can I click on the mask layer to close it	Boolean	false	true/false
isSelectMinPriceSku	Is the SKU with the lowest price selected by default	Boolean	true	true/false
selectSkuIndex	Default selected SKU subscript	Number/String	null	-
defaultCover	Default cover image, used to display when a complete SKU is not selected	String	""	-
defaultNum	Default purchase quantity	Number/String	1	-
themeColor	Theme colors require passing in an array with a length of 3, corresponding to the values of the three colors of rgb, for example: [84, 164, 255]	Array	[84, 164, 255]	-
btnConfirmText	Confirm button text	String	"确认"	-
skuUnrelatedDisabled	Are the remaining SKU attributes that are not related to the currently selected SKU attribute disabled.	Boolean	false	true/false
skuDisabledStyle	SKU disable styles	Object	{}	-
notStockText	Out of stock text, effective when notStockDisabled is false	String	"库存不足"	-
notSelectSku	Text prompt when a complete SKU is not selected	String	"请选择完整的sku属性"	-
showStockNum	Display inventory quantity	Boolean	true	true/false

SKU Events

name	illustrate	Callback Arguments
confirm	Event triggered when clicking the confirm button	e = { sku, skuText , num }。Corresponds to the selected SKU value, SKU attribute name array, and the quantity in the input box.
skuChange	The event that sets off when the SKU changes. If a complete SKU is selected, it will be returned. Otherwise, it will be returned{}	e = {}
numChange	Trigger event when the quantity in the input box changes	e = num, Return the number of input boxes
close	Close SKU component trigger event	-
open	Open the SKU component to trigger an event	-

SKU Methods

name	illustrate
resetNum	Reset purchase quantity