商品属性选择(包括库存和下架)

```
<template>
    <div>
        <div
            class="flex mb12"
            v-for="(item, index) in attrSKUList"
            :key="item.attrName + index"
        >
            <div
                style="width: 70px; color: #606266; padding-top: 4px; text-align: right"
            >
                {{ item.attrName }}：
            </div>
            <div class="flex1 item-btn">
                <el-button
                    v-for="attr in item.attrsList"
                    :key="attr.attrId"
                    :class="[
            !attrCanCheck[attr.attrName] ||
            !attrCanCheck[attr.attrName].includes(attr.attrValue)
              ? 'nostock'
              : '',
            skuCheckList[attr.attrName] == attr.attrValue ? 'checked' : '',
          ]"
                    style="margin-bottom: 5px; margin-left: 10px"
                    @click="cutSku(attr, index)"
                >{{ attr.attrValue }}
                </el-button>
            </div>
        </div>
    </div>
</template>
<script>
import _ from "lodash"

export default {
    name: "attrList",
    props: ["data"],
    data() {
        return {
            form: {},
            disabledAttr: [],
            attrsList: [],
            attrCanCheck: [[], []],
            attrSKUList: [],
            allSkuList: [],
            skuCheckList: {},
        }
    },
    mounted() {
        this.fetch()
    },
    methods: {
        fetch() {
            const { data } = this
            data.skuList.forEach((sku) => {
                let attrIdStr = {}
                sku.attrsList.forEach((attr) => {
                    attrIdStr[attr.attrName] = attr.attrValue
                })
                sku.attrIdStr = attrIdStr
            })
            this.allSkuList = data.skuList
            //过滤掉库存为0和下架商品
            let skuList = data.skuList.filter(
                (item) =>
                    item.downOrUp != "2" &&
                    item.downOrUp != "3" &&
                    item.downOrUp != "4" &&
                    item.stock
            )
            this.form.skuList = skuList
            //规格列表
            this.attrSKUList = data.attrsSkuList
            let skuCheckList = {}
            data.attrsSkuList.forEach(item => {
                skuCheckList[item.attrName] = ""
            })
            this.skuCheckList = skuCheckList
            //设置商品默认sku
            let sku = {}
            if ((data.sku.downOrUp != "2" && data.sku.downOrUp != "3" && data.sku.downOrUp != "4") && data.sku.stock) {
                sku = data.sku
            } else if (skuList.length) {
                sku = skuList[0]
            } else {
                sku = data.sku
            }
            //设置选中规格列表
            sku.attrsList.forEach((attr, i) => {
                this.cutSku(attr)
            })
        },
        cutSku(row) {
            //取消
            if (
                this.skuCheckList[row.attrName] &&
                this.skuCheckList[row.attrName] == row.attrValue
            ) {
                this.$set(this.skuCheckList, row.attrName, "")
            } else {
                this.$set(this.skuCheckList, row.attrName, row.attrValue)
            }
            const { skuCheckList } = this
            let sku = this.allSkuList.find(
                (item) => _.isEqual(item.attrIdStr, skuCheckList)
            )
            let canCheck = {}
            const { skuList } = this.form
            for (let i in this.skuCheckList) {
                skuList.forEach((item) => {
                    if (item.attrIdStr[i] == this.skuCheckList[i] || this.skuCheckList[i] == "" || this.attrSKUList.length == 1) {
                        for (let k in item.attrIdStr) {
                            if (!canCheck[k]) {
                                canCheck[k] = []
                            }
                            canCheck[k].push(item.attrIdStr[k])
                        }
                    }
                })
            }
            if (sku) {
                if (sku.stock < 1 || (sku.downOrUp == 2 || sku.downOrUp == 3 || sku.downOrUp == 4)) {
                    for (let k in sku.attrIdStr) {
                        if (canCheck[k]) {
                            canCheck[k] = canCheck[k].filter(item => item != sku.attrIdStr[k])
                        }
                    }
                }
            }
            this.$emit("change", sku, skuCheckList)
            this.attrCanCheck = canCheck
        },
    },
}
</script>
<style lang="scss" scoped>
.divaa /deep/ .el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
    margin-bottom: 10px;
}
.pad {
    padding: 20px 0;
}
.bordert {
    border-bottom: 1px solid #f5f5f5;
}
.red {
    color: #f60606;
    font-size: 18px;
}
.mb20 {
    margin-bottom: 20px;
}
.mb12 {
    margin-bottom: 10px;
}
.skuDetail {
    margin-left: 40px;
    .sku-title {
        h1 {
            padding-bottom: 0.2em;
            line-height: 26px;
            font-size: 16px;
            font-weight: 700;
            color: #000;
            margin-bottom: 10px;
        }
    }
    .stockFlag {
        display: inline-block;
        margin-left: 5px;
        color: #585858;
    }
}
.desc-containt {
    .title {
        height: 40px;
        line-height: 40px;
        background: #f5f5f5;
        span {
            display: inline-block;
            width: 92px;
            text-align: center;
            position: relative;
            &::before {
                position: absolute;
                left: 1px;
                height: 18px;
                width: 2px;
                content: " ";
                top: 50%;
                margin-top: -9px;
                background: #e00808;
            }
        }
    }
    .pc-details {
        width: 100%;
        max-width: 790px;
        margin: 0 auto;
        padding-top: 15px;
    }
}
.nostock {
    color: #c0c4cc;
    border-color: #ebeef5;
}
.checked {
    border: 1px solid #f56c6c;
}
</style>

```

Leanote's Blog

Navigation

Recent Posts

Friend Links