庫存保有單位 （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>