做过商城项目的小伙伴们,相信大家多多少少都会接触到规格选择这个模块,也就是所说的SKU。
公司最近在做一个下单系统,这里面就涉及到这个SKU,说实话之前我是没有写过这个的,刚开始也是有点迷茫把,不知道该如何下手,因为要考虑到后端那边返回的数据结构,库存,多规格等等问题,然后各种百度,各种搜集资料,才慢慢懂了其中的逻辑、下面我就简单写个演示吧。
首先逻辑得清晰
<李>定义一个数组把选中的值存储起来。
<李>定义一个对象存储要匹配的数据。
<李>把选中的值与存储的数据进行遍历查找与之匹配的值的库存,若库存为0按钮为灰色不能选择。
上代码秒懂哈哈
1。html
& lt; template>
& lt; div类=鞍皐rap-sku”比;
& lt; div类=安钒昂小北?
祝辞& lt; div class="产品内容”;
& lt; div类=v代表“product-delcom”=?ProductItem n)在simulatedDATA.specifications”比;
& lt; p> {{ProductItem.name}} & lt;/p>
& lt; ul类=" product-footerlist clearfix”比;
& lt;李v=" (oItem指数)在ProductItem.item”
v:点击=" specificationBtn oItem.name n事件,美元指数”
v-bind: class=" [oItem.isShow& # 63;”:“noneActive”,分指数[n]==指数# 63;“productActive”:“]”比;
{{oItem.name}}
& lt;/li>
& lt;/ul>
& lt;/div>
& lt; p v=凹鄹瘛眂lass=凹鄹瘛痹趝{价格}}& lt;円/p>
& lt;/div>
& lt; div类=皃roduct-footer”比;
& lt; a href=" javascript:“rel=巴獠縩ofollow”祝辞立即购买& lt;/a>
& lt;/div>
& lt;/div>
& lt;/div>
& lt;/template>
之前
2。js
& lt; script>
出口默认{
数据(){
返回{
simulatedDATA:{//模拟后台返回的数据多规格
“差异”:(
{//所有的规格可能情况都在这个数组里
“id”:“19”,
“价格”:“200.00”,
“股票”:“19”,
“差异”:“100年,白色”
},
{
“id”:“20”,
“价格”:“100.00”,
“股票”:“29”,
“差异”:“200年,白色”
},
{
“id”:“21”,
“价格”:“300.00”,
“股票”:“10”,
“差异”:“100年,黑色”
},
{
“id”:“22”,
“价格”:“900.00”,
“股票”:“0”,
“差异”:“200年,黑色”
},
{
“id”:“23”,
“价格”:“600.00”,
“股票”:“48”,
“差异”:“100年,绿色”
},
{
“id”:“24”,
“价格”:“500.00”,
“股票”:“40”,
“差异”:“200年,绿色”
},
{
“id”:“25”,
“价格”:“90.00”,
“股票”:“0”,
“差异”:“100年,蓝色”
},
{
“id”:“26”,
“价格”:“40.00”,
“股票”:“20”,
“差异”:“200年,蓝色”
}
),
“规范”:(
{//这里是要被渲染字段
“名称”:“尺寸”,
“项”:[
{
“名称”:“100”,
},
{
“名称”:“200”,
}
］
},
{
“名称”:“颜色”,
“项”:[
{
“名称”:“白色”,
},
{
“名称”:“蓝色”,
},
{
“名称”:“黑色”,
},
{
“名称”:“绿色”,
}
］
}
］
},
selectArr:[],//存放被选中的值
shopItemInfo:{},//存放要和选中的值进行匹配的数据
分指数:[],//是否选中因为不确定是多规格还是单规格,所以这里定义数组来判断
价格://选中规格的价钱
}
},
方法:{
specificationBtn:函数(项目、n、事件、索引){
var自我=;
如果(自我。selectArr [n] !=项目){
自我。selectArr [n]=项目;
自我。分指数[n]=指数;
其他}{
自我。selectArr [n]=" ";
自我。分指数[n]=1;//去掉选中的颜色
}
self.checkItem ();
},
checkItem:函数(){
var自我=;
var选项=self.simulatedDATA.specifications;
结果var=[];//定义数组储存被选中的值
我在选择(var) {
结果[我]=自我。selectArr[我]& # 63;自我。selectArr[我]:”;
}
我在选择(var) {
var=结果[我];//把选中的值存放到字符串去
在选项(var k[我].item) {
结果选择[我]=[我].item [k] . name;//赋值,存在直接覆盖,不存在往里面添加值
选择[我].item [k]。isShow=self.isMay(结果);//在数据里面添加字段isShow来判断是否可以选择
}
[我]=最后的结果;//还原,目的是记录点下去那个值,避免下一次执行循环时被覆盖
}
如果(this.shopItemInfo[结果]){
这一点。价格=this.shopItemInfo[结果]。价格| |”
}
自我。美元forceUpdate ();//重绘
},
isMay:函数(结果){
我在结果(var) {
如果结果[我]==" {
返回true;//如果数组里有为空的值,那直接返回现实
}
}
返回this.shopItemInfo[结果]。股票==0 & # 63;假:真;//匹配选中的数据的库存,若不为空返回真正的反之返回错误的
}
},
创建:函数(){
var自我=;
我在self.simulatedDATA.difference (var) {
self.shopItemInfo [self.simulatedDATA.difference[我]。区别]=self.simulatedDATA.difference[我];//修改数据结构格式,改成键值对的方式,以方便和选中之后的值进行匹配
}
self.checkItem ();
}
}
& lt;/script>
