商品规格选择sku --- Vue版

朋友问我像淘宝那样的选择商品的规格，如商品的颜色，尺寸，款式，并且还要根据后端传来的库存，哪些还有，哪些没了。咋一看不复杂，然后后面被一步一步的套牢，出不来了。最终借助 Google 的力量，完成了对这个类型的需求，有个初步的了解，并输出 blog 以记录。

什么是 sku

Stock Keeping Unit（库存量单位）
定义有很多，在电商上来看，我的理解是，一件商品的基础属性组成的单品，如一件衣服的基础属性有颜色，款式，尺寸三个属性，那么这三个属性合一就组成了一个单品 sku，不同的颜色、款式、尺寸，就构成了不同的单品。

OK，对于第一次接触的同学来说，让我们从开始了解商品规则和其选择吧~

我是从数据存储到前端展示这样一个流程，开始分享的。（如果对后端感兴趣的话可以看前两段

在数据库中的存储

在搜索中看到不少设计，太过复杂的方式我还没看懂，不过还是看到一个分了几个表建立的，感觉容易理解些。

建表：

商品表：主键是商品 ID、自增，还有商品的 name 字段。
属性表：一件商品都有哪些属性，主键是属性 ID、自增，还要有属性的 name 字段。同时可以和商品表关联
属性值表：一个属性都有哪些取值，主键是属性值 ID、自增，还要有属性值的 name 字段。同时和属性表关联
sku 表：由上面 3 个表可以构成 sku 表，主键是 sku_id、自增，可以有 sku_value，sku_sku_code，stock，price 字段。

后端返回数据

返回数据的话，比如针对某个商品返回它的 sku，那么理想的是返回三个字段，一个是属性对象，一个是属性值对象，一个这个商品的 sku 对象。

不过我示例中的返回数据，不是这样，所以要进一步处理成前端需要的格式。

思路部分

首先，将商品的属性和属性值，展示出来，比如颜色下有蓝色、红色，款式下有经典款和流行款，尺寸有 M 和 L。
当选择一个属性后，需要判断和其他属性构成的 sku，库存是否为空，为空的话是要置灰或者提示没有库存了。
选择用对象存储不同的 sku 的库存，性能是否好点。
对已选择的属性，进行其他属性循环填充，如果没库存，就可以置灰其他属性。

处理数据+代码规划

朋友给的数据对象，有三个字段，分别是该商品的 shopSkuVo（sku 对象），shopMainSpecVo（属性对象），shopChildVoList（属性值对象）

那么，首先我要将属性对象和属性值对象，取出来，得到一个规格对象，如：

let mainSpec = [
    {
        id: 1,
        name: '颜色',
        attr: [
            {
                id: 1,
                name: '蓝色',
            },
            {
                id: 2,
                name: '白色',
            },
        ],
    },
    {
        id: 2,
        name: '尺寸',
        attr: [
            {
                id: 3,
                name: 'M',
            },
            {
                id: 4,
                name: 'L',
            },
        ],
    },
];

得到这样的规格字段后，就可以借助 Vue 中的 v-for，进行 dom 渲染了。
考虑到用对象来存储 sku 的数据，这里我根据数据的特色，使用 sku_value 来做对象的 key，对应的值就是这条 sku 数据。如：

let skuObj = {
    '红色/M/经典款': {
        id: 1, // sku_id
        sku_value: '红色/M/经典款',
        stock: 20,
        price: '33.0',
    },
    '红色/M/流行款': {
        id: 4, // sku_id
        sku_value: '红色/M/经典款',
        stock: 330,
        price: '53.0',
    },
};

核心思路，每次用户点击一个属性后，将该属性和其他点击过的属性，以及还没点击的属性，组合起来，检查库存数量，进而判断还没点击的属性，是否置灰显示。

代码实现

后端数据格式展示：(基于篇幅，我只展示了每种的前两条数据)

let data = {
    shopSkuVo: [
        {
            skuId: '38',
            goodsId: null,
            specNames: 'S/红/乞丐款',
            specIds: null,
            skuNo: null,
            skuImg: 'C30000/1/img/20190322/37ff02207d0349489a90a3f7d4ff578d',
            skuPrice: null,
            stock: 15,
            enabled: null,
            goodSkuSpecDetails: null,
            classifyList: null,
        },
        {
            skuId: '39',
            goodsId: null,
            specNames: 'S/红/爆炸款',
            specIds: null,
            skuNo: null,
            skuImg: 'C30000/1/img/20190322/37ff02207d0349489a90a3f7d4ff578d',
            skuPrice: null,
            stock: 14,
            enabled: null,
            goodSkuSpecDetails: null,
            classifyList: null,
        },
    ],
    shopMainSpecVo: [
        {
            skuId: '38',
            mainSpecId: '1',
            mainSpecMerchantId: null,
            mainSpecName: '尺寸',
            mainSpecSort: null,
            mainSpecPid: '0',
            goodSkuSpecDetailsID: '6742da9e002b496e8058c8cebaf292f2',
        },
        {
            skuId: '38',
            mainSpecId: '12',
            mainSpecMerchantId: null,
            mainSpecName: '颜色',
            mainSpecSort: null,
            mainSpecPid: '0',
            goodSkuSpecDetailsID: 'df0f08465d9f43cf8f951ed79743cea5',
        },
    ],
    shopChildVoList: [
        {
            skuId: '38',
            ChildId: '52',
            ChildMerchantId: null,
            ChildSpecName: 'S',
            ChildSpecPid: '1',
            goodSkuSpecDetailsID: '6742da9e002b496e8058c8cebaf292f2',
        },
        {
            skuId: '38',
            ChildId: '13',
            ChildMerchantId: null,
            ChildSpecName: '红',
            ChildSpecPid: '12',
            goodSkuSpecDetailsID: 'df0f08465d9f43cf8f951ed79743cea5',
        },
    ],
};

Vue 实例绑定的 template 模板：

<div v-for="(shopMain, rowIndex) in mainSpec" :key="rowIndex">
    <span>： </span>
    <ul class="item clearfix">
        <li
            v-for="(cItem, colIndex) in shopMain.item"
            @click="clickButton($event, cItem.name, rowIndex, colIndex)"
            :class="[cItem.enabled?'':'disabled',subIndex[rowIndex] == colIndex?'checked':'']"
        >
            
        </li>
    </ul>
</div>

Vue 实例中定义的 data 字段：

data() {
        return {
            shopSkuVo: data.shopSkuVo,   // 本地我将后端返回的数据放到一个js中了，用import引入。
            shopMainSpecVo: data.shopMainSpecVo,
            shopChildVoList: data.shopChildVoList,

            // sku 对象，
            skuObj: {},
            // 规则属性 数组对象
            mainSpec: [],

            // 选择的 属性 数组和其下标，用来进行stock判断和前端样式控制。
            selectItemArr: [],
            subIndex: [],
        }
    },
    ```

处理 sku 数据

对属性对象和属性值对象进行数据处理，得到一个规则对象。对 sku 对象进行数据处理，得到 sku，商品 value 为 key 的 sku 对象。

created() {
        this.shopMainSpecVo = this.deduplication(this.shopMainSpecVo, 'mainSpecId')

        this.shopMainSpecVo.forEach(s => {
            let obj = {}
            obj.name = s.mainSpecName
            obj.item = []
            this.filterShopByKey(s.mainSpecId).forEach(n => {
                obj.item.push({name: n})
            })
            this.mainSpec.push(obj)
        })

        this.skuObj = this.getObjByKey(this.shopSkuVo, 'specNames')

        this.checkItem()
    },
methods: {
  deduplication(arr, key) {
            let obj = {}, result = []

            arr.forEach(a => {
                if (!obj.hasOwnProperty(a[key])) {
                    obj[a[key]] = a
                }
            })

            for (let k in obj) {
                result.push(obj[k])
            }

            return result
        },
  filterShopByKey(key) {
            return Array.from(new Set(this.shopChildVoList.filter(f => f.ChildSpecPid === key).map(m => m.ChildSpecName))).sort()
        },
  getObjByKey(arr, key) {
            let obj = {}
            arr.forEach(a => {
               obj[a[key]] = a
            })

            return obj
        },
  // 属性值按钮点击，控制点击元素高亮、同属性的其他属性值去高亮，并进行检查。
  clickButton(e, item, rowIndex, colIndex) {
            if (this.selectItemArr[rowIndex] !== item) {  // 如果点击当前属性中 未勾选的按钮，则取消该属性别的按钮勾选，且记录下来。
                this.selectItemArr[rowIndex] = item
                this.subIndex[rowIndex] = colIndex
            } else {  // 如果是点击当前属性中 已勾选的按钮，则取消勾选
                this.selectItemArr[rowIndex] = ''
                this.subIndex[rowIndex] = -1
            }

            this.checkItem()
        },
   checkItem() {
     				// 临时 存放 选择属性值的数组。
            let tmpSelectArr = []
      // 将已经勾选的属性，存入临时数组里。
            this.mainSpec.forEach((m, index) => {
                tmpSelectArr[index] = this.selectItemArr[index] ? this.selectItemArr[index] : ''
            })

// 对已勾选属性进行补充，即如果已经选了颜色和尺寸了，那么模拟用户选择款式，目前是暴力循环。在选择完后，调用isEnabled方法，判断补充的属性值是否可以点击。
            this.mainSpec.forEach((m, mIndex) => {
                let last = tmpSelectArr[mIndex]
                m.item.forEach((s, sIndex) => {
                    tmpSelectArr[mIndex] = s.name
                    s.enabled = this.isEnabled(tmpSelectArr)
                })
                tmpSelectArr[mIndex] = last
            })
            this.$forceUpdate() //重绘
        },

   // 判断属性组合之后，添加的属性是否可以点击
   isEnabled(arr) {
            for (let i in arr) {
                if (arr[i] === '') return true  // 如果添加的属性中，有空的，直接返回true。
            }

            return this.skuObj[arr.join('/')].stock === 0 ? false : true
        },
}

样式适配状态

template 的样式，其中一个 css 属性非常棒，是 pointer-events: none;，这个属性可以阻止当前元素的事件触发，再搭配 cursor 和 background-color，就可以实现不可点击的交互。

.item {
    display: inline-block;
}

.item li {
    float: left;
    padding: 5px 10px;
    margin-right: 5px;
    background-color: #c9e9ed;
    cursor: pointer;
}

.item li.checked {
    background-color: orange;
}

.item li.disabled {
    background-color: #cccccc;
    cursor: not-allowed;
    pointer-events: none;
}

文档信息

本文作者：Bran.nie
本文链接：https://bran-nie.com/2019/05/07/sku/
版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）

鹏程