快应用商品规格选择思路

<!-- 选择 规格弹窗 -->
    <bottom-box if="{{showContent}}" @close="closeBox">
      <div class="bigBox">
        <div class="boxHead">
          <!-- 商品价格库存展示 -->
          <div class="head">
            <image src="{{ COMMIT_IMG_LINK + shopImg }}" class="img"></image>
            <div class="rightBox">
              <text class="money" if="shopMoney" >¥{{ shopMoney  }}</text>
              <text class="money" else >¥{{ detailData | moneyfilter  }}</text>
              <text class="save">库存：{{ shopSave }}件</text>
              <text class="format" if="shopSpecName.length > 0" >已选择:{{ shopSpecName.join('/') }} </text>
              <text class="format" else >请选择：规格</text>
            </div>
          </div>
          <div class="close" @click="closeBox">
            <text>X</text>
          </div>
        </div>
        <list class="choose">
          <list-item type="choose" class="choose">
            <!-- 规格选择 -->
            <block for="(index1,item1) in  Object.keys(detailData.spec_data) ">
                <text class="chooseTitle" >{{ detailData.spec_data[item1].name }}</text>
                <div class="chooseBox">
                <block for="(index2,item2) in detailData.spec_data[item1].list ">
                    <text class="chooseItem {{ shopSpecName.includes(item2.name) ? 'chooseItemTrue':'' }} " @click="handleChangeSpecData(item2.name,index1)" >{{ item2.name }}</text>
                </block>
                </div>
            </block>
            <!-- 数量 -->
            <div class="num">
              <text>数量</text>
              <div>
                <text class="btn" @click="handleChangeShopNumber(-1)" >－</text>
                <input class="numInp" type=number maxlength=2  value="{{ shopNumber }}" @change="handleShopNumber"></input>
                <text class="btn" @click="handleChangeShopNumber(1)" >＋</text>
              </div>
            </div>
          </list-item>
        </list>
      </div>
      <!-- 加入购物车 立即购买 -->
      <div class="car-buy" if="{{ model && type === 'join' }}" @click="joinBuyCart">
          <text class="trueText">
              确定
          </text>
      </div>
      <!-- 加入购物车 立即购买 -->
      <div class="car-buy" if="{{ model && type === 'buy' }}" @click="buyShop">
          <text class="trueText">
              确定
          </text>
      </div>
      <div class="car-buy" else >
        <text class="car" @click="joinBuyCart">加入购物车</text>
        <text class="buy" @click="buyShop">立即购买</text>
      </div>
    </bottom-box>

//选择商品规格
    handleChangeSpecData(name,idx){
        //渲染选中的框变红 和 规格显示 已选择**
        this.shopSpecName[idx] = name ;
        //深拷贝，转换才能刷新数组，达到渲染
        this.shopSpecName = JSON.parse(JSON.stringify(this.shopSpecName));
        // 获取spec_data的key值的数组 例如 ["spec1_id", "spec2_id", "spec3_id"]
        let specObjKeyList = Object.keys(this.detailData.spec_data);
        // 判断选中的规格的数组长度 是否等于 spec_data的key值的数组长度 ， 说明都有选择规格
        if( this.shopSpecName.length === specObjKeyList.length ){
            // [规1，规2，规3]
            let param = {}, specList = this.detailData.spec_list;
            // 循环遍历  
            this.shopSpecName.forEach(v => {
                if(!specList[v].hasOwnProperty('list') && specList[v].hasOwnProperty('sku_id')) { // 如果没有list，有skuid 
                    param = specList
                }else {
                    specList = specList[v].list
                }
            })
            //价格
            this.shopMoney = param[ this.shopSpecName[this.shopSpecName.length-1] ].sell_price ;
            //库存
            this.shopSave = param[ this.shopSpecName[this.shopSpecName.length-1] ].stock ;
            //sku_id
            this.sku_id = param[ this.shopSpecName[this.shopSpecName.length-1] ].sku_id ;
        } 
    },