vue电商项⽬sku规格详细步骤
⼀、概念及需求
SPU（Standard Product Unit）：标准化产品单元。是商品信息聚合的最⼩单位，是⼀组可复⽤、易检索的标准化信息的集合，该集合描述了⼀个产品的特性。通俗点讲，属性值、特性相同的商品就可以称为⼀个SPU。
SKU（Stock Keeping Unit）库存量单位，即库存进出计量的单位， 可以是以件、盒、托盘等为单位。SKU是物理上不可分割的最⼩存货单元。在使⽤时要根据不同业态，不同管理模式来处理。
区别：
SPU：属性值 特性相同的就是SPU 例如 iphone 12pro就是⼀个SPU
SKU：代表该商品可选规格的任意组合，他是库存单位的唯⼀标识 例如挑选⼿机时的 规格、容量、颜⾊ 组合起来就是
SKU iphone12pro 紫⾊ +256
需求：在平常买东西时可能当前商品的SKU规格库存没有 例如下⾯左图中 20cm的锅没有库存，在看右图中点击中国后30cm的尺⼨也没有库存，怎么判断有没有库存呢？ 这就需要每点击⼀个规格属性 都要去判断其他有没有库存
⼆、实现
（1）创建组件
goods-sku.vue
<template>
<div class="goods-sku">
<dl>
<dt>颜⾊</dt>
<dd>
<img class="lected" src="sdn.127/d77c1f9347d06565a05e606bd4f949e0.png" alt="">
<img class="disabled" src="sdn.127/d77c1f9347d06565a05e606bd4f949e0.png" alt="">
</dd>
</dl>
口袋鸡排
跨境电商实训<dl>
<dt>尺⼨</dt>
<dd>
<span class="disabled">10英⼨</span>
<span class="lected">20英⼨</span>
<span>30英⼨</span>
</dd>
</dl>
<dl>
<dt>版本</dt>
<dd>
<span>美版</span>
<span>港版</span>
</dd>
</dl>
</div>
</template>
</template>
<script>
export default {
name: 'GoodsSku'
}
阳台水池</script>
<style scoped lang="less">
.sku-state-mixin () {
border: 1px solid #e4e4e4;
margin-right: 10px;
cursor: pointer;
&.lected {
border-color: @xtxColor;
}
&.disabled {
opacity: 0.6;
border-style: dashed;
cursor: not-allowed;
}
}
.goods-sku {
padding-left: 10px;
padding-top: 20px;
dl {
display: flex;
padding-bottom: 20px;
align-items: center;
dt {
width: 50px;
color: #999;
}
dd {
flex: 1;
color: #666;
> img {
width: 50px;
height: 50px;
.sku-state-mixin ();
粗制乱造}
> span {
display: inline-block;
height: 30px;
line-height: 28px;
padding: 0 20px;
.sku-state-mixin ();
}
}
}
}
</style>
注册组件
index.vue
<div v-if="goodsData.id"> //当有数据的时候再去执⾏
<GoodsSku />
暑假夏令营
</div>
+ import GoodsSku from './components/goods-sku'
name: 'XtxGoodsPage',
+ components: { GoodsRelevant, GoodsImage, GoodsSales, GoodsName, GoodsSku }, tup () {
⽬前效果
（2）规格数据渲染
goosData 是通过商品的id获取的 把他传给⼦组件GoodsSku
<GoodsSku :goodsData="goodsData"/>
返回的数据 goodsData
⼦组件接收
<script>
export default {
name: 'GoodsSku',
props: {
goodsData: {
type: Object,
default: () => ({ specs: [], skus: [] })// 防⽌第⼀次打开页⾯没数据报错 }
}
}
</script>
数据渲染
<template>
<div class="goods-sku">
<dl v-for="item in goodsData.specs" :key="item.id">
工程技术人员职称<dt> {{item.name}} </dt>
<dd>
<template v-for="val in item.values" :key="val.name">
<img v-if="val.picture" class="lected" :src="val.picture" alt="val.picture" :title="val.picture">
<span v-el> {{val.name}} </span>
</template>
</dd>
</dl>
</div>
</template>
⽬前效果
（3）切换逻辑
点击时：
它是已选中：则从已选中-->改成-->未选中
它是未选中：则把它的兄弟改成未选中，把它⾃⼰改成选中
<template v-for="val in item.values" :key="val.name">
<img @click="clickSpecs(item,val)" v-if="val.picture" :class="{lected:val.lected}" :src="val.picture" alt="val.picture" :title="val.picture"> <span @click="clickSpecs(item,val)" :class="{lected:val.lected}" v-el> {{val.name}} </span>
</template>
把当前项和 所有项传下去 进⾏排他思想
tup () {
// 选中排他 item所有项 val当前项
const clickSpecs = (item, val) => {
// 如果当前选中
if (val.lected) {
// 就把当前取消选中
val.lected = fal图书管理制度
} el {
// 否则把每⼀项都取消选中
item.values.forEach(item => {
item.lected = fal
})
// 把⾃⼰选中
val.lected = true
}
}
return { clickSpecs }
}
（4）禁⽤效果
通过skus中的数据，可以来计算当前情况下，某个规格是否可选。
1. 在组件初始化的时候去判断每个规格是否点击
2. 在选中某个规格值之后，去判断其他规格值是否可选
当SKU规格库存为0的时候应该 禁⽤此规格的点击
（5）禁⽤效果采⽤⽅式路径字典
根据当前商品的skus数据⽣成路径查询字典对象，⽅便控制后期判断属性是否可⽤。
计算集合的⼦集的⽅法
src/vender/power-t.js小学生教育
