在处理某部分逻辑代码时，需要做到的一个操作是，产品的配置项是后台接口数据动态产生的，以及对应的配置项的配置信息是一个对象数组，且该对象的长度不一，简而言之就比如：一个手机产品，有颜色和内存这几项配置，而对应的64G内存和128G内存的价格以及库存是不一致的，因此需要进行判断，又比如：一个电脑，可能有内存，显卡，显示屏等等配置项，等等需要动态的去做判断。
后台的数据返回是在对应的一个详细配置中加上了attr_开头的，然后0,1,2,3...等等代表的对应的配置项的配置信息。
配置项的对象数组.png
1、分析后台接口数据格式
根据返回的数据，我们可以通过在点击切换配置的事件中去获取用户点击的配置项存储为一个数组，然后在这个大的对象数组中进行循环遍历，将每个对象使用...拓展运算符将子项都获取出来，然后只需要判断用户点击的配置信息数组是否为该数组的子集即可。
2、获取用户点击的配置信息数组
<view class="setting-item" v-for="(item,index) in detail.checkAttr" :key="index">
<view class="setting-item-header">
{{item.attrname}}
</view>
<view class="setting-item-cate">
<view class="setting-item-cate-phone" :class="{active:isActive[index]==itemIndex}" v-for="(el,itemIndex) in item.value"
@click="handleChange(index,itemIndex)" :key="itemIndex">
{{el}}
</view>
</view>
</view>
<view class="setting-item">
<view class="setting-item-header">
数量
</view>
<view class="setting-item-num">
<view class="minus" @click="handleMinus">
-
</view>
<view class="setting-item-count">
{{this.shopCount}}
</view>
<view class="plus" @click="handleAdd">
+
</view>
</view>
<view class="setting-item-storage">
<text>(库存: {{this.stock-this.shopCount}})</text>
</view>
</view>
data() {
return {
shopCount: 1, //选中商品的数量
isActive: [], //激活状态样式
price: 0, //价格
strAttr: '',
stock:0,
}
},
mounted() {
for (var i = 0; i < this.detail.checkAttr.length; i++) {
this.isActive.push(0);
}
this.handleChange(0, 0);
this.price = this.detail.price;
console.log(this.isActive);
},
3、根据下标索引找出对应的信息
handleInfo() {
// 根据下标索引将信息找出来
const checkAttr = this.detail.checkAttr;
var list = [];
for (var i = 0; i < checkAttr.length; i++) {
for (var j = 0; j < checkAttr[i].value.length; j++) {
if (this.isActive[i] === j) {
list.push(checkAttr[i].value[j]);
break;
}
}
}
return list;
}
handleChange(index, itemIndex) {
// 数组是引用类型，不可以直接赋值，这样只是修改了它的引用地址。
this.isActive.splice(index, 1, itemIndex);
var infoList = this.handleInfo();
this.strAttr = infoList.toString();
const attr = this.detail.attr;
var temp = [];
for (var i = 0; i < attr.length; i++) {
var data = Object.values({ ...attr[i]});
if (this.isEquals(data.filter(item => infoList.includes(item)), infoList)) {
this.price = { ...attr[i]}.price;
this.stock = { ...attr[i]}.stock;
return
}
}
},
4、判断用户点击获取的配置信息数组是否为配置信息的对象数组的子集
data.filter(item => infoList.includes(item))先获取两个数组的交集，因为这两个数组的交集就会与另外一个数组内容相等，这样只需要判断交集的新数组与另一个子集的数组元素是否一致即可，使用every遍历每个元素看是否与另一个数组对应的下标元素相等，这里不能直接使用==去做判断，那样得出的结果肯定是false，因为数组是引用类型，存储在堆内存中，==判断会简单的去判断引用地址。
isEquals(array1, array2) {
return array1.length == array2.length && array1.every(function(v, i) {
return v === array2[i]
});
},
这样，切换不同的配置信息，也就达到了不同显示不同的价格以及库存的目的。
数据更新的效果.gif
