小程序的商品规格选择

拼搏现实的明天。 2023-06-19 02:00 119阅读 0赞

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

效果：（当用户没有选择完所有规格，则提示用户选择其他规格。当用户选择完所有规格，则更新当前规格信息）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI2ODQ3Mw_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI2ODQ3Mw_size_16_colorFFFFFF_t_70]  
实现思路：  
最好是把弹窗内的内容封装成一个组件，我这儿就是封装成的一个组件。  
把你拿到的数据渲染显示在页面上，每一层规格为一个独立的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"
            ],
          }
        ]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI2ODQ3Mw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191203172024449.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI2ODQ3Mw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI2ODQ3Mw_size_16_colorFFFFFF_t_70]: https://img-blog.csdnimg.cn/20191203172228498.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI2ODQ3Mw==,size_16,colorFFFFFF,t_70