sku 商品规格
刀刀
0字
0分钟
2026/8/16
工具类商品提供 SKU 规格搜索，每项分类都有几个选项，选择完相应的规格后会显示对应的图片、价格、库存数量等。
数据返回
查看后端返回的数据，根据后端返回的数据来做页面渲染与事件点击操作。
商品规格
后端返回一个数组对象，对象内返回相应的数据：
sku：相应的规格数组，后续用于判断选择的规格是否与之相等cover：该规格对应的商品图stock：该规格对应的库存salesPrice：该规格对应的售价goodsId：该规格商品id
型号
型号是数组对象的形式，通过 v-for 遍历渲染；子选项则遍历其属性 values 即可。
页面实现
先把页面布局实现。
本项目是使用 uview 组件库。根据效果图，使用的是 u-popup 弹出层，其分为上下两部分。
上部分显示商品相关规格信息以及当前用户已选择的规格。
下部分则根据规格与分类渲染布局。后续点击相应规格后保存其规格内容，根据数组内是否有该规格名称来动态添加类名。
vue
<view class="auto">
<view class="dtoList" v-for="(item, index) in props.data" :key="item.id">
<view class="name">{{item.name}}</view>
<view class="list">
<view
class="choseItem"
:class="{'active': choseNames.includes(childItem.name)}"
v-for="(childItem, childIndex) in item.values"
:key="childItem.id"
@click.stop="handleChoseFn(childItem, index)"
>
{{childItem.name}}</view
>
</view>
</view>
</view>选择规格
点击规格时做以下步骤：
- 传入名称与索引
- 判断当前索引是否有选择的内容，没有则存到数组对应的索引，有内容则判断内容是否相等，相等则删除该索引的规格，不等则替换内容
- 判断选择规格的数组长度与规格数组长度是否相等，相等则循环上图
goods数组，判断每一项的sku数据是否与选择的规格数组数据一致。一致则返回该数据对象
js
// 点击选项选择商品操作
const choseNames = ref([]) // 选中的名称
const btnWord = ref('请选择规格') // 按钮的文本
const choseId = ref('') // 最终选择的商品id
const handleChoseFn = (item, index) => {
// 如果该规格已选,则去除
if (choseNames.value[index] && item.name === choseNames.value[index]) {
choseNames.value[index] = ''
btnWord.value = '请选择规格'
} else {
// 未选择的情况下把该索引设为该值
choseNames.value[index] = item.name
if (choseNames.value.length === props.data.length) {
// 由于存在取消规格的情况，也存在用户从后面选起的可能，因此判断每一项都要有内容
if (
choseNames.value.includes(undefined) ||
choseNames.value.includes(null) ||
choseNames.value.includes('')
)
return
let obj = props.saleList.find((item) => {
let arr = JSON.parse(item.sku)
for (let i = 0; i < arr.length; i++) {
if (!choseNames.value.includes(arr[i])) break // 只要有一项没在sku数组内，就结束当前循环判断开始下一次的循环判断
// 长度一致且判断到最后一项（即全部相等）则返回该对象
if (arr.length === choseNames.value.length && i === arr.length - 1) {
return item
}
}
})
// 如果有数据，返回想要的数据
if (obj) {
showCover.value = obj.cover
showMoney.value = obj.salesPrice
showStock.value = obj.stock
btnWord.value = obj.stock ? '立即购买' : '库存不足'
choseId.value = obj.id
return
}
// 否则返回库存不足等占位符
btnWord.value = '库存不足'
showCover.value = '-'
showMoney.value = '-'
showStock.value = 0
}
}
}总结
主要思路为获取用户选择的规格，首先判断每一项是否有内容，只要有一项没有内容就 return 阻止后续操作。
如果三项都有值了，则判断选择的值是否在 sku 数组中，只要有一项不存在，直接 break 跳过当前循环，开始下一次的循环，都符合要求则返回相对应的数据。
如果循环结束都没有该规格，视为不存在该规格，提示库存不足即可。
贡献者
刀刀 duyidao
v_duyilin
平安喜乐