概念及需求
- 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));
},