1、商品详情数据结构
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" },
],
},
],
2、获取子集算法
import { ref, onMounted } from "vue";
import bwPowerSet from "@/composables/power-set";
import axios from "axios";
// 商品数据
const goods = ref([])
let pathMap = []
const getGoods = async ()=> {
const res = await axios.get('url')
goods.value = res.data.result
pathMap = getPathMap(goods.value)
initDisabledStatus(goods.value.specs,pathMap)
}
onMounted(()=>getGoods())
// 选中和取消选中实现
const changeSku = (item, val) => {
if(val.disabled) return
// item:同一排的对象
// val:当前点击项
if(val.selected) {
val.selected = false
}else {
item.values.forEach(val => val.selected = false)
val.selected = true
}
// 点击按钮时更新
updateDisabledStatus(goods.value.specs, pathMap)
// 产出SKU对象数据
const index = getSelectedValues(goods.value.specs).findIndex(item => item === undefined)
if(index > -1) {
console.log('找到了，信息不完整')
}else {
console.log('没有找到，信息完整，可以产出')
// 获取sku对象
const key = getSelectedValues(goods.value.specs).join('-')
const skuIds = pathMap[key]
console.log(skuIds)
// 以skuId作为匹配项去goods.value.skus数组中找
const skuObj = goods.value.skus.find(item => item.id === skuIds[0])
console.log('sku对象为',skuObj)
}
}
// 得到路径字典对象
const getPathMap = (goods) => {
const pathMap = {}
// (1) 根据skus字段生成有效的sku数组
const effectiveSkus = goods.skus.filter(sku => sku.inventory > 0)
// (2) 根据有效的sku使用算法（子集算法）[1,2] => [[1],[2],[1,2]]
effectiveSkus.forEach(sku => {
// (2.1)获取匹配的valueName组成的数组
const selectedValArr = sku.specs.map(val => val.valueName)
// (2.2)使用算法获取子集
// ["黑色", "日本", "20cm"]
// [[], ["黑色"], ["日本"], ["黑色", "日本"], ["20cm"], ["黑色", "20cm"], ["日本", "20cm"], ["黑色", "日本", "20cm"]]
const valueArrPowerSet = bwPowerSet(selectedValArr)
console.log(selectedValArr)
console.log(valueArrPowerSet)
// (3)把得到子集生成最终的路径字典对象
valueArrPowerSet.forEach(arr => {
// 初始化key 数组join -> 字符串 对象的key
const key = arr.join('-')
// 如果已经存在当前key 就往数组中直接添加skuId 如果不存在key 直接赋值
if(pathMap[key]) {
pathMap[key].push(sku.id)
}else {
pathMap[key] = [sku.id]
}
})
});
return pathMap
}
// 初始化禁用状态
const initDisabledStatus = (specs, pathMap) => {
specs.forEach(spec => {
spec.values.forEach(val => {
if(pathMap[val.name]) {
val.disabled = false
}else {
val.disabled = true
}
})
})
}
// 获取选中项的匹配数组【‘黑色’，undefined，undefined】
const getSelectedValues = (specs)=>{
const arr = []
specs.forEach((spec)=>{
// 目标：找到values中的selected为true的项，然后把它的name字段添加数组对应的位置
const selectVal = spec.values.find(item => item.selected)
arr.push(selectVal ? selectVal.name : undefined)
})
return arr
}
// 切换时更新禁用状态
const updateDisabledStatus = (specs, pathMap) => {
specs.forEach((spec,index) => {
const selectedValues = getSelectedValues(specs)
spec.values.forEach(val => {
selectedValues[index] = val.name
const key = selectedValues.filter(value => value).join('-')
if(pathMap[key]) {
val.disabled = false
}else {
val.disabled = true
}
})
})
}
3、逻辑梳理
（1）根据后台返回的skus数据得到有效sku组合；
（1）根据有效的sku组合得到所有的子集集合；
（1）根据子集集合组合成一个路径字典，也就是对象；
（1）在组件初始化的时候去判断每个规格是否可点击；
（1）在点击规格的时候去判断其他规格是否可点击；
判断的依据是，拿着所有规格和现在已经选中的规则取搭配，得到可走路径。如果可走路径在字典中则可点击；如果可走路径不在字典中则禁用。
截屏2023-09-05 10.48.38.png
截屏2023-09-05 11.17.16.png
截屏2023-09-05 16.26.18.png
截屏2023-09-05 16.41.19.png
截屏2023-09-05 17.05.58.png
截屏2023-09-05 17.23.52.png
4、代码实现
<script setup>
import { ref, onMounted } from "vue";
import bwPowerSet from "@/composables/power-set";
import axios from "axios";
// 挂载完成
onMounted(()=>getGoods())
// 商品数据
const goods = ref([])
// 路径字典对象
let pathMap = []
// 获取商品详情数据
const getGoods = async ()=> {
const res = await axios.get('url')
goods.value = res.data.result
// 获取路径字典对象
pathMap = getPathMap(goods.value)
// 初始化禁用状态
initDisabledStatus(goods.value.specs,pathMap)
}
// 选中和取消选中实现
const changeSku = (item, val) => {
// 如果选项状态为不可点击则直接返回
if(val.disabled) return
// item:同一排的对象
// val:当前点击项
if(val.selected) {
val.selected = false
}else {
item.values.forEach(val => val.selected = false)
val.selected = true
}
// 点击按钮时更新状态
updateDisabledStatus(goods.value.specs, pathMap)
// 产出SKU对象数据
const index = getSelectedValues(goods.value.specs).findIndex(item => item === undefined)
if(index > -1) {
console.log('找到了，信息不完整')
}else {
console.log('没有找到，信息完整，可以产出')
// 获取sku对象
const key = getSelectedValues(goods.value.specs).join('-')
const skuIds = pathMap[key]
console.log(skuIds)
// 以skuId作为匹配项去goods.value.skus数组中找
const skuObj = goods.value.skus.find(item => item.id === skuIds[0])
console.log('sku对象为',skuObj)
}
}
// 得到路径字典对象
const getPathMap = (goods) => {
const pathMap = {}
// 根据skus字段生成有效的sku数组
const effectiveSkus = goods.skus.filter(sku => sku.inventory > 0)
// 根据有效的sku使用算法（子集算法）[1,2] => [[1],[2],[1,2]]
effectiveSkus.forEach(sku => {
// 获取匹配的valueName组成的数组
const selectedValArr = sku.specs.map(val => val.valueName)
// 使用算法获取子集
// ["黑色", "日本", "20cm"]
// [[], ["黑色"], ["日本"], ["黑色", "日本"], ["20cm"], ["黑色", "20cm"], ["日本", "20cm"], ["黑色", "日本", "20cm"]]
const valueArrPowerSet = bwPowerSet(selectedValArr)
console.log(selectedValArr)
console.log(valueArrPowerSet)
// (3)把得到子集生成最终的路径字典对象
valueArrPowerSet.forEach(arr => {
// 初始化key 数组join -> 字符串 对象的key
const key = arr.join('-')
// 如果已经存在当前key 就往数组中直接添加skuId 如果不存在key 直接赋值
if(pathMap[key]) {
pathMap[key].push(sku.id)
}else {
pathMap[key] = [sku.id]
}
})
});
return pathMap
}
// 初始化禁用状态
const initDisabledStatus = (specs, pathMap) => {
specs.forEach(spec => {
spec.values.forEach(val => {
if(pathMap[val.name]) {
val.disabled = false
}else {
val.disabled = true
}
})
})
}
// 切换时更新禁用状态
const updateDisabledStatus = (specs, pathMap) => {
specs.forEach((spec,index) => {
const selectedValues = getSelectedValues(specs)
spec.values.forEach(val => {
selectedValues[index] = val.name
const key = selectedValues.filter(value => value).join('-')
if(pathMap[key]) {
val.disabled = false
}else {
val.disabled = true
}
})
})
}
// 获取选中项的匹配数组【‘黑色’，undefined，undefined】
const getSelectedValues = (specs)=>{
const arr = []
specs.forEach((spec)=>{
// 目标：找到values中的selected为true的项，然后把它的name字段添加数组对应的位置
const selectVal = spec.values.find(item => item.selected)
arr.push(selectVal ? selectVal.name : undefined)
})
return arr
}
</script>
