SKU商品规格选择

在线demo地址

Github代码地址

可选属性实现思路

当用户点击某选项(如"黑色")时，拿到此时所有规格的选项( { color: "黑色" })

根据商品数据、用户当前选择规格，查找匹配商品。如果找到了，就返回商品标识(商品为数组则返回数组索引 index)；如果没找到，则返回 undefined 。(this.find(option))

拿到所有支持的商品的选项(如["iPhone X", "iPhone XS", "黑色", "64g"])，这些就是此时可点击的选项(要注意去重)。

可发现，同级的选项在商品的规格选项中不存在(如上面的例子中按道理来说"白色"选项也应该可点击)，所以要特殊处理这种情况。可通过遍历当前用户的所有规格选项，有值的(不为null)的规格改为其他选项再去求。(如 { color: "黑色" } 改为 { color: "白色" } 去求支持的商品的所有属于“颜色”这个规格的选项)

根据刚得到的结果来修改可被点击选项的状态，不包含的选项就是不可被点击的。

Goods 类的相关说明

生成实例需要传入商品对象数组

key: string 为 商品规格名称，value: [string] 为该商品此规格的值。如：

const goods = [

{

// "商品规格名称": "该商品此规格的值",

name: "iPhone X",

color: "黑色",

storage: "64g",

},

{

color: "黑色",

name: "iPhone XS",

storage: "64g",

},

{

color: "白色",

name: "iPhone X",

storage: "64g",

},

{

color: "白色",

name: "iPhone X",

storage: "256g",

},

];

this.list

返回商品实例的数据。

[

{

name: "iPhone X",

color: "黑色",

storage: "64g",

},

{

color: "黑色",

name: "iPhone XS",

storage: "64g",

},

{

color: "白色",

name: "iPhone X",

storage: "64g",

},

{

color: "白色",

name: "iPhone X",

storage: "256g",

},

];

this.attrKey

根据商品数据，可获得由所有商品的规格 key 组成的数组。

["name", "color", "storage"];

this.attr

根据商品数据，可获得商品全部属性选项对象。

{

"name": [

"iPhone X",

"iPhone XS"

],

"color": [

"黑色",

"白色"

],

"storage": [

"64g",

"256g"

]

}

this.have(option)

判断有没有这个规格 option 的商品，返回布尔值。

const goods = [

{

// "商品规格名称": "该商品此规格的值",

name: "iPhone X",

color: "黑色",

storage: "64g",

},

{

color: "黑色",

name: "iPhone XS",

storage: "64g",

},

{

color: "白色",

name: "iPhone X",

storage: "64g",

},

{

color: "白色",

name: "iPhone X",

storage: "256g",

},

];

const example = new Goods(goods);

const option1 = { name: "iPhone X", color: "黑色", storage: "64g" };

const option2 = { name: "iPhone X", color: "黑色", storage: "128g" };

//

example.have(option1); // true

example.have(option2); // false

this.find(option)

查找匹配商品。如果找到了，就返回商品标识(商品为数组则返回数组索引 index)；如果没找到，则返回 undefined 。

example.find({ name: "iPhone X", color: "黑色", storage: "64g" }); // 0

example.find({ name: "iPhone X", color: "黑色", storage: "128g" }); // undefined

adaptedAttr

判断属性可用性。

const adaptedAttr = example.adaptedAttr({ name: "iPhone X", color: "黑色" });

// {

// "name": [

// "iPhone X",

// "iPhone XS"

// ],

// "color": [

// "黑色",

// "白色"

// ],

// "storage": [

// "64g"

// ]

// }

this.combine(...chunks)

排列组合函数。

this.allOptions()

根据商品的规格，来推测用户选择的所有规格组合。

this.result

提前计算好所有规格组合对应的可被点击的选项。

this.getAdaptedAttrByResult(option)

根据 option 快速获取已经提前计算好的对应的可用属性。

完整代码

1. Goods 类

// 商品类

const Goods = class Goods {

constructor(goods) {

// 商品列表数据

this.list = goods;

// 由所有商品的规格 key 组成的数组

this.attrKey = (() => {

const result = new Set();

for (let item of goods) {

Object.keys(item).forEach((attr) => {

result.add(attr);

});

}

return Array.from(result);

})();

// 商品全部属性选项对象。此对象的成员的 key 为某规格的 key，value 为 这规格的所有选项数组。

this.attr = (() => {

const result = {};

for (let item of goods) {

const keys = Object.keys(item);

for (let key of keys) {

if (!result[key]) {

result[key] = [];

}

const value = item[key];

if (!result[key].includes(value)) {

result[key].push(value);

}

}

}

return result;

})();

// 根据商品预测所有选项组合，从而得到所有组合对应的结果

this.result = (() => {

const result = {};

const all = this.allOptions();

for (let item of all) {

const key = Object.values(item).join("--");

result[key] = this.adaptedAttr(item);

}

return result;

})();

}

have(option) {

if (Object.prototype.toString.call(option) !== "[object Object]") {

return undefined;

}

const index = this.list.findIndex((item) => {

for (let key in option) {

if (option[key] !== item[key]) {

return false;

}

}

return true;

});

const result = index !== -1;

return result;

}

find(option) {

if (Object.prototype.toString.call(option) !== "[object Object]") {

return undefined;

}

const result = [];

this.list.forEach((item, index) => {

const keys = Object.keys(option);

const isEqual = keys.every((key) => {

return option[key] === item[key];

});

if (isEqual) {

result.push(index);

}

});

return result;

}

adaptedAttr(option) {

const list = this.list;

const result = {};

for (let key of this.attrKey) {

result[key] = [];

}

// 找到符合该选项规格的商品下标

const indexArr = this.find(option);

indexArr.forEach((index) => {

for (let key in list[index]) {

const value = list[index][key];

if (!result[key].includes(value)) {

result[key].push(value);

}

}

});

// 与已选的统一规则的要特殊处理

for (let key in option) {

const tempOption = { ...option };

const otherOption = this.attr[key].filter(

(item) => item !== tempOption[key]

);

for (let item of otherOption) {

tempOption[key] = item;

if (this.find(tempOption).length > 0) {

result[key].push(item);

}

}

}

return result;

}

combine(...chunks) {

const res = [];

const helper = function (chunkIndex, prev) {

const chunk = chunks[chunkIndex];

const isLast = chunkIndex === chunks.length - 1;

for (let val of chunk) {

const cur = prev.concat(val);

if (isLast) {

res.push(cur);

} else {

helper(chunkIndex + 1, cur);

}

}

};

helper(0, []);

return res;

}

allOptions() {

const options = [];

const optionsKey = [];

for (let key in this.attr) {

options.push(this.attr[key].concat(null));

optionsKey.push(key);

}

const result = this.combine(...options).map((item, index) => {

const obj = {};

item.forEach((option, optionIndex) => {

if (!!option) {

obj[optionsKey[optionIndex]] = option;

}

});

return obj;

});

return result;

}

getAdaptedAttrByResult(option) {

const sortOption = [];

// 排序

this.attrKey.forEach((item) => {

if (option[item]) {

sortOption.push(option[item]);

}

});

return this.result[sortOption.join("--")];

}

};

2. 商品数据

// 现有商品

const goods = [

{

id: 1,

options: {

name: "iPhone X",

color: "黑色",

storage: "64g",

},

},

{

id: 2,

options: {

name: "iPhone XS",

color: "黑色",

storage: "64g",

},

},

{

id: 3,

options: {

name: "iPhone X",

color: "白色",

storage: "64g",

},

},

{

id: 4,

options: {

name: "iPhone X",

color: "白色",

storage: "256g",

},

},

];

3. 动态样式

// 样式们

const disabledStyle = {

margin: "0 20px",

padding: "5px 10px",

color: "rgba(0,0,0,.25)",

background: "#f5f5f5",

border: "1px solid",

borderColor: "#d9d9d9",

};

const normalStyle = {

margin: "0 20px",

padding: "5px 10px",

color: "rgba(0,0,0,.85)",

background: "#fff",

border: "1px solid",

borderColor: "#d9d9d9",

};

const selectedStyle = {

margin: "0 20px",

padding: "5px 10px",

color: "#fff",

background: "#1890ff",

border: "1px solid",

borderColor: "#1890ff",

};

4. 渲染相关代码

import React, { useState, useMemo } from "react";

const zh = {

name: "型号",

color: "颜色",

storage: "内存",

};

const example = new Goods(goods.map((item) => item.options));

const { attr, attrKey } = example;

function App() {

// 渲染的选择规格数据

const renderGoods = attrKey.map((key) => {

if (key === "storage") {

return {

label: key,

list: ["64g", "128g", "256g"],

};

}

return {

label: key,

list: attr[key],

};

});

// 当前选中的数据

const [selected, setSelected] = useState({});

// 可被选的数据

const adaptedOption = useMemo(() => {

return example.getAdaptedAttrByResult(selected);

}, [selected]);

// 选项的状态

const optionStatus = useMemo(() => {

const result = {};

renderGoods.forEach((item) => {

const key = item.label;

const list = item.list;

result[key] = {};

list.forEach((option) => {

result[key][option] = -1;

if (adaptedOption[key].includes(option)) {

result[key][option] = 0;

}

});

});

return result;

}, [adaptedOption, renderGoods]);

function onClick(value, optionKey) {

// 禁用不可点

if (!optionStatus[optionKey] || optionStatus[optionKey][value] === -1) {

return;

}

const tempSelected = { ...selected };

// 是否是取消

if (tempSelected[optionKey] === value) {

delete tempSelected[optionKey];

} else {

tempSelected[optionKey] = value;

}

setSelected(tempSelected);

}

return (

);

}

export default App;