vue3前端开发-小兔鲜项目-sku的实现

vue3前端开发-小兔鲜项目-sku的实现！这是一个会计学的特殊专业名词，可以理解为产品的型号，规格的货品计量单元。
它是一组数据的混合体。比如：尺寸，质料，品质，等等。组合在一起形成的一个混合数组对象。

---

下面是小兔鲜项目标官方提供的一个下载地址：
里面有我们需要的一些插件代码。包括本次项目测试内容用到的sku插件代码。

---

地址：百度网盘 请输入提取码
您可以去这个地址里下载百度网盘内的代码内容。里面有本次分享的插件sku内容了！

---

 
它的位置，照旧在项目标根components下面的。

---

1. <script>
2. import { watchEffect } from 'vue'
3. import getPowerSet from './power-set'
4. const spliter = '★'
5. // 根据skus数据得到路径字典对象
6. const getPathMap = (skus) => {
7.   const pathMap = {}
8.   if (skus && skus.length > 0) {
9.     skus.forEach(sku => {
10.       // 1. 过滤出有库存有效的sku
11.       if (sku.inventory) {
12.         // 2. 得到sku属性值数组
13.         const specs = sku.specs.map(spec => spec.valueName)
14.         // 3. 得到sku属性值数组的子集
15.         const powerSet = getPowerSet(specs)
16.         // 4. 设置给路径字典对象
17.         powerSet.forEach(set => {
18.           const key = set.join(spliter)
19.           // 如果没有就先初始化一个空数组
20.           if (!pathMap[key]) {
21.             pathMap[key] = []
22.           }
23.           pathMap[key].push(sku.id)
24.         })
25.       }
26.     })
27.   }
28.   return pathMap
29. }
31. // 初始化禁用状态
32. function initDisabledStatus (specs, pathMap) {
33.   if (specs && specs.length > 0) {
34.     specs.forEach(spec => {
35.       spec.values.forEach(val => {
36.         // 设置禁用状态
37.         val.disabled = !pathMap[val.name]
38.       })
39.     })
40.   }
41. }
43. // 得到当前选中规格集合
44. const getSelectedArr = (specs) => {
45.   const selectedArr = []
46.   specs.forEach((spec, index) => {
47.     const selectedVal = spec.values.find(val => val.selected)
48.     if (selectedVal) {
49.       selectedArr[index] = selectedVal.name
50.     } else {
51.       selectedArr[index] = undefined
52.     }
53.   })
54.   return selectedArr
55. }
57. // 更新按钮的禁用状态
58. const updateDisabledStatus = (specs, pathMap) => {
59.   // 遍历每一种规格
60.   specs.forEach((item, i) => {
61.     // 拿到当前选择的项目
62.     const selectedArr = getSelectedArr(specs)
63.     // 遍历每一个按钮
64.     item.values.forEach(val => {
65.       if (!val.selected) {
66.         selectedArr[i] = val.name
67.         // 去掉undefined之后组合成key
68.         const key = selectedArr.filter(value => value).join(spliter)
69.         val.disabled = !pathMap[key]
70.       }
71.     })
72.   })
73. }
76. export default {
77.   name: 'XtxGoodSku',
78.   props: {
79.     // specs:所有的规格信息  skus:所有的sku组合
80.     goods: {
81.       type: Object,
82.       default: () => ({ specs: [], skus: [] })
83.     }
84.   },
85.   emits: ['change'],
86.   setup (props, { emit }) {
87.     let pathMap = {}
88.     watchEffect(() => {
89.       // 得到所有字典集合
90.       pathMap = getPathMap(props.goods.skus)
91.       // 组件初始化的时候更新禁用状态
92.       initDisabledStatus(props.goods.specs, pathMap)
93.     })
95.     const clickSpecs = (item, val) => {
96.       if (val.disabled) return false
97.       // 选中与取消选中逻辑
98.       if (val.selected) {
99.         val.selected = false
100.       } else {
101.         item.values.forEach(bv => { bv.selected = false })
102.         val.selected = true
103.       }
104.       // 点击之后再次更新选中状态
105.       updateDisabledStatus(props.goods.specs, pathMap)
106.       // 把选择的sku信息传出去给父组件
107.       // 触发change事件将sku数据传递出去
108.       const selectedArr = getSelectedArr(props.goods.specs).filter(value => value)
109.       // 如果选中得规格数量和传入得规格总数相等则传出完整信息(都选择了)
110.       // 否则传出空对象
111.       if (selectedArr.length === props.goods.specs.length) {
112.         // 从路径字典中得到skuId
113.         const skuId = pathMap[selectedArr.join(spliter)][0]
114.         const sku = props.goods.skus.find(sku => sku.id === skuId)
115.         // 传递数据给父组件
116.         emit('change', {
117.           skuId: sku.id,
118.           price: sku.price,
119.           oldPrice: sku.oldPrice,
120.           inventory: sku.inventory,
121.           specsText: sku.specs.reduce((p, n) => `${p} ${n.name}：${n.valueName}`, '').trim()
122.         })
123.       } else {
124.         emit('change', {})
125.       }
126.     }
127.     return { clickSpecs }
128.   }
129. }
130. </script>
131. <template>
132.   <div class="goods-sku">
133.     <dl v-for="item in goods.specs" :key="item.id">
134.       <dt>{{ item.name }}</dt>
135.       <dd>
136.         <template v-for="val in item.values" :key="val.name">
137.           <img :class="{ selected: val.selected, disabled: val.disabled }" @click="clickSpecs(item, val)"
138.             v-if="val.picture" :src="val.picture" />
139.           <span :class="{ selected: val.selected, disabled: val.disabled }" @click="clickSpecs(item, val)" v-else>{{
140.               val.name
141.           }}</span>
142.         </template>
143.       </dd>
144.     </dl>
145.   </div>
146. </template>
149. <style scoped lang="scss">
150. @mixin sku-state-mixin {
151.   border: 1px solid #e4e4e4;
152.   margin-right: 10px;
153.   cursor: pointer;
155.   &.selected {
156.     border-color: $xtxColor;
157.   }
159.   &.disabled {
160.     opacity: 0.6;
161.     border-style: dashed;
162.     cursor: not-allowed;
163.   }
164. }
166. .goods-sku {
167.   padding-left: 10px;
168.   padding-top: 20px;
170.   dl {
171.     display: flex;
172.     padding-bottom: 20px;
173.     align-items: center;
175.     dt {
176.       width: 50px;
177.       color: #999;
178.     }
180.     dd {
181.       flex: 1;
182.       color: #666;
184.       >img {
185.         width: 50px;
186.         height: 50px;
187.         margin-bottom: 4px;
188.         @include sku-state-mixin;
189.       }
191.       >span {
192.         display: inline-block;
193.         height: 30px;
194.         line-height: 28px;
195.         padding: 0 20px;
196.         margin-bottom: 4px;
197.         @include sku-state-mixin;
198.       }
199.     }
200.   }
201. }
202. </style>

复制代码

这个就是index.vue的内容了。

---

2. export default function bwPowerSet (originalSet) {
3.   const subSets = []
5.   // We will have 2^n possible combinations (where n is a length of original set).
6.   // It is because for every element of original set we will decide whether to include
7.   // it or not (2 options for each set element).
8.   const numberOfCombinations = 2 ** originalSet.length
10.   // Each number in binary representation in a range from 0 to 2^n does exactly what we need:
11.   // it shows by its bits (0 or 1) whether to include related element from the set or not.
12.   // For example, for the set {1, 2, 3} the binary number of 0b010 would mean that we need to
13.   // include only "2" to the current set.
14.   for (let combinationIndex = 0; combinationIndex < numberOfCombinations; combinationIndex += 1) {
15.     const subSet = []
17.     for (let setElementIndex = 0; setElementIndex < originalSet.length; setElementIndex += 1) {
18.       // Decide whether we need to include current element into the subset or not.
19.       if (combinationIndex & (1 << setElementIndex)) {
20.         subSet.push(originalSet[setElementIndex])
21.       }
22.     }
24.     // Add current subset to the list of all subsets.
25.     subSets.push(subSet)
26.   }
28.   return subSets
29. }

复制代码

这个是power-set.js的内容了。

---

在组件内调用一下它，注意要给它通报对象的。
它还会给父组件回传一个对象sku

---

如图，父组件内调用了这个子组件（sku）
子组件会界说了一些方法，会回传给父组件一个sku对象。

如图，写的很清晰。通报数据给父组件。
因为，我们的父组件，将来要写一个参加购物车的按钮 操作。需要用到这个sku(信息）

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。