SKU讲解及示例源码分析

发量浓郁的程序猿2024-03-21 16:46

概念及需求

  • SKU（Stock Keeping Unit）库存量单位，即库存进出计量的单位， 可以是以件、盒、托盘等为单位。SKU是物理上不可分割的最小存货单元。在使用时要根据不同业态，不同管理模式来处理
  • 代表该商品可选规格的任意组合，他是库存单位的唯一标识 例如选择奶茶时的 甜度、状态、冰量 组合起来就是SKU 正常糖、正常冰、冷饮

需求：

在平常买东西时可能当前商品的SKU规格库存没有 怎么判断有没有库存呢？ 这就需要每点击一个规格属性 都要去判断其他有没有库存。

由于在公司写的这篇文章，无法上传图片。想必有该需求的伙伴都知道需求就不贴图片了

先贴代码

html

复制代码 
        <div class="groupInfo" v-for="(property, propertyIndex) in properties" :key="propertyIndex">
          <p class="groupName">{{ property.name }}</p>
          <div class="flavorVOList">
            <template
              v-for="(attribute, attributeIndex) in property.attributes"
              :key="attributeIndex"
            >
              <span
                :class="[
                  attribute.isActive ? 'productActive' : attribute.isAble ? 'productActive' : '',
                  attribute.isDisabled ? 'noneActive' : ''
                ]"
                @click="handleClickAttribute(propertyIndex, attributeIndex)"
                >{{ attribute.value }}</span
              >
            </template>
          </div>
        </div>
        <div class="number">
          <span>{{ t('operation.number') }}：</span>
          <el-input-number
            v-model="amount"
            :min="1"
            :max="10"
            @change="handleChange"
            size="small"
          />
        </div>
      </div>

js

scss 复制代码 
import { ref } from 'vue'
import { flavorGroupList, skuDataList } from 'data.json'
// sku相关start
const properties = ref([]) // property 列表
const skuList = ref([]) // sku 列表
const matrix = ref([]) // 邻接矩阵存储无向图
const vertexList = ref([]) // 顶点数组
const selected = ref([]) // 当前已选的 attribute 列表
const selectedData = ref([]) //当前已选的attribute列表name
const showToast = ref([])
const selectShowToast = ref([])
// sku相关 end

const handleDetail = () => {
    flavorGroupList.map((val) => {
     showToast.value.indexOf(val.groupName) < 0 &&
                showToast.value.push(val.groupName)
        properties.value.push({
          name: val.groupName,
          attributes: filterTasteDataList(val.flavorVOList, val.groupName)
        })
        val.flavorVOList.map((item) => {
                if (item.defaultOpt == 1) {
                  selectedData.value.push(item.name + "(推荐)");
                  selected.value.push(item.flavorId);
                }
              })
      })
      // sku数据
      skuDataList.map((val) => {
        if (val.status == 1) {
          skuList.value.push({
            skuId: val.skuId,
            attributes: fliterSkuDataList(val.propertyKeyValues)
          })
        }
      })
      initEmptyAdjMatrix()
      setAdjMatrixValue()
}
// 重组sku展示口味数据
const filterTasteDataList = (data, groupName) => {
  // console.log(data, 'data')
  let dataList = []
  data.sort((a, b) => b.defaultOpt - a.defaultOpt)

  data.map((item) => {
    dataList.push({
      value: item.defaultOpt == 1 ? item.name + '(推荐)' : item.name,
      // 添加isAble字段  初始化详情 给推荐添加选中状态  当点击口味之后 根据isActive和isAble同时判断是否选中状态，有效展示是否有该sku
      
      isAble: item.defaultOpt == 1 ? true : false,
      isActive: false,
      isDisabled: false,
      flavorId: item.flavorId,
      groupName: groupName
    })
  })
  return dataList
}
// 重组sku列表数据
const fliterSkuDataList = (data) => {
  let skuList = []
  data.map((item) => {
    skuList.push(filterData(data, item.flavorId, 'flavorId'))
  })
  return skuList
}
// 获取口味名称
const filterData = (data, obj, type) => {
  let str = ''
  str = data.filter((item) => item[type] == obj)
  return str[0]?.flavorId
}
// sku相关start
// 当点击某个 attribute 时，如：黑色
const handleClickAttribute = (propertyIndex, attributeIndex) => {
  const attr = properties.value[propertyIndex].attributes[attributeIndex]

  // 若选项置灰，直接返回，表现为点击无响应
  if (attr.isDisabled) {
    return
  }

  // 重置每个 attribute 的 isActive 状态
  const isActive = !attr.isActive
  properties.value[propertyIndex].attributes[attributeIndex].isActive = isActive
  if (isActive) {
    properties.value[propertyIndex].attributes.forEach((attr, index) => {
      if (index !== attributeIndex) {
        attr.isActive = false
        attr.isAble = false
      }
    })
  }

  // 维护当前已选的 attribute 列表
  selected.value = []
  selectedData.value = [];
   selectShowToast.value = []
  // 重置每个 attribute 的 isDisabled 状态
  properties.value.forEach((prop) => {
    prop.attributes.forEach((attr) => {
      attr.isDisabled = !canAttributeSelect(attr)
      if (attr.isActive && !attr.isDisabled) {
        selected.value.push(attr.flavorId)
        selectedData.value.push(attr.value);
        selectShowToast.value.push(attr.groupName);
      } else {
        if (attr.isAble && !attr.isDisabled) {
          selected.value.push(attr.flavorId)
          selectedData.value.push(attr.value);
        selectShowToast.value.push(attr.groupName);
        }
      }
    })
  })
}

// 构造初始空邻接矩阵存储无向图
const initEmptyAdjMatrix = () => {
  properties.value.forEach((prop) => {
    prop.attributes.forEach((attr) => {
      vertexList.value.push(attr.flavorId)
    })
  })
  for (let i = 0; i < vertexList.value.length; i++) {
    matrix.value[i] = new Array(vertexList.value.length).fill(0)
  }
}

// 根据 skuList 和 properties 设置邻接矩阵的值
const setAdjMatrixValue = () => {
  skuList.value.forEach((sku) => {
    // console.log(sku, 'sku')
    associateAttributes(sku.attributes, sku.skuId)
  })
  properties.value.forEach((prop) => {
    associateAttributes(prop.attributes, '1')
  })
}

// 将 attributes 属性组中的属性在无向图中联系起来
const associateAttributes = (attributes, skuId) => {
  // console.log(attributes, skuId)
  attributes.forEach((attr1) => {
    attributes.forEach((attr2) => {
      // 因 properties 与 skuList 数据结构不一致，需作处理
      if (attr1 != attr2 || attr1.flavorId != attr2.flavorId) {
        attr1 = attr1.flavorId ? attr1.flavorId : attr1
        attr2 = attr2.flavorId ? attr2.flavorId : attr2
        const index1 = vertexList.value.indexOf(attr1)
        const index2 = vertexList.value.indexOf(attr2)
        if (index1 > -1 && index2 > -1) {
          if (matrix.value[index1][index2]) {
            matrix.value[index1][index2].add(skuId)
          } else {
            matrix.value[index1][index2] = new Set([skuId])
          }
        }
      }
    })
  })
  // console.log(this.matrix, '=============', this.vertexList)
}

// 判断当前 attribute 是否可选，返回 true 表示可选，返回 false 表示不可选，选项置灰
const canAttributeSelect = (attribute) => {
  if (!selected.value || !selected.value.length || (attribute.isActive && attribute.isDisabled)) {
    return true
  }
  let res = []
  selected.value.forEach((value) => {
    const index1 = vertexList.value.indexOf(value)
    const index2 = vertexList.value.indexOf(attribute.flavorId)
    res.push(matrix.value[index1][index2])
  })
  // console.log(attribute.value, '->', res)
  if (res.some((item) => item === 0)) {
    return false
  } else if (res.some((item) => item.has('1'))) {
    return true
  } else {
    const first = res[0]
    const others = res.slice(1)
    return Array.from(first).some((skuId) => others.every((item) => item.has(skuId)))
  }
}

css

css 复制代码 
.groupName {
  font-size: 1rem;
  color: #333;
}
.flavorVOList {
  font-size: 0.8rem;
  display: flex;
  flex-wrap: wrap;
  color: #333;
  gap: 0.5rem 0.5rem;
}
.flavorVOList > span {
  border: 1px solid #59d1d7;
  padding: 0.5rem;
  border-radius: 0.3rem;
}
.number {
  margin-top: 1rem;
  font-size: 0.8rem;
  display: flex;
  justify-content: space-between;
}
.productActive {
  border: 1px solid #59d1d7;
  color: #fff;
  background-color: #59d1d7;
}
.noneActive {
  background-color: #ccc;
  opacity: 0.4;
  color: #000;
  pointer-events: none;
  border: none;
}

json文件

json 复制代码 
flavorGroupList:[  
    {  
        "groupName": "甜度",  
        "groupNameEn": "",  
        "groupNameEs": "",  
        "groupCode": "tangliang",  
        "channel": "art",  
        "flavorVOList": [  
            {  
                "name": "少糖",  
                "nameEn": "",  
                "nameEs": "",  
                "code": "shaotian",  
                "channel": "art",  
                "flavorId": "1712023027554578434",  
                "plusPrice": "0",  
                "groupId": "1712022943886602241",  
                "defaultOpt": 0  
            },  
            {  
                "name": "少少糖",  
                "nameEn": "",  
                "nameEs": "",  
                "code": "shaoshaotian",  
                "channel": "art",  
                "flavorId": "1712023103626670082",  
                "plusPrice": "0",  
                "groupId": "1712022943886602241",  
                "defaultOpt": 0  
            },  
            {  
                "name": "不另外加糖",  
                "nameEn": "",  
                "nameEs": "",  
                "code": "wutang",  
                "channel": "art",  
                "flavorId": "1712023187860877313",  
                "plusPrice": "0",  
                "groupId": "1712022943886602241",  
                "defaultOpt": 0  
            },  
            {  
                "name": "正常糖",  
                "nameEn": "",  
                "nameEs": "",  
                "code": "zhengchangtian",  
                "channel": "art",  
                "flavorId": "1712023288826163201",  
                "plusPrice": "0",  
                "groupId": "1712022943886602241",  
                "defaultOpt": 1  
            }  
        ]  
    },  
    {  
        "groupName": "状态",  
        "groupNameEn": "",  
        "groupNameEs": "",  
        "groupCode": "zhuangtai",  
        "channel": "art",  
        "flavorVOList": [  
            {  
                "name": "冷饮",  
                "nameEn": "",  
                "nameEs": "",  
                "code": "lengyin",  
                "channel": "art",  
                "flavorId": "1715236592579076097",  
                "plusPrice": "0",  
                "groupId": "1715236402522578945",  
                "defaultOpt": 1  
            },  
            {  
                "name": "热饮",  
                "nameEn": "",  
                "nameEs": "",  
                "code": "reyin",  
                "channel": "art",  
                "flavorId": "1715236635507777538",  
                "plusPrice": "0",  
                "groupId": "1715236402522578945",  
                "defaultOpt": 0  
            }  
        ]  
    },  
    {  
        "groupName": "冰量",  
        "groupNameEn": "",  
        "groupNameEs": "",  
        "groupCode": "bingliang",  
        "channel": "art",  
        "flavorVOList": [  
            {  
                "name": "少少冰",  
                "nameEn": "",  
                "nameEs": "",  
                "code": "shaoshaobing",  
                "channel": "art",  
                "flavorId": "1712024495753916418",  
                "plusPrice": "0",  
                "groupId": "1712024411632955394",  
                "defaultOpt": 0  
            },  
            {  
                "name": "少冰",  
                "nameEn": "",  
                "nameEs": "",  
                "code": "shaobing",  
                "channel": "art",  
                "flavorId": "1712024544542060545",  
                "plusPrice": "0",  
                "groupId": "1712024411632955394",  
                "defaultOpt": 0  
            },  
            {  
                "name": "正常冰",  
                "nameEn": "",  
                "nameEs": "",  
                "code": "zhengchangbing",  
                "channel": "art",  
                "flavorId": "1712024589974761473",  
                "plusPrice": "0",  
                "groupId": "1712024411632955394",  
                "defaultOpt": 1  
            },  
            {  
                "name": "去冰",  
                "nameEn": "",  
                "nameEs": "",  
                "code": "wubing",  
                "channel": "art",  
                "flavorId": "1715239849372246017",  
                "plusPrice": "0",  
                "groupId": "1712024411632955394",  
                "defaultOpt": 0  
            }  
        ]  
    }  
]

skuDataList:[  
    {  
        "skuId": "1725094382904913921",  
        "status": 0,  
        "propertyKeyValues": [  
            {  
                "flavorGroupId": "1712022943886602241",  
                "flavorName": "少糖",  
                "flavorId": "1712023027554578434"  
            },  
            {  
                "flavorGroupId": "1715236402522578945",  
                "flavorName": "冷饮",  
                "flavorId": "1715236592579076097"  
            },  
            {  
                "flavorGroupId": "1712024411632955394",  
                "flavorName": "不另外加冰",  
                "flavorId": "1715239849372246017"  
            }  
        ]  
    },  
    {  
        "skuId": "1725094382904913922",  
        "status": 0,  
        "propertyKeyValues": [  
            {  
                "flavorGroupId": "1712022943886602241",  
                "flavorName": "少少糖",  
                "flavorId": "1712023103626670082"  
            },  
            {  
                "flavorGroupId": "1715236402522578945",  
                "flavorName": "冷饮",  
                "flavorId": "1715236592579076097"  
            },  
            {  
                "flavorGroupId": "1712024411632955394",  
                "flavorName": "不另外加冰",  
                "flavorId": "1715239849372246017"  
            }  
        ]  
    },  
    {  
        "skuId": "1725094382904913923",  
        "status": 0,  
        "propertyKeyValues": [  
            {  
                "flavorGroupId": "1712022943886602241",  
                "flavorName": "不另外加糖",  
                "flavorId": "1712023187860877313"  
            },  
            {  
                "flavorGroupId": "1715236402522578945",  
                "flavorName": "冷饮",  
                "flavorId": "1715236592579076097"  
            },  
            {  
                "flavorGroupId": "1712024411632955394",  
                "flavorName": "不另外加冰",  
                "flavorId": "1715239849372246017"  
            }  
        ]  
    },  
    {  
        "skuId": "1725094382904913924",  
        "status": 0,  
        "propertyKeyValues": [  
            {  
                "flavorGroupId": "1712022943886602241",  
                "flavorName": "正常糖",  
                "flavorId": "1712023288826163201"  
            },  
            {  
                "flavorGroupId": "1715236402522578945",  
                "flavorName": "冷饮",  
                "flavorId": "1715236592579076097"  
            },  
            {  
                "flavorGroupId": "1712024411632955394",  
                "flavorName": "不另外加冰",  
                "flavorId": "1715239849372246017"  
            }  
        ]  
    },  
    {  
        "skuId": "1722532451136311297",  
        "status": 1,  
        "propertyKeyValues": **[  
            {  
                "flavorGroupId": "1712022943886602241",  
                "flavorName": "少糖",  
                "flavorId": "1712023027554578434"  
            },  
            {  
                "flavorGroupId": "1712024411632955394",  
                "flavorName": "少少冰",  
                "flavorId": "1712024495753916418"  
            },  
            {  
                "flavorGroupId": "1715236402522578945",  
                "flavorName": "冷饮",  
                "flavorId": "1715236592579076097"  
            }  
        ]  
    },  
    {  
        "skuId": "1722532451136311298",  
        "status": 1,  
        "propertyKeyValues": [  
            {  
                "flavorGroupId": "1712022943886602241",  
                "flavorName": "少糖",  
                "flavorId": "1712023027554578434"  
            },  
            {  
                "flavorGroupId": "1712024411632955394",  
                "flavorName": "少冰",  
                "flavorId": "1712024544542060545"  
            },  
            {  
                "flavorGroupId": "1715236402522578945",  
                "flavorName": "冷饮",  
                "flavorId": "1715236592579076097"  
            }  
        ]  
    },  
    {  
        "skuId": "1722532451140505601",  
        "status": 1,  
        "propertyKeyValues": [  
            {  
                "flavorGroupId": "1712022943886602241",  
                "flavorName": "少糖",  
                "flavorId": "1712023027554578434"  
            },  
            {  
                "flavorGroupId": "1712024411632955394",  
                "flavorName": "正常冰",  
                "flavorId": "1712024589974761473"  
            },  
            {  
                "flavorGroupId": "1715236402522578945",  
                "flavorName": "冷饮",  
                "flavorId": "1715236592579076097"  
            }  
        ]  
    },  
    {  
        "skuId": "1722532451140505603",  
        "status": 1,  
        "propertyKeyValues": **[  
            {  
                "flavorGroupId": "1712022943886602241",  
                "flavorName": "少少糖",  
                "flavorId": "1712023103626670082"  
            },  
            {  
                "flavorGroupId": "1712024411632955394",  
                "flavorName": "少少冰",  
                "flavorId": "1712024495753916418"  
            },  
            {  
                "flavorGroupId": "1715236402522578945",  
                "flavorName": "冷饮",  
                "flavorId": "1715236592579076097"  
            }  
        ]  
    },  
    {  
        "skuId": "1722532451144699906",  
        "status": 1,  
        "propertyKeyValues": [  
            {  
                "flavorGroupId": "1712022943886602241",  
                "flavorName": "少少糖",  
                "flavorId": "1712023103626670082"  
            },  
            {  
                "flavorGroupId": "1712024411632955394",  
                "flavorName": "少冰",  
                "flavorId": "1712024544542060545"  
            },  
            {  
                "flavorGroupId": "1715236402522578945",  
                "flavorName": "冷饮",  
                "flavorId": "1715236592579076097"  
            }  
        ]  
    },  
    {  
        "skuId": "1722532451144699907",  
        "status": 1,  
        "propertyKeyValues": [  
            {  
                "flavorGroupId": "1712022943886602241",  
                "flavorName": "少少糖",  
                "flavorId": "1712023103626670082"  
            },  
            {  
                "flavorGroupId": "1712024411632955394",  
                "flavorName": "正常冰",  
                "flavorId": "1712024589974761473"  
            },  
            {  
                "flavorGroupId": "1715236402522578945",  
                "flavorName": "冷饮",  
                "flavorId": "1715236592579076097"  
            }  
        ]  
    },  
    {  
        "skuId": "1722532451148894210",  
        "status": 1,  
        "propertyKeyValues": [  
            {  
                "flavorGroupId": "1712022943886602241",  
                "flavorName": "不另外加糖",  
                "flavorId": "1712023187860877313"  
            },  
            {  
                "flavorGroupId": "1712024411632955394",  
                "flavorName": "少少冰",  
                "flavorId": "1712024495753916418"  
            },  
            {  
                "flavorGroupId": "1715236402522578945",  
                "flavorName": "冷饮",  
                "flavorId": "1715236592579076097"  
            }  
        ]  
    },  
    {  
        "skuId": "1722532451148894211",  
        "status": 1,  
        "propertyKeyValues": [  
            {  
                "flavorGroupId": "1712022943886602241",  
                "flavorName": "不另外加糖",  
                "flavorId": "1712023187860877313"  
            },  
            {  
                "flavorGroupId": "1712024411632955394",  
                "flavorName": "少冰",  
                "flavorId": "1712024544542060545"  
            },  
            {  
                "flavorGroupId": "1715236402522578945",  
                "flavorName": "冷饮",  
                "flavorId": "1715236592579076097"  
            }  
        ]  
    },  
    {  
        "skuId": "1722532451148894212",  
        "status": 1,  
        "propertyKeyValues": [  
            {  
                "flavorGroupId": "1712022943886602241",  
                "flavorName": "不另外加糖",  
                "flavorId": "1712023187860877313"  
            },  
            {  
                "flavorGroupId": "1712024411632955394",  
                "flavorName": "正常冰",  
                "flavorId": "1712024589974761473"  
            },  
            {  
                "flavorGroupId": "1715236402522578945",  
                "flavorName": "冷饮",  
                "flavorId": "1715236592579076097"  
            }  
        ]  
    },  
    {  
        "skuId": "1722532451153088513",  
        "status": 1,  
        "propertyKeyValues": [  
            {  
                "flavorGroupId": "1712022943886602241",  
                "flavorName": "正常糖",  
                "flavorId": "1712023288826163201"  
            },  
            {  
                "flavorGroupId": "1712024411632955394",  
                "flavorName": "少少冰",  
                "flavorId": "1712024495753916418"  
            },  
            {  
                "flavorGroupId": "1715236402522578945",  
                "flavorName": "冷饮",  
                "flavorId": "1715236592579076097"  
            }  
        ]  
    },  
    {  
        "skuId": "1722532451153088514",  
        "status": 1,  
        "propertyKeyValues": [  
            {  
                "flavorGroupId": "1712022943886602241",  
                "flavorName": "正常糖",  
                "flavorId": "1712023288826163201"  
            },  
            {  
                "flavorGroupId": "1712024411632955394",  
                "flavorName": "少冰",  
                "flavorId": "1712024544542060545"  
            },  
            {  
                "flavorGroupId": "1715236402522578945",  
                "flavorName": "冷饮",  
                "flavorId": "1715236592579076097"  
            }  
        ]  
    },  
    {  
        "skuId": "1722532451153088515",  
        "status": 1,  
        "propertyKeyValues": [  
            {  
                "flavorGroupId": "1712022943886602241",  
                "flavorName": "正常糖",  
                "flavorId": "1712023288826163201"  
            },  
            {  
                "flavorGroupId": "1712024411632955394",  
                "flavorName": "正常冰",  
                "flavorId": "1712024589974761473"  
            },  
            {  
                "flavorGroupId": "1715236402522578945",  
                "flavorName": "冷饮",  
                "flavorId": "1715236592579076097"  
            }  
        ]  
    },  
    {  
        "skuId": "1725094382904913925",  
        "status": 1,  
        "propertyKeyValues": [  
            {  
                "flavorGroupId": "1712022943886602241",  
                "flavorName": "少糖",  
                "flavorId": "1712023027554578434"  
            },  
            {  
                "flavorGroupId": "1715236402522578945",  
                "flavorName": "热饮",  
                "flavorId": "1715236635507777538"  
            },  
            {  
                "flavorGroupId": "1712024411632955394",  
                "flavorName": "不另外加冰",  
                "flavorId": "1715239849372246017"  
            }  
        ]  
    },  
    {  
        "skuId": "1725094382909108225",  
        "status": 1,  
        "propertyKeyValues": [  
            {  
                "flavorGroupId": "1712022943886602241",  
                "flavorName": "少少糖",  
                "flavorId": "1712023103626670082"  
            },  
            {  
                "flavorGroupId": "1715236402522578945",  
                "flavorName": "热饮",  
                "flavorId": "1715236635507777538"  
            },  
            {  
                "flavorGroupId": "1712024411632955394",  
                "flavorName": "不另外加冰",  
                "flavorId": "1715239849372246017"  
            }  
        ]  
    },  
    {  
        "skuId": "1725094382909108226",  
        "status": 1,  
        "propertyKeyValues": **[  
            {  
                "flavorGroupId": "1712022943886602241",  
                "flavorName": "不另外加糖",  
                "flavorId": "1712023187860877313"  
            },  
            {  
                "flavorGroupId": "1715236402522578945",  
                "flavorName": "热饮",  
                "flavorId": "1715236635507777538"  
            },  
            {  
                "flavorGroupId": "1712024411632955394",  
                "flavorName": "不另外加冰",  
                "flavorId": "1715239849372246017"  
            }  
        ]  
    },  
    {  
        "skuId": "1725094382909108227",  
        "status": 1,  
        "propertyKeyValues": [  
            {  
                "flavorGroupId": "1712022943886602241",  
                "flavorName": "正常糖",  
                "flavorId": "1712023288826163201"  
            },  
            {  
                "flavorGroupId": "1715236402522578945",  
                "flavorName": "热饮",  
                "flavorId": "1715236635507777538"  
            },  
            {  
                "flavorGroupId": "1712024411632955394",  
                "flavorName": "不另外加冰",  
                "flavorId": "1715239849372246017"  
            }  
        ]  
    },  
    {  
        "skuId": "1722532451157282818",  
        "status": 3,  
        "propertyKeyValues": [  
            {  
                "flavorGroupId": "1712022943886602241",  
                "flavorName": "少糖",  
                "flavorId": "1712023027554578434"  
            },  
            {  
                "flavorGroupId": "1712024411632955394",  
                "flavorName": "少少冰",  
                "flavorId": "1712024495753916418"  
            },  
            {  
                "flavorGroupId": "1715236402522578945",  
                "flavorName": "热饮",  
                "flavorId": "1715236635507777538"  
            }  
        ]  
    },  
    {  
        "skuId": "1722532451157282819",  
        "status": 3,  
        "propertyKeyValues": [  
            {  
                "flavorGroupId": "1712022943886602241",  
                "flavorName": "少糖",  
                "flavorId": "1712023027554578434"  
            },  
            {  
                "flavorGroupId": "1712024411632955394",  
                "flavorName": "少冰",  
                "flavorId": "1712024544542060545"  
            },  
            {  
                "flavorGroupId": "1715236402522578945",  
                "flavorName": "热饮",  
                "flavorId": "1715236635507777538"  
            }  
        ]  
    },  
    {  
        "skuId": "1722532451157282820",  
        "status": 3,  
        "propertyKeyValues": [  
            {  
                "flavorGroupId": "1712022943886602241",  
                "flavorName": "少糖",  
                "flavorId": "1712023027554578434"  
            },  
            {  
                "flavorGroupId": "1712024411632955394",  
                "flavorName": "正常冰",  
                "flavorId": "1712024589974761473"  
            },  
            {  
                "flavorGroupId": "1715236402522578945",  
                "flavorName": "热饮",  
                "flavorId": "1715236635507777538"  
            }  
        ]  
    },  
    {  
        "skuId": "1722532451161477122",  
        "status": 3,  
        "propertyKeyValues": [  
            {  
                "flavorGroupId": "1712022943886602241",  
                "flavorName": "少少糖",  
                "flavorId": "1712023103626670082"  
            },  
            {  
                "flavorGroupId": "1712024411632955394",  
                "flavorName": "少少冰",  
                "flavorId": "1712024495753916418"  
            },  
            {  
                "flavorGroupId": "1715236402522578945",  
                "flavorName": "热饮",  
                "flavorId": "1715236635507777538"  
            }  
        ]  
    },  
    {  
        "skuId": "1722532451161477123",  
        "status": 3,  
        "propertyKeyValues": [  
            {  
                "flavorGroupId": "1712022943886602241",  
                "flavorName": "少少糖",  
                "flavorId": "1712023103626670082"  
            },  
            {  
                "flavorGroupId": "1712024411632955394",  
                "flavorName": "少冰",  
                "flavorId": "1712024544542060545"  
            },  
            {  
                "flavorGroupId": "1715236402522578945",  
                "flavorName": "热饮",  
                "flavorId": "1715236635507777538"  
            }  
        ]  
    },  
    {  
        "skuId": "1722532451161477124",  
        "status": 3,  
        "propertyKeyValues": [  
            {  
                "flavorGroupId": "1712022943886602241",  
                "flavorName": "少少糖",  
                "flavorId": "1712023103626670082"  
            },  
            {  
                "flavorGroupId": "1712024411632955394",  
                "flavorName": "正常冰",  
                "flavorId": "1712024589974761473"  
            },  
            {  
                "flavorGroupId": "1715236402522578945",  
                "flavorName": "热饮",  
                "flavorId": "1715236635507777538"  
            }  
        ]  
    },  
    {  
        "skuId": "1722532451161477126",  
        "status": 3,  
        "propertyKeyValues": [  
            {  
                "flavorGroupId": "1712022943886602241",  
                "flavorName": "不另外加糖",  
                "flavorId": "1712023187860877313"  
            },  
            {  
                "flavorGroupId": "1712024411632955394",  
                "flavorName": "少少冰",  
                "flavorId": "1712024495753916418"  
            },  
            {  
                "flavorGroupId": "1715236402522578945",  
                "flavorName": "热饮",  
                "flavorId": "1715236635507777538"  
            }  
        ]  
    },  
    {  
        "skuId": "1722532451165671425",  
        "status": 3,  
        "propertyKeyValues": [  
            {  
                "flavorGroupId": "1712022943886602241",  
                "flavorName": "不另外加糖",  
                "flavorId": "1712023187860877313"  
            },  
            {  
                "flavorGroupId": "1712024411632955394",  
                "flavorName": "少冰",  
                "flavorId": "1712024544542060545"  
            },  
            {  
                "flavorGroupId": "1715236402522578945",  
                "flavorName": "热饮",  
                "flavorId": "1715236635507777538"  
            }  
        ]  
    },  
    {  
        "skuId": "1722532451165671426",  
        "status": 3,  
        "propertyKeyValues": [  
            {  
                "flavorGroupId": "1712022943886602241",  
                "flavorName": "不另外加糖",  
                "flavorId": "1712023187860877313"  
            },  
            {  
                "flavorGroupId": "1712024411632955394",  
                "flavorName": "正常冰",  
                "flavorId": "1712024589974761473"  
            },  
            {  
                "flavorGroupId": "1715236402522578945",  
                "flavorName": "热饮",  
                "flavorId": "1715236635507777538"  
            }  
        ]  
    },  
    {  
        "skuId": "1722532451165671428",  
        "status": 3,  
        "propertyKeyValues": [  
            {  
                "flavorGroupId": "1712022943886602241",  
                "flavorName": "正常糖",  
                "flavorId": "1712023288826163201"  
            },  
            {  
                "flavorGroupId": "1712024411632955394",  
                "flavorName": "少少冰",  
                "flavorId": "1712024495753916418"  
            },  
            {  
                "flavorGroupId": "1715236402522578945",  
                "flavorName": "热饮",  
                "flavorId": "1715236635507777538"  
            }  
        ]  
    },  
    {  
        "skuId": "1722532451165671429",  
        "status": 3,  
        "propertyKeyValues": [  
            {  
                "flavorGroupId": "1712022943886602241",  
                "flavorName": "正常糖",  
                "flavorId": "1712023288826163201"  
            },  
            {  
                "flavorGroupId": "1712024411632955394",  
                "flavorName": "少冰",  
                "flavorId": "1712024544542060545"  
            },  
            {  
                "flavorGroupId": "1715236402522578945",  
                "flavorName": "热饮",  
                "flavorId": "1715236635507777538"  
            }  
        ]  
    },  
    {  
        "skuId": "1722532451169865729",  
        "status": 3,  
        "propertyKeyValues": [  
            {  
                "flavorGroupId": "1712022943886602241",  
                "flavorName": "正常糖",  
                "flavorId": "1712023288826163201"  
            },  
            {  
                "flavorGroupId": "1712024411632955394",  
                "flavorName": "正常冰",  
                "flavorId": "1712024589974761473"  
            },  
            {  
                "flavorGroupId": "1715236402522578945",  
                "flavorName": "热饮",  
                "flavorId": "1715236635507777538"  
            }  
        ]  
    }  
]

以上是相关SKU的所有代码，不出意外，直接复制到项目里即可使用

需要注意的

1.每个sku是否有库存和后端返回某个字段相关，以上代码示例SKU是否有库存或者是否可以售卖是根据json文件里skudatalist里的status决定的,status为1是有库存可售卖，status为0||3在此可以忽略

2.initEmptyAdjMatrix该函数(构造初始空邻接矩阵存储无向图),以flavorId构建,确保每个规格的唯一性

拓展

selectedData 选中的规格，用来展示选中的规格名称 showToast 、selectShowToast用来准确判断哪个没有选择

例如:

javascript 复制代码 
addCart: function () {
      //key的构成由商品deviceGoodsId，和所选属性构成
      if (selected.value.length < flavorGroupList.length) {
        let noChoseStatus = getSame(showToast.value, selectShowToast.value).toString()
        console.log(this.getSame(this.showToast, this.selectShowToast))
        uni.showToast({
          title: `请选择${noChoseStatus}`,
          icon: "none",
        });
        return;
      }
    }
    
    // 取两个数组中不一样的值
    getSame: function (arr1, arr2) {
      return [...new Set(arr1)].filter((item) => !arr2.includes(item));
    },
相关推荐
余生H11 分钟前
前端Python应用指南（二）深入Flask：理解Flask的应用结构与模块化设计
前端·后端·python·flask·全栈
outstanding木槿15 分钟前
JS中for循环里的ajax请求不数据
前端·javascript·react.js·ajax
酥饼~22 分钟前
html固定头和第一列简单例子
前端·javascript·html
一只不会编程的猫26 分钟前
高德地图自定义折线矢量图形
前端·vue.js·vue
m0_7482509328 分钟前
html 通用错误页面
前端·html
来吧~37 分钟前
vue3使用video-player实现视频播放(可拖动视频窗口、调整大小)
前端·vue.js·音视频
鎈卟誃筅甡1 小时前
Vuex 的使用和原理详解
前端·javascript
呆呆小雅1 小时前
二、创建第一个VUE项目
前端·javascript·vue.js
m0_748239331 小时前
前端(Ajax)
前端·javascript·ajax
Fighting_p1 小时前
【记录】列表自动滚动轮播功能实现
前端·javascript·vue.js
热门推荐
01大模型国产化适配7-华为昇腾LLM落地可选解决方案（MindFormers、ModelLink、MindIE）02Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO03玄机平台应急响应—webshell查杀04电赛2024年H题智能小车基于MSPM0G3507主控MCU（利用8路灰度加上MPU6050的解决方式）具体项目报告05组基轨迹建模 GBTM的介绍与实现（Stata 或 R）06支付宝短视频平台创作分成激励项目07怎么找小红书美食探店博主合作？08【一文读懂】NTN（非地面网络）技术介绍09优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间10STM32 无法烧录