这段时间在写商城和商家后台管理系统。 对SKU有点点模糊，现总结如下：
<div> <div v-for="(v, i) in list" :key="i" class="mt-20"> <b>{{ v.name }}：</b> <el-checkbox-group v-model="checkList[i].list"> <el-checkbox v-for="(k, j) in v.list" :key="j" :label="k" /> </el-checkbox-group> </div> <div class="mt-20"> <el-button type="danger" @click="handleClick" plain>确定</el-button> </div> <div class="mt-20"> <el-tag v-for="(item, index) in skuList" :key="index" style="margin:10px 10px;">{{ item }}</el-tag> </div> </div>
export default { data() { return { list: [ { name: "型号", list: ["I9", "I7", "I5", "I3", "IAM"] }, { name: "品牌", list: ["惠普", "三星", "华硕", "戴尔", "MacPro"] }, { name: "配置", list: ["500GBSSD", "1TSSD", "2TSSD", "250GBSSD", "可定制"] }, ], checkList: [ { name: "型号", list: [] }, { name: "品牌", list: [] }, { name: "配置", list: [] }, ], skuArray: [], skuList: [], }; }, methods: { handleClick() { // 先清空数据， this.skuArray = []; this.skuList = []; // 将选中的规格组合成一个大数组 [[1, 2], [a, b]...] this.checkList.forEach((element) => { element.list.length > 0 ? this.skuArray.push(element.list) : ""; }); // 勾选了规格，才调用方法 if (this.skuArray.length > 0) { this.getSkuData([], 0, this.skuArray); } else { this.$message.error("请先勾选规格"); } }, // 递归获取每条SKU数据 getSkuData(skuArr = [], i, list) { for (let j = 0; j < list[i].length; j++) { if (i < list.length - 1) { skuArr[i] = list[i][j]; this.getSkuData(skuArr, i + 1, list); / } else { this.skuList.push([...skuArr, list[i][j]]); } } }, }, };
let res = [
{
content: "1000ma,2000ma,3000ma"
createPerson: null
createTime: "2020-07-27 22:25:45"
deleteFlag: 1
goodsId: 405
id: 523
projectId: 67
projectName: "电池含量"
updatePerson: null
updateTime: "2020-07-27 22:25:45"
} ,
{
content: "珍珠白,玫瑰金,耀黑色,美丽蓝"
createPerson: null
createTime: "2020-07-27 22:25:45"
deleteFlag: 1
goodsId: 405
id: 522
projectId: 66
projectName: "颜色"
updatePerson: null
updateTime: "2020-07-27 22:25:45"
}
]
<div v-for="(item, index) in Guige" :key="index">
<span style="min-45px">{{item.projectName}}</span>
<p
v-for="(item1, index1) in item.content"
:class="[item1.isShow?'':'noneActive',subIndex[index] == index1?'productActive':'']"
:key="index1"
@click="handleActive(item, index, item1.name, index1)"
>{{item1.name}}</p>
</div>
// 选择商品规格
handleActive(item, index, name, index1) {
let self = this;
let newObj = {
projectName: item.projectName,
name: name,
};
if (self.selectArr[index] != Object.is(newObj)) {
self.selectArr[index] = newObj;
self.subIndex[index] = index1;
} else {
self.selectArr[index] = "";
self.subIndex[index] = -1; //去掉选中的颜色
}
this.selectArrIndex = index1;
self.checkItem();
},
checkItem() {
var self = this;
var option = self.Guige;
var result = []; //定义数组储存被选中的值
if (self.selectArr.length == option.length) {
this.getSku();
})
self.$forceUpdate(); //重绘
},
async getSku() {
let str = "";
let arr = [];
for (let item of this.selectArr) {
arr.push(item.projectName + ":" + item.name);
}
str = arr.join(",");
this.specifications = str;
try {
let data = {
goodsId: this.goodsInfo.id,
specifications: str,
};
let res = await httpGet("/pc/goods/getSku", data);
if (res.code == 0) {
if (res.data != null) {
this.goodsPrice = res.data.goodsPrice;
this.shopItemInfo = res.data;
this.maxGoods = res.data.num;
} else {
this.specifications = "";
this.$message({
message: "库存不足,请重新选择",
type: "error",
});
}
}
} catch (err) {
console.log(err);
}
},
async getSelectAttribute() {
try {
let data = {
id: this.$route.query.id,
};
let res = await httpGet("/pc/goods/getSelectAttribute", data);
let arr = [];
if (res.code === 0 && res.data) {
for (let item of res.data) {
let content = item.content ? item.content.split(",") : "";
let arr1 = [];
for (let item1 of content) {
arr1.push({
name: item1,
isShow: true,
});
}
arr.push({
content: arr1,
goodsId: item.goodsId,
id: item.id,
projectId: item.projectId,
projectName: item.projectName,
});
}
this.Guige = arr;
}
} catch (err) {}
},