微信小程序之多规格选择

一、多规格实现代码

1、index.wxss

.view1 {
  margin-left: 2%;
  margin-right: 2%;
}
.viewkey {
    margin-top: 20rpx;
    margin-bottom: 20rpx;
}
.view2 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-right: 4%;
  margin-left: 4%;
}
.view2 view {
  border: 1rpx solid #d3d3d3;
  margin-right: 30rpx;
  padding-right: 20rpx;
  padding-left: 20rpx;
  border-radius: 10rpx;
}

2、 index.wxml

<view class="view1">
  <block wx:for="{{sizes}}" wx:key="index" wx:for-index="index1">
      <view class="viewkey">{{item.key}}</view>
      <view class="view2">
          <block wx:for="{{item.sizeList}}" wx:for-item="items">
              <view style="color: {{items.state?(items.disState?'#000':'white'):items.disState?'#000':'#000'}};background-color: {{items.state?(items.disState?'#D3D3D3':'red'):items.disState?'#D3D3D3':'white'}}; pointer-events: {{items.disState?'none':''}};" bindtap="selectValue" data-value="{{items.value}}" data-key="{{item.key}}" data-index1="{{index1}}" data-selectvale="{{item.selectValue}}" data-index="{{index}}">{{items.value}}</view>
          </block>
      </view>
  </block>
</view>

3、index.js

// index.js
Page({
  data: {
      // 该商品所有规格组合列表
      sizeList:[
        {price:35,stock:8,priceId:1,sizeList:[
          {key:"重量",value:"五斤"},
          {key:"尺寸",value:"大号"},
          {key:"数量",value:"十个"},
          {key:"颜色",value:"白色"}]},
        {price:35,stock:8,priceId:2,sizeList:[
            {key:"重量",value:"五斤"},
            {key:"尺寸",value:"大号"},
            {key:"数量",value:"三十个"},
            {key:"颜色",value:"白色"}]},
        {price:35,stock:8,priceId:3,sizeList:[
              {key:"重量",value:"十五斤"},
              {key:"尺寸",value:"大号"},
              {key:"数量",value:"三十个"},
              {key:"颜色",value:"白色"}]},
        {price:70,stock:8,priceId:4,sizeList:[
          {key:"重量",value:"五斤"},
          {key:"尺寸",value:"特大号"},
          {key:"数量",value:"五十个"},
          {key:"颜色",value:"白色"}]},
        {price:75,stock:8,priceId:5,sizeList:[
          {key:"重量",value:"十斤"},
          {key:"尺寸",value:"大号"},
          {key:"数量",value:"五十个"},
          {key:"颜色",value:"土黄色"}]},
        {price:35,stock:8,priceId:6,sizeList:[
          {key:"重量",value:"十斤"},
          {key:"尺寸",value:"特大号"},
          {key:"数量",value:"十个"},
          {key:"颜色",value:"白色"}]},
        {price:35,stock:8,priceId:7,sizeList:[
            {key:"重量",value:"十五斤"},
            {key:"尺寸",value:"大号"},
            {key:"数量",value:"五十个"},
            {key:"颜色",value:"土黄色"}]},
        {price:35,stock:8,priceId:8,sizeList:[
              {key:"重量",value:"十斤"},
              {key:"尺寸",value:"大号"},
              {key:"数量",value:"五十个"},
              {key:"颜色",value:"土黄色"}]}
      ],
      // 商品所有规格列表
      sizes:[],
      // 筛选后规格组合列表
      newsize:[],
    },
    // 初始化数据 -----> 规格列表(sizes)
    getSize:function(){
      let sizeList=this.data.sizeList
      let sizes=this.data.sizes
     for(let i=0;i<sizeList.length;i++){
       for(let j=0;j<sizeList[i].sizeList.length;j++){
        let num=this.isKey(sizes,sizeList[i].sizeList[j].key);
        if(num==-1){
           let item={}
           item.key=sizeList[i].sizeList[j].key
           item.selectValue=""
           let items={}
           items.value=sizeList[i].sizeList[j].value
           items.state=false
           items.disState=false
           let sizeList1=[]
          sizeList1.push(items)
          item.sizeList=sizeList1
          sizes.push(item)
        }else{
          let num1=this.isValue(sizes[num].sizeList,sizeList[i].sizeList[j].value);
          if(num1==1){
            let item1={}
            item1.value=sizeList[i].sizeList[j].value
            item1.state=false
            item1.disState=false
            sizes[num].sizeList.push(item1)
          }
        }
       }
     }
     this.setData({
       sizes:sizes,
       newsize:this.data.sizeList
     })
    },
    // 判断规格名(是否存在) -----> key
    isKey:function(sizes,key){
      if(sizes.length==0){
        return -1;
      }else{
        for(let i=0;i<sizes.length;i++){
          if(sizes[i].key==key){
            return i
          }
        }
      }
      return -1;
    },
    // 判断规格名值(是否存在) -----> value
    isValue:function(sizes,values){
        for(let i=0;i<sizes.length;i++){
          if(sizes[i].value==values){
            return -1;
          }
        }
        return 1;
    },
    // 点击事件
    selectValue:function(e){
      let index1=e.currentTarget.dataset.index1
      let value=e.currentTarget.dataset.value
      let key=e.currentTarget.dataset.key
      let selectvale=e.currentTarget.dataset.selectvale
      let index=e.currentTarget.dataset.index
      let sizes=this.data.sizes
      // 判断是否点击同一个按钮
      if(selectvale == value && sizes[index1].key == key){
        // 取消按钮
        this.disSelect(sizes,value,key,index1,index)
      }else{
        // 点击按钮
        this.selectClick(sizes,value,key,index1)
      }
    },
    // 获取已选择数量
    getNum:function(sizes){
      let count=0;
        sizes.forEach(element => {
          if(element.selectValue != "" && element.selectValue.length > 0){
            count++;
          }
        });
        return count;
    },
    // 点击按钮
    selectClick:function(sizes,value,key,index1,unselect){
      var count=this.getNum(sizes)
      // 选择同行按钮---->(选中按钮数为1时，更改选中按钮为其他同行按钮) 
      if(count == 1 && sizes[index1].key == key && sizes[index1].selectValue != value){
        for(let i = 0;i < sizes[index1].sizeList.length; i++){
          if(sizes[index1].sizeList[i].value == sizes[index1].selectValue){
            sizes[index1].sizeList[i].state = false
            count = 0
            sizes[index1].selectValue = ""
            break
          }
        }
      }

      let newsize=[]
      let sizelist=[]
      // 判断是否第一次选择
      if(count < 1){
        sizelist=this.data.sizeList
      }else{
        sizelist=this.data.newsize
      }
      // console.log(sizelist)

      // 筛选符合条件的规格组合
      for(let i = 0;i < sizelist.length; i++){
        for(let j = 0;j < sizelist[i].sizeList.length; j++){
          if(sizelist[i].sizeList[j].key == key && sizelist[i].sizeList[j].value == value){
            newsize.push(sizelist[i])
          }
        }
      }
      // 全部按钮置为不可选 ----->disState表示是否可选(false表示可选)
      for(let i = 0;i < sizes.length; i++){
        for(let j = 0;j < sizes[i].sizeList.length; j++){
          sizes[i].sizeList[j].disState=true
        }
      }

      // 将符合条件的按钮置为可选
      for(let i = 0;i < sizes.length; i++){
        for(let j = 0;j < newsize.length; j++){
          for(let k = 0;k < newsize[j].sizeList.length; k++){
            if(newsize[j].sizeList[k].key == sizes[i].key){
              for(let h = 0;h < sizes[i].sizeList.length; h++){
                if(newsize[j].sizeList[k].value == sizes[i].sizeList[h].value){
                  sizes[i].sizeList[h].disState = false
                }
                // 保证一个按钮时同一行都可选
                if((count < 2 && unselect == true && index1 == i) || (count < 1 && index1 == i)){
                  sizes[i].sizeList[h].disState = false
                }
              }
            }
          }
        }
      }

      // 改变选中按钮颜色,state表示选中状态(true 表示选中)
      for(let i = 0;i < sizes.length; i++){
          if(sizes[i].key == key){
            for(let j = 0;j < sizes[i].sizeList.length; j++){
              if(sizes[i].sizeList[j].value == value){
                sizes[i].sizeList[j].state = true
                sizes[i].selectValue = value
              }
            }
          }
      }
      this.setData({
        sizes:sizes,
        newsize:newsize
      })
    },
    // 取消按钮
    disSelect:function(sizes,value,key,index1,index){
      // 取消按钮
        sizes[index1].selectValue = ""
        // 初始化数据----->当取消最后一个按钮时，所有的selectValue都是空字符串
        // 不会进入selectClick方法，需要初始化所有按钮的状态(state、disState)
        for(let i = 0;i < sizes.length; i++){
          for(let j = 0;j < sizes[i].sizeList.length; j++){
            sizes[i].sizeList[j].state = false
            sizes[i].sizeList[j].disState = false
          }
        }
        // 更新修改的数据
        // 更改newsize数据，改为未筛选前
        this.setData({
          sizes:sizes,
          newsize:this.data.sizeList
        })

        // 重新筛选
        for(let i = 0;i < sizes.length; i++){
          if(sizes[i].selectValue != "" && sizes[i].selectValue.length > 0){
            this.selectClick(sizes,sizes[i].selectValue,sizes[i].key,i,true)
          }
        }
    },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  onShow() {
    this.getSize()
  },

})

二、效果展示

 三、总结

1、一个商品的规格组合以及规格都可以通过后端处理生成，也可以只处理规格组合，规格列表由前端处理生成。

2、本博客未考虑库存显示的场景，规格组合默认去除库存为零的情况。在选择完按钮后，可以通过newsize数组来获取价格和库存。

3、只实现了第一次选择时同行相互切换，多行还未实现(例如：选择15斤后，第二个按钮选择三十个，之后可切换三十个为十个)