1.index.wxml
//properties是从接口获取到的
<!--数据-->
<view class="selectsize_content">
<block wx:for="{{properties}}" wx:key="item" wx:for-index="id">
<view class="content_title">{{item.name}}</view>
<view class='content_list'>
<block wx:for="{{item.childsCurGoods}}" wx:key="items">
<text class="{{ item.isActive?'active':''}}" data-select-index="{{id}}"
data-attr-index="{{index}}" data-content="{{properties}}" data-proid="{{item.propertyId}}:{{item.id}}"
bindtap='clickMenu'>{{item.name}}
</text>
</block>
</view>
</block>
</view>
//商品规格
<van-card
wx:if="{{showPeice}}"
price="{{basicInfo.minPrice}}"
title="{{basicInfo.name}}"
thumb="{{ detailSwiper[0].pic }}"
/>
<van-card
wx:if="{{ !showPeice}}"
price="{{shangPrice}}"
title="{{basicInfo.name}}"
thumb="{{ detailSwiper[0].pic }}"
/>
在控制台打印一下,这是 properties的数据
2.index.js
import http from '../../../request/http'
import Toast from '../../../miniprogram_npm/vant-weapp/toast/toast';
Page({
data:{
userId:"",
properties:[],//购买的数组
str:"",
shangPrice:"",//商品规格的price
showPeice:true,
},
clickMenu: function (event) {
let that = this
let selectIndex = event.currentTarget.dataset.selectIndex;
let attrIndex = event.currentTarget.dataset.attrIndex;
let content = event.currentTarget.dataset.content;
var count = content[selectIndex].childsCurGoods.length;
for (var i = 0; i < count; i++) {
content[selectIndex].childsCurGoods[i].isActive= false
}
content[selectIndex].childsCurGoods[attrIndex].isActive= true;
// 必须重新渲染数据
that.setData({
properties: content
})
let proid = event.currentTarget.dataset.proid; //55683:567318
if(that.data.str ==""){
that.data.str = proid
}else{
//判断重复 propertyId
if(that.data.str.indexOf(proid.split(':')[0])==-1){
that.data.str+=','+proid
}else{
//如果重复,去替换掉
let propertyId = proid.split(':')[0]+':';
let reg = new RegExp(propertyId+"\\d{0,}")
that.data.str = that.data.str.replace(reg,proid);
}
// console.log(that.data.str)
}
//获取规格后的价钱
http.getPrice({goodsId:that.data.userId,propertyChildIds:that.data.str}).then(res=>{
if(res.data.code==0){ //code=0说明接口成功
// console.log(res.data.data.price)
that.setData({
shangPrice:res.data.data.price
})
}else{
Toast(res.data.msg);
}
})
},
})
3.index.wxss
.selectsize_content{
width:100%;
height:500rpx;
}
.content_title{
line-height:100rpx;
margin-left:20rpx;
}
.content_list{
line-height:100rpx;
margin-left:20rpx;
}
.content_list text{
border:2rpx solid lightgray;
margin-right:20rpx;
height: 50rpx !important;
line-height: 50rpx;
}
.content_list{
display: flex;
justify-content: flex-start;
align-items: center;
}
.active{
border-color:red;
color:red;
border: 2rpx solid red !important;
}
没有选择商品规格的效果
选择商品规格的之后的效果