1. 技术文章
  2. 商城项目日结5

商城项目日结5

由 早过忘川 提交于 2020-03-07 03:53:57

今天完成了商城的购物车功能 ，并细化了css样式使页面看起来更加舒适。
项目地址
购物车代码如下：
html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../lib/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/common.min.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/footer.css">
    <link rel="stylesheet" href="../css/cart.css">
</head>
<body style="background-color: #fff;">
<!-- 头部 -->
<div class="layout-header-nav">
    <div class="container"> 
        <p class="header-benefit">
            商城优惠大酬宾，全场满59元包邮
        </p>
        <div class="header-cart">
            <a href="./cart.html" class="header-cart-link">
                <div class="header-cart-button">
                    <div class="header-cart-button-img"></div>
                    <span class="header-cart-button-word">
                      购物车
                    </span>
                </div>
            </a>
        </div>
        <div class="header-nav">
            <a href="./login.html" class="header-nav-item login">登录</a>
            <span class="header-nav-item">|</span>
            <a href="./register.html" class="header-nav-item">注册</a>
            <span class="header-nav-item">|</span>
            <a href="./cart.html" class="header-nav-item">我的订单</a>
            <span class="header-nav-item">|</span>
            <a href="#" class="header-nav-item">帮助中心</a>
            <span class="header-nav-item">|</span>
            <a href="#" class="header-nav-item">TP-LINK官网</a>
        </div>> 
    </div>
</div>

<div class="layout-header-search">
  <div class="container">
      <a href="./index.html">
        <img src="" alt="" class="header-logo">
      </a>
      
  </div>

</div>

<div class="nav_box"> 
    <ul class="container">

    </ul>
</div>
<!-- 购物车 -->
    <div class="container">
         <div class="cart" ></div>
    </div>

    <div class="container" style="height: 100px;">
    </div>
  <!-- footer -->
  <div class="footer-promise">
    <div class="container">
        <img src="http://www.tp-linkshop.com.cn/Content/themes/base/images/Shared/promise.jpg" alt="" class="footer-promise-img">
    </div>
  </div>
  
  <div class="layout-footer-service">
    <div class="container">
        <ul class="footer-service">
            
        </ul>
    </div>
  </div>

    <script src="../lib/jquery/dist/jquery.min.js"></script>
    <script src="../lib/jquery-cookie/jquery.cookie.js"></script>
    <script src="../js/footer.js"></script>
    <script src="../js/cart.js"></script>
</body>
</html>

js：

// 从localStorage中获取购物车列表
    var cartList = JSON.parse(localStorage.getItem('cartList'))
    var newCartList=JSON.parse(localStorage.getItem('cartList'))
    //判断购物车列表中是不是有东西
    if (!cartList) {
      alert('购物车空空如也')
    } else {
      // 渲染页面
      bindHtml()
      // 添加事件功能
      bindEvent()
    }

    function bindHtml() {
      // 整体渲染页面
      // 全选按钮需要渲染
      //   判断一下, 如果数组里面每一个数据的 isSelect 都是 true, 就渲染成 true
      //   只要有任意一个数组的 isSelect 是 false. 就渲染成 false
      let selectAll = cartList.every(item => {
        // 如果每一条都是 true, 就会返回 true
        // 如果任意一条是 false, 就会返回 false
        return item.isSelect === true
      })

      let str = `
        <div class="top">
          <input class="selectAll" type="checkbox" ${ selectAll ? 'checked' : '' }>   全选
        </div>
        <ul class="center">
      `

      cartList.forEach(item => {
        // 每一条数据的渲染, 根据每一条信息来渲染页面
        str += `
          <li>
            <div class="select">
              <input data-id=${ item.list_id } class="selectOne" type="checkbox" ${ item.isSelect ? 'checked' : '' } >
            </div>
            <div class="info">
              <div class="cart-product-img">
              <img src="${ item.list_url }" alt="" class="cart-product-img-item">
              </div>
              <div class="cart-product-name">
              <p>${ item.list_name }</p>
              </div>
            </div>
            <p class="price">￥${ item.list_price }</p>
            <div class="number">
              <button class="sub" data-id=${ item.list_id }>-</button>
              <input type="text" value="${ item.number }" class="cart-product-numbers">
              <button class="add" data-id=${ item.list_id }>+</button>
            </div>
            <p class="subtotal">￥${ item.subtotal.toFixed(2) }</p>
            <div class="del" data-id=${ item.list_id }">删除</div>
          </li>
        `
      })

      // 选中商品数量需要渲染
      //   要把数组中的 isSelect 为 true 的数据的 number 加再一起
      //   数组常用方法叫做 filter 就能筛选数据
      let selectArr = cartList.filter(item => item.isSelect)
      // console.log(selectArr)

      // 选中商品数量计算
      let selectNumber = 0
      // 选中商品总价
      let selectPrice = 0
      selectArr.forEach(item => {
        selectNumber += item.number
        selectPrice += item.subtotal
      })

      // 去支付要不要禁用, 如果没有选中的商品, 就应该禁用
      //   只要有选中的商品, 就应该不禁用
      //   直接使用 selectArr 的 length 来判断

      str += `
        </ul>
        <div class="bottom">
          <p class="select-num">选中商品数量:  <span class="select-num-p">${ selectNumber }</span></p>
          <p class="fee-total">总价： <span class="count-price">￥${ selectPrice.toFixed(2) }</span></p>
          <button class="clear">清空购物车</button>
          <button class="pay" ${ selectArr.length ? '' : 'disabled'}> 去结算 ></button>
        </div>
      `

      // 整体添加到页面的盒子里面
      $('.cart').html(str)
    }

    function bindEvent() {
      //  全选按钮的事件
      $('.cart').on('change', '.selectAll', function () {
        // 让数组里面的每一个数据的 isSelect 都变成 自己的状态
        cartList.forEach(item => {
          item.isSelect = this.checked
        })

        ////重新渲染页面
        bindHtml()

        // 在从新存储一遍 localStorage
        localStorage.setItem('cartList', JSON.stringify(cartList))
      })

      // 单选按钮的事件
      $('.cart').on('change', '.selectOne', function () {
        // console.log($(this).data('id'))
        // 你要知道你点击的是哪一个数据的单选按钮
        const id = $(this).data('id')

        // 找到数组中 id 一样的那一条数据改变一下 isSelect 属性
        cartList.forEach(item => {
          if (item.list_id === id) {
            item.isSelect = !item.isSelect
          }
        })

        //重新渲染页面
        bindHtml()

        // 存储在lcoalStorage 里面
        localStorage.setItem('cartList', JSON.stringify(cartList))
      })

      //  减少商品数量的事件
      $('.cart').on('click', '.sub', function () {
        const id = $(this).data('id')

        // 循环数组, 把 id 对应的这个数据的 number 和 小计修改了
        cartList.forEach(item => {
          if (item.list_id === id) {
            // 当 item.number === 1 的时候, 不需要 --
            item.number > 1 ? item.number-- : ''
            item.subtotal = item.list_price * item.number
          }
        })

        //重新渲染页面
        bindHtml()

        // 存储到 localStorage
        localStorage.setItem('cartList', JSON.stringify(cartList))
      })

      //添加商品数量按钮的事件
      $('.cart').on('click', '.add', function () {
        // 拿到自己身上存储的 id
        const id = $(this).data('id')

        // 循环数组找到一个id 对应的数据
        cartList.forEach(item => {
          if (item.list_id === id) {
            item.number++
            item.subtotal = item.number * item.list_price
            
          }
        })

        // 重新渲染页面
        bindHtml()

        // 存储到 localStorage
        localStorage.setItem('cartList', JSON.stringify(cartList))
      })

      //点击删除的事件 
     
      $('.cart').on('click', '.del', function () {
        // 获取 按钮id
        const id = $(this).data('id')
        
        
        // var len=cartList.length
        // for (var i=0;i<len;i++){
        //         if(cartList[i].list_id == id){
        //             cartList.splice(i,1)
        //         }
        //  }
        let newCartList= cartList.filter(item=>{
            return item.list_id !== id
        })
        
        cartList=newCartList

        console.log(cartList)
        console.log(newCartList)
    
    
        //渲染
       bindHtml()
         
       // 存储到 localStorage
       localStorage.setItem('cartList', JSON.stringify(cartList))
    })
   
      //清空购物车
      $('.cart').on('click', '.clear', function () {
        let newCartList3=[];

       cartList=[]

        bindHtml()

        // 存储到 localStorage
        localStorage.setItem('cartList', JSON.stringify(cartList))
        
      })
    }

css样式

.cart {
    width: 1200px;
    margin: 30px auto;
    display: flex;
    flex-direction: column;
   background-color: #fff;
}
.cart >.top{
    height: 60px;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #666;
    line-height: 20px;
    margin-top: 9px;
    
}
.cart >.top > input {
    width: 12px;
    height: 12px;
    margin-left: 55px;
  }
.cart >.top > p {
    padding-left: 40px;
  }

.cart >.center >li{
    display: flex;
    margin: 10px;
    border-top:1px solid #CCC ;
}
.cart >.center >li >.select{
    width: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cart >.center >li >.select  > input {
    width: 12px;
    height: 12px;
    background-image: url(http://www.tp-linkshop.com.cn/shopping/cart/Content/themes/base/images/Shopping/Choose.png);
  }
/* .cart >.center >li >.select  > input:checked {
    background: lightskyblue;
} */
.checkbox{
    background-color: #fff;
        border: 1px solid #bfbfbf;
        display: inline-block;
        height: 0.9em;
        padding: 2px;
        border-radius: 100%;
        margin-right: 5px;
        margin-top: -2px;
        vertical-align: middle;
        width: 0.9em;
        line-height: 1;
        box-sizing: content-box;
}
.checkbox:checked{
    background-color: #ffd958;
    content: "";
    display: inline-block;
    height: 0.9em;
    width: 0.9em;
    vertical-align: top;
    border-radius: 100%;
}
.cart >.center >li > .info {
    display: flex;
    align-items: center;
    font-size: 30px;
    
  }

.cart >.center >li > .info > img {
    width: 100px;
    height: 100px;
    display: block;
    margin-right: 10px;
}

.cart >.center >li> .price {
    display: flex;
    align-items: center;
    margin-left: 50px;
    font-size: 14px;
    color: #FF3232;
    line-height: 20px;
    
  }
.cart >.center >li> .number {
    margin-left: 80px;
    display: flex;
    align-items: center;
}

/* .cart >.center >li> .number> input {
    height: 30px;
    border: none;
    outline: none;
    width: 100px;
    text-align: center;
    font-size: 20px;
} */

.cart >.center >li> .subtotal {
    display: flex;
    align-items: center;
    margin-left: 80px;
    font-size: 14px;
    color: #FF3232;
    line-height: 20px;
  }
.cart >.center >li> .del {
    margin-left: 80px;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
        color: #333;
}
.cart > .bottom {
    height: 120px;
    border-top:1px solid #CCC;
    font-size: 35px;
    display: flex;
    align-items: center;
}
.cart > .bottom > p {
    padding-right: 40px;
}
.cart > .bottom  > button {
    margin-right: 40px;
    
}



.cart-product-name{
    
        height: 120px;
        width: 300px;
        float: left;
        line-height: 120px;
        font-size: 14px;
        color: #333;
}
.cart-product-img {
    height: 120px;
    width: 172px;
    float: left;
}
.cart-product-img-item {
    display: block;
    width: 100px;
    height: 100px;
    margin-top: 10px;
}
.sub{
    width: 32px;
    height: 36px;
    background-color: #F7F7F7;
    font-size: 16px;
    line-height: 36px;
    text-align: center;
    color: #333;
    border: 1px solid #CCC;
    /* float: left; */
    cursor: pointer;
}
.add{
    width: 32px;
    height: 36px;
    background-color: #F7F7F7;
    font-size: 16px;
    line-height: 36px;
    text-align: center;
    color: #333;
    border: 1px solid #CCC;
    /* float: left; */
    cursor: pointer;
}
.cart-product-numbers{
    width: 52px;
    height: 36px;
    background-color: #FFF;
    font-size: 16px;
    color: #333;
    line-height: 36px;
    text-align: center;
    display: block;
    float: left;
    border: none;
    border-top: 1px solid #CCC;
    border-bottom:1px solid #CCC
}
.select-num{
    width: 200px;
    font-size: 14px;
    color: #333;
    line-height: 19px;
    float: left;
    margin-left: 55px;
}
.fee-total{
    width: 250px;
    font-size: 18px;
    margin-left: 500px;
    color: #333;
    line-height: 30px;
    
}
.count-price{
    font-size: 18px;
    color: #FF3232;
    line-height: 24px;
}
.clear{
    border: 1px solid #FF3232;
    border-radius: 2px;
    width: 160px;
    height: 48px;
    float: right;
    margin-right: 16px;
    font-size: 16px;
    color: #FF3232;
    line-height: 48px;
    text-align: center;
    background-color: #fff;
}
.pay{
    background-color: #FF3232;
    border: 1px solid #FF3232;
    border-radius: 2px;
    width: 160px;
    height: 48px;
    float: right;
    font-size: 16px;
    color: #FFF;
    line-height: 48px;
    text-align: center;
}
.select-num-p{
    color:blue;
}
标签
background
line-height
localstorage
border
font
margin
display
按钮
header
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!