库存保有单位 （Stock keeping Unit 或者SKU）是对每一个产品和服务的唯一标示符，该系统的使用SKU的值根于数据管理，使公司能够跟踪系统，如仓库和零售商店或产品的库存情况。
在开发商城时，我们需要对商品的sku进行判断，当用户选择完一个规格后，去判断剩下的未选规格是否继续选择，可提高用户体验。
线上demo：https://my.weblf.cn/alone_page/pages/sku.html
页面效果截图：
主页面全部代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no,target-densitydpi=400" >
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title>vue的sku前端实现(商城选择规格)</title>
<link rel="stylesheet" href="../statics/css/reset.css" id='reset'>
<link rel="stylesheet/less" type="text/css" href="../statics/css/sku.less?ver=1">
<script type="text/javascript" src="../statics/js/public.js?ver=2" id='public'></script>
<script type="text/javascript" src="../statics/js/less2.5.3.min.js" id='less'></script>
<script type="text/javascript" src="../statics/js/vue2.6.11.js"></script>
<!-- mint-ui -->
<link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
<script src="https://unpkg.com/mint-ui/lib/index.js"></script>
</head>
<body>
<div id="app" v-cloak :style="{'padding-top':isWeiXin?'0rem':'3rem'}">
<!-- 头部 -->
<div class="now_page_head" ref="now_page_head" v-if="!isWeiXin">
vue的sku前端实现(商城选择规格)
<img src="../statics/images/back.png" class="back"/>
</div>
<!-- 页面的主要内容 -->
<section class="content">
<div class="wrap wrap-sku">
<div class="product-box">
<!-- 库存 -->
<div class="stock_box">
<p class="stock_box_title">库存状态</p>
<p class="stock_info" v-for="(item,index) in simulatedDATA.difference">
<span>{{item.difference}}：</span>
<span>{{item.stock}}</span>
</p>
</div>
<!-- 规格选择区 -->
<div class="product-content">
<div class="product-delcom" v-for="(ProductItem,n) in simulatedDATA.specifications" :key="n">
<p>{{ProductItem.name}}</p>
<ul class="product-footerlist clearfix">
<li
v-for="(oItem,index) in ProductItem.item"
:key="index"
v-on:click="specificationBtn(oItem.name,n,$event,index)"
v-bind:class="[oItem.isShow?'':'noneActive',subIndex[n] == index?'productActive':'']"
>{{oItem.name}}</li>
</ul>
</div>
<p v-if="price" class="price">¥{{price}}</p>
</div>
<div class="product-footer">
<a href="javascript:" rel="external nofollow">立即购买</a>
</div>
</div>
</div>
</section>
<!-- 页面结束 -->
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
showSpinner: false,
isWeiXin: window.TS_WEB.isWeiXin,
isApps: window.TS_WEB.isApp,
simulatedDATA: {
//模拟后台返回的数据 多规格
difference: [
//所有的规格可能情况都在这个数组里
{
id: "19",
price: "200.00",
stock: "19", //库存
difference: "100,白色"//此规格的属性键值
},
{
id: "20",
price: "100.00",
stock: "29",
difference: "200,白色"
},
{
id: "21",
price: "300.00",
stock: "10",
difference: "100,黑色"
},
{
id: "22",
price: "900.00",
stock: "0",
difference: "200,黑色"
},
{
id: "25",
price: "90.00",
stock: "0",
difference: "100,蓝色"
},
{
id: "26",
price: "40.00",
stock: "20",
difference: "200,蓝色"
}
],
//展示给用户看的规格
specifications: [
{
//这里是要被渲染字段
name: "尺寸",
item: [
{
name: "100"
},
{
name: "200"
}
]
},
{
name: "颜色",
item: [
{
name: "白色"
},
{
name: "蓝色"
},
{
name: "黑色"
}
]
}
]
},
selectArr: [], //存放被选中的值
shopItemInfo: {}, //存放要和选中的值进行匹配的数据
subIndex: [], //是否选中 因为不确定是多规格还是单规格，所以这里定义数组来判断
price: "" //选中规格的价钱
},
components: {},
computed: {},
methods: {
//手动点击选择
specificationBtn: function(item, n, event, index) { //属性值、规格项、
var self = this;
if (self.selectArr[n] != item) {
self.selectArr[n] = item; //当前规格选中,赋值为小项的名字(蓝色，黑色)
self.subIndex[n] = index; //设置此项为选中
} else {
self.selectArr[n] = "";
self.subIndex[n] = -1; //去掉选中的颜色
}
self.checkItem();
},
//处理已选择列表
checkItem: function() {
var self = this;
var option = self.simulatedDATA.specifications;
var result = []; //定义数组储存被选中的值
for (var i in option) {
//初始化被选中的数组，如果此类别没被选中，则赋值为空，如果有3个类别，则数组长度为3
result[i] = self.selectArr[i] ? self.selectArr[i] : "";
}
//便利每个类别的每个小项
for (var i in option) {
var last = result[i]; //把选中的值存放到字符串last去
for (var k in option[i].item) {
result[i] = option[i].item[k].name; //获取每个小项的值(如：红色、蓝色)，并临时存放于result[i]，存在直接覆盖，不存在往里面添加name值
option[i].item[k].isShow = self.isMay(result); //result数组每一次修改都将计算一次是否可以选择，添加字段isShow来判断是否可以选择
}
result[i] = last; //还原，目的是记录点下去那个值，避免下一次执行循环时被覆盖
}
//如果可获取sku，则显示当前sku价格
if (this.shopItemInfo[result]) {
this.price = this.shopItemInfo[result].price || "";
}
self.$forceUpdate(); //重绘
},
//判断每个小项是否可以选择
isMay: function(result) {
for (var i in result) {
if (result[i] == "") {
return true; //如果数组里有为空的值，则表示未被全部选择，无法获取sku，直接返回true
}
}
//result选满，可获取sku，根据初始化时shopItemInfo的difference[i].difference键值对(200,蓝色)可获取sku信息
return this.shopItemInfo[result].stock == 0 ? false : true; //匹配选中的数据的库存，若不为空返回true反之返回false
}
},
created() {
document.title='vue的sku前端实现(商城选择规格)'
let obj={}
//便利sku
for (var i in this.simulatedDATA.difference) {
//修改数据结构格式，改成键值对的方式，以方便和选中之后的值进行匹配
//键：由属性拼接而成，值：相对应sku的信息
obj[this.simulatedDATA.difference[i].difference] = this.simulatedDATA.difference[i];
}
//赋值给全局变量
this.shopItemInfo=obj
this.checkItem()
}
})
</script>
</html>