一个SKU商品和属性的联动,思考一天还是不对,请大神指教。

销售属性
SKU

            如图,销售属性是后台返回的,最多可以选择两项销售属性。

            title图片左边的是选择的属性,图片以及图片右边的是固定的。


            html代码:

  <div class="details-main-product">
    <div class="product-title">销售属性</div>
    <div class="product-main">
      <div class="sale-attr" v-for="item in saleAttrList">
        <label>{{item.label}}:</label>
        <el-checkbox v-for="info in item.attrList" @change="checkAttr(info)" v-model="info.checkedValue"
                     :key="info.id">{{info.label}}
        </el-checkbox>
      </div>
    </div>
  </div>
  <div class="details-main-product">
    <div class="product-title">SKU定义</div>
    <div class="product-main">
      <div>
        <ul style="border: 1px solid #f4f4f5;border-bottom: none;" v-if="skuList.length > 0">
          <li class="sku-title">
            <!--<span v-for="item in skuTitle">{{item.label}}</span>-->
            <span v-for="(item,index) in skuTitle" :key="index">{{item.label}}</span>
          </li>
          <li class="sku-table" v-for="(item,index) in skuList" :key="index">
            <div class="input-wrap" v-for="(info,index) in item.attrList" :key="index">
              <el-input type="text" v-model="info.label" disabled placeholder="请输入..."></el-input>
            </div>
            <!--<div class="input-wrap">-->
              <!--<el-input type="text" v-model="item.label" disabled placeholder="请输入..."></el-input>-->
            <!--</div>-->
            <div class="input-wrap">
              <upload-img :ref="item.img" :image-count="uploadCount" size="mini" class="sku-img"></upload-img>
            </div>
            <div class="input-wrap">
              <el-input type="text" v-model="item.originalPrice" placeholder="请输入..."></el-input>
            </div>
            <div class="input-wrap">
              <el-input type="text" v-model="item.price" placeholder="请输入..."></el-input>
            </div>
            <div class="input-wrap">
              <el-input type="text" v-model="item.skuNumber" placeholder="请输入..."></el-input>
            </div>
            <div class="input-wrap"><span style="color: blue;cursor: pointer;">删除</span></div>
          </li>
        </ul>
        <div style="color: red;text-align: center;padding: 10px 0;" v-else>请选择销售属性</div>
      </div>
    </div>
  </div>


        js代码:
        模拟数据:

    skuTitle: [
      {
        label: '图片',
      },
      {
        label: '原价(元)'
      },
      {
        label: '售价(元)'
      },
      {
        label: '商家SKU编号'
      },
      {
        label: ''
      }
    ],

    skuList: [],
    //销售属性
    saleAttrList: [
      {
        label: '颜色',
        id: '1',
        attrList: [
          {
            label: '白色',
            pId: '1',
            id: '11',
            pName: '颜色',
            checkedValue: false
          },
          {
            label: '黑色',
            pId: '1',
            id: '12',
            pName: '颜色',
            checkedValue: false
          },
          {
            label: '紫色',
            pId: '1',
            id: '13',
            pName: '颜色',
            checkedValue: false
          },
          {
            label: '红色',
            pId: '1',
            id: '14',
            pName: '颜色',
            checkedValue: false
          },
          {
            label: '蓝色',
            pId: '1',
            id: '15',
            pName: '颜色',
            checkedValue: false
          }
        ]
      },
      {
        label: '尺寸',
        id: '2',
        attrList: [
          {
            label: '25',
            pId: '2',
            id: '21',
            pName: '尺寸',
            checkedValue: false
          },
          {
            label: '26',
            pId: '2',
            id: '22',
            pName: '尺寸',
            checkedValue: false
          },
          {
            label: '27',
            pId: '2',
            id: '23',
            pName: '尺寸',
            checkedValue: false
          },
          {
            label: '28',
            pId: '2',
            id: '24',
            pName: '尺寸',
            checkedValue: false
          }
        ]
      },
      {
        label: '配置',
        id: '3',
        attrList: [
          {
            label: '牛逼',
            pId: '3',
            id: '31',
            pName: '配置',
            checkedValue: false
          },
          {
            label: '很牛逼',
            pId: '3',
            id: '32',
            pName: '配置',
            checkedValue: false
          },
          {
            label: '非常牛逼',
            pId: '3',
            id: '33',
            pName: '配置',
            checkedValue: false
          }
        ]
      },
      {
        label: '测试',
        id: '4',
        attrList: [
          {
            label: '你好',
            pId: '4',
            id: '41',
            pName: '测试',
            checkedValue: false
          },
          {
            label: '我好',
            pId: '4',
            id: '42',
            pName: '测试',
            checkedValue: false
          },
          {
            label: '大家好',
            pId: '4',
            id: '43',
            pName: '测试',
            checkedValue: false
          },
          {
            label: '你不好',
            pId: '4',
            id: '44',
            pName: '测试',
            checkedValue: false
          },
          {
            label: '我不好',
            pId: '4',
            id: '45',
            pName: '测试',
            checkedValue: false
          },
          {
            label: '大家都不好',
            pId: '4',
            id: '46',
            pName: '测试',
            checkedValue: false
          },
        ]
      }
    ],

            JS选择SKU时的事件:
            checkAttr(info) {
    //SKU列表内的数据初始化
    let obj = {
      attrList:[],
      img: '',
      originalPrice: '',
      price: '',
      skuNumber: '',
    };
    // console.log(info);
    // console.log('title',this.skuTitle);
    // console.log('list',this.skuList);
    //判断是勾选还是取消
    if (info.checkedValue) {
      //判断是否有当前这个属性了
      let isTitleBool = true;
      this.skuTitle.map((item) => {
        if (item.label == info.pName) {
          isTitleBool = false;
        }
      });
      //如果有当前这个属性则不再添加title并判断选择了几个属性了
      if (isTitleBool) {
        if (this.skuTitle.length > 6) {
          info.checkedValue = false;
          this.$message({
            type: 'warning',
            message: '最多选择两个属性'
          });
          return false;
        } else {
          //如果选择的属性低于2个则添加
          this.skuTitle.unshift({label: info.pName});
        }
      }
      //SKU列表内的初始化数据更新
      obj.attrList.unshift(info);
      //判断当前点击的这一项属性在skuList列表内有没有
      let isPIdBool = false;
      this.skuList.map((item,index) => {
        item.attrList.map((data,j) => {
          if(data.pId == info.pId){
            isPIdBool = true;
          }
        });
      });
      //如果当前有这一项属性 或者 (this.skuList.length < 1)代表是第一次添加属性,那skuList直接加一行
      if(isPIdBool || (this.skuList.length < 1)){
        //如果当前有两个属性了,那么每添加一个都得在所有的attrList内添加
        if(this.skuTitle.length > 6){
          console.log(this.skuList);
          console.log(obj);
          let arr = {};
          console.log(this.skuTitle[0].label);
          this.skuList.map((item,index) => {
            item.attrList.map((data,j) => {
              if(data.pName != info.pName){
                arr = data;
              }
            })
          });
          console.log(arr);
          obj.attrList.push(arr);
          console.log('222',obj);
          this.skuList.push(obj);
        }else {
          this.skuList.push(obj);
        }
      }else {
        //如果不满足判断则代表是新的属性添加,需将之前的所有的attrList都添加上这项新属性
        this.skuList.map((item,index) => {
          item.attrList.unshift(obj.attrList[0])
        });
      }
    } else {
      //如果点击取消勾选
      //判断点击取消的是哪个title
      let i = -1;
      this.skuTitle.map((item, index) => {
        if (item.label == info.pName) {
          i = index;
        }
      });
      //删除所有的含当前取消的属性的SKU列表
      let isSpliceBoll = false;
      for(let i = 0; i < this.skuList.length; i++){
        for(let j = 0; j < this.skuList[i].attrList.length; j++) {
          if(this.skuList[i].attrList[j].pName == info.pName){
            this.skuList[i].attrList.splice(j, 1);
            j--;
            isSpliceBoll = true;
          }
        }
        //如果当前属性列表内没有数据了则删除这个skuList
        if(this.skuList[i].attrList.length < 1){
          this.skuList.splice(i, 1);
          i--;
        }
      }
      // this.skuList.map((item, index) => {
      //   if (item.pName == info.pName) {
      //     isSpliceBoll = true;
      //     k = index;
      //   }
      // });

      // this.skuList.splice(i, 1);

      //如果skuList内还有当前这一项则不删除title
      if (i != -1 && !isSpliceBoll) {
        this.skuTitle.splice(i, 1);
      }
    }
    // this.skuList.push(info);
    // this.skuList.map((item) => );
    // console.log(this.skuList);
  },


        因项目比较紧急,所以今天思考了一天后,不能再拖,所以前来求助。
        求大佬给个正确的思路。
        万分感谢!

1个回答

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!