商城SKU没库存禁止点击

已于 2022-05-28 11:17:59 修改
阅读量599 收藏
点赞数
分类专栏： vue 文章标签： 前端 vue
于 2022-05-28 11:07:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Now_li/article/details/125015921
版权

在这里插入图片描述


<template>
    <div class="shop">
        <div>{{title}}</div>
        <div v-for="(item,index) in goodsTypeList" :key="item.id" class="shop-item">
            <div class="item-name">{{item.name}}</div>
            <div class="item-ul" >
                <div class="itme-ul-name" 
                v-for="(item1,index1) in item.propertyList" 
                :key="item1.id"
               :class="{'item-ul-name-active' : item1.selected, 'disabled': item1.disabled}"
                @click="handleClickSpecs1(item.id, item1.id, item1, index, index1)"
                >{{item1.name}}</div>
            </div>
        </div>
    </div>
</template>

<script>
  let orgdata = {
    "skus": [
      {
        "id": "f5eee18b8d5b4fc2b46a56e92abdb525",
        "stockAmmount": 7,
        "isPaymentAccpoints": 1,
        "isPaymentCurrency": 0,
        "isPaymentMixed": 0,
        "priceAccpoints": 1,
        "priceCurrency": 0,
        "mixedPriceAccpoints": 0,
        "mixedPriceCurrency": 0,
        "rebate": 100,
        "skusTypes": [
          {
            "id": "74fe546803e44a7c95bebfe56a29952d",
            "typeId": "21967fba6b574b479974e50720ad25fe",
            "typeName": "类别",
            "type": 2,
            "propertyId": "f40c3884e5e9422c973d31631a65ae64",
            "propertyName": "小",
            "property": 1
          },
          {
            "id": "78f98ee53ae549ceb2c18629152ff849",
            "typeId": "fe7f49a798794670be622e6b9d2f386a",
            "typeName": "尺寸",
            "type": 3,
            "propertyId": "02808ac287e8410f936a90167d82ee2b",
            "propertyName": "two",
            "property": 2
          },
          {
            "id": "91cefe600f40498bb5013deebb9c27be",
            "typeId": "547f76222d4d4f92a49de2e0bf6bd7ef",
            "typeName": "颜色",
            "type": 1,
            "propertyId": "c80cbe4c6cbf49f5b2822331768cd422",
            "propertyName": "绿色",
            "property": 2
          }
        ]
      },
      {
        "id": "383feb7947f14ce5b832bc8700e65c9e",
        "stockAmmount": 2,
        "isPaymentAccpoints": 1,
        "isPaymentCurrency": 0,
        "isPaymentMixed": 0,
        "priceAccpoints": 1,
        "priceCurrency": 0,
        "mixedPriceAccpoints": 0,
        "mixedPriceCurrency": 0,
        "rebate": 100,
        "skusTypes": [
          {
            "id": "1beed60c2eb244f89ad82806d343d468",
            "typeId": "fe7f49a798794670be622e6b9d2f386a",
            "typeName": "尺寸",
            "type": 3,
            "propertyId": "02808ac287e8410f936a90167d82ee2b",
            "propertyName": "two",
            "property": 2
          },
          {
            "id": "357fd7db1f5244e5b64f48a34bb581fa",
            "typeId": "21967fba6b574b479974e50720ad25fe",
            "typeName": "类别",
            "type": 2,
            "propertyId": "edac997ed2c54e41b1f3076fbd6e19f9",
            "propertyName": "中",
            "property": 2
          },
          {
            "id": "5c29a251e55a4b678fc4f8287cc560b5",
            "typeId": "547f76222d4d4f92a49de2e0bf6bd7ef",
            "typeName": "颜色",
            "type": 1,
            "propertyId": "c80cbe4c6cbf49f5b2822331768cd422",
            "propertyName": "绿色",
            "property": 2
          }
        ]
      },
      {
        "id": "905b10e1740e4be992d14cfc23a887a2",
        "stockAmmount": 4,
        "isPaymentAccpoints": 1,
        "isPaymentCurrency": 0,
        "isPaymentMixed": 0,
        "priceAccpoints": 1,
        "priceCurrency": 0,
        "mixedPriceAccpoints": 0,
        "mixedPriceCurrency": 0,
        "rebate": 100,
        "skusTypes": [
          {
            "id": "0a5f93d9ef1c486ba369dcb1fbd3aed9",
            "typeId": "fe7f49a798794670be622e6b9d2f386a",
            "typeName": "尺寸",
            "type": 3,
            "propertyId": "c76dc797eaae4d8eb360de8811a9ec7a",
            "propertyName": "one",
            "property": 1
          },
          {
            "id": "d920730c34644218b3d0bbc5fca5edf4",
            "typeId": "21967fba6b574b479974e50720ad25fe",
            "typeName": "类别",
            "type": 2,
            "propertyId": "f40c3884e5e9422c973d31631a65ae64",
            "propertyName": "小",
            "property": 1
          },
          {
            "id": "2afbe8a77d034de0a1655f9ad1a25b95",
            "typeId": "547f76222d4d4f92a49de2e0bf6bd7ef",
            "typeName": "颜色",
            "type": 1,
            "propertyId": "c80cbe4c6cbf49f5b2822331768cd422",
            "propertyName": "绿色",
            "property": 2
          }
        ]
      },
      {
        "id": "a440b0084e564d3e9d7c8b445bb7645e",
        "stockAmmount": 10,
        "isPaymentAccpoints": 1,
        "isPaymentCurrency": 0,
        "isPaymentMixed": 0,
        "priceAccpoints": 1,
        "priceCurrency": 0,
        "mixedPriceAccpoints": 0,
        "mixedPriceCurrency": 0,
        "rebate": 100,
        "skusTypes": [
          {
            "id": "12a4715b6730438888e88f302871245a",
            "typeId": "21967fba6b574b479974e50720ad25fe",
            "typeName": "类别",
            "type": 2,
            "propertyId": "f40c3884e5e9422c973d31631a65ae64",
            "propertyName": "小",
            "property": 1
          },
          {
            "id": "9063e1f1586f4a74b2f614039e8743c4",
            "typeId": "547f76222d4d4f92a49de2e0bf6bd7ef",
            "typeName": "颜色",
            "type": 1,
            "propertyId": "c80cbe4c6cbf49f5b2822331768cd422",
            "propertyName": "绿色",
            "property": 2
          },
          {
            "id": "ae38b9cf56d5408a809d6fbd1b902ee5",
            "typeId": "fe7f49a798794670be622e6b9d2f386a",
            "typeName": "尺寸",
            "type": 3,
            "propertyId": "d5660085ff8743d999f6ed3a497ec8b7",
            "propertyName": "three",
            "property": 3
          }
        ]
      },
      {
        "id": "9961364cc3494823aaf7699733393335",
        "stockAmmount": 15,
        "isPaymentAccpoints": 1,
        "isPaymentCurrency": 0,
        "isPaymentMixed": 0,
        "priceAccpoints": 1,
        "priceCurrency": 0,
        "mixedPriceAccpoints": 0,
        "mixedPriceCurrency": 0,
        "rebate": 100,
        "skusTypes": [
          {
            "id": "3335920f79914cfb8a39ae22b0802bc0",
            "typeId": "fe7f49a798794670be622e6b9d2f386a",
            "typeName": "尺寸",
            "type": 3,
            "propertyId": "c76dc797eaae4d8eb360de8811a9ec7a",
            "propertyName": "one",
            "property": 1
          },
          {
            "id": "34950de7059d4fffac485abb59a79381",
            "typeId": "21967fba6b574b479974e50720ad25fe",
            "typeName": "类别",
            "type": 2,
            "propertyId": "edac997ed2c54e41b1f3076fbd6e19f9",
            "propertyName": "中",
            "property": 2
          },
          {
            "id": "a82ff8d74d3d4a1ea454e4870cc68b64",
            "typeId": "547f76222d4d4f92a49de2e0bf6bd7ef",
            "typeName": "颜色",
            "type": 1,
            "propertyId": "c80cbe4c6cbf49f5b2822331768cd422",
            "propertyName": "绿色",
            "property": 2
          }
        ]
      },
      {
        "id": "bd3aeb3c7c854a80b88e7f82a5a78a1e",
        "stockAmmount": 8,
        "isPaymentAccpoints": 1,
        "isPaymentCurrency": 0,
        "isPaymentMixed": 0,
        "priceAccpoints": 1,
        "priceCurrency": 0,
        "mixedPriceAccpoints": 0,
        "mixedPriceCurrency": 0,
        "rebate": 100,
        "skusTypes": [
          {
            "id": "4fc8e61aa192463085578de92974b18b",
            "typeId": "21967fba6b574b479974e50720ad25fe",
            "typeName": "类别",
            "type": 2,
            "propertyId": "edac997ed2c54e41b1f3076fbd6e19f9",
            "propertyName": "中",
            "property": 2
          },
          {
            "id": "884f32b64a4b478bb01f93b40dfeb6fc",
            "typeId": "547f76222d4d4f92a49de2e0bf6bd7ef",
            "typeName": "颜色",
            "type": 1,
            "propertyId": "c80cbe4c6cbf49f5b2822331768cd422",
            "propertyName": "绿色",
            "property": 2
          },
          {
            "id": "f66109eccd934529a18026376fccfa7b",
            "typeId": "fe7f49a798794670be622e6b9d2f386a",
            "typeName": "尺寸",
            "type": 3,
            "propertyId": "d5660085ff8743d999f6ed3a497ec8b7",
            "propertyName": "three",
            "property": 3
          }
        ]
      },
      {
        "id": "5e094973bbaf41ce81b7b626174b0bbf",
        "stockAmmount": 8,
        "isPaymentAccpoints": 1,
        "isPaymentCurrency": 0,
        "isPaymentMixed": 0,
        "priceAccpoints": 1,
        "priceCurrency": 0,
        "mixedPriceAccpoints": 0,
        "mixedPriceCurrency": 0,
        "rebate": 100,
        "skusTypes": [
          {
            "id": "23d688678aaa42eebd3c04cceaa61bac",
            "typeId": "547f76222d4d4f92a49de2e0bf6bd7ef",
            "typeName": "颜色",
            "type": 1,
            "propertyId": "8ed34030c93c4dc29e43edb95e6cfca2",
            "propertyName": "橙色",
            "property": 1
          },
          {
            "id": "55649f0753464921b68b0017ce0010d7",
            "typeId": "21967fba6b574b479974e50720ad25fe",
            "typeName": "类别",
            "type": 2,
            "propertyId": "408fb530344a4a41b33932431638dcbb",
            "propertyName": "大",
            "property": 3
          },
          {
            "id": "d7248b12b7e847ca9be024ed3bb6d101",
            "typeId": "fe7f49a798794670be622e6b9d2f386a",
            "typeName": "尺寸",
            "type": 3,
            "propertyId": "d5660085ff8743d999f6ed3a497ec8b7",
            "propertyName": "three",
            "property": 3
          }
        ]
      },
      {
        "id": "60ce0a1f99e940dc82d041d36681111b",
        "stockAmmount": 9,
        "isPaymentAccpoints": 1,
        "isPaymentCurrency": 0,
        "isPaymentMixed": 0,
        "priceAccpoints": 1,
        "priceCurrency": 0,
        "mixedPriceAccpoints": 0,
        "mixedPriceCurrency": 0,
        "rebate": 100,
        "skusTypes": [
          {
            "id": "91faddf91e944cabadbda5c342430139",
            "typeId": "547f76222d4d4f92a49de2e0bf6bd7ef",
            "typeName": "颜色",
            "type": 1,
            "propertyId": "c80cbe4c6cbf49f5b2822331768cd422",
            "propertyName": "绿色",
            "property": 2
          },
          {
            "id": "207698d97e4247bb9747843d16e25750",
            "typeId": "21967fba6b574b479974e50720ad25fe",
            "typeName": "类别",
            "type": 2,
            "propertyId": "408fb530344a4a41b33932431638dcbb",
            "propertyName": "大",
            "property": 3
          },
          {
            "id": "3c69d3c73aa24cccbacaf805d71117fd",
            "typeId": "fe7f49a798794670be622e6b9d2f386a",
            "typeName": "尺寸",
            "type": 3,
            "propertyId": "d5660085ff8743d999f6ed3a497ec8b7",
            "propertyName": "three",
            "property": 3
          }
        ]
      },
      {
        "id": "f3c805d1959d413a86679955ae047ec5",
        "stockAmmount": 10,
        "isPaymentAccpoints": 1,
        "isPaymentCurrency": 0,
        "isPaymentMixed": 0,
        "priceAccpoints": 1,
        "priceCurrency": 0,
        "mixedPriceAccpoints": 0,
        "mixedPriceCurrency": 0,
        "rebate": 100,
        "skusTypes": [
          {
            "id": "00113d4b6046411cb8ff935b2743904b",
            "typeId": "fe7f49a798794670be622e6b9d2f386a",
            "typeName": "尺寸",
            "type": 3,
            "propertyId": "02808ac287e8410f936a90167d82ee2b",
            "propertyName": "two",
            "property": 2
          },
          {
            "id": "c13d8a4c7a18477fbe7027044d0393a0",
            "typeId": "547f76222d4d4f92a49de2e0bf6bd7ef",
            "typeName": "颜色",
            "type": 1,
            "propertyId": "c80cbe4c6cbf49f5b2822331768cd422",
            "propertyName": "绿色",
            "property": 2
          },
          {
            "id": "653d0e243bab45eaa5c83dc8206ee33e",
            "typeId": "21967fba6b574b479974e50720ad25fe",
            "typeName": "类别",
            "type": 2,
            "propertyId": "408fb530344a4a41b33932431638dcbb",
            "propertyName": "大",
            "property": 3
          }
        ]
      }
    ]
  };
  let goodType = [
    {
      "id": "547f76222d4d4f92a49de2e0bf6bd7ef",
      "type": 1,
      "name": "颜色",
      "propertyList": [
        {
          "id": "8ed34030c93c4dc29e43edb95e6cfca2",
          "property": 1,
          "name": "橙色"
        },
        {
          "id": "c80cbe4c6cbf49f5b2822331768cd422",
          "property": 2,
          "name": "绿色"
        }
      ]
    },
    {
      "id": "21967fba6b574b479974e50720ad25fe",
      "type": 2,
      "name": "类别",
      "propertyList": [
        {
          "id": "f40c3884e5e9422c973d31631a65ae64",
          "property": 1,
          "name": "小"
        },
        {
          "id": "edac997ed2c54e41b1f3076fbd6e19f9",
          "property": 2,
          "name": "中"
        },
        {
          "id": "408fb530344a4a41b33932431638dcbb",
          "property": 3,
          "name": "大"
        }
      ]
    },
    {
      "id": "fe7f49a798794670be622e6b9d2f386a",
      "type": 3,
      "name": "尺寸",
      "propertyList": [
        {
          "id": "c76dc797eaae4d8eb360de8811a9ec7a",
          "property": 1,
          "name": "40"
        },
        {
          "id": "02808ac287e8410f936a90167d82ee2b",
          "property": 2,
          "name": "41"
        },
        {
          "id": "d5660085ff8743d999f6ed3a497ec8b7",
          "property": 3,
          "name": "42"
        }
      ]
    }
  ]

  export default {
    name: "Detail",
    data() {
      return {
        maskVisible: true,
        skuList: [],
        lastCheckedSku: {}, // 选中的sku信息
        buyNumber: 1, // 购买数量
        sku: null,
        currentSkuList: [],
        valueIdSortAndIndex: [],
        goodsTypeList: [],
        selectItemList: [],
        title:'选择规格属性'
      }
    },
    mounted() {
      this.init();
      // 获取所有的规格
      this.getShopGoodsType()
      //获取库存
      this.initGoodType()
    },
    methods: {
         init() { 
            let valueIdSortAndIndex = [];
            let currentSkuList = orgdata.skus.map((item,index) => {
            let valueIdSort = [];
            item.skusTypes.map(skusTypesItem=>{
                valueIdSort.push(skusTypesItem.propertyId)
            });
            /*
            将sku规格值的ID，即 propertyId，组成一个数组并且字典排序，以及将该sku所对应的index存入数组，供点击后查询sku*/
            valueIdSortAndIndex.push({valueIdSort: valueIdSort.sort()})
            return item.skusTypes
            });

            this.$set(this.$data, 'currentSkuList', currentSkuList);
            this.$set(this.$data, 'valueIdSortAndIndex', valueIdSortAndIndex);
        
        },
        
        // 获取所有的规格
        getShopGoodsType() {
            // goodType 为接口返回数据
            goodType.forEach(items=>{
            items.propertyList.forEach(item=>{
                item.selected = false;
                item.disabled = true;
            })
            })
            this.goodsTypeList = goodType;
        },
        // 初始化 判断 是否有库存
        initGoodType(){
            let currentSkuList = this.currentSkuList.flat(Infinity);
            this.goodsTypeList.forEach(items=>{
            items.propertyList.forEach(item=>{
                for(var i=0; i<currentSkuList.length; i++){
                if (item.id == currentSkuList[i].propertyId) {
                    item.disabled = false;
                    break;
                }
                }
            })
            })
        },
        // 选择每个规格，判断对应的库存
        handleClickSpecs1(grounpId, id, el, index, i){
            let selectItemList = this.selectItemList; // 已选规格
            if (el.disabled) {
            return;
            }
            // 处理selected的逻辑
            if (!el.selected) {
                this.goodsTypeList[index].propertyList.forEach(item=>{
                    item.selected = false;
                })
                this.goodsTypeList[index].propertyList[i].selected = true;
                // 选中项中有同组元素，替换
                selectItemList.forEach((item, x_selected_index) => {
                    if (item.index === index) {
                    selectItemList.splice(x_selected_index, 1)
                    }
                });
                selectItemList.push({grounpId, id, index, i});
            }else  {
                // 取消选中并删除选中项中数据
                this.goodsTypeList[index].propertyList[i].selected = false;
                selectItemList.forEach((item, x_selected_index) => {
                    if (item.id === id && item.grounpId === grounpId) {
                    selectItemList.splice(x_selected_index, 1);
                    }
                });
            }
            this.$set(this.$data, 'selectItemList', selectItemList)

            // // 取出组ID
            let x_selected_grounpIds = [];
            selectItemList.forEach(item=>{
                x_selected_grounpIds.push(item.grounpId);
            });
            // 处理disabled的逻辑
            if (selectItemList.length == 0) {
            // 选中属性为空，重新初始化数据
            this.initGoodType();
            } else {
            //拿所有规格属性（即goodsTypeList）的每一项分别与已选中的数据（即selectItemList）的每一项，组成一个比较项，与现有库存比较，找到存在的可点项
                this.goodsTypeList.forEach((goodsType,goodsTypeIndex)=>{
                    goodsType.propertyList.forEach((prop, propIndex)=>{
                        if (!prop.selected) {
                            prop.disabled = true;
                        }
                        // 本次循环数据
                        let push_data = {grounpId: goodsType.id, id: prop.id, index: goodsTypeIndex, i: propIndex}
                        if (x_selected_grounpIds.indexOf(goodsType.id) > -1 ){
                            // 当前循环的规格的组ID在已选规格中，删除同组规格，用当前规格替换后去与库存比较
                            let sel = selectItemList.slice(); // 用一个新变量接受数据，防止修改源数据
                            let index_splice = x_selected_grounpIds.indexOf(goodsType.id);
                            sel.splice(index_splice, 1, push_data);
                            this.optionsHandle(sel, push_data)
                        } else {
                        //  当前循环规格组ID不在已选规格中，添加当前规格到复制出来的已选数组中，循环比较
                            let sel = selectItemList.slice();
                            sel.push(push_data);
                            this.optionsHandle(sel, push_data)
                        }
                    })
                })
            }
        },
        optionsHandle(selArr, push_data){
            let propertyIds = []
            // 将当前比较项的属性ID提取
            selArr.map(item=>{
              propertyIds.push(item.id)
            });
            // 在现有库存中查找是否有可选项，可选的置为可点击
            this.valueIdSortAndIndex.map(item=>{
              if (this.isContained(item.valueIdSort, propertyIds)){
                  this.goodsTypeList[push_data.index].propertyList[push_data.i].disabled = false;
              }
            });
        },
         isContained(aa, bb) {
            //判断aa数组是否 全 包含bb数组
            if(!(aa instanceof Array)
                ||!(bb instanceof Array)
                ||(aa.length<bb.length)
            ){
            return false;
            }
            let aaStr = aa.toString();
            for(var i=0;i<bb.length;i++){
              if(aaStr.indexOf(bb[i])<0){
                  return false;
              }
            }
            return true;
        },
    }
  };
</script>


<style scoped>
.shop{
    margin: 50px 0  0 30px;
}
.shop-item{
    padding-top: 20px;
}
.item-name{
    font-size: 14px;
    margin-bottom: 20px;
}
.item-ul{
    display: flex;
    flex-wrap: wrap;

}
.itme-ul-name{
    padding: 0 20px;
    border-radius: 10px;
    background: #eeeeee;
    margin-right: 10px;
    height: 40px;
    line-height: 40px;
}
.item-ul-name-active{
    background: #2F8EED !important;
		color: #FFFFFF;
}
.disabled{
    opacity: 0.1;
}
</style>
Now_li
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue sku没库存置灰
weixin_44714325的博客
09-07 597
返回已有库存组合好的 <template> <div class="shop"> <div>{{title}}</div> <div v-for="(item,index) in goodsTypeList" :key="item.id" class="shop-item"> <div class="item-name">{{item.name}}</div&gt.
商品sku规格选择效果，没有商品的不能选中，选择顺序不影响展示结果
weixin_30414635的博客
06-01 696
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>商品SKU选择DEMO</title> </head> <body> <style type="text/css"&g...
购物商城，规格选择，无货的规格置灰计算方法
zhi890701的博客
09-09 1274
测试java文件链接 购物类商城，选择规格的时候，有些规格因为没货，需要置灰，下面是我使用的计算方法，供大家参考。 原理：每一组的可选规格，由其他组的选中规格决定，意思就是，第一组的可选规格，由其他第二组、第三组.....的选中情况决定。 假如：某衣服有如下规格（）中为规格id，计算方法用到： 颜色：黑色（1）、白色（2）、红色（3） 尺码：L（4）、XL（5）、XXL（6） 样式：修身（...
前端实现商品联级选择禁用（附带一个表情包插件）
zjx164的博客
07-13 256
前端实现淘宝商品联级选择禁用
微信小程序实现电商平台中的添加商品规格
sdfujichao的博客
06-05 9599
在电商平台中肯定少不了添加商品规格的功能。如图：就是一个商品里边有很多给个好多个属性。之前用JQ的时候还是比较容易写出来的。因为在JQ中可以直接操作dom，直接对dom进行属性添加等处理，可以把每个元素的属性用自定义属性的方式记录在本元素上。现在用微信小程序写这个东西就开始头疼了。因为没有办法直接操作dom，也没办法获取一个元素的上下级dom，哎，每个元素都是孤立存在的，这就略显尴尬了。不过还是有...
商城sku设计.md
08-11
商品多规格设计
商城sku之数据表设计
08-22
主要是描述了一些关于sku方面的知识点，还加入数据表的设计结构，主要针对产品方面的多规格设计结构，从而实现了目前市场主流的商品sku设计。
购物商城SPU-SKU数据库设计.sql
05-16
购物商城SPU、SKU的数据库设计，所属MYSQL数据库，可将设计思想用于其他数据库。可用于B2B、B2C网站类型电子商务的项目。
动态SKU库存表格layui实例.zip
最新发布
10-05
动态SKU库存表格layui实例.zip
vue+element实现sku表格
02-12
vue编写，基于elementUI实现的商品库存表格，添加属性和规格，自动生成对应表格
电商领域Sku属性选择问题解决方案
搬砖填坑记
07-16 3035
定义 sku:可以直接售卖的商品 spu:同一类具有统一特性的商品集合 example: spu: 华为 Mate 30 Pro 5G sku: - 华为 Mate 30 Pro 5G 黑色 6G 256G - 华为 Mate 30 Pro 5G 银色 6G 256G - 华为 Mate 30 Pro 5G 黑色 8G 256G - 华为 Mate 30 Pro 5G 银色 8G 256G - 华为 Mate 30 Pro 5G 黑色 8G 512G - 华为 Mate 30 Pro 5G 银色 8G 51
vue商品sku属性选择（记录一次开发经验和思路）
qq_34685515的博客
09-30 1061
需求：（部分打码）不能点击的按钮变灰色 目标：1.获取后台数据，添加状态,当前sku为选中状态，匹配组合表没有匹配则按钮为变灰色，每次点击计算出其他没有匹配上数据的变灰色， 数据：1.整一页面可选则数据(因为首次进来全部能点击), 2.匹配组合表 由数组和数组中string类型组成 思路：1.步匹配组合表 --用split分隔符 string 转数组 此表记录所有能组合成类型的条目 2.把匹配组合变转换二维数组，[ [],[],[],[] ], (匹配组合表,根据每一列组合成一个数...
js 将图片置灰_将图片转换成黑白(灰色)的css和js的方法
weixin_39595430的博客
02-17 1434
我们在做网站前端时，有时会碰到需要将图片变成黑白或者灰色的需求，比如商品缺货时，将图片置成灰色是一个很好的用户体验。那么如何将图片转换成黑白呢？我们通过程序调用不同的图片就很容易实现，但这种做法的缺点是同一种图片需要制作两张图片，一种是正常的图片，一种是灰色的图片。这样势必很繁琐。今天给大家介绍的是通过CSS来实现这一效果。实现的方式主要有以下几种：CSS3 greyscale 滤镜实现css代码...
商品规格可选怎么设计_分分钟学会前端sku算法（商品多规格选择）
weixin_39540725的博客
11-11 3455
相信大家看到这张图片就知道我们这篇文章要讲什么了，没错就是-商品多规格选择的解法。近来在掘金上面看见大家都在研究“商品多规格选择”的问题，例如晨曦大佬的前端电商 sku 的全排列算法很难吗？学会这个套路，彻底掌握排列组合。 在这篇文章里面，大佬写明了如何实现sku的全排列，思路非常的棒，但是并没有紧贴业务场景。真正的业务场景是，我们要根据用户每一次选择的规格，找出剩下可选的规格和不可选的规格，表现...
前端商品多规格选择问题 SKU 算法实现
weixin_44589540的博客
01-06 8936
文章目录一、实现效果二、实现过程详解1.什么是sku2.什么是图3.什么是邻接矩阵4.初始化顶点集和空邻接矩阵5.邻接矩阵赋值6.判断 attribute 是否可选三、Vue源码四、优化修复bug五、总结 一、实现效果 以一个简单的示例说明：容量有1L、4L两种，颜色有红色、黑色两种，其中1L可选红色/黑色，而4L只有红色规格，不可选黑色，同时，选择了黑色，也不能选择4L。实现效果如下所示（仅做示例，样式粗糙不管啦）： 二、实现过程详解 1.什么是sku 这是商品多规格选择问题，接口返回的数据较为复杂，是
uniapp实现选择商品规格，禁用没有库存的规格
kkltWW的博客
03-23 795
{"skuId":671,"price":1799.0,"oriPrice":1799.0,"stocks":99,"skuName":"8+128GB 黑 ","pic":null,"properties":"内存:8+128GB;机身颜色:黑"}{"skuId":672,"price":1999.0,"oriPrice":1999.0,"stocks":99,"skuName":"8+256GB 黑 ","pic":null,"properties":"内存:8+256GB;需要把数据处理成这样。
Vue实现SKU的界面选择
weixin_43581181的博客
04-14 2337
Vue实现SKU的界面选择预览快速使用实现思路1.根据商品数组生产要展示的数组2.处理点击事件（核心事件）后记 预览 快速使用 github：https://github.com/Guosugaz/kun-vue-sku npm i -S kun-vue-sku import Vue from "vue"; import VueSku from "kun-vue-sku"; Vue.use(...
vue的sku前端实现(商城选择规格)
帆酱的博客
03-06 5144
库存保有单位 （Stock keeping Unit 或者SKU）是对每一个产品和服务的唯一标示符，该系统的使用SKU的值根于数据管理，使公司能够跟踪系统，如仓库和零售商店或产品的库存情况。 在开发商城时，我们需要对商品的sku进行判断，当用户选择完一个规格后，去判断剩下的未选规格是否继续选择，可提高用户体验。 线上demo：https://my.weblf.cn/alone_page/pag...
vue 实现商品规格选择(sku)
GuAng
12-23 4203
动手之前要先确定自己的商品数据结构，下面是我的商品数据结构 dataInfo: { attr: [ { attr_name: "码数", attr_value: [{attr: "40"}, {attr: "50"}], attr_values: ["40", "50"], }, { attr_name: "颜色",...
商城sku测试用例怎么写
04-24
写商城sku测试用例时，需要考虑以下几个方面： 1. SKU属性测试：测试每个SKU属性是否正确填写，例如SKU名称、SKU单价、SKU库存等。 2. SKU组合测试：测试SKU属性的组合是否正确，例如测试不同颜色和尺码的商品是否正确组合。 3. SKU库存测试：测试SKU库存是否正确，包括测试库存数量、库存变化等。 4. SKU价格测试：测试SKU价格是否正确，包括测试销售价格、促销价格、折扣价格等。 5. SKU图片测试：测试SKU图片是否正确，包括测试图片格式、图片大小、图片清晰度等。 6. SKU搜索测试：测试SKU搜索功能是否正确，包括测试搜索关键字、搜索结果、搜索排序等。 7. SKU下单测试：测试SKU下单功能是否正确，包括测试下单流程、订单金额、订单数量等。 总之，商城SKU测试用例的编写需要综合考虑SKU的各个方面，确保产品质量和用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值