小程序 商品规格选择

goods.js

//获取应用实例
const app = getApp();
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    gid: 1,
    gindex: 0,
    changegoodsSpec: '',//默认
    goodsSpec: [
      { id: 1, specName: '规格一', repertory:0},
      { id: 2, specName: '规格二', repertory:1},
      { id: 3, specName: '规格三', repertory:5}
      ], //商品规格

  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 规格选择
    guige (e) {
      var changegoodsSpec = this.data.goodsSpec[e.currentTarget.dataset.current].specName;
      var spacIndex = e.currentTarget.dataset.current;
      if (this.data.goodsSpec[spacIndex].repertory != 0) {//规格数量大于0可选
        this.setData({
          gid: e.currentTarget.dataset.index,
          gindex: e.currentTarget.dataset.current,
          changegoodsSpec: changegoodsSpec,
        })
      }
      console.log("gggg规格:" + spacIndex + "/index：" + this.data.gid)
      // var type = this.data.type;
     
      var specName = this.data.goodsSpec[spacIndex].specName;
      var spacId = this.data.goodsSpec[spacIndex].id;
      var repertory = this.data.goodsSpec[spacIndex].repertory; //库存

      if (this.data.goodsSpec[spacIndex].repertory != 0) {//规格数量大于0可选
        this.setData({
          specName: specName,
          spacId: spacId,//规格id
          repertory: repertory,//库存
        })
      }
      if (repertory == 0) {
        wx.showToast({
          title: '当前规格无库存',
          icon: 'none',
          duration: 2000
        })
      }
    },
  }
})

goods.wxml

<view class="container">
  <!-- 商品规格 -->
    <view class='setMeal_head'>选择规格</view>
      <view class='setMeal'>
        <block wx:for="{{goodsSpec}}">
          <!-- <view class='content_title'>{{item.name}}</view> -->
          <view id="{{item.repertory==0?'soldOut':''}}" class="content_title {{gindex==index?'selected':''}}"  bindtap='guige' data-index='{{item.id}}' data-current='{{index}}'>{{item.specName}}</view>

        </block>
    </view>
  <!-- 商品规格end -->
</view>

goods.wxss

.setMeal{
  height: 135px;
}
.setMeal_head {
  font-size: 16px; 
  color: #414141;
  line-height: 35px;
  font-weight: bold;
}
.content_title {
  height: 35px;
  line-height: 35px;
  padding: 0px 8px;
  display: inline-block;
  margin-right: 10px;
  background: #f2f2f2;
  color: #414141;
  margin-top: 10px;
  font-size: 14px;
}
.nowselect {
  color: #414141;
}

.selected {
  background: #fdeed9;
  color: #ff9500;
}

.selectkuai {
  border: solid 1px black;
  margin: 20rpx;
  padding: 5rpx 20rpx;
  border-radius: 20rpx;
}
#soldOut{
 background-image: repeating-linear-gradient(-45deg,rgba(255, 255, 255,1),rgba(255, 255, 255,1) 8px,rgba(242, 242, 242, 1) 0,rgba(242, 242, 242, 1) 13px);
  color: #8E8E93;
}

效果图