1.實現效果：
點選將屬性轉為紅色，無庫存的商品置灰，可點選的背景為白色；且點中的屬性點選之後會恢復白色；
-
重要思路：
假如： 顏色:黑色，大紅色，米白色，軍綠色
尺寸：XL，L，M
純度： 90% 60% 70%
第一種情況：如果是直接所有的屬性都點選選完了，那麼我們可以直接組合成 黑色-M-70% 的欄位直接去匹配具體的商品。
第二種情況：在屬性不完全的時候，該怎麼判斷屬性是否可被選中？？？
（1）宣告一個匹配陣列PK用來儲存選中的屬性[]，例如pk=[顏色：黑色，尺寸：無，純度：無]，---顏色為屬性，黑色為屬性值。
現在開始遍歷所有的屬性，來顯示其對應的狀態：
-----只選中一個屬性--黑色-----------
黑色（屬性：顏色）：取出含黑色的商品組，商品組有值---->和pk中屬性不同的值匹配（沒有匹配的，黑色可選）；
xl（屬性：尺寸）：取出含有xl的商品組k1---->和pk中屬性不同的值匹配（匹配黑色，檢測k1中含黑色的商品組成新的商品組k2，如果k2無值不可選，k2有值可選）；
---選中了兩個屬性----黑色 M----
大紅色：取出含有大紅色商品組k1---->和pk中屬性不同的值匹配（匹配M--在k1中找出含有M的商品組成新陣列k2，如果k2有值，可選，k2無值不可選）；
90%：取出含有90%的商品組k1---->和pk中屬性不同的值匹配（匹配黑色在k1中找出含有黑色的商品形成新陣列k2，如果k2無值不可選，k2有值，繼續在k2中找出含有M的商品形成新陣列k3，如果k3中有值可選，沒值不可選）；
複製程式碼3.簡要程式碼 主要技術框架：Vue
（1）應用於顯示在頁面上的陣列：
value:將存放頁面中對應選擇的值；show=0:初始狀態，可選；show=1：選中狀態；show=2:不可選狀態；
` this.allattr=[
{
"name": "顏色",
"value": null,
"son": [
{
"paramvalue": "黑色",
"show": 0
},
{
"paramvalue": "大紅色",
"show": 0
},
{
"paramvalue": "米白色",
"show": 0
},
{
"paramvalue": "軍綠色",
"show": 0
}
]
},
{
"name": "尺寸",
"value": null,
"son": [
{
"paramvalue": "XL",
"show": 0
},
{
"paramvalue": "L",
"show": 0
},
{
"paramvalue": "M",
"show": 0
}
]
},
{
"name": "毛料純度",
"value": null,
"son": [
{
"paramvalue": "90％純度",
"show": 0
},
{
"paramvalue": "60%純度",
"show": 0
},
{
"paramvalue": "70%純度",
"show": 0
}
]
}
]`
複製程式碼商品集合：
this.shopattr= [
{
"pdid": 1625,
"productAttrList": [
{
"attribute": "顏色",
"value": "米白色",
},
{
"attribute": "尺寸",
"value": "L",
},
{
"attribute": "毛料純度",
"value": "90％純度",
}
],
"attrStr": "顏色: 米白色;尺寸: L;毛料純度: 90％純度;"
},
{
"pdid": 1625,
"productAttrList": [
{
"attribute": "顏色",
"value": "黑色",
},
{
"attribute": "尺寸",
"value": "M",
},
{
"attribute": "毛料純度",
"value": "70%純度",
}
],
"attrStr": "顏色: 黑色;尺寸: M;毛料純度: 70%純度;"
},
{
"pdid": 1625,
"productAttrList": [
{
"attribute": "顏色",
"value": "大紅色",
},
{
"attribute": "尺寸",
"value": "XL",
},
{
"attribute": "毛料純度",
"value": "70%純度",
}
],
"attrStr": "顏色: 大紅色;尺寸: XL;毛料純度: 70%純度;"
}
],
複製程式碼3.html程式碼：
<li v-for="(items,index) in allattr" :key="index">
<span>{{items.name}}</span>
<div>
<ul class="attrUI">
<li v-for="(item,sonIndex) in items.son" :key="sonIndex" @click="clickattr(item.paramvalue,index,sonIndex)"
v-bind:class='item.show === 1 ? "checkedLi": item.show === 2 ? "disableLi":"normalLi"'>{{item.paramvalue}}</li>
</ul>
</div>
</li>
複製程式碼4.點選事件程式碼：
// 點選某一個屬性
clickattr: function (attrvalue,index,i) {
//0 初始狀態 1選中狀態 2 不可點選狀態
let item = "";
item = this.allattr;
// //樣式的改變+加放入值
if ((item[index].son)[i].show !== 2) {
if ((item[index].son)[i].show === 1) {
item[index].value = null;
(item[index].son)[i].show = 0;
} else {
item[index].value = attrvalue;
for (let gg = 0; gg < item[index].son.length; gg++) {
if ((item[index].son)[gg].paramvalue === attrvalue) {
(item[index].son)[gg].show = 1;
} else {
(item[index].son)[gg].show = 0;
}
}
}
//一一遍歷。取出每一個屬性，獲取含有具體屬性的陣列
for (let a = 0; a < item.length; a++) {
let matchattr = "";
for (let b = 0; b < item[a].son.length; b++) {
if ((item[a].son)[b].show != 1) {
//取出了值，然後進行遍歷
let matchGroup = [];//完成的商品列表陣列
let sonGroup = [];//含有具體屬性的陣列
matchGroup = this.shopattr;
matchattr = item[a].name + ":" + (item[a].son)[b].paramvalue + ";";
//得到含有該屬性的商品集合
for (let k = 0; k < matchGroup.length; k++) {
if (matchGroup[k].attrStr.indexOf(matchattr) != -1) {
sonGroup.push(matchGroup[k])
}
}
//遍歷是否該商品集合中，含有點選事件的集合，有則該屬性可選；
let judgeShow = "", start = 0;//judgeShow 通過該值來控制屬性的狀態； start；是否等於item的長度來判斷是都遍歷完成
judgeShow = sonGroup;
for (let c = 0; c < item.length; c++) {
let sonmatch = "";
if (item[c].value == null) {
sonmatch = item[c].name + ":";
} else {
sonmatch = item[c].name + ":" + item[c].value + ";";
}
judgeShow = this.checkStr(judgeShow, sonmatch, item[c].name, item[a].name);//判斷字串是否可選的遞迴方法
if (judgeShow == false) {
(item[a].son)[b].show = 2;
break;
}else{
start++;
}
}
//遍歷完成，則該屬性可選
if (start == item.length) {
(item[a].son)[b].show = 0;
}
}
}
}
this.allattr = item;
}
//放置點選的屬性以後。判斷一下是否三個屬性全部選擇完成
let clicknum = 0;
for (let h = 0; h < item.length; h++) {
if (item[h].value != null) {
clicknum++;
}
}
if (clicknum == item.length) {
let son = "";
for (var i = 0; i < item.length; i++) {
son = son + item[i].name + ":" + item[i].value + ";";
}
// 用得到的son 去查詢總的商品列表獲取商品的資訊
for (var j = 0; j < this.shopattr.length; j++) {
if (son === this.shopattr[j].attrStr) {
this.pdid = this.shopattr[j].pdid;
break;
}
}
}else{
this.pdid = "";
}
},
// //檢視該屬性是否匹配成功
// 用於迴圈屬性是否成功
checkStr:function(sonGroup,sonmatch,matchname,getname){
if(matchname==getname){
return sonGroup;//如果遍歷的屬性，和所遍歷物件同一個父屬性：例如顏色；則預設遞迴返回
}else{
//遍歷是否該商品集合中，含有點選事件的集合，有則該屬性可選；
let myGroup=[],haveGroup=[];
myGroup=sonGroup;
let num=0;
for(let w=0;w<myGroup.length;w++){
if(myGroup[w].attrStr.indexOf(sonmatch)!=-1 ){
haveGroup.push(myGroup[w]);
}else{
num++;
}
}
if(num==myGroup.length){
return false;
}else{
return haveGroup;
}
}
},
複製程式碼