小程序的商品规格选择

小程序radio-group实现选择多层级商品规格

效果：（当用户没有选择完所有规格，则提示用户选择其他规格。当用户选择完所有规格，则更新当前规格信息）


实现思路：
最好是把弹窗内的内容封装成一个组件，我这儿就是封装成的一个组件。
把你拿到的数据渲染显示在页面上，每一层规格为一个独立的radio-group，给单选框组的value绑定不一样 的值，这样每组之间互不影响。

index.wxml

		<van-card custom-class="van-card-bg" price="{{price}}" desc="{{selling_intro}}" thumb="{{ img_path }}" curSpec="{{curSpec}}"/>
          
          <van-cell wx:for-item="specitem" wx:key="index" wx:for="{{specList}}" title="{{specitem.specName}}" value="" border="{{ false }}" use-label-slot="{{true}}">
            <view slot="label">
              <van-radio-group value="{{ specArray[index] }}" data-specId="{{specitem.specId}}" data-index="{{index}}"  bind:change="onChangeSpec">
                <van-col span="12" wx:key="item" wx:for-item="valitem" wx:for="{{specitem.specValList}}">
                  <van-radio name="{{specitem.specId}}:{{valitem.specValId}}">{{valitem.specValName}}van-radio>
                van-col>
              van-radio-group>
            view>
          van-cell>

index.js

Component({
  properties: {
    showPopup: {
      type: Boolean,
      value: false
    },
    popupColor:Boolean,
    price:  {
      type:String,
      value:''
    },
    selling_intro:  {
      type:String,
      value:''
    },
    img_path: {
      type:String,
      value:''
    },
    goodsName: String,
    curSku: Object,
    skuList: Array,
    specList: {
      type: Array,
      value: []
    },
    skuVname:String,
    skuVal:String,
    specArray:{
      type:Array,
      value:[]
    },
    curSpec: String,
    buyNum: {
      type: Number,
      value: 1,
    },

  },
  data: {
    showPopup: false,
    num: 1,
    id:"",
  },
  methods: {
    //监听radio变化事件
    onChangeSpec: function (event) {
      const {specArray,skuList,specList} = this.data;
      specArray[event.currentTarget.dataset.index]=event.detail;
      const {buyNum, goodsName, } = this.data;
      //更新specArray，specArray装的是选中的radio的值（name），是一个数组
      this.setData({
        specArray:specArray,
      });
      const skuVal =  specArray.join(";");
      // 提示用户未选择什么规格
      const unSlectedSku = specList.filter(item => {
        return item.specId != event.currentTarget.dataset.specid
      })[0];
      if(unSlectedSku != undefined){
        const skuTip = "选择 " + unSlectedSku.specName;
        this.setData({ curSpec:skuTip })
      }
      const curSku = skuList.filter(item => (item.skuVal === skuVal))[0];
      // 找到当前规格的商品信息后，更新商品价钱、图片等信息
      if( curSku != undefined){
        this.setData({
          img_path: curSku.imagePath,
          price: curSku.price,
          curSpec:'已选：' + curSku.skuVname,
          curSku: {
            ...curSku,
            goodsName: goodsName,
            buyNum: buyNum,
            },
        });
      }   
    },
  }
})

规格数据格式：

"specList": [
      {
        "specId": 0,
        "specName": "套餐",
        "specValList": [
          {
            "specValId": 101,
            "specValName": "1.8米【人气版】"
          },
          {
            "specValId": 102,
            "specValName": "1.5米【火爆款】"
          }
        ]
      }
    ],
    "skuList": [
      {
        "skuId": 26,
        "skuVal": "0:101",
        "skuVname": "1.8米【人气版】",
        "imagePath": "https://kpfw-1258799659.cos.ap-chengdu.myqcloud.com/smarthome/0/upimages/goods_cover//730cafca-a92b-4140-862b-a528caae38e4",
        "picPaths": [
          "https://kpfw-1258799659.cos.ap-chengdu.myqcloud.com/smarthome/0/upimages/goods_cover//730cafca-a92b-4140-862b-a528caae38e4"
        ],
        "price": 1200,
        "mktprice": 18,
        "shareIntro": "选填，微信分享给好友时会显示这里的文案，建议200字以内\n",
        "sellingIntro": "在商品详情页、商品列表页标题下面展示卖点信息，建议50字以内\n",
        "appraise": null,
        "gpradio": null,
        "intros": [
          "https://kpfw-1258799659.cos.ap-chengdu.myqcloud.com/smarthome/0/upimages/goods_images//56787812-f75f-4aa1-8159-34e4cc81a8c5",
          "https://kpfw-1258799659.cos.ap-chengdu.myqcloud.com/smarthome/0/upimages/goods_images//653f47f4-0939-4b2b-acc6-a97c2ba09839"
        ],
      },
      {
        "skuId": 27,
        "skuVal": "0:102",
        "skuVname": "1.5米【火爆款】",
        "imagePath": "https://kpfw-1258799659.cos.ap-chengdu.myqcloud.com/smarthome/0/upimages/goods_cover//f75b2036-8310-4e0f-b9dd-42649f5a24e8",
        "picPaths": [
          "https://kpfw-1258799659.cos.ap-chengdu.myqcloud.com/smarthome/0/upimages/goods_cover//f75b2036-8310-4e0f-b9dd-42649f5a24e8"
        ],
        "price": 800,
        "mktprice": 18,
        "shareIntro": "选填，微信分享给好友时会显示这里的文案，建议200字以内\n",
        "sellingIntro": "在商品详情页、商品列表页标题下面展示卖点信息，建议50字以内\n",
        "intros": [
          "https://kpfw-1258799659.cos.ap-chengdu.myqcloud.com/smarthome/0/upimages/goods_images//56787812-f75f-4aa1-8159-34e4cc81a8c5",
          "https://kpfw-1258799659.cos.ap-chengdu.myqcloud.com/smarthome/0/upimages/goods_images//653f47f4-0939-4b2b-acc6-a97c2ba09839"
        ],
      }
    ]