JavaScript中完成渲染购物车案例

需求：根据提供的数据渲染购物车页面。如下图所示。

 

1.准备css和html

* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      .list {
        width: 990px;
        margin: 100px auto 0;
      }

      .item {
        padding: 15px;
        transition: all 0.5s;
        display: flex;
        border-top: 1px solid #e4e4e4;
      }

      .item:nth-child(4n) {
        margin-left: 0;
      }

      .item:hover {
        cursor: pointer;
        background-color: #f5f5f5;
      }

      .item img {
        width: 80px;
        height: 80px;
        margin-right: 10px;
      }

      .item .name {
        font-size: 18px;
        margin-right: 10px;
        color: #333;
        flex: 2;
      }

      .item .name .tag {
        display: block;
        padding: 2px;
        font-size: 12px;
        color: #999;
      }

      .item .price,
      .item .sub-total {
        font-size: 18px;
        color: firebrick;
        flex: 1;
      }

      .item .price::before,
      .item .sub-total::before,
      .amount::before {
        content: "¥";
        font-size: 12px;
      }

      .item .spec {
        flex: 2;
        color: #888;
        font-size: 14px;
      }

      .item .count {
        flex: 1;
        color: #aaa;
      }

      .total {
        width: 990px;
        margin: 0 auto;
        display: flex;
        justify-content: flex-end;
        border-top: 1px solid #e4e4e4;
        padding: 20px;
      }

      .total .amount {
        font-size: 18px;
        color: firebrick;
        font-weight: bold;
        margin-right: 50px;
      }

    <div class="list">
      
    </div>
    <div class="total">
      <div>合计：<span class="amount">1000.00</span></div>
    </div>

准备数据

 const goodsList = [
        {
          id: "4001172",
          name: "称心如意手摇咖啡磨豆机咖啡豆研磨机",
          price: 289.9,
          picture:
            "https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg",
          count: 2,
          spec: { color: "白色" },
        },
        {
          id: "4001009",
          name: "竹制干泡茶盘正方形沥水茶台品茶盘",
          price: 109.8,
          picture:
            "https://yanxuan-item.nosdn.127.net/2d942d6bc94f1e230763e1a5a3b379e1.png",
          count: 3,
          spec: { size: "40cm*40cm", color: "黑色" },
        },
        {
          id: "4001874",
          name: "古法温酒汝瓷酒具套装白酒杯莲花温酒器",
          price: 488,
          picture:
            "https://yanxuan-item.nosdn.127.net/44e51622800e4fceb6bee8e616da85fd.png",
          count: 1,
          spec: { color: "青色", sum: "一大四小" },
        },
        {
          id: "4001649",
          name: "大师监制龙泉青瓷茶叶罐",
          price: 139,
          picture:
            "https://yanxuan-item.nosdn.127.net/4356c9fc150753775fe56b465314f1eb.png",
          count: 1,
          spec: { size: "小号", color: "紫色" },
          gift: "50g茶叶,清洗球",
        },
      ];

js主要代码

    render(goodsList);
      function render(data) {
        // 1.渲染数据
        // 使用map方法遍历数据
        document.querySelector(".list").innerHTML = data
          .map((item) => {
            // console.log(item);获得准备数据中的每一组数据
            // 解构
            const { id, name, price, picture, count, spec, gift } = item;
            // 处理赠品问题
            const str = gift
              ? gift
                  .split(",")
                  .map((item) => `<span class="tag">【赠品】${item}</span>`)
                  .join("")
              : "";

            // 处理总计问题
            const sum = (count * price).toFixed(2);
            
            let price1 = price.toFixed(2);
            return `<div class="item">
              <img src="${picture}" alt="">
              <p class="name">${name}${str} </p>
              <p class="spec">${Object.values(spec).join("/")}</p>
              <p class="price">${price1}</p>
              <p class="count">x${count}</p>
              <p class="sub-total">${sum}</p>
            </div>
              `;
          })
          .join("");
      }
      // 使用数组的reduce方法 累计器 计算总价格
      const total = goodsList.reduce((prev, item) => {
        // console.log(item.price);商品单价
        // console.log(item.count);商品数量
        return prev + item.price * item.count;
      }, 0);
      // 渲染并保留两位小数
      document.querySelector(".amount").innerHTML = total.toFixed(2);

 额外扩展：

        计算上述数组中价格>200的商品总金额

 let num = goodsList.filter(function (prev, item) {
        // console.log(prev.price);
        // console.log(prev.count);
        if (prev.price > 200) {
          return prev.price * prev.count;
        }
      });