小程序实现sku商品规格

 

实现商品颜色和尺码反选的大致思路：
1.一开始显示的默认价格是后台传递的。

2.调用商品详情接口的时候需要传递SKU数组（存放有颜色和尺码的数组集合），sizeVOList数组（存放商品所有的尺码集合），skcVOList（存放商品所有的颜色集合）。

3.用户点击颜色，将尺码中的status状态首先设置为false,这步操作是为什么后面显示是否有货。尺码一致~

具体代码

  /**
    * 点击尺寸 颜色改变样式
    */
  changeSize: function (e) {
    var nowSize, chooses = e.currentTarget.dataset.chooses;
    if (e.currentTarget.dataset.disc) return
    if (this.data.nowSize == chooses) {
      nowSize = "";
      var skcVOList = this.data.skcVOList;
      skcVOList.forEach(item => item.status = false)
      this.setData({ skcVOList })
    } else {
      nowSize = chooses
    }
    this.setData({
      nowSize: nowSize
    })
    this.distachAttrResult(this.data.nowColor + this.data.nowSize);
  },
   /**
    * 点击尺寸 颜色改变样式
    */
   changeColor: function (e) {
    let productId = e.currentTarget.dataset.productcode;
    var nowColor, choosec = e.currentTarget.dataset.choosec;
    if (e.currentTarget.dataset.disc) return
    if (this.data.nowColor == choosec) {
      nowColor = ""
      var sizeVOList=this.data.sizeVOList;
      sizeVOList.forEach(item => item.status = false);
      this.setData({sizeVOList})
    } else {
      nowColor = choosec
      // 颜色选中后图片发生改变
      this.changeColorImg(e.currentTarget.dataset.color);
    }
    this.setData({
      nowColor: nowColor,
      productCode: productId
    })
    this.distachAttrResult(this.data.nowColor + this.data.nowSize);
  },

组合可选

  //组合可选
  distachAttrResult: function (res) {
    var skuVOList = this.data.skuVOList;
    if (this.data.nowColor) {
      //通过颜色选尺码
      var sizeArry;
      sizeArry = skuVOList.filter((i, v) => i.colorKey == this.data.nowColor);
      var sizeVOList = this.data.sizeVOList
      console.log('sizeVOList',sizeVOList);
      for (var j in sizeVOList) {
        if (sizeArry.find((value, index, array) => value.sizeKey == sizeVOList[j].sizeKey)) {
          sizeVOList[j].status = false
        } else {
          sizeVOList[j].status = true
        }
      }
      console.log('sizeVOList',sizeVOList);
      this.setData({
        sizeVOList: sizeVOList,
        ischange: true
      })
    }
    if (this.data.nowSize) {
      //通过尺码选颜色
      var colorArry;
      colorArry = skuVOList.filter((i, v) => i.sizeKey == this.data.nowSize);
      var skcVOList = this.data.skcVOList;
      for (var j in skcVOList) {
        if (colorArry.find((value, index, array) => value.colorKey == skcVOList[j].colorKey)) {
          skcVOList[j].status = false
        } else {
          skcVOList[j].status = true
        }
      }
      this.setData({
        skcVOList: skcVOList,
        ischange: true
      })
    }
    if (this.data.nowColor && this.data.nowSize) {
      // 执行颜色、尺码都选中后的事情
      var nowGoods = skuVOList.filter((i, v) => i.colorKey == this.data.nowColor && i.sizeKey == this.data.nowSize)[0];
      console.log('nowGoods',nowGoods)
      var promotionSale = nowGoods.promotionDisplay;
      this.setData({
        proBarCode: nowGoods.barCode,
        salePrice: nowGoods.salePrice,
        price: nowGoods.standardPrice
      })
    }
  },