1.SKU的基本了解
SkU（Stock Keeping Unit）：库存量单位，即库存进出计量的单位，可以使以件、盒、托盘为单位。
在点击某个商品之后会有与之相对应的产品型号，详细到是：什么颜色，什么尺寸，产地是什么，最后得到的组合就是SKU
举个例子：今天我买了个手机，手机描述的不够详细，这不能称之为SKU； 我买了个手机，品牌是华为的mate40 pro plus，陶瓷白色，内存是512G的 等等，将这些产品信息组合到一起称之为SKU
下面这张图片： 锅，黑色的，国产的，20cm尺寸就是它的SKU
而我们要做的就是根据这些类型，将每一种可能被用户选到的类型组合，都筛选出来；根据用户点击这几个按钮，能够得知用户选择了怎样的一款产品，这个产品的详细信息是什么？通过用户点击的按钮能显示出来，以及根据库存的数量，将那些对应没有库存的商品按钮禁用是我们要做的。
接下来会以这口锅为例继续
2. 查看请求回来商品的数据
这段数据后端已经告诉我，这件商品的所有组合，共有12种
我们可以看到，这项商品对应的库存是没货的状态，在相应的按钮上就不应该让用户去点击
思路：
根据用户点击的按钮查找对应项的库存 ==> 根据后端的数据生成一份可以查找到目标的路径字典
当用户点击了蓝色锅，去右侧查找与蓝色相对应的数据，依次类推，当在字典中差找不到时，则说明无货，按钮不能点击
以黑色为例： 黑色的组合为这些项，当用户再次点击中国时，查到的仅有10cm，而20cm于30cm的按钮就不可点击
3. 详细js代码：
3.1 计算集合的子集的方法
首先用到了一个幂级算法：主要参考了如下
主要的功能实现：借助算法生成一个可查询的
路径字典下面是参考中的代码：单独将其封装到一个js文件中
/**
* Find power-set of a set using BITWISE approach.
*
* @param {*[]} originalSet
* @return {*[][]}
*/
export default function bwPowerSet (originalSet) {
const subSets = []
// We will have 2^n possible combinations (where n is a length of original set).
// It is because for every element of original set we will decide whether to include
// it or not (2 options for each set element).
const numberOfCombinations = 2 ** originalSet.length
// Each number in binary representation in a range from 0 to 2^n does exactly what we need:
// it shows by its bits (0 or 1) whether to include related element from the set or not.
// For example, for the set {1, 2, 3} the binary number of 0b010 would mean that we need to
// include only "2" to the current set.
for (let combinationIndex = 0; combinationIndex < numberOfCombinations; combinationIndex += 1) {
const subSet = []
for (let setElementIndex = 0; setElementIndex < originalSet.length; setElementIndex += 1) {
// Decide whether we need to include current element into the subset or not.
if (combinationIndex & (1 << setElementIndex)) {
subSet.push(originalSet[setElementIndex])
}
}
// Add current subset to the list of all subsets.
subSets.push(subSet)
}
return subSets
}
3.2 生成字典
接下来：封装一个可以得到路径字典的方法，只需要传进去sku数据即可
<script>
// import { ref } from 'vue'
import bwPowerSet from '@/vendor/power-set'
const spliter = '★'
// 根据skus数据得到路径字典对象
const getPathMap = (skus) => {
// console.log(skus.forEach(it => { console.log(it) }))
const pathMap = {}
skus.forEach(sku => {
// 1. 过滤出有库存有效的sku
if (sku.inventory) {
// 2. 得到sku属性值数组
const specs = sku.specs.map(spec => spec.valueName)
// 3. 得到sku属性值数组的子集
const powerSet = bwPowerSet(specs)
// console.log(specs)
// console.log(powerSet)
// 4. 设置给路径字典对象
powerSet.forEach(set => {
const key = set.join(spliter)
if (pathMap[key]) {
// 已经有key往数组追加
pathMap[key].push(sku.id)
} else {
// 没有key设置一个数组
pathMap[key] = [sku.id]
}
})
}
})
console.log(pathMap)
return pathMap
}
export default{
// 这里多余的代码就不写了
setup(){
// 发送请求获取商品数据
const goodsData = ref({})
findGoods(route.params.id).then(data => {
goodsData.value = data.result
console.log(data)
})
const pathMap = getPathMap(goodsData.skus)
console.log(pathMap)
return { goodsData }
}
}
</script>
通过以上方法查看最后得到的路径字典，得到的内容实际如下
4. 根据用户选中的内容查找
4.1 分析：按钮在什么时候就开始显示禁用效果
（1）组件创建完成时就要显示
（2）用户每点击一次按钮都要进行查找
4.2 封装函数
这个函数需要两个参数，字典和规格
<script>
const updateDisabledStatus = (pathMap, specs) => {
// 用户的选择[undefined,'中国',undefined]
const _selectedArr = getSelectedArr(specs)
specs.forEach((spec, idx) => {
const selectedArr = [..._selectedArr]
spec.values.forEach(btn => {
// 已经选中的
if (btn.name === selectedArr[idx]) { return }
// 将最后一选项填入用户选择的最后一项
selectedArr[idx] = btn.name
// 去掉undefined拼接字符串,再去查询
const key = selectedArr.filter(v => v).join(spliter)
// 若找不到 设置为true
btn.disabled = !pathMap[key] // （undefined取反）
})
})
}
</script>
这个函数需要：商品的全部数据信息和当前商品的id
// 根据skuId还原用户选中的规格
const initSelectedStatus = (goodsData, skuId) => {
// 1.找到选中的具体的规格
const sku = goodsData.skus.find(sku => sku.id === skuId)
if (sku) {
const selectArr = sku.specs.map(it => it.valueName)
goodsData.specs.forEach((spec, idx) => {
spec.values.forEach(value => {
value.selected = (value.name === selectArr[idx])
})
})
}
}
4. 实现的功能代码（封装为组件，包括样式代码）
<template>
<div class="goods-sku">
<dl v-for="(spec, idx) in goodsData.specs" :key="idx">
<dt>{{ spec.name }}</dt>
<dd>
<template v-for="value in spec.values" :key="value.name">
<img
@click="clickSpecs(value, spec.values)"
v-if="value.picture"
:class="{ selected: value.selected, disabled: value.disabled }"
:src="value.picture"
:title="value.name"
/>
<span
v-else
@click="clickSpecs(value, spec.values)"
:class="{ selected: value.selected, disabled: value.disabled }"
>{{ value.name }}</span
>
</template>
</dd>
</dl>
</div>
</template>
<script>
// import { ref } from 'vue'
import bwPowerSet from '@/vendor/power-set'
const spliter = '★'
// 根据skus数据得到路径字典对象
const getPathMap = (skus) => {
// console.log(skus.forEach(it => { console.log(it) }))
const pathMap = {}
skus.forEach(sku => {
// 1. 过滤出有库存有效的sku
if (sku.inventory) {
// 2. 得到sku属性值数组
const specs = sku.specs.map(spec => spec.valueName)
// 3. 得到sku属性值数组的子集
const powerSet = bwPowerSet(specs)
// console.log(specs)
// console.log(powerSet)
// 4. 设置给路径字典对象
powerSet.forEach(set => {
const key = set.join(spliter)
if (pathMap[key]) {
// 已经有key往数组追加
pathMap[key].push(sku.id)
} else {
// 没有key设置一个数组
pathMap[key] = [sku.id]
}
})
}
})
console.log(pathMap)
return pathMap
}
// 1.获取用户已经选中的条件
const getSelectedArr = specs => {
return specs.map(spec => {
// 找到这个属性下，用户的选择
const value = spec.values.find(it => it.selected === true)
return value ? value.name : undefined
})
// return [undefined,'中国',undefined]
}
// 2.对于每个按钮来说：在组合当前的按钮对应的
// 更新按钮的禁用状态
const updateDisabledStatus = (pathMap, specs) => {
// 用户的选择[undefined,'中国',undefined]
const _selectedArr = getSelectedArr(specs)
specs.forEach((spec, idx) => {
const selectedArr = [..._selectedArr]
spec.values.forEach(btn => {
// 已经选中的
if (btn.name === selectedArr[idx]) { return }
// 将最后一选项填入用户选择的最后一项
selectedArr[idx] = btn.name
// 去掉undefined拼接字符串,再去查询
const key = selectedArr.filter(v => v).join(spliter)
// 若找不到 设置为true
btn.disabled = !pathMap[key] // （undefined取反）
})
})
}
// 根据skuId还原用户选中的规格
const initSelectedStatus = (goodsData, skuId) => {
// 1.找到选中的具体的规格
const sku = goodsData.skus.find(sku => sku.id === skuId)
if (sku) {
const selectArr = sku.specs.map(it => it.valueName)
goodsData.specs.forEach((spec, idx) => {
spec.values.forEach(value => {
value.selected = (value.name === selectArr[idx])
})
})
}
// 2.设置对应的按钮selected为true
}
export default {
name: 'GoodsSku',
props: {
goodsData: {
type: Object,
default: () => ({
specs: [],
skus: []
})
},
skuId: {
type: String,
default: ''
}
},
setup (props, { emit }) {
const clickSpecs = (value, values) => {
// 如果是禁用状态则不做处理
if (value.disabled) { return }
if (value.selected) {
value.selected = false // 已选中改为未选中
} else {
// 把兄弟全改为未选中
values.forEach(it => { it.selected = false })
value.selected = true // 自己：未选中改为已选中
}
updateDisabledStatus(pathMap, props.goodsData.specs)
// 向父组件抛出事件更新skuId
tryEmit()
}
// 向父组件抛出事件更新skuId
const tryEmit = () => {
// 触发change事件将sku数据传递出去
const selectedArr = getSelectedArr(props.goodsData.specs).filter(v => v)
if (selectedArr.length === props.goodsData.specs.length) {
const skuIds = pathMap[selectedArr.join(spliter)]
const sku = props.goodsData.skus.find(sku => sku.id === skuIds[0])
// 传递
emit('change', {
skuId: sku.id,
price: sku.price,
oldPrice: sku.oldPrice,
inventory: sku.inventory,
specsText: sku.specs.reduce((p, n) => `${p} ${n.name}：${n.valueName}`, '').replace(' ', '')
})
} else {
emit('change', {})
}
}
// 根据skuId还原用户选中的规格
initSelectedStatus(props.goodsData, props.skuId)
// 生成字典
console.log(props.goodsData.skus)
const pathMap = getPathMap(props.goodsData.skus)
updateDisabledStatus(pathMap, props.goodsData.specs)
return { clickSpecs }
}
}
</script>
<style scoped lang="less">
.sku-state-mixin () {
border: 1px solid #e4e4e4;
margin-right: 10px;
cursor: pointer;
&.selected {
border-color: @xtxColor;
}
&.disabled {
opacity: 0.6;
border-style: dashed;
cursor: not-allowed;
}
}
.goods-sku {
padding-left: 10px;
padding-top: 20px;
dl {
display: flex;
padding-bottom: 20px;
align-items: center;
dt {
width: 50px;
color: #999;
}
dd {
flex: 1;
color: #666;
> img {
width: 50px;
height: 50px;
.sku-state-mixin ();
}
> span {
display: inline-block;
height: 30px;
line-height: 28px;
padding: 0 20px;
.sku-state-mixin ();
}
}
}
}
</style>
