微信小程序嵌套循环+实现商品规格的选择

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;
}

没有选择商品规格的效果

选择商品规格的之后的效果