标签：sku simulatedDATA specifications demo self 购物车 shopItemInfo var data
HTML
<view id="vmsimulatedDATA">
<view class='productConten'>
<view class="productDelcom" wx:for="{{simulatedDATA.specifications}}" wx:for-index='n' wx:for-item="ProductItem">
<view class='p'>{{ProductItem.name}}</view>
<ul class="productFooterlist clearfix">
<li wx:for="{{ProductItem.item}}" wx:for-item="oItem" bindtap="specificationBtn" data-show="{{oItem.isShow}}" class="{{oItem.isShow?'':'noneActive'}} {{subIndex[n] == index?'productActive':''}}" data-ol="{{subIndex[n]}}" data-name="{{oItem.name}}" data-n="{{n}}" data-index="{{index}}">{{oItem.name}}</li>
</ul>
</view>
</view>
<view wx:if="{{boxArr.id}}">
{{boxArr.id+'--'+boxArr.price}}
</view>
</view>
js
Page({
data: {
simulatedDATA: {
difference: [{
id: "19",
price: "200.00",
stock: "19",
difference: "红色,x"
},
{
id: "20",
price: "300.00",
stock: "29",
difference: "白色,x"
},
{
id: "21",
price: "300.00",
stock: "10",
difference: "黑色,x"
},
{
id: "21",
price: "300.00",
stock: "10",
difference: "黑色,xl"
},
{
id: "24",
price: "500.00",
stock: "10",
difference: "白色,xl"
}
],
specifications: [{
name: "颜色",
item: [{
name: "白色"
},
{
name: "黑色"
},
{
name: "红色"
}
]
},
{
name: "尺码",
item: [{
name: "x"
},
{
name: "xl"
}
]
}
]
},
selectArr: [], //存放被选中的值
shopItemInfo: {}, //存放要和选中的值进行匹配的数据
subIndex: [], //是否选中 因为不确定是多规格还是但规格，所以这里定义数组来判断
content: "",
specifications:'',
boxArr: {},
},
onl oad() {
var self = this
var simulatedDATA = self.data.simulatedDATA
var difference = self.data.simulatedDATA.difference
var shopItemInfo = self.data.shopItemInfo
var specifications = self.data.simulatedDATA.specifications
for (var i in difference) {
shopItemInfo[difference[i].difference] =
difference[i]; //修改数据结构格式，改成键值对的方式，以方便和选中之后的值进行匹配
}
for (var i = 0; i < specifications.length; i++) {
for (var o = 0; o < specifications[i].item.length; o++) {
specifications[i].item[o].isShow = true
}
}
simulatedDATA.specifications = specifications
self.setData({
simulatedDATA: simulatedDATA,
shopItemInfo: shopItemInfo,
specifications: specifications
})
},
onShow() {
},
specificationBtn(e) {
var n=e.currentTarget.dataset.n
var index = e.currentTarget.dataset.index
var item = e.currentTarget.dataset.name
var self = this;
var selectArr = self.data.selectArr
var subIndex = self.data.subIndex
var boxArr = self.data.boxArr
var shopItemInfo = self.data.shopItemInfo
if (selectArr[n] != item) {
selectArr[n] = item;
subIndex[n] = index;
} else {
// self.selectArr[n] = "";
// self.subIndex[n] = -1; //去掉选中的颜色
}
self.checkItem();
var arr = shopItemInfo[selectArr];
if (arr) {
boxArr.id = arr.id;
boxArr.price = arr.price;
}
self.setData({
selectArr: selectArr, subIndex: subIndex, boxArr: boxArr, shopItemInfo: shopItemInfo
})
console.log(boxArr)
},
checkItem() {
var self = this;
var simulatedDATA=self.data.simulatedDATA
var option = self.data.simulatedDATA.specifications;
var result = []; //定义数组存储被选中的值
for (var i in option) {
result[i] = self.data.selectArr[i] ? self.data.selectArr[i] : "";
}
for (var i in option) {
var last = result[i]; //把选中的值存放到字符串last去
for (var k in option[i].item) {
result[i] = option[i].item[k].name; //赋值，存在直接覆盖，不存在往里面添加name值
option[i].item[k].isShow = self.isMay(result); //在数据里面添加字段isShow来判断是否可以选择
}
result[i] = last; //还原，目的是记录点下去那个值，避免下一次执行循环时避免被覆盖
}
simulatedDATA.specifications = option
self.setData({
simulatedDATA: simulatedDATA
})
},
isMay(result) {
for (var i in result) {
if (result[i] == "") {
return true; //如果数组里有为空的值，那直接返回true
}
}
return !this.data.shopItemInfo[result] ?
false :
this.data.shopItemInfo[result].stock == 0 ?
false :
true; //匹配选中的数据的库存，若不为空返回true反之返回false
},
})
css
#vmsimulatedDATA {
background: #fff;
}
#vmsimulatedDATA .clearfix:after {
display: block;
overflow: hidden;
clear: both;
height: 0;
visibility: hidden;
content: "";
}
#vmsimulatedDATA .productConten {
margin-bottom: 10px;
}
#vmsimulatedDATA .productDelcom {
padding: 5px 20px;
color: #323232;
font-size: 12px;
}
#vmsimulatedDATA .productDelcom .p {
padding: 10px 0;
font-size: 14px;
}
#vmsimulatedDATA .productFooterlist li {
border: 1px solid #f4f4f4;
border-radius: 2px;
color: #606060;
text-align: center;
float: left;
min-width: 30px;
margin-right: 5px;
padding: 2px 5px;
margin-bottom: 5px;
}
#vmsimulatedDATA .productFooterlist li.productActive {
background-color: #c41e3a;
color: #fff;
border: 1px solid #c41e3a;
}
#vmsimulatedDATA .productFooterlist li.noneActive {
background-color: #ccc;
opacity: 0.4;
color: #000;
pointer-events: none;
}
标签：sku,simulatedDATA,specifications,demo,self,购物车,shopItemInfo,var,data 来源： https://www.cnblogs.com/wukongz/p/12580903.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。