<div id="propGroup">
<dl class="fgz-dl">
<dt>顏色</dt>
<dd propvalsysno="467011239080366080" propsysno="467011239034228736" class="cur">黑色</dd>
</dl>
<dl class="fgz-dl">
<dt>故障現象</dt>
<dd propvalsysno="467011245476679680" propsysno="467011239248138240" class="dis">信號其他問題</dd>
<dd propvalsysno="467011243043983360" propsysno="467011239248138240" class="">WiFi故障</dd>
<dd propvalsysno="467011240237993984" propsysno="467011239248138240" class="">手機信號正常無法通話</dd>
<dd propvalsysno="467011243908009984" propsysno="467011239248138240" class="">GPS定位故障</dd>
<dd propvalsysno="467011241148157952" propsysno="467011239248138240" class="">手機無信號</dd>
<dd propvalsysno="467011244646207488" propsysno="467011239248138240" class="">SIM卡故障</dd>
<dd propvalsysno="467011239290081280" propsysno="467011239248138240" class="">手機信號差|通話中斷</dd>
<dd propvalsysno="467011242259648512" propsysno="467011239248138240" class="">藍牙故障</dd>
</dl>
<dl class="fgz-dl">
<dt>維修方式</dt>
<dd propvalsysno="467011239512379392" propsysno="467011239449464832" class="cur">維修底板</dd>
<dd propvalsysno="467011245682200576" propsysno="467011239449464832" class="dis">工程師現場檢修</dd>
</dl>
</div>
<script>
//sku規格集合，用於篩選屬性值是否可以選擇
var skuListJson=[
{
"ProductCategorySysNo": "470730199105802240",
"MalfunctionsSysNo": "467011046851219456",
"PropertyValueSysNos": null,
"SysNo": "470730649980899328",
"SkuCode": "46546546",
"Price": 123.0
}, {
"ProductCategorySysNo": "470730012601880576",
"MalfunctionsSysNo": "467011046851219456",
"PropertyValueSysNos": null,
"SysNo": "470730649980899328",
"SkuCode": "46546546",
"Price": 123.0
}, {
"ProductCategorySysNo": "467023168750489600",
"MalfunctionsSysNo": "467011100731248640",
"PropertyValueSysNos": "467023244663197696,467023245044879360,467023246647103488",
"SysNo": "467023246114426880",
"Price": 2500.0
}
];
//屬性值
var propertyValueListJson=[
{
"SysNo": "467017491994906624",
"SPUPropertySysNo": "467017491931992064",
"PropertyName": "顏色",
"PropertyValue": "黑色",
"ProductCategorySysNo": "467017491424481280",
"MalfunctionsSysNo": "467011046851219456"
}, {
"SysNo": "467012531827773440",
"SPUPropertySysNo": "467012529231499264",
"PropertyName": "故障現象",
"PropertyValue": "充電過慢",
"ProductCategorySysNo": "467012528451358720",
"MalfunctionsSysNo": "467011046851219456"
}, {
"SysNo": "467017213069496320",
"SPUPropertySysNo": "467017210389336064",
"PropertyName": "故障現象",
"PropertyValue": "充電過慢",
"ProductCategorySysNo": "467017209697275904",
"MalfunctionsSysNo": "467011046851219456"
}, {
"SysNo": "467020528532590592",
"SPUPropertySysNo": "467020528440315904",
"PropertyName": "維修方式",
"PropertyValue": "更換Pisen電池 1年保養",
"ProductCategorySysNo": "467020527198801920",
"MalfunctionsSysNo": "467011046851219456"
}
];
</script>
//選中效果一：
//被禁用的按鈕不可點擊，當選中的屬性值被手動解除選中后，才有可能恢復可點擊事件
//選中屬性值觸發事件，thisObj是點擊的當前屬性值dom對象
//此方法用於選中屬性值后，立馬根據選中屬性值篩選出的sku，
//然後禁用sku集合中不存在的其他屬性值按鈕，設置禁用css樣式，且不可點擊
function selectPropVal(thisObj) {
//故障id
var malfunctionId = $($("dd[class='cur']")[0]).attr('gzid');
//此故障下的sku集合
var skuListCurrent = skuListJson.filter(w => w.ProductCategorySysNo == typeId && w.MalfunctionsSysNo == malfunctionId);
console.log("故障下sku集合：開始----");
console.log(skuListCurrent);
console.log("故障下sku集合 結束----");
//點擊的屬性值選中效果
var isHave = $(thisObj).hasClass("cur");
if (isHave) {
$(thisObj).removeClass("cur");
} else {
$(thisObj).addClass("cur");
}
//先全部解除綁定事件
$("#propGroup dd").unbind("click");
//點擊事件恢復
$("#propGroup dd").bind("click", function () {
pageObj.selectPropVal(this);
});
//屬性名稱主鍵
var prpsysno = $(thisObj).attr("propsysno");
//選中的屬性值主鍵
var selectedProValSysNo = $(thisObj).attr("propvalsysno");
console.log("选中的值" + selectedProValSysNo);
//自己同組的屬性值，去掉禁用效果
var thisGroupProValaArr = $("#propGroup dd[propsysno='" + prpsysno + "']");
for (var q = 0; q < thisGroupProValaArr.length; q++) {
var gpItem = thisGroupProValaArr[q];
var thisProValSysNo = $(gpItem).attr("propvalsysno");
if (thisProValSysNo != selectedProValSysNo) {
$(gpItem).removeClass("cur").removeClass("cur");
}
}
//所有选中的屬性值集合
var selectedProValArr = $("#propGroup dd.cur");
for (var i = 0; i < selectedProValArr.length; i++) {
var item = selectedProValArr[i];
var propSysNo = $(item).attr("propvalsysno");
console.log("當前選中的屬性值：" + propSysNo);
//根據選中值id找出sku
skuListCurrent = skuListCurrent.filter(w => w.PropertyValueSysNos.indexOf(propSysNo) > -1);
}
console.log("選中值后的sku");
console.log(skuListCurrent);
//禁用不可選的屬性值
//開始檢查
//找出沒有選中的屬性值
$("#propGroup dd:not(.cur)").each(function (index, element) {
var thisValSysNo = $(element).attr("propvalsysno");
//如果沒有包含在sku組裡面，則禁用選中
var ckProValList = skuListCurrent.filter(w => w.PropertyValueSysNos.indexOf(thisValSysNo) > -1);
if (ckProValList == undefined || ckProValList == null || ckProValList.length == 0) {
//class="dis"選不中
//禁用此值選擇能力
$(element).removeClass("cur").addClass("dis");
//解綁點擊事件
$(element).unbind("click");
} else {
$(element).removeClass("dis");
$(element).bind("click");
}
});
//匹配價格
if (skuListCurrent.length==0) {
document.getElementById("PredictionMoney").innerHTML = currency + "0.00";
return;
}
$("#submitBtn").removeAttr("disabled");
price = skuListCurrent[0].Price;
skuNo = skuListCurrent[0].SysNo;
console.log(price);
//預計費用
var total = doorMoney + price;
document.getElementById("PredictionMoney").innerHTML = this.moneyFormat(total);
},
//屬性值選中方式二：
//置灰效果只是一個顯示效果，一樣可以點擊
//是以當前剛剛點擊的單個屬性值篩選sku，進行篩選其他屬性值置灰
function selectPropVal(thisObj) {
//故障id
var malfunctionId = $($("dd[class='cur']")[0]).attr('gzid');
//此故障下的sku集合
var skuListCurrent = skuListJson.filter(w => w.ProductCategorySysNo == typeId && w.MalfunctionsSysNo == malfunctionId);
console.log("故障下sku集合：開始----");
console.log(skuListCurrent);
console.log("故障下sku集合 結束----");
//點擊的屬性值選中效果
//之前選中，當下是否被移除
var isRemove = false;
//選中的屬性值主鍵
var selectedProValSysNo="";
var isHave = $(thisObj).hasClass("cur");
if (isHave) {
$(thisObj).removeClass("cur");
isRemove = true;
} else {
$(thisObj).addClass("cur").removeClass("dis");
selectedProValSysNo = $(thisObj).attr("propvalsysno");
console.log("选中的值" + selectedProValSysNo);
}
//先全部解除綁定事件
$("#propGroup dd").unbind("click");
//點擊事件恢復
$("#propGroup dd").bind("click", function () {
pageObj.selectPropVal(this);
});
//屬性名稱主鍵
var prpsysno = $(thisObj).attr("propsysno");
//自己同組的屬性值，去掉選中
var thisGroupProValaArr = $("#propGroup dd[propsysno='" + prpsysno + "']");
for (var q = 0; q < thisGroupProValaArr.length; q++) {
var gpItem = thisGroupProValaArr[q];
var thisProValSysNo = $(gpItem).attr("propvalsysno");
if (thisProValSysNo != selectedProValSysNo) {
//移除選中效果cur
$(gpItem).removeClass("cur").removeClass("dis");
}
}
//所有选中的屬性值集合
var selectedValArr = [];
var selectedProValArr = $("#propGroup dd.cur");
for (var i = 0; i < selectedProValArr.length; i++) {
var item = selectedProValArr[i];
var propSysNo = $(item).attr("propvalsysno");
selectedValArr.push(propSysNo);
console.log("當前選中的屬性值：" + propSysNo);
////根據選中值id找出sku
//skuListCurrent = skuListCurrent.filter(w => w.PropertyValueSysNos.indexOf(propSysNo) > -1);
}
//點擊值選出的sku
skuListCurrent = skuListCurrent.filter(w => w.PropertyValueSysNos.indexOf(selectedProValSysNo) > -1);
console.log("選中值后的sku");
console.log(skuListCurrent);
//禁用不可選的屬性值
//開始檢查
//找出沒有選中的屬性值
//$("#propGroup dd:not(.cur)").each(function (index, element) {
$("#propGroup dd").each(function (index, element) {
var thisValSysNo = $(element).attr("propvalsysno");
//如果沒有包含在sku組裡面，則禁用選中
var ckProValList = skuListCurrent.filter(w => w.PropertyValueSysNos.indexOf(thisValSysNo) > -1);
if (ckProValList == undefined || ckProValList == null || ckProValList.length == 0) {
//class="dis"選不中
//禁用此值選擇能力
$(element).removeClass("cur").addClass("dis");
//解綁點擊事件
//$(element).unbind("click");
} else {
$(element).removeClass("dis");
//$(element).bind("click");
}
});
selectedValArr.sort();
console.log("--------------排序后選中值：");
console.log(selectedValArr);
var valSysNoStr = selectedValArr.join(",");
console.log(valSysNoStr);
var priceInfoSku = skuListCurrent.find(w => w.PropertyValueSysNos == valSysNoStr);
console.log(priceInfoSku);
//匹配價格
if (priceInfoSku == null || priceInfoSku==undefined) {
document.getElementById("PredictionMoney").innerHTML = "0.00";
$("#submitBtn").attr("disabled", "disabled");
return;
}
$("#submitBtn").removeAttr("disabled");
price = priceInfoSku.Price;
skuNo = priceInfoSku.SysNo;
console.log(price);
//預計費用
var total = doorMoney + price;
document.getElementById("PredictionMoney").innerHTML = this.moneyFormat(total);
//$("#priceContent").show();
},
選中效果三：
//只是樣式效果選中，不會有置灰效果后不能點擊的情況，置灰只是一個效果
window.pageObj = {
//選中屬性值
selectPropVal: function (thisObj) {
//故障id
var malfunctionId = $($("dd[class='cur']")[0]).attr('gzid');
//此故障下的sku集合
var skuListCurrent = skuListJson.filter(w => w.ProductCategorySysNo == typeId && w.MalfunctionsSysNo == malfunctionId);
//console.log("故障下sku集合：開始----");
//console.log(skuListCurrent);
//console.log("故障下sku集合 結束----");
//屬性名稱主鍵
var prpsysno = $(thisObj).attr("propsysno");
//點擊前已經選中的值,篩選sku確定點擊同組的值置灰判斷
//同組不算
var clickPeforeSelectedArr = $("#propGroup dd.cur").not($("#propGroup dd[propsysno='" + prpsysno + "']"));
console.log("點擊前已經選中的值");
console.log(clickPeforeSelectedArr);
for (var i = 0; i < clickPeforeSelectedArr.length; i++) {
var item = clickPeforeSelectedArr[i];
var propValSysNo = $(item).attr("propvalsysno");
skuListCurrent = skuListCurrent.filter(w => w.PropertyValueSysNos.indexOf(propValSysNo) > -1);
}
var isClickHui = false;
//如果點擊的是灰色的
if ($(thisObj).hasClass("dis")) {
isClickHui = true;
var propValClick= $(thisObj).attr("propvalsysno");
skuListCurrent = skuListJson.filter(w => w.PropertyValueSysNos.indexOf(propValClick) > -1);
//移除sku中不含的屬性值選中
$("#propGroup dd.cur").each(function (index, ele) {
var propValSysno = $(ele).attr("propvalsysno");
var tongzuSku = skuListCurrent.filter(w => w.PropertyValueSysNos.indexOf(propValSysno) > -1);
if (tongzuSku.length == 0) {
$(ele).removeClass("cur");
}
});
}
//點擊的屬性值選中效果
//之前選中，當下是否被移除
var isRemove = false;
//選中的屬性值主鍵
var selectedProValSysNo="";
var isHave = $(thisObj).hasClass("cur");
if (isHave) {
$(thisObj).removeClass("cur");
isRemove = true;
} else {
$(thisObj).addClass("cur").removeClass("dis");
selectedProValSysNo = $(thisObj).attr("propvalsysno");
console.log("选中的值" + selectedProValSysNo);
}
if (isClickHui) {
//灰色，同組根據排除自己后的屬性值選出sku，篩選本組是否置灰
var lishiSku = $("#propGroup dd.cur").not(thisObj);
for (var h = 0; h < lishiSku.length; h++) {
var itemHui = lishiSku[h];
var propValSysNO = $(itemHui).attr("propvalsysno");
skuListCurrent= skuListJson.filter(w => w.PropertyValueSysNos.indexOf(propValSysNO) > -1);
}
}
console.log("同組驗證sku");
console.log(skuListCurrent);
//自己同組的屬性值，去掉選中
var thisGroupProValaArr = $("#propGroup dd[propsysno='" + prpsysno + "']").not(thisObj);
for (var q = 0; q < thisGroupProValaArr.length; q++) {
var gpItem = thisGroupProValaArr[q];
$(gpItem).removeClass("cur");
var thisProValSysNo = $(gpItem).attr("propvalsysno");
var tongzuSku = skuListCurrent.filter(w => w.PropertyValueSysNos.indexOf(thisProValSysNo) > -1);
if (tongzuSku == undefined || tongzuSku == null || tongzuSku.length == 0) {
$(gpItem).addClass("dis");
} else {
$(gpItem).removeClass("dis");
}
}
//所有选中的屬性值集合
var selectedValArr = [];
var selectedProValArr = $("#propGroup dd.cur");
for (var i = 0; i < selectedProValArr.length; i++) {
var item = selectedProValArr[i];
var propValSysNo = $(item).attr("propvalsysno");
selectedValArr.push(propValSysNo);
console.log("當前選中的屬性值：" + propValSysNo);
//根據選中值id找出sku
skuListCurrent = skuListJson.filter(w => w.PropertyValueSysNos.indexOf(propValSysNo) > -1);
}
//沒有選中值的組，屬性值設置置灰
var noSelectedGroupValuesArr=[];
$("#propGroup .fgz-dl").each(function (index,element) {
var ckArrSelected = $(element).find(".cur");
if (ckArrSelected.length == 0 || ckArrSelected == null) {
var arr = $(element).find("dd");
console.log(arr);
for (var i = 0; i < arr.length; i++) {
var ddItem = arr[i];
noSelectedGroupValuesArr.push(ddItem);
}
//return true;
}
//有選中值的組，設置每組的屬性值根據排除自己組選中
//值的選中值確定的sku進行設置本組屬性值置灰
else {
var otherSelectedVals = $("#propGroup dd.cur").not(ckArrSelected);
var skuCheckSeletedArr = [];
for (var k = 0; k < otherSelectedVals.length; k++) {
var item = otherSelectedVals[k];
var propValSysNo = $(item).attr("propvalsysno");
skuCheckSeletedArr = skuListJson.filter(w => w.PropertyValueSysNos.indexOf(propValSysNo) > -1);
}
$(element).find("dd").not(".cur").each(function (index2,ele2) {
var propValSysNo2 = $(ele2).attr("propvalsysno");
var checkArr2 = skuCheckSeletedArr.filter(w => w.PropertyValueSysNos.indexOf(propValSysNo2) > -1);
if (checkArr2.length == 0) {
$(ele2).addClass("dis");
} else {
$(ele2).removeClass("dis");
}
});
}
});
//沒有選中值的組設置效果
console.log(noSelectedGroupValuesArr);
for (var j = 0; j < noSelectedGroupValuesArr.length; j++) {
var item = noSelectedGroupValuesArr[j];
var propValSysNo = $(item).attr("propvalsysno");
var ckSku = skuListCurrent.filter(w => w.PropertyValueSysNos.indexOf(propValSysNo) > -1);
if (ckSku == null || ckSku.length == 0) {
$(item).addClass("dis");
} else {
$(item).removeClass("dis");
}
}
selectedValArr.sort();
console.log("--------------排序后選中值：");
console.log(selectedValArr);
var valSysNoStr = selectedValArr.join(",");
console.log(valSysNoStr);
var priceInfoSku = skuListCurrent.find(w => w.PropertyValueSysNos == valSysNoStr);
console.log(priceInfoSku);
//匹配價格
if (priceInfoSku == null || priceInfoSku==undefined) {
document.getElementById("PredictionMoney").innerHTML = "0.00";
$("#submitBtn").attr("disabled", "disabled");
return;
}
selectedSuccess = true;
$("#submitBtn").removeAttr("disabled");
price = priceInfoSku.Price;
skuNo = priceInfoSku.SysNo;
console.log(price);
//預計費用
var total = doorMoney + price;
document.getElementById("PredictionMoney").innerHTML = this.moneyFormat(total);
//$("#priceContent").show();
},
//金額格式化成2位小數
moneyFormat: function (num) {
var wkNum = num;
if (typeof (num) == "string") {
wkNum = parseFloat(num);
}
var numStr = parseFloat(wkNum).toFixed(3).toString();
var r = numStr.substring(0, numStr.length - 1);
return r;
}
}