多商品规格下单,选择规格切换对应规格的价格和库存。
在获取商品详情之后处理数据
let goodsSpecList = res.data.item_prop //商品规格
let goodsSpecPrice = res.data.item_spec //不同规格对应的价格
let priceKey = []
let specname = []
for (let i = 0; i < goodsSpecList.length; i++) {
priceKey.push(goodsSpecList[i].option[0].code)
specname.push(goodsSpecList[i].option[0].option)
}
this.setData({
goodsSpecList: goodsSpecList,
goodsSpecPrice: goodsSpecPrice,
specname: specname,
priceKey: priceKey,
specId: priceKey.join('-'), //向接口传的规格
list: res.data,
})
for (let i = 0; i < goodsSpecPrice.length; i++) { //获取价格
if (goodsSpecPrice[i].spc_code === this.data.specId) {
this.setData({
specPrice: goodsSpecPrice[i].price
})
}
}
**选择规格:**
chooseSpec(e) {
let priceKey = this.data.priceKey
let specname = this.data.specname
let index = e.currentTarget.dataset.idx
let itemId = e.currentTarget.dataset.itemid
priceKey.splice(index, 1, itemId)
this.setData({
itemId: itemId,
specname: specname,
priceKey: priceKey,
specId: priceKey.join('-'), //商品规格
specname: specname
})
let goodsSpecPrice = this.data.goodsSpecPrice
for (let i = 0; i < goodsSpecPrice.length; i++) {
if (goodsSpecPrice[i].spc_code == this.data.specId) {
this.setData({
specPrice: goodsSpecPrice[i].price,
})
}
}
},
**页面**
选择规格:
<view class="color_box" wx:for="{{goodsSpecList}}" wx:key="{{index}}">
<view class="color_text">{{item.cname}}</view>
<view class="color_list" wx:for-item="itn">
<block wx:for="{{item.option}}" wx:for-item="sub" wx:for-index="idx" wx:key="{{index}}">
<view bindtap='chooseSpec' data-idx='{{index}}' data-specname='{{sub.option}}' data-itemid='{{sub.code}}'
class="{{priceKey[index]===sub.code?'origin':''}}">{{sub.option}}</view>
</block>
</view>
</view>
价格:
<block wx:for="{{goodsSpecPrice}}">
<view wx:if="{{specId==item.spc_code}}">¥{{specPrice}}</view>
</block>