已知sku.tree算出sku.list類目值和id

文章來源地址http://www.zghlxwxcb.cn/news/detail-640175.html

  <van-sku
          ref="sku"
          v-model="showBase"
          :close-on-click-overlay="closeOnClickOverlay"
          :goods="skuData.goods_info"
          :goods-id="skuData.goods_id"
          :hide-stock="skuData.sku.hide_stock"
          :quota="quota"
          :show-add-cart-btn="showAddCartBtn"
          :sku="skuData.sku"
          @add-cart="onAddCartClicked"
        >
          <!-- <template #sku-header>
            <div class="van-sku-actions">
              <van-button
                size="large"
                square
                type="warning"
                @click="onPointClicked"
              >
                積分兌換
              </van-button>
            </div>
          </template> -->
          <template #sku-stepper>
            <!-- <div class="van-sku-actions">
              <van-button
                size="large"
                square
                type="warning"
                @click="onPointClicked"
              >
                積分兌換
              </van-button>
            </div> -->
          </template>
          <!-- <template #sku-actions> -->
          <div slot="sku-actions" class="van-sku-actions">
            <van-button size="large" square type="warning" @click="define">
              加入購物車
            </van-button>
          </div>
          <!-- </template> -->
        </van-sku>

    skuData: {
          sku: {
            // 所有sku規(guī)格類目與其值的從屬關(guān)系，比如商品有顏色和尺碼兩大類規(guī)格，顏色下面又有紅色和藍(lán)色兩個規(guī)格值。
            // 可以理解為一個商品可以有多個規(guī)格類目，一個規(guī)格類目下可以有多個規(guī)格值。
            tree: [
              {
                k: '顏色',
                k_id: '1',
                v: [
                  {
                    id: '30349',
                    name: '天藍(lán)色',
                  },
                  {
                    id: '1215',
                    name: '白色',
                  },
                ],
                k_s: 's1',
                count: 2,
                largeImageMode: false, //  是否展示大圖模式
              },
              {
                k_id: 123, // 屬性id
                k: '加料', // 屬性名
                is_multiple: true, // 是否可多選
                v: [
                  {
                    id: 1222, // 屬性值id
                    name: '珍珠', // 屬性值名
                    price: 1, // 屬性值加價
                    text_status: 1, // 屬性啟用/禁用狀態(tài) 0 - 禁用，1 - 啟用
                  },
                  {
                    id: 1223,
                    name: '椰果',
                    price: 1,
                    text_status: 1,
                  },
                ],
                 k_s: 's2',
              },
              {
                k_id: 124, // 屬性id
                k: '加料', // 屬性名
                is_multiple: true, // 是否可多選
                v: [
                  {
                    id: 1225, // 屬性值id
                    name: '珍珠', // 屬性值名
                    price: 1, // 屬性值加價
                    text_status: 1, // 屬性啟用/禁用狀態(tài) 0 - 禁用，1 - 啟用
                  },
                  {
                    id: 1226,
                    name: '椰果',
                    price: 1,
                    text_status: 1,
                  },
                ],
                  k_s: 's3',
              },
            ],
            // 所有 sku 的組合列表，如下是：白色1、白色2、天藍(lán)色1、天藍(lán)色2
            list: [
              {
                id: 2259,
                price: 0, //價格
                discount: 122,
                stock_num: 20, //庫存
                goods_id: 946755,
              },
              // {
              //   id: 2250,
              //   price: 121, //價格
              //   discount: 123,
              //   s1: '30349',
              //   s2: '1223',
              //   stock_num: 22, //庫存
              //   goods_id: 946756,
              // },
            ],
            price: '5.00',
            stock_num: 227, // 商品總庫存
            none_sku: false, // 是否無規(guī)格商品
            hide_stock: false, // 是否隱藏剩余庫存
          },
          goods_info: {
            title: '測試商品A',
            picture:
              'https://img.yzcdn.cn/upload_files/2017/03/16/Fs_OMbSFPa183sBwvG_94llUYiLa.jpeg?imageView2/2/w/100/h/100/q/75/format/jpg',
          },
          goods_id: '946755',
          initialSku: {},
        },

mounted() {
      // 調(diào)用函數(shù)生成sku.list組合列表
      this.generateCombinations(
        this.skuData.sku.tree,
        0,
        {},
        this.skuData.sku.list
      )
    },

  generateCombinations(tree, index, combination, combinations) {
        if (index === tree.length) {
          combinations.push(combination)
          return
        }
        const node = tree[index]
        const v = node.v
        const k_s = node.k_s
        for (let i = 0; i < v.length; i++) {
          const value = v[i]
          const combination1 = {
            id: this.skuData.sku.list[0].id,
            price: this.skuData.sku.list[0].price,
            discount: this.skuData.sku.list[0].discount,
            stock_num: this.skuData.sku.list[0].stock_num,
            goods_id: this.skuData.sku.list[0].goods_id,
          }
          const newCombination = { ...combination, ...combination1}
          newCombination[k_s] = value.id
          this.skuData.sku.list[i]=newCombination
          this.generateCombinations(
            tree,
            index + 1,
            newCombination,
            combinations
          )
          console.log('最后', tree, index + 1, newCombination, combinations)
        }
      },

到了這里，關(guān)于vue SKU已知sku.tree算出sku.list類目值和id的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！