没有合适的资源?快使用搜索试试~ 我知道了~
做过商城项目的小伙伴们,相信大家多多少少都会接触到规格选择这个模块,也就是所说的SKU。 公司最近在做一个下单系统,这里面就涉及到这个SKU,说实话之前我是没有写过这个的,刚开始也是有点迷茫把,不知道该如何下手,因为要考虑到后端那边返回的数据结构、库存、多规格等等问题,然后各种百度,各种搜集资料,才慢慢懂了其中的逻辑,下面我就简单写个demo吧。 首先逻辑得清晰 定义一个数组把选中的值存储起来。 定义一个对象存储要匹配的数据。 把选中的值与存储的数据进行遍历查找与之匹配的值的库存,若库存为0按钮为灰色不能选择。 上代码 秒懂 哈哈 1.html <template> <
资源推荐
资源详情
资源评论
使用使用vue实现多规格选择实例(实现多规格选择实例(SKU))
做过商城项目的小伙伴们,相信大家多多少少都会接触到规格选择这个模块,也就是所说的SKU。
公司最近在做一个下单系统,这里面就涉及到这个SKU,说实话之前我是没有写过这个的,刚开始也是有点迷茫把,不知道该如何下手,因
为要考虑到后端那边返回的数据结构、库存、多规格等等问题,然后各种百度,各种搜集资料,才慢慢懂了其中的逻辑,下面我就简单写个
demo吧。
首先逻辑得清晰
定义一个数组把选中的值存储起来。
定义一个对象存储要匹配的数据。
把选中的值与存储的数据进行遍历查找与之匹配的值的库存,若库存为0按钮为灰色不能选择。
上代码 秒懂 哈哈
1.html
<template>
<div class="wrap wrap-sku">
<div class="product-box">
<div class="product-content">
<div class="product-delcom" v-for="(ProductItem,n) in simulatedDATA.specifications">
<p>{{ProductItem.name}}</p>
<ul class="product-footerlist clearfix">
<li v-for="(oItem,index) in ProductItem.item"
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>
</template>
2.js
<script>
export default {
data() {
return {
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": "23",
"price": "600.00",
"stock": "48",
"difference": "100,绿色"
},
{
"id": "24",
"price": "500.00",
"stock": "40",
"difference": "200,绿色"
},
{
资源评论
weixin_38663151
- 粉丝: 3
- 资源: 897
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功