wqy
/
JingTong-Font-Mobile
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修复商品选择sku时会已选择项会打乱的问题

Browse Source
master
wyy 3 years ago
parent 3f6f68f692
commit fd794d591a
1 changed files with 159 additions and 128 deletions
Show Stats Download Patch File Download Diff File

287
pages/prod/prod.vue
Unescape View File

@ -151,14 +151,23 @@
</view> </view>
<view class="pup-sku-body"> <view class="pup-sku-body">
<view class="pup-sku-area"> <view class="pup-sku-area">
<block v-for="(value, key) in skuGroup" :key="key"> <view class="sku-box" v-if="skuList.length">
<view class="sku-kind">{{key}}</view> <block v-for="(skuGroupItem, skuGroupItemIndex) in skuGroupList" :key="skuGroupItemIndex">
<view class="sku-choose"> <view class="items sku-text" v-for="(skuLine, key) in skuGroupItem" :key="key">
<block v-for="(item, index) in value" :key="index"> <text class="sku-kind">{{key}}</text>
<text :class="'sku-choose-item ' + (wxs.array_contain(selectedProp,item)?'active':'') + ' ' + (wxs.props_contain(allProperties,selectedPropObj,key,item,propKeys)?'':'gray')" :data-ok="wxs.props_contain(allProperties,selectedPropObj,key,item,propKeys)" @tap="toChooseItem" :data-key="key" :data-val="item">{{item}}</text> <view class="con">
</block> <text
</view> v-for="skuLineItem in skuLine"
:key="skuLineItem"
class="sku-choose-item"
:class="[selectedPropList.indexOf(key + ':' + skuLineItem) !== -1?'active':'',
isSkuLineItemNotOptional(allProperties,selectedPropObj,key,skuLineItem,propKeys)? 'dashed' : '']"
@click="toChooseItem(skuGroupItemIndex, skuLineItem, key)"
>{{skuLineItem}}</text>
</view>
</view>
</block> </block>
</view>
</view> </view>
<view class="pup-sku-count"> <view class="pup-sku-count">
<view class="num-wrap"> <view class="num-wrap">
@ -282,7 +291,9 @@ export default {
}, },
littleCommPage: [], littleCommPage: [],
evaluate: -1, evaluate: -1,
isCollection: false isCollection: false,
findSku: true,
skuGroupList: []
}; };
}, },
@ -428,11 +439,11 @@ export default {
// skuId: res.skuId // skuId: res.skuId
skuList: res.skuList, skuList: res.skuList,
pic: res.pic pic: res.pic
}); // 获取优惠券 });
// 获取优惠券
//this.getCouponList(); //this.getCouponList();
// 组装sku // 组装sku
this.groupSkuProp(res.skuList, res.price);
this.groupSkuProp();
uni.hideLoading(); uni.hideLoading();
} }
}; };
@ -534,121 +545,143 @@ export default {
}); });
}, },
//根据sku的属性 分组 /**
groupSkuProp: function () { * 组装SKU
var skuList = this.skuList; */
groupSkuProp(skuList, defaultPrice) {
if (skuList.length == 1 && skuList[0].properties == "") { if (skuList.length == 1 && !skuList[0].properties) {
this.setData({ this.defaultSku = skuList[0]
defaultSku: skuList[0] this.findSku = true
}); return;
return; }
} let skuGroupList = []
let skuGroup = {}
var skuGroup = {}; let allProperties = []
var allProperties = []; let propKeys = []
var propKeys = []; let selectedPropObj = {}
let selectedPropObjList = []
for (var i = 0; i < skuList.length; i++) {
var defaultSku = this.defaultSku; var defaultSku = null;
var isDefault = false; for (var i = 0; i < skuList.length; i++) {
var isDefault = false;
if (!defaultSku && skuList[i].price == this.price) { if (!defaultSku && skuList[i].price == defaultPrice) {
//找到和商品价格一样的那个SKU，作为默认选中的SKU defaultSku = skuList[i];
defaultSku = skuList[i]; isDefault = true;
isDefault = true; }
this.setData({ var properties = skuList[i].properties; //版本:公开版;颜色:金色;内存:64GB
defaultSku: defaultSku allProperties.push(properties);
}); var propList = properties.split(";"); // ["版本:公开版","颜色:金色","内存:64GB"]
} for (var j = 0; j < propList.length; j++) {
var propval = propList[j].split(":"); //["版本","公开版"]
var properties = skuList[i].properties; //版本:公开版;颜色:金色;内存:64GB var props = skuGroup[propval[0]]; //先取出 版本对应的值数组
//如果当前是默认选中的sku，把对应的属性值 组装到selectedProp
allProperties.push(properties); if (isDefault) {
var propList = properties.split(";"); // ["版本:公开版","颜色:金色","内存:64GB"] propKeys.push(propval[0]);
selectedPropObj[propval[0]] = propval[1];
var selectedPropObj = this.selectedPropObj; const selectedPropObjItem = {}
selectedPropObjItem[propval[0]] = propval[1]
for (var j = 0; j < propList.length; j++) { selectedPropObjList.push(selectedPropObjItem)
var propval = propList[j].split(":"); //["版本","公开版"] }
if (props == undefined) {
var props = skuGroup[propval[0]]; //先取出 版本对应的值数组 props = []; //假设还没有版本，新建个新的空数组
//如果当前是默认选中的sku，把对应的属性值 组装到selectedProp props.push(propval[1]); //把 "公开版" 放进空数组
} else {
if (isDefault) { if (props.indexOf(propval[1]) === -1) { //如果数组里面没有"公开版"
propKeys.push(propval[0]); props.push(propval[1]); //把 "公开版" 放进数组
selectedPropObj[propval[0]] = propval[1]; }
} }
skuGroup[propval[0]] = props; //最后把数据 放回版本对应的值
if (props == undefined) { const propListItem = {}
props = []; //假设还没有版本，新建个新的空数组 propListItem[propval[0]] = props
skuGroupList.push(propListItem)
props.push(propval[1]); //把 "公开版" 放进空数组 }
} else { }
if (!this.array_contain(props, propval[1])) { this.defaultSku = defaultSku
//如果数组里面没有"公开版" this.propKeys = propKeys
props.push(propval[1]); //把 "公开版" 放进数组 this.selectedPropObj = selectedPropObj
} this.skuGroup = skuGroup
} this.selectedPropObjList = selectedPropObjList
this.skuGroupList = this.unique(skuGroupList)
skuGroup[propval[0]] = props; //最后把数据 放回版本对应的值 this.allProperties = allProperties
} this.parseSelectedObjToVals(skuList);
this.$forceUpdate()
this.setData({ },
selectedPropObj: selectedPropObj, /**
propKeys: propKeys * 将已选的 {key:val,key2:val2}转换成 [val,val2]
}); */
} parseSelectedObjToVals: function(skuList) {
let selectedPropObjList = this.selectedPropObjList
this.parseSelectedObjToVals(); let selectedProperties = ""
this.setData({ let selectedPropList = []
skuGroup: skuGroup, let selectedPropShowList = []
allProperties: allProperties for (let i = 0; i < selectedPropObjList.length; i++) {
}); const selectedPropObjItem = selectedPropObjList[i];
}, for (const key in selectedPropObjItem) {
//将已选的 {key:val,key2:val2}转换成 [val,val2] if (Object.hasOwnProperty.call(selectedPropObjItem, key)) {
parseSelectedObjToVals: function () { selectedPropList.push(key + ':' + selectedPropObjItem[key])
var selectedPropObj = this.selectedPropObj; selectedPropShowList.push(selectedPropObjItem[key])
var selectedProperties = ""; selectedProperties += key + ":" + selectedPropObjItem[key] + ";"
var selectedProp = []; }
}
for (var key in selectedPropObj) { }
selectedProp.push(selectedPropObj[key]); selectedProperties = selectedProperties.substring(0, selectedProperties.length - 1)
selectedProperties += key + ":" + selectedPropObj[key] + ";"; this.selectedPropList = selectedPropList
} this.selectedPropShowList = selectedPropShowList
this.selectedProperties = selectedProperties
selectedProperties = selectedProperties.substring(0, selectedProperties.length - 1); // console.log(selectedProperties); this.selectedPropObjList = selectedPropObjList
var findSku = false
this.setData({ for (var i = 0; i < skuList.length; i++) {
selectedProp: selectedProp if (skuList[i].properties == selectedProperties) {
}); findSku = true
this.defaultSku = skuList[i]
for (var i = 0; i < this.skuList.length; i++) { break
if (this.skuList[i].properties == selectedProperties) { }
this.setData({ }
defaultSku: this.skuList[i] this.findSku = findSku
}); },
break; /**
} * 判断当前的规格值 是否可以选
} */
}, isSkuLineItemNotOptional(allProperties, selectedPropObj, key, item, propKeys) {
//点击选择规格 var selectedPropObj = Object.assign({}, selectedPropObj)
toChooseItem: function (e) { var properties = "";
var ok = e.currentTarget.dataset.ok; selectedPropObj[key] = item;
for (var j = 0; j < propKeys.length; j++) {
if (!ok) { properties += propKeys[j] + ":" + selectedPropObj[propKeys[j]] + ";";
return; }
} properties = properties.substring(0, properties.length - 1);
for (var i = 0; i < allProperties.length; i++) {
var val = e.currentTarget.dataset.val; if (properties == allProperties[i]) {
var key = e.currentTarget.dataset.key; return false;
var selectedPropObj = this.selectedPropObj; }
selectedPropObj[key] = val; }
this.setData({ for (var i = 0; i < allProperties.length; i++) {
selectedPropObj: selectedPropObj if (allProperties[i].indexOf(item) >= 0) {
}); return true;
this.parseSelectedObjToVals(); }
}, }
return false;
},
/**
* 规格点击事件
*/
toChooseItem(skuGroupItemIndex ,skuLineItem, key) {
this.selectedPropObjList[skuGroupItemIndex][key] = skuLineItem
this.selectedPropObj[key] = skuLineItem;
this.parseSelectedObjToVals(this.skuList);
},
/**
* 去重
*/
unique(arr) {
const map = {}
arr.forEach(item => {
const obj = {};
Object.keys(item).sort().map(key => obj[key] = item[key])
map[JSON.stringify(obj)] = item;
})
return Object.keys(map).map(key => JSON.parse(key))
},
//判断数组是否包含某对象 //判断数组是否包含某对象
array_contain: function (array, obj) { array_contain: function (array, obj) {
for (var i = 0; i < array.length; i++) { for (var i = 0; i < array.length; i++) {
@ -696,7 +729,6 @@ export default {
skuId: this.defaultSku.skuId skuId: this.defaultSku.skuId
}, },
callBack: res => { callBack: res => {
//console.log(res);
this.setData({ this.setData({
totalCartNum: this.totalCartNum + this.prodNum totalCartNum: this.totalCartNum + this.prodNum
}); });
@ -764,7 +796,6 @@ export default {
data: {}, data: {},
callBack: couponIds => { callBack: couponIds => {
var couponList = this.couponList; var couponList = this.couponList;
console.log(couponList);
couponList.forEach(coupon => { couponList.forEach(coupon => {
if (couponIds && couponIds.length) { if (couponIds && couponIds.length) {
// 领取该优惠券数量 // 领取该优惠券数量

Write Preview
Loading…
Cancel
Save