微信小程序checkbox复选框5选3（二）

1,wxml

view>{{machineItem.list.length+'选'+machineItem.duration}}</view>

<!-- 循环的是label,在整个大盒子绑定事件，所以得到的e.detail.value是个数组 -->
<checkbox-group bindchange="changeCheckbox">
	<label wx:for='{{machineItem.list}}' wx:key='index'>
		<checkbox value="{{item.code}}" checked="{{item.selected}}" disabled='{{item.disabled}}' />
		<text>{{item.name}}</text>
	</label>
</checkbox-group>

<radio-group bindchange="changeRadio" class="group-item notice-flex">
	<label wx:for="{{temList}}" wx:key="index">
		<radio value="{{item.code}}" checked="{{item.code == machineItem.tem}}" color="#2c95fc" />
		<text>{{item.name}}</text>
	</label>
</radio-group>

<view wx:for='{{peopleList}}' wx:key='index'>
	<text>{{item.unitName+'-'+item.duration+'分钟'}}</text>
</view>

2,js

// pages/checkbox/index.js
Page({
  data: {
    productItemList:[
      {
        "duration":3,  //选3个
        "id":"1308666159438209025",
        "sort":1,
        "type":0,
        "unitId":"13524",
        "unitName":"香蕉/苹果/葡萄/橘子/荔枝"  //共5个
      },
      {
        "duration":15,
        "id":"1308666248026103809",
        "sort":2,
        "type":1,
        "unitId":"1290470778980151298",
        "unitName":"这是文字1"
     },
     {
        "duration":30,
        "id":"1308666309376188418",
        "sort":3,
        "type":1,
        "unitId":"1290470742611341314",
        "unitName":"这是文字22"
     }
    ],
    machineItem:{}, 
    peopleList:[],   
    temList:[
      {code:1,name:'常温'},
      {code:2,name:'加冰'},
    ],
  },
  changeRadio(e){
    var tem= 'machineItem.tem'
    this.setData({
      [tem]:e.detail.value
    })
    //console.log(this.data.machineItem)
  },
  //复选框
  changeCheckbox(e){
    var machineItem = this.data.machineItem
    var list = this.data.machineItem.list
    var arr = e.detail.value
    //规定选中的个数
    var num = machineItem.duration
    list.forEach(v=>{
      //每项code在点击获取的数组中出现的位置
      var i = arr.indexOf(v.code)
      v.selected = i!= -1
      v.disabled = !(arr.length < num || i != -1)
    })
    this.setData({
      machineItem
    })
  },
  
  //处理数据
  onLoad: function (options) {
    var productItemList = this.data.productItemList
    //(1)分类
    var machineItem = productItemList.find(v=>v.type ==0)
    var peopleList = productItemList.filter(v=>v.type ==1)
    //(2)转化格式
    var idArr = machineItem.unitId.split('')
    var nameArr = machineItem.unitName.split('/')
    //(3)整理成数组
    var list=[]
    idArr.forEach((val,i)=>{
      var obj={
        code:val,
        name:nameArr[i],
        selected:machineItem.duration>i,
        disabled: machineItem.duration<=i
      }
      list.push(obj)
    })
    machineItem.list = list
    //水温 1正常 2加热
    machineItem.tem = 1 
    this.setData({
      machineItem,
      peopleList
    })
  },
})

3,wxss

/* pages/checkbox/index.wxss */
page{
  padding: 30rpx;
  background: white;
}
checkbox-group{
  margin: 20rpx 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
checkbox-group label,
radio-group label{
  width: 200rpx;
  margin-top: 20rpx;
}
/* 框 */
checkbox .wx-checkbox-input,
radio .wx-radio-input {
  width: 32rpx;
  height: 32rpx;
}
checkbox .wx-checkbox-input.wx-checkbox-input-checked{
  background: #2c95fc;
 
}
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before,
radio .wx-radio-input.wx-radio-input-checked::before{
  width: 32rpx;
  height: 32rpx;
  line-height: 32rpx;
  text-align: center;
  font-size: 26rpx;
  color: #fff;
}