sku的处理电商SKU

置顶厚渡

已于 2022-11-07 14:50:17 修改

阅读量6.2k

点赞数 3

分类专栏： javaScript 数据结构数据算法文章标签： javascript 前端 html

于 2021-04-24 20:34:26 首次发布

本文链接：https://blog.csdn.net/dwp_wz/article/details/116103930

版权

javaScript 同时被 2 个专栏收录

21 篇文章 2 订阅

订阅专栏

数据结构数据算法

12 篇文章 0 订阅

订阅专栏

sku的处理

sku电商项目，里面的规格之类。

在没有想法的时候写着确实费劲。

完成后的效果

在这里插入图片描述

文件路劲示意图

在这里插入图片描述

html文件

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sku</title>
    <link rel="stylesheet" href="./css/index.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="./js/data.js"></script>
    <script src="./js/sku.js"></script>

</head>
<body>
    <h1 style="text-align: center;">sku</h1>
    <div id="app">
        <!-- <div class="item">
            <div class="title">color:</div>
            <div class="tag">pink</div>
            <div class="tag">pink</div>
            <div class="tag">pink</div>
        </div> -->
    </div>
    <h2 style="text-align: center;">修改数据</h2>
    <div class="json-data">
        <textarea id="fwb"></textarea>
        <button id="ok">确认</button>
    </div>
</body>
</html>

css代码

css/index.css

#app {
    width: 600px;
    padding-top: 100px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
#app .item {
    display: flex;
    margin: 10px 0;
}
#app .item .title {
    font-size: 20px;
    font-weight: 700;
    width: 100px;
}

#app .item .tag {
    border: solid 1px #000;
    border-radius: 5px;
    padding: 3px 10px;
    margin: 10px;
    cursor: pointer;
    /* 不让文字双击选中 */
    user-select: none;
}
#app .item .tag.active {
    background-color: pink;
}
#app .item .tag.noactive {
    background-color: #ccc;
}

/* 扩展 */
.json-data {
    margin-top: 30px;
    width: 700px;
    height: 400px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
.json-data #fwb {
    height: 300px;
    width: 700px;
    font-size: 20px;
}
.json-data #ok {
    width: 100px;
    height: 40px;
    background-color: #007ACC;
    border: none ;
    color: #fff;
}

js代码

js/sku.js

/***
 * 创建dom
 * el           ->  标签类型
 * className    ->  class
 */
function createDOM(obj) {
  obj = { ...{ el: "div", className: "", innerText: "" }, ...obj };
  let el = document.createElement(obj.el);
  if (obj.className !== "") el.className = obj.className;
  if (obj.innerText !== "") el.innerText = obj.innerText;
  return el;
}

window.onload = () => {
  let app = document.querySelector("#app");
  //   选中的内容
  let active = {};

  //   获取数据 产品 某一项规格 的所有选项
  function handleSky(arr, key) {
    let retArrs = [];
    arr.forEach((item) => {
      if (!retArrs.includes(item[key])) retArrs.push(item[key]);
    });
    return retArrs;
  }

  //  页面展示数据 处理数据
  function handleData(arr, obj) {
    let skuKeyArr = [];
    for (let item in obj) {
      // 递归 拿到所有产品的选项
      let obj = { key: item, arr: handleSky(arr, item) };
      skuKeyArr.push(obj);
    }
    return skuKeyArr;
  }

  //   渲染dom
  function viewDom(data) {
    data = { ...{ SkuDataArr: [] }, ...data };
    //   清除dom
    app.innerHTML = "";
    data.arr.forEach((ite) => {
      let items = createDOM({ className: "item" });
      let title = createDOM({
        className: "title",
        innerText: skuKeyObj[ite.key],
      });
      items.appendChild(title);
      ite.arr.forEach((el) => {
        let tag = createDOM({ className: "tag", innerText: el });
        tag.setAttribute("data-lei", ite.key);

        // 添加点击事件
        tag.onclick = selectTag;
        
        // 重置所有选项
        if (data.SkuDataArr.length == 0) {
          tag.className = "tag";
          tag.setAttribute("data-disabled", false);
        } else {
          tag.className = "tag noactive";
          tag.setAttribute("data-disabled", true);
        }
        let boo = true;
        for (let index = 0; index < data.SkuDataArr.length; index++) {
          const element = data.SkuDataArr[index];
          if (element[ite.key] == el && boo) {
            tag.className = "tag";
            tag.setAttribute("data-disabled", false);
            boo = false;
          }
        }

        // 判断选中的
        if (data.active && data.active[ite.key] == el)
          tag.className = "tag active";

        items.appendChild(tag);
      });
      app.appendChild(items);
    });
    //   结账
    // 处理新的skuData
    if (data.SkuDataArr.length == 1) {
      let items = createDOM({ className: "item" });
      items.appendChild(
        createDOM({
          className: "title",
          innerText: "结账",
        })
      );
      items.appendChild(
        createDOM({
          className: "p",
          innerText: `共${data.SkuDataArr[0].price}元`,
        })
      );
      app.appendChild(items);
    }
  }


  //   点击选中
  function selectTag(e) {
    if (e.target.dataset.disabled == "true") return;
    if (active[e.target.dataset.lei] == e.target.innerText) {
      delete active[e.target.dataset.lei];
    } else {
      active[e.target.dataset.lei] = e.target.innerText;
    }
    let SkuDataArr = retHandleSkuData(active, skuData);

    // 渲染页面
    viewDom({
      arr: handleData(skuData, skuKeyObj),
      active: active,
      SkuDataArr: SkuDataArr,
    });
    return;
  }

  //   处理skuData数据
  function retHandleSkuData(obj, arr) {
    let arrCy = []; // 存过滤后的数据
    let retArr = JSON.parse(JSON.stringify(arr)); // 要返回的数据  完整数据  后续过滤ok的数据 预备准备多次过滤
    for (let key in obj) {
      retArr.forEach((el) => {
        if (el[key] == obj[key]) {
          arrCy.push(el);
        }
      });
      retArr = JSON.parse(JSON.stringify(arrCy));
      arrCy = [];
    }
    return retArr;
  }

  viewDom({ arr: handleData(skuData, skuKeyObj), active: active });


  // ------------------------------扩展-------------------------
  let fwb = document.querySelector("#fwb");
  let ok = document.querySelector("#ok");
  console.dir(fwb)
  fwb.value = JSON.stringify(skuData);
  ok.onclick = function (e) { 
    skuData = JSON.parse(fwb.value);
    viewDom({ arr: handleData(skuData, skuKeyObj), active: active });
  }
};

js数据

js/data.js

let skuData = [
  { color: "red", name: "小米5", internal: "4G", price: 1999 },
  { color: "red", name: "小米5", internal: "6G", price: 2991 },
  { color: "red", name: "小米5", internal: "8G", price: 3992 },
  { color: "red", name: "小米6", internal: "4G", price: 4993 },
  { color: "red", name: "小米6", internal: "6G", price: 5994 },
  { color: "red", name: "小米6", internal: "8G", price: 6995 },

  // { color: "pink", name: "小米5", internal: "4G", price: 1996 },
  // { color: "pink", name: "小米5", internal: "6G", price: 2997 },
  // { color: "pink", name: "小米5", internal: "8G", price: 3998 },
  // { color: "pink", name: "小米6", internal: "4G", price: 4999 },
  // { color: "pink", name: "小米6", internal: "6G", price: 5991 },
  { color: "pink", name: "小米6", internal: "8G", price: 6992 },

  { color: "black", name: "小米5", internal: "4G", price: 1993 },
  { color: "black", name: "小米5", internal: "6G", price: 2994 },
  // { color: "black", name: "小米5", internal: "8G", price: 3995 },
  // { color: "black", name: "小米6", internal: "4G", price: 4996 },
  // { color: "black", name: "小米6", internal: "6G", price: 5997 },
  // { color: "black", name: "小米6", internal: "8G", price: 6998 },
];

const skuKeyObj = {
  color: "颜色",
  name: "型号",
  internal: "配置",
};

最后

这种写法主要是提供一个思路，不是很成熟。仅仅供给大家学习之用。
喜欢就点赞收藏。

厚渡

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
5
评论
sku的处理电商SKU

sku的处理sku电商项目，里面的规格之类。在没有想法的时候写着确实费劲。完成后的效果文件路劲示意图html文件index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpor
复制链接

扫一扫