1.SKU的基本了解
SkU(Stock Keeping Unit):库存量单位,即库存进出计量的单位,可以使以件、盒、托盘为单位。
在点击某个商品之后会有与之相对应的产品型号,详细到是:什么颜色,什么尺寸,产地是什么,最后得到的组合就是SKU
举个例子:今天我买了个手机,手机描述的不够详细,这不能称之为SKU; 我买了个手机,品牌是华为的mate50 pro plus,流光紫色,内存是512G的 等等,将这些产品信息组合到一起称之为SKU
下面这张图片: 锅,黑色的,国产的,20cm尺寸就是它的SKU
而我们要做的就是根据这些类型,将每一种可能被用户选到的类型组合
,都筛选出来;根据用户点击这几个按钮,能够得知用户选择了怎样的一款产品,这个产品的详细信息是什么?通过用户点击的按钮能显示出来,以及根据库存的数量,将那些对应没有库存的商品按钮禁用是我们要做的。
接下来会以这口锅为例继续
2. 查看请求回来商品的数
这段数据后端已经告诉我,这件商品的所有组合,共有12种
我们可以看到,这项商品对应的库存是没货的状态,在相应的按钮上就不应该让用户去点击
思路:
根据用户点击的按钮查找对应项的库存 ==> 根据后端的数据生成一份可以查找到目标的路径字典
当用户点击了蓝色锅,去右侧查找与蓝色相对应的数据,依次类推,当在字典中差找不到时,则说明无货,按钮不能点击
以黑色为例: 黑色的组合为这些项,当用户再次点击中国时,查到的仅有10cm,而20cm于30cm的按钮就不可点击
3. 详细js代码:
首先用到了一个幂级算法:主要参考了如下
主要的功能实现:借助算法生成一个可查询的
路径字典
下面是参考中的代码:单独将其封装到一个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 生成字典
接下来:封装一个可以得到路径字典的方法,只需要传进去skus数据即可
这里注意数据层级关系,goodsData和skus属于同一层级,原作者的vue3中goodsData
(父)和skus是父子关系
下面是一段模拟数据
goodsData: {
unit: "件", //商品单位
goods_id: 436886, //商品id
store_count: 158, //总库存量
market_price: "10.00", //市场价格
shop_price: "0.01", //商店价格
cost_price: "10.00", //成本价
goods_name: "磨砂锅", //商品名字
original_img:
"http://boweisou.oss-cn-shenzhen.aliyuncs.com/images/170/2018/06/o49599VttZZU84VkczGt1j9t5Tcu4t.jpg", //商品图片 建议数组形式,方便存储多张图片
specs: [
{
name: "颜色",
values: [
{
name: "黑色",
picture: "",
selected: false,
disabled: false,
},
{
name: "蓝色",
picture: "",
selected: false,
disabled: false,
},
],
},
{
name: "产地",
values: [
{
name: "中国",
picture: "",
selected: false,
disabled: false,
},
{
name: "日本",
picture: "",
selected: false,
disabled: false,
},
],
},
{
name: "尺寸",
values: [
{
name: "30cm",
picture: "",
selected: false,
disabled: false,
},
{
name: "20cm",
picture: "",
selected: false,
disabled: false,
},
{
name: "10cm",
picture: "",
selected: false,
disabled: false,
},
],
},
],
},
skus: [
{
//规格商品
id: 1018261,
inventory: 10, //库存
price: "10.00", //价格
skuCode: "goods-sku-001",
specs: [
{ name: "颜色", valueName: "黑色" },
{ name: "产地", valueName: "日本" },
{ name: "尺寸", valueName: "30cm" },
],
},
{
//规格商品
id: 1018262,
inventory: 20, //库存
price: "10.00", //价格
skuCode: "goods-sku-002",
specs: [
{ name: "颜色", valueName: "蓝色" },
{ name: "产地", valueName: "中国" },
{ name: "尺寸", valueName: "10cm" },
],
},
{
//规格商品
id: 1018263,
inventory: 40, //库存
price: "10.00", //价格
skuCode: "goods-sku-003",
specs: [
{ name: "颜色", valueName: "黑色" },
{ name: "产地", valueName: "中国" },
{ name: "尺寸", valueName: "10cm" },
],
},
{
//规格商品
id: 1018264,
inventory: 80, //库存
price: "10.00", //价格
skuCode: "goods-sku-004",
specs: [
{ name: "颜色", valueName: "黑色" },
{ name: "产地", valueName: "日本" },
{ name: "尺寸", valueName: "20cm" },
],
},
{
//规格商品
id: 1018265,
inventory: 0, //库存
price: "10.00", //价格
skuCode: "goods-sku-005",
specs: [
{ name: "颜色", valueName: "蓝色" },
{ name: "产地", valueName: "日本" },
{ name: "尺寸", valueName: "20cm" },
],
},
],
路径字典的方法:
import bwPowerSet from "@/common/adjoinArray";//此代码是上文封装的路径字典,别忘引入
data() {
goodsData:{},//模拟数据
skus: [],//模拟数据
spliter: "★",//生成路径字典中的间隔字符 随意更改
pathMap: null,// 路径字典初始化
skuId: "",//可以根据skuId还原用户选中的规格
}
methods: {
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(this.spliter);
if (pathMap[key]) {
// 已经有key往数组追加
pathMap[key].push(sku.id);
} else {
// 没有key设置一个数组
pathMap[key] = [sku.id];
}
});
}
});
return pathMap;
},
},
created() {
this.initSelectedStatus(this.goodsData, this.skus, this.skuId); //后面有介绍
this.pathMap = this.getPathMap(this.skus);//将所有的路径存储到this.pathMap中
console.log(this.pathMap)
},
通过以上方法查看最后得到的路径字典,得到的内容实际如下
4. 根据用户选中的内容查找
4.1 分析:按钮在什么时候就开始显示禁用效果
(1)组件创建完成时就要显示
(2)用户每点击一次按钮都要进行查找
4.2 封装函数
这个函数需要两个参数,字典(this.pathMap)和规格(this.goodsData.specs)
updateDisabledStatus(pathMap, specs) {
// 用户的选择[undefined,'中国',undefined]
const _selectedArr = this.getSelectedArr(specs);
console.log(_selectedArr);
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(this.spliter);
// 若找不到 设置为true
btn.disabled = !pathMap[key]; // (undefined取反)
});
});
},
这个函数需要:商品的全部数据信息(this.goodsData , this.skus)和当前商品的id(this.skuId)
// 根据skuId还原用户选中的规格
initSelectedStatus(goodsData, skus, skuId) {
const sku = 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 id="app">
<div class="goods-sku">
<dl v-for="(spec, idx) in goodsData.specs" :key="idx">
<dt>{{ spec.name }}</dt>
<dd>
<div v-for="(value, index) in spec.values" :key="index">
<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
>
</div>
</dd>
</dl>
</div>
</div>
</template>
<script>
import bwPowerSet from "@/common/adjoinArray";
export default {
name: "App",
components: {},
data() {
return {
goodsData: {
unit: "件", //商品单位
goods_id: 436886, //商品id
store_count: 158, //总库存量
market_price: "10.00", //市场价格
shop_price: "0.01", //商店价格
cost_price: "10.00", //成本价
goods_name: "磨砂锅", //商品名字
original_img:
"http://boweisou.oss-cn-shenzhen.aliyuncs.com/images/170/2018/06/o49599VttZZU84VkczGt1j9t5Tcu4t.jpg", //商品图片 建议数组形式,方便存储多张图片
specs: [
{
name: "颜色",
values: [
{
name: "黑色",
picture: "",
selected: false,
disabled: false,
},
{
name: "蓝色",
picture: "",
selected: false,
disabled: false,
},
],
},
{
name: "产地",
values: [
{
name: "中国",
picture: "",
selected: false,
disabled: false,
},
{
name: "日本",
picture: "",
selected: false,
disabled: false,
},
],
},
{
name: "尺寸",
values: [
{
name: "30cm",
picture: "",
selected: false,
disabled: false,
},
{
name: "20cm",
picture: "",
selected: false,
disabled: false,
},
{
name: "10cm",
picture: "",
selected: false,
disabled: false,
},
],
},
],
},
skus: [
{
//规格商品
id: 1018261,
inventory: 10, //库存
price: "10.00", //价格
skuCode: "goods-sku-001",
specs: [
{ name: "颜色", valueName: "黑色" },
{ name: "产地", valueName: "日本" },
{ name: "尺寸", valueName: "30cm" },
],
},
{
//规格商品
id: 1018262,
inventory: 20, //库存
price: "10.00", //价格
skuCode: "goods-sku-002",
specs: [
{ name: "颜色", valueName: "蓝色" },
{ name: "产地", valueName: "中国" },
{ name: "尺寸", valueName: "10cm" },
],
},
{
//规格商品
id: 1018263,
inventory: 40, //库存
price: "10.00", //价格
skuCode: "goods-sku-003",
specs: [
{ name: "颜色", valueName: "黑色" },
{ name: "产地", valueName: "中国" },
{ name: "尺寸", valueName: "10cm" },
],
},
{
//规格商品
id: 1018264,
inventory: 80, //库存
price: "10.00", //价格
skuCode: "goods-sku-004",
specs: [
{ name: "颜色", valueName: "黑色" },
{ name: "产地", valueName: "日本" },
{ name: "尺寸", valueName: "20cm" },
],
},
{
//规格商品
id: 1018265,
inventory: 0, //库存
price: "10.00", //价格
skuCode: "goods-sku-005",
specs: [
{ name: "颜色", valueName: "蓝色" },
{ name: "产地", valueName: "日本" },
{ name: "尺寸", valueName: "20cm" },
],
},
],
spliter: "★",
pathMap: null,
skuId: "",
};
},
methods: {
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(this.spliter);
if (pathMap[key]) {
// 已经有key往数组追加
pathMap[key].push(sku.id);
} else {
// 没有key设置一个数组
pathMap[key] = [sku.id];
}
});
}
});
return pathMap;
},
// 1.获取用户已经选中的条件
getSelectedArr(specs) {
return specs.map((spec) => {
// 找到这个属性下,用户的选择
const value = spec.values.find((it) => it.selected === true);
return value ? value.name : undefined;
});
// return [undefined,'中国',undefined]
},
// 2.对于每个按钮来说:在组合当前的按钮对应的
// 更新按钮的禁用状态
updateDisabledStatus(pathMap, specs) {
// 用户的选择[undefined,'中国',undefined]
const _selectedArr = this.getSelectedArr(specs);
console.log(_selectedArr);
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(this.spliter);
// 若找不到 设置为true
btn.disabled = !pathMap[key]; // (undefined取反)
});
});
},
// 根据skuId还原用户选中的规格
initSelectedStatus(goodsData, skus, skuId) {
const sku = 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];
});
});
}
},
clickSpecs(value, values) {
// 如果是禁用状态则不做处理
if (value.disabled) {
return;
}
if (value.selected) {
value.selected = false; // 已选中改为未选中
} else {
// 把兄弟全改为未选中
values.forEach((it) => {
it.selected = false;
});
value.selected = true; // 自己:未选中改为已选中
}
this.updateDisabledStatus(this.pathMap, this.goodsData.specs);
this.tryEmit();
},
tryEmit() {
const selectedArr = this.getSelectedArr(this.goodsData.specs).filter(
(v) => v
);
if (selectedArr.length === this.goodsData.specs.length) {
const skuIds = this.pathMap[selectedArr.join(this.spliter)];
const sku = this.skus.find((sku) => sku.id === skuIds[0]);
console.log(sku);//输出用户所选择的规格商品
} else {
// emit("change", {});
}
},
},
created() {
this.initSelectedStatus(this.goodsData, this.skus, this.skuId);
this.pathMap = this.getPathMap(this.skus);
},
};
</script>
<style>
.disabled {
background-color: red; //禁用显示红色
}
.selected {
background-color: blue;//选中显示蓝色
}
</style>